Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Pozycja elementów na stronie
gariaable
post
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 26.01.2014

Ostrzeżenie: (0%)
-----


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)
Go to the top of the page
+Quote Post
vonski
post
Post #2





Grupa: Zarejestrowani
Postów: 292
Pomógł: 89
Dołączył: 27.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Ciężko wyczuć. Może pokaż jakiś kod, z czym konkretnie jest problem?
Go to the top of the page
+Quote Post
gariaable
post
Post #3





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 26.01.2014

Ostrzeżenie: (0%)
-----


<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ć?
Go to the top of the page
+Quote Post
vonski
post
Post #4





Grupa: Zarejestrowani
Postów: 292
Pomógł: 89
Dołączył: 27.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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 (IMG:style_emoticons/default/wink.gif) ). Może zacznij od wrzucienia ich do tego diva? Czyli:

  1. <div id="grey">
  2. <div id="tlomenu"><img src="images/tlomenu.png"/></div>
  3. <div id="pasek"><img src="images/pasek.png"/></div>
  4. <div id="tlo"><img src="images/tlo.png"/></div>
  5. <div id="white"></div>
  6. <div id="logo"><a href="#"><img src="images/logo.png" /></a></div>
  7. </div>


I teraz możesz usunąć top ze wszystkich deklaracji. Zapewne dalej to będzie lekko rozsypane, ale już powinno być łatwiej to ogarnąć.

Ten post edytował vonski 27.01.2014, 00:03:02
Go to the top of the page
+Quote Post
gariaable
post
Post #5





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 26.01.2014

Ostrzeżenie: (0%)
-----


Dzięki, o to chodziło, powciskałam do div-ów i jest o wiele lepiej:)
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 24.12.2025 - 18:48