[es] - Centriranje DIV tagova?

vukasin0
Vukasin Nikodijevic
Beograd

Član broj: 15203
Poruke: 94
*.static.sbb.rs.

+1 Profil

^{23.04.2008. u 09:31 - pre 194 meseci}

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]}

Odgovor na temu

bantes9
Beograd

Član broj: 119554
Poruke: 1058
77.46.193.*

+39 Profil

Re: Centriranje DIV tagova?

^{23.04.2008. u 11:01 - pre 194 meseci}

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]}

Mrav radi, tegli, i od njega nije postalo ništa,
a majmun se zezao po drveću i od njega je postao čovek.

Brana Crnčević

Odgovor na temu

vukasin0
Vukasin Nikodijevic
Beograd

Član broj: 15203
Poruke: 94
85.222.218.*

+1 Profil

Re: Centriranje DIV tagova?

^{23.04.2008. u 12:46 - pre 194 meseci}

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

Odgovor na temu

bantes9
Beograd

Član broj: 119554
Poruke: 1058
77.46.193.*

+39 Profil

Re: Centriranje DIV tagova?

^{23.04.2008. u 15:20 - pre 194 meseci}

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]}

Mrav radi, tegli, i od njega nije postalo ništa,
a majmun se zezao po drveću i od njega je postao čovek.

Brana Crnčević

Odgovor na temu

NeonDragon
onaj odande
Pančevo

Član broj: 169069
Poruke: 184
*.adsl-3.sezampro.yu.

Sajt: www.neondragon.iz.rs

Profil

Re: Centriranje DIV tagova?

^{23.04.2008. u 22:09 - pre 194 meseci}

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

what would master yoda do? your but, kick it, he would.

Odgovor na temu

vukasin0
Vukasin Nikodijevic
Beograd

Član broj: 15203
Poruke: 94
*.dynamic.sbb.rs.

+1 Profil

Re: Centriranje DIV tagova?

^{23.04.2008. u 22:14 - pre 194 meseci}

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

Odgovor na temu

bantes9
Beograd

Član broj: 119554
Poruke: 1058
77.46.193.*

+39 Profil

Re: Centriranje DIV tagova?

^{24.04.2008. u 14:34 - pre 194 meseci}

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.

Mrav radi, tegli, i od njega nije postalo ništa,
a majmun se zezao po drveću i od njega je postao čovek.

Brana Crnčević

Prikačeni fajlovi

Primer pozicioniranja.zip - 1.16k

Odgovor na temu

BabaRogaa
NS

Član broj: 149797
Poruke: 21
*.adsl-1.sezampro.yu.

Sajt: www.casoviklavira.com

+1 Profil

Re: Centriranje DIV tagova?

^{11.01.2009. u 14:00 - pre 186 meseci}

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!

Odgovor na temu