Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Poprawny layout, Wzór na załączonym img
luko
post
Post #1





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

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

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
singles
post
Post #2





Grupa: Zarejestrowani
Postów: 121
Pomógł: 26
Dołączył: 2.07.2007

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

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/

Ten post edytował singles 16.07.2009, 08:30:04


--------------------
Works for me => u mnie działa - blog o (o)programowaniu i nie tylko
meet.php - darmowe meetupy związane z PHP
Go to the top of the page
+Quote Post
luko
post
Post #3





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

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

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





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
  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.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
luko
post
Post #5





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

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

link do strony

nie szukam jelenia tylko podpowiedzi, nie oczekuję że ktoś coś będzie robił za mnie tylko mi pomorze.
Go to the top of the page
+Quote Post
erix
post
Post #6





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Zacznij od wstawienia na hosting bez reklam, bo one nieraz rozjeżdżają cały układ.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
singles
post
Post #7





Grupa: Zarejestrowani
Postów: 121
Pomógł: 26
Dołączył: 2.07.2007

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

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

Ten post edytował singles 16.07.2009, 14:21:15


--------------------
Works for me => u mnie działa - blog o (o)programowaniu i nie tylko
meet.php - darmowe meetupy związane z PHP
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 05:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn