Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Centriranje DIV tagova?

[es] :: Web dizajn i CSS :: Centriranje DIV tagova?

[ Pregleda: 3600 | Odgovora: 10 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

vukasin0
Vukasin Nikodijevic
Beograd

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



+1 Profil

icon Centriranje DIV tagova?23.04.2008. u 09:31 - pre 151 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

icon Re: Centriranje DIV tagova?23.04.2008. u 11:01 - pre 151 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

icon Re: Centriranje DIV tagova?23.04.2008. u 12:46 - pre 151 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

icon Re: Centriranje DIV tagova?23.04.2008. u 15:20 - pre 151 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

icon Re: Centriranje DIV tagova?23.04.2008. u 22:09 - pre 151 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

icon Re: Centriranje DIV tagova?23.04.2008. u 22:14 - pre 151 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

icon Re: Centriranje DIV tagova?24.04.2008. u 14:34 - pre 151 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
 
Odgovor na temu

BabaRogaa
NS

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

Sajt: www.casoviklavira.com


+1 Profil

icon Re: Centriranje DIV tagova?11.01.2009. u 14:00 - pre 142 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

BabaRogaa
NS

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

Sajt: www.casoviklavira.com


+1 Profil

icon Re: Centriranje DIV tagova?18.01.2009. u 15:41 - pre 142 meseci
reseno, nista bez muke :)

 
Odgovor na temu

MarKaba
PeraKojot
Član biroa za evidenciju nezapošljenih
lica posle dvadeset godina rada kod
vojske.
Srbija

Član broj: 52364
Poruke: 79
82.114.66.*

Sajt: www.pdzmaj.org


+1 Profil

icon Re: Centriranje DIV tagova?13.02.2009. u 19:27 - pre 141 meseci
Kad si već rešio što ne napisa kako da znamo i mi ostali koji imamo isti problem.
"Da bi dobio razuman odgovor treba postaviti razumno pitanje" - lepo rečeno
 
Odgovor na temu

gregos
xxx
swerige

Član broj: 212217
Poruke: 5
*.bredband.comhem.se.



Profil

icon Re: Centriranje DIV tagova?15.02.2009. u 09:01 - pre 141 meseci
Napravis #container ,odredis mu dimenzije i stavis desnu i lijevu marginu na auto i div je centriran.
To je to.
 
Odgovor na temu

[es] :: Web dizajn i CSS :: Centriranje DIV tagova?

[ Pregleda: 3600 | Odgovora: 10 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.