[CSS] div vycentrovany horizontalne

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod mhr2005 4. 9. 2005 21:10

potřeboval bych poradit jak dostat div na střed a né aby byl jeho levý roh zarovnanej na střed.

HTML:
Kód: Vybrat vše
<body>
   <div id="hlavni">
   <div id="obsah">.......OBSAH.......</div>
   </div>
</body


STYL:
Kód: Vybrat vše
body {
   text-align: center;   
}

#hlavni {
   text-align: left;
   position: absolute;
   width: 547px;
   height: 192px;
}
#obsah {
   position: absolute;
   width: 188px;
   top: 0px;
   left: 0px;
   height: 27px;


Tak .......OBSAH....... by se měl být zarovnaný na střed, ale není, píše se od středu směrem do prava.
Pomůže mi někdo jak udělat, aby byl zarovnanej ten text ve středu obrazovky horizontálně ??
DIKY MOC

// Howard - upraven nazev
Samsung i5800 Galaxy 3 (580)
mhr2005
Junior

Odeslat příspěvekod yaroukh 4. 9. 2005 22:15

nejak navic mi tam prijdou position: absolute a text-align: left

kdyz tak na to stylovani koukam, priznam se, ze nevim, jaky vysledek by sis predstavoval :o)
my favourite music: sounds4u.net/?fuID=3
yaroukh
Junior
Uživatelský avatar

Odeslat příspěvekod Blko 5. 9. 2005 12:00

Kód: Vybrat vše
body {
  text-align: center
}
#hlavni {
   text-align: left;
   width: 547px;
   height: 192px;
   margin: 0 auto
}
#obsah {
   text-align: left;
   width: 188px;
   height: 27px;
   margin: 0 auto
}


Neviem, ci je to ono. Ty si to centroval tym, ze si nastavil absolutnu poziciu na stranke. To by fungovalo iba pri takom rozliseni, pre ake si napisal CSSko. Ak das margin: nieco auto, tak prave a lave odsadenie sa dopocitaju automaticky a bude to v strede.
Blko
Junior
Uživatelský avatar

Odeslat příspěvekod mhr2005 5. 9. 2005 14:43

:mrgreen:
Tak to vemem znova...... potřebuju udělat toto:

Obrázek

a zdrojový kód vypadá takto :

Kód: Vybrat vše
<html>
<head>
  <title>centr</title>
  <style type="text/css" media="all">
   body {
      text-align: center;
   }
   #hlavni {
      text-align: left;
      position: absolute;
      width: 547px;
   }
   #levy {
      position: absolute;
      width: 188px;
      left: 0px;
   }
   #pravy {
      position: absolute;
      width: 359px;
      left: 188px;
   }
  </style>
</head>
<body>
   <div id="hlavni">
   <div id="pravy">........Obsah pravyho.......</div>
   <div id="levy">........Obsah leveho........</div>
   </div>
</body>
</html>


Jenže cely tento DIV(#hlavni) je zarovnany levou stranou na střed a né svým středem... :roll:
Samsung i5800 Galaxy 3 (580)
mhr2005
Junior

Odeslat příspěvekod mhr2005 5. 9. 2005 14:59

Blko píše:Neviem, ci je to ono. Ty si to centroval tym, ze si nastavil absolutnu poziciu na stranke.


já mám vše co píši na stránku centrovany, pomocí
Kód: Vybrat vše
   body {
      text-align: center;
   }
Samsung i5800 Galaxy 3 (580)
mhr2005
Junior

Odeslat příspěvekod Blko 5. 9. 2005 15:07

Nechapem, co presne chces urobit. Skusal si si zobrazit tie DIVy s okrajom (napr: border: 1px solid black). DIV #hlavny totiz nema nastavenu vysku a nebude koncit az za #levy a #pravy. Bude mat vysku 0px. Musis tam supnut tzv. cistic, aby koncil az za #levy a #pravy.
Kód: Vybrat vše
<html>
<head>
  <title>centr</title>
  <style type="text/css" media="all">
   body {
      text-align: center;
   }
   #hlavni {
      text-align: left;
      position: absolute;
      width: 547px;
   }
   #levy {
      position: absolute;
      width: 188px;
      left: 0px;
   }
   #pravy {
      position: absolute;
      width: 359px;
      left: 188px;
   }
   .cleaner {
      clear: both;
      float: none
   }
  </style>
</head>
<body>
   <div id="hlavni">
   <div id="pravy">........Obsah pravyho.......</div>
   <div id="levy">........Obsah leveho........</div>
   <br class="cleaner" />
   </div>
</body>
</html>


A co sa tyka toho, ako je to vycentrovane, tak u mna vo FF nie je vycentrovane nic. V IE je to vycentrovane asi tak, ako to pises ty. Chyba:

Kód: Vybrat vše
#hlavny {
    left: 0;
}


A ked to chces vycentrovat na stred, tak tam nemozes davat position: absolute;
Blko
Junior
Uživatelský avatar

Odeslat příspěvekod mhr2005 5. 9. 2005 16:16

Blko píše:A ked to chces vycentrovat na stred, tak tam nemozes davat position: absolute;


Ano, chci vycentrovat přesně na střed....
Asi na to du, špatným postupem. Zkusím se trochu někde porozhlídnout, jak by se to dalo řešit trochu jinak...

Jestli nepřijdu na něco trochu jinyho, tak mi nezbyde, než do podrobny popsat co potřebuju a snad by se někdo našel, kdo by mi s tím pomohl.

Zatím díky moc za ochotu Blko ;-)
Samsung i5800 Galaxy 3 (580)
mhr2005
Junior

Odeslat příspěvekod Blko 5. 9. 2005 17:30

Kód: Vybrat vše
<html>
<head>
  <title>centr</title>
  <style type="text/css" media="all">
   body {
      text-align: center;
   }
   #hlavni {
      text-align: left;
      width: 550px;
     border:1px solid black
   }
   #levy {
      width: 188px;
     border: 1px solid red;
     float: left
   }
   #pravy {
      width: 359px;
       border: 1px solid blue;
     float: right
   }
   .cleaner {
      clear: both;
      float: none
   }
  </style>
</head>
<body>
   <div id="hlavni">
   <div id="pravy">........Obsah pravyho.......</div>
   <div id="levy">........Obsah leveho........</div>
   <br class="cleaner" />
   </div>
</body>
</html>



Toto by malo byt ono.
Blko
Junior
Uživatelský avatar

Odeslat příspěvekod mhr2005 6. 9. 2005 18:44

Blko, díky moc, fungovalo to ...
sem s tí chtěl vytvořit tohle: http://www.e3ftp.wz.cz/E4/index.htm
(na text se nedívejte)
ve IE, je to centrovany na střed, ve FF ne....

Asi sem na to šel blbě :oops: ale nenapadlo mě jak to jinak řešit. Záleželo mi totiž na tym pořadí (když si vypnete style).
Samsung i5800 Galaxy 3 (580)
mhr2005
Junior


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků