Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Poprawny layout
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
luko
16.07.2009, 08:17:47
Witajcie, ostatnio sporo walczyłem żeby uzyskać layaut, który nie będzie mi się rozjeżdżał no ale niestety nie poradziłem sobie do końca tak jak bym chciał, dla tego proszę o pomoc, może widział ktoś z was takiego gotowca jak poniżej przedstawiłem lub wie jak go poprawnie wykonać.
Dodam tylko że chcę, aby każdy z div miał border 1px i długość div#margin była zależna od długości div#content.
singles
16.07.2009, 08:22:56
Wszystko ładujesz we wrappera o określonej szerokości. Jemu dajesz margin: 0 auto; We wrapperze dajesz #header normalnie, #menu i #content dostaja float: left. #footer dostaje clear: both. http://kurs.browsehappy.pl/Krok/Float

No chyba, że w margin ma mieć jakaś treść - to wtedy całość w jeszcze jednego wrappera i jeden ze sposobów na równą wysokość divów: http://buildinternet.com/2009/07/four-meth...height-columns/
luko
16.07.2009, 11:05:00
Nie wychodzi mi coś...

Wiem, że trzeba powiększać szerokości o szerokość borderów, robię to a mimo to się rozjeżdża...


[HTML] pobierz, plaintext 
  1. <style>
  2.  #container
  3.  { 
  4.  width: 706px; 
  5.  margin: 0 auto; 
  6.  }
  7.  #wrap
  8.  { 
  9.  float: left; 
  10.  width: 602px; 
  11.  }
  12.  #menu 
  13.  { 
  14.  float: left; 
  15.  width: 150px; 
  16.  background: pink;
  17.  height: 400px;
  18.  
  19.  }
  20.   #content 
  21.  { 
  22.  float: right; 
  23.  width: 450px; 
  24.  background: red;
  25.  height: 400px;
  26.  border-left: 1px solid black; 
  27.  }
  28.   #header
  29.  { 
  30.  width: 100%; 
  31.  background: green;
  32.  height: 150px;
  33.  border-top: 1px solid black; 
  34.  border-bottom: 1px solid black; 
  35.  }
  36.  #margin_left
  37.  { 
  38.  float: left; 
  39.  width: 50px; 
  40.  background: blue;
  41.  height: 100%;
  42.   border: 1px solid black; 
  43.  }
  44.   #margin_right
  45.  { 
  46.  float: right; 
  47.  width: 50px; 
  48.  background: blue;
  49.  height: 100%;
  50.   border: 1px solid black; 
  51.  }
  52.  #footer{ 
  53.  height: 50px;
  54.  width: 100%;
  55.  clear: both;
  56.  background: green;
  57.  border-top: 1px solid black; 
  58.  border-bottom: 1px solid black; 
  59.  }
  60.  
  61. </style>
  62.  
  63.  <body>
  64.      <div id="container">
  65.  
  66.             <div id="margin_left"></div>  
  67.  
  68. 							<div id="wrap">
  69.  
  70.             		<div id="header"></div>
  71.  
  72.             				<div id="menu"></div>
  73.  
  74. 										<div id="content"></div>
  75.  
  76. 								<div id="footer"></div>		
  77.  
  78.               </div>    
  79.  
  80. 						<div id="margin_right"></div>              
  81.  
  82. 		</div>
  83.  
  84.  </body>
[HTML] pobierz, plaintext




Kurcze niby prosta rzecz, a nikt nie potrafi pomóc ?
erix
16.07.2009, 11:37:42
  1. nie myśl, że znajdziesz jelenia, który Ci wszystko wyklepie
  2. jw. - nikt nie będzie kopiował do siebie i sprawdzał w każdej przeglądarce z osobna. Mógłbyś się chociaż wysilić i wystawić gdzieś działający kod.
luko
16.07.2009, 11:56:34
link do strony

nie szukam jelenia tylko podpowiedzi, nie oczekuję że ktoś coś będzie robił za mnie tylko mi pomorze.
erix
16.07.2009, 12:14:08
Zacznij od wstawienia na hosting bez reklam, bo one nieraz rozjeżdżają cały układ.
singles
16.07.2009, 13:41:58
Podpowiedź - daj elementowi #container takie coś jak niżej
Kod
overflow: auto;
background-color: black;

zobacz, co się stanie i zastanów jak to wykorzystać do tego co chcesz osiągnąć. Widać, że nie zapoznałeś się z linkiem na temat równych kolumn, który dałem wyżej.

BTW.
Cytat(luko @ 16.07.2009, 12:56:34 ) *
[...]nie oczekuję że ktoś coś będzie robił za mnie tylko mi pomorze.

http://bash.org.pl/48640/ winksmiley.jpg
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.