Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Pozycjonowanie div'a position,margin
Forum PHP.pl > Forum > Przedszkole
yeartk
Cześć, mam pytanie może głupie ale nie umie sobie na nie odpowiedzieć. Z nudów bawie sie html'em połączanym z css i naszło mnie żeby potrenować pozycjonowanie div'ów chodzi mi o układ top,men pod top,menu_lewe,menu_srodkowe,menu_prawe,stopka i nie wiem który z 2 sposobów jest prawidłowy ponieważ obydwa przechodzą validator i strony wyglądają tak jak napisałem.
1:
HTML:
Tutaj ustawialem marginesami.
  1. <div id="calosc">
  2. <div id="top"></div>
  3. <div id="menu"></div>
  4. <div id="menu_lewe"></div>
  5. <div id="menu_prawe"></div>
  6. <div id="menu_srodek"></div>
  7. <div id="stopka"></div>
  8. </div>

CSS:
Cytat
* {
margin:0;
padding:0;
border:0;
}
body {
background-color:black;
}
#calosc{
margin:0 auto;
height:100%;
width:800px;
}
#top{
border: 1px solid black;
height: 100px;
width: 800px;
margin-top:15px;
background-color:white;
}
#menu{
background-color:white;
border: 1px solid black;
height: 50px;
width: 800px;
margin-top: 10px;
}
#menu_lewe{
background-color:white;
border: 1px solid black;
height: 400px;
width: 200px;
float:left;
margin-bottom:10px;
margin-top:10px;
}
#menu_srodek{
background-color:white;
border: 1px solid black;
height: 400px;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top:10px;
margin-bottom:10px;
}
#menu_prawe{
background-color:white;
border: 1px solid black;
height: 400px;
width:200px;
float:right;
margin-bottom:10px;
margin-top:10px;
}
#stopka{
background-color:white;
border: 1px solid black;
height: 25px;
width: 800px;
}

2.
Tutaj niema tylko menu pod top, zastosowałem tutaj position.
HTML:
  1. <div id="kontener">
  2. <div id="top"></div>
  3. <div id="panel_lewy"></div>
  4. <div id="panel_prawy"></div>
  5. <div id="panel_srodkowy"></div>
  6. <div id="stopka"></div>
  7. </div>

CSS:
Cytat
body {
font-size: 12px;
background-color: gray;
margin: 0 auto;
padding: 0px;
}
#kontener {
margin: 0px auto;
padding: 0px;
width: 1165px;
}
#top {
padding: 0px;
margin: 0 auto;
background-color: white;
width: 1165px;height: 150px;
}
#panel_lewy {
position: absolute; left: 50px; top: 185px;
margin: 0px;
background-color: white;
width: 210px;height: 700px;
padding: 3px;
}
#panel_prawy {
position: absolute; right: 50px; top: 185px;
margin: 0px;
background-color: white;
width: 210px;height: 700px;
padding: 3px;
}
#panel_srodkowy {
position: absolute; top: 190px; left: 277px;
margin: 0px;
background-color: white;
width: 705px;height: 700px;
padding: 3px;
}
#stopka {
position: absolute; top: 902px; left: 50px;
margin: 0px;
background-color: white;
width: 1161px; height: 26px;
padding: 2px;
}

Oba testowałem pod firefox 4 (linux).
Pytanie to który ze sposobów jest poprawny 1? Bo 2 nie wydaje mi się zbyt dobrym posunięciem dzieki za odp smile.gif
prowseed
Jak pozycjonujesz absolutnie, to po pierwsze: div sie renderuje dwa razy, najpierw w 0,0 a potem w wartosci absolute, po drugie jak jest daleko polozony, to strona nie bedzie przystosowana do handheldow, po trzecie marginesy masz stale, a do absolute musisz wszystko liczyc. Co do marginesow, to rozne przegladarki interpretuja roznie elementy html i na przyklad dodaja automatycznie jakies dziadowe ramki czy w jakis dziwny sposob wyliczaja pozycje i moze sie tak zdarzyc, ze Twoje trzecie menu zjedzie gdzies sobie gdy nie powinno. Pozycjonujac absolute masz pewnosc, ze dany element bedzie w miejscu, w ktorym jest zadeklarowany. Nie mozna wybrac sposobu- ktory jest lepszy. Oba maja swoje cele i mozliwosci w pozycjonowaniu i nalezy ich uzywac naprzemiennie zgodnie z wymaganiami. Pozycjonowanie stopki absolutem to raczej beznadziejne rozwiazanie jesli chcesz, by Twoj layout byl elastyczny. Elementy w headerze mozna pozycjonowac absolutem, bo tam zbyt duzo i za czesto sie nie zmienia, wiec jest to rozwiazanie do przyjecia. Ponadto, jesli chcesz wypozycjonowac jakis element na innym (ktore maja tego samego rodzica) to nie wiem jakbys to zrobil za pomoca marginesow.

And by the way, by the way:
Nie zapominaj, ze obok absolute jest jeszcze relative, ktore ze soba ladnie wspolgraja.
padding: 0px; - przy zero nie musisz pisac jednostki. Zero to zero.
background-color: white; - mozna po prostu background:#fff;
w pierwszej wersji menu prawe i menu lewe roznia sie tylko floatami. Zrob #menu_prawe, #menu lewe {...}, wpisz wartosci wspolne, a pozniej nadaj tym elementom oddzielnie tylko floaty.
Ja uwazam na marginesy, jak tylko moge- zastepuje je paddingiem. Kiedys w IE marginesy byly dublowane, Chrome w roznych wersjach roznie je wyswietlal i w ogole. Nawet teraz mi sie zdarza, ze cala strona lapie na gorze, czy na dole przerwe przez jakis element z wartoscia margin, ktory zostal zle wypozycjonowany.
yeartk
Dzięki za wyczerpującą odpowiedź! smile.gif
Z tym padding to się za galopowałem i szło jak z maszyny wszędzie px closedeyes.gif, o relative też pamiętam (fixed,static,inherit) tylko akurat tutaj tego nie wykorzystałem. Podsumowując z twojego postu wywnioskowałem że można śmiało to wszystko ze sobą mieszać żeby razem współgrało?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.