Centriranje DIV tagova?

[ vukasin0 @ 23.04.2008. 09:31 ] @

Imam stranicu koja je sastavljena iz 7 div tagova koji su fixirane velicine i pozicije. Kako mogu da centriram celu stranu a da mi raspored izmedju div ostane isti jer imam problem sledece prirode: ovaj kod je na 1024x768 centriran ali problem je kod monitora vece rezolucije gde mi ceo sajt ostane u levoj strani.

Ovo je kod stranice:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>

<style type="text/css">

#apDiv2 {
    position:absolute;
    left:200px;
    top:50px;
    width:824px;
    height:150px;
    z-index:2;
}
#apDiv3 {
    position:absolute;
    left:200px;
    top:200px;
    width:412px;
    height:70px;
    z-index:3;
}
#apDiv4 {
    position:absolute;
    left:612px;
    top:200px;
    width:412px;
    height:70px;
    z-index:4;
}
#apDiv5 {
  text-align:center;
    position:absolute;
    left:243px;
    top:270px;
    width:206px;
    height:380px;
    z-index:5;
}
#apDiv6 {
  text-align:left;
    position:absolute;
    left:449px;
    top:270px;
    width:206px;
    height:380px;
    z-index:6;
}
#apDiv7 {
  text-align:center;
    position:absolute;
    left:655px;
    top:270px;
    width:206px;
    height:380px;
    z-index:7;
}
#apDiv8 {
  text-align:left;
    position:absolute;
    left:861px;
    top:270px;
    width:206px;
    height:380px;
    z-index:8;
}
-->
</style>
<body onload="javascript:document.upit.rec.focus();">

</head>

<body>

<div id="apDiv2">
  <center>
        <form action="index.php" method="POST" NAME="upit">
        <BR>
         <INPUT type="text" name="rec" value="<?php $unos1=$_POST['rec']; echo $unos1; ?>">
         <INPUT type="submit" value='Prevedi'>
        </form>
        <BR>
    </center>
</div>

<?php
PHP KOD
?>

<div id="apDiv3">
  <center><font size="13" face="Georgia">eng - srp</font></center>
  <br>
  <br>
</div>

<div id="apDiv4">
   <center><font size="13" face="Georgia">srp - eng</font></center>
   <br>
   <br>
</div>

<div id="apDiv5">
  <center>
    <strong>
      <?php
       PHP KOD
      ?>
    </strong>
  </center>
</div>

<div id="apDiv6">
  <?php
   PHP KOD
  ?>
</div>

<div id="apDiv7">
  <center>
    <strong>
      <?php
        PHP KOD
      ?>
    </strong>
</div>

<div id="apDiv8">
  <?php
    PHP KOD
  ?>
</div>

</body>
</html>

_{[edit: ubaceni [code][/code] tagovi]}

_{[Ovu poruku je menjao Aleksandar Ružičić dana 11.01.2009. u 17:58 GMT+1]}

[ bantes9 @ 23.04.2008. 11:01 ] @

Problem je sto si ove div-ove orjentisao uz levu ivicu. Position:absolute govori u tvom slucaju koliko ce sve biti udaljeno od leve ivice.
Definisi novi id recimo #conteiner u koga ces smestiti sve ostale id-eve.

Code:

#container {
background-color: #fff;
margin: 0em auto;
height: auto;
width: auto;
}

html bi trebao da izgleda ovako (izbacio sam sadrzaj zbog preglednosti i da bih ti lakse objasnio):

Code:

<body>
<div id="container">
<div id="apDiv2">
</div>
<div id="apDiv3">
</div>
<div id="apDiv4">
</div>
<div id="apDiv5">
</div>
<div id="apDiv6">
</div>
<div id="apDiv7">
</div>
<div id="apDiv8">
</div>
</div>
</body>

Nakon ovoga ces morati malo da preuredis kodove id-eva tj. da ih orjentises u odnosu na #container.
Definisanjem leve i desne margine na auto (margin: 0em auto;) u #container , obezbedio si da ti sajt uvek bude na sredini.

_{[edit: ubaceni [code][/code] tagovi]}

_{[Ovu poruku je menjao Aleksandar Ružičić dana 11.01.2009. u 18:00 GMT+1]}

[ vukasin0 @ 23.04.2008. 12:46 ] @

Uradio sam kao sto si rekao ali nece da radi tacnije nista se ne desava.

[ bantes9 @ 23.04.2008. 15:20 ] @

Definisi visinu i sirinu id-a #container. Izracunaj koliko su ti siroki i visoki elementi i unesi te vrednosti umesto auto za height i width.
Recimo:

Code:

#container {
background-color: #fff;
margin: 0em auto;
height: 700px;
width: 900px;
}

Html kod ostaje isti.

_{[edit: ubaceni [code][/code] tagovi]}

_{[Ovu poruku je menjao Aleksandar Ružičić dana 11.01.2009. u 18:00 GMT+1]}

[ NeonDragon @ 23.04.2008. 22:09 ] @

naravno da ne moze, kada mu je i dalje sve apsolutno pozicionirano. dodavanjem jos jednog div taga oko toga nece resiti problem. u stvari, nece se desiti nista. moja preporuka je da uzmes i da napises sve ispocetka, ali naravno da ne koristis position:absolute, nego da sa floatovanjem div tagova resis problem

[ vukasin0 @ 23.04.2008. 22:14 ] @

Probacu ali me interesuje da li imas neki tutorijal ili howto ili pak neki primer iz koga bi mogao da vidim kako stvari funkcionisu jer slabo poznajem CSS.
Pozz

[ bantes9 @ 24.04.2008. 14:34 ] @

http://www.stopdesign.com/articles/absolute/

Na ovoj stranici se moze procitati na koje nacine moze da se upotrebi position:absolute

Evo i malog objasnjenja ovog drugog nacina tj. pomocu atributa float.

Najlakse ce ti biti da malo uprostis dizajn stranice. Umesto nekoliko div-ova definisi 2 ili 3 glavna u zavisnosti od dizajna stranice (u ovom sadrzaj stranice je organizovan u 3 stubca).
Zatim u okviru svakog od tih div-ova definises divove koje si naveo (apDiv1, apDiv2... apDiv8).
Koristeci opciju float:left ova 3 div-a ce ti biti spojena, razmak definises tako sto odredis recimo div-u #levi i div-u #srednji desnu marginu od 10px (margin-right: 10px; ili margin: 0 10px 0 0;).
Margine ces dodati i na #header da odmakens div-ove od njega, kao i za #footer iz istog razloga.
Opcija clear:both omogucava da #footer uvek bude ispod ostalih div-ova.

Vise o float-u:
http://www.w3schools.com/css/pr_class_float.asp

Vise o clear-u:
http://www.w3schools.com/Css/pr_class_clear.asp

U zipovanom fajlu imas primer stranice sa css-om, pa u kodu mozes detaljnije da pogledas kako je sve reseno.

[ BabaRogaa @ 11.01.2009. 14:00 ] @

Moram priznati da je i meni ova tema dosta pomogla da ne lutam ali bih zamolio za jos malo pojasnjenja ...

Naime, ja bih u ovaj css sablon zeleo dodati jos navigacione lejere, ispod sloja #header, ukupno 6 slojeva ali da se pozicioniraju horizontalno,
jedan iza drugog, npr:

Kako bi se to moglo resiti i ukomponovati u postojeci .css i .html file u attachment-u iz prethodnog posta?

hvala unapred!

[ BabaRogaa @ 18.01.2009. 15:41 ] @

reseno, nista bez muke :)

[ MarKaba @ 13.02.2009. 19:27 ] @

Kad si već rešio što ne napisa kako da znamo i mi ostali koji imamo isti problem.

[ gregos @ 15.02.2009. 09:01 ] @

Napravis #container ,odredis mu dimenzije i stavis desnu i lijevu marginu na auto i div je centriran.
To je to.