Pełna wersja: Pozycja elementów na stronie
Witam, mam następujący problem: Przy tworzeniu strony internetowej nie potrafię ustalić ich pozycji tak, aby się nie rozjeżdżały. Początkowo używałam do tego position:absolute, jednak zmieniłam na position:relative i nadal nie wiem jak naprawić swój błąd. Przy minimalnym zwężeniu przeglądarki lub dodaniu innego elementu cała strona 'pływa'. Czy jest jakaś metoda, aby jej elementy miały stałe pozycje? (np. względem siebie)
Ciężko wyczuć. Może pokaż jakiś kod, z czym konkretnie jest problem?
<style>
#grey{width:1035px; margin:auto; text-align: left; background-color:#cfcfcf; position:relative; top:0px; height:1500px;}
#pasek{margin:auto; position:relative; top:-1600px; width:1035px;}
#tlomenu{margin:auto; position:relative; top:-1492px; width:1035px;}
#white{width:920px; height:300px; margin:auto; text-align: left; background-color:white; position:relative; top:-1200px;}
#tlo{margin:auto; width: 1020px; position:relative; top:-1501px;}
#logo{margin:auto; text-align:left; position:relative; top:-2350px; left:170px;}
</style>
<body>
<div id="grey"></div>
<div id="tlomenu"><img src="images/tlomenu.png"/></div>
<div id="pasek"><img src="images/pasek.png"/></div>
<div id="tlo"><img src="images/tlo.png"/></div>
<div id="white"></div>
<div id="logo"><a href="#"><img src="images/logo.png" /></a></div>
</body>
Wersja uproszczona powyżej, chodzi o to, aby każdy element nie miał przypisanego top:-xxxx px bo przy zmianie jednego drobiazgu cała strona się rozjeżdża, jak to rozwiązać?
#grey{width:1035px; margin:auto; text-align: left; background-color:#cfcfcf; position:relative; top:0px; height:1500px;}
#pasek{margin:auto; position:relative; top:-1600px; width:1035px;}
#tlomenu{margin:auto; position:relative; top:-1492px; width:1035px;}
#white{width:920px; height:300px; margin:auto; text-align: left; background-color:white; position:relative; top:-1200px;}
#tlo{margin:auto; width: 1020px; position:relative; top:-1501px;}
#logo{margin:auto; text-align:left; position:relative; top:-2350px; left:170px;}
</style>
<body>
<div id="grey"></div>
<div id="tlomenu"><img src="images/tlomenu.png"/></div>
<div id="pasek"><img src="images/pasek.png"/></div>
<div id="tlo"><img src="images/tlo.png"/></div>
<div id="white"></div>
<div id="logo"><a href="#"><img src="images/logo.png" /></a></div>
</body>
Wersja uproszczona powyżej, chodzi o to, aby każdy element nie miał przypisanego top:-xxxx px bo przy zmianie jednego drobiazgu cała strona się rozjeżdża, jak to rozwiązać?
Dalej ciężko powiedzieć, bo nie wiem jaki efekt końcowy chcesz uzyskać. Mogę jedynie zgadywać, że chcesz żeby te elementy #tlomenu, #pasek, #tlo, #white i #logo pokazywały się na szarym tle (element #grey), bez nadawania im wartości top (co jest zrozumiałe, bo te wartości w top to jakiś surrealizm 
). Może zacznij od wrzucienia ich do tego diva? Czyli:
I teraz możesz usunąć top ze wszystkich deklaracji. Zapewne dalej to będzie lekko rozsypane, ale już powinno być łatwiej to ogarnąć.
). Może zacznij od wrzucienia ich do tego diva? Czyli:I teraz możesz usunąć top ze wszystkich deklaracji. Zapewne dalej to będzie lekko rozsypane, ale już powinno być łatwiej to ogarnąć.
Dzięki, o to chodziło, powciskałam do div-ów i jest o wiele lepiej:)
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.