Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: rozciągnięcia CSS
Forum PHP.pl > Forum > XML, AJAX
Ember
13.01.2008, 14:27:10
Witam!
Otóż mam pewien problem. Staram sie posklejać layouta w XHTML i CSS, oczywiscie jak przystało na porzadnego webmastera na divach smile.gif
Niestety pojawił się pewien problem. Otóż mam taki układ strony:
kontener (wrapper), w nim 3 divy (left, cell, right). W Cell znajduje się lay właściwy (tj. logo, menu, tresc i stopka). Oczywiście te 3 divy muszą być wycentrowane (to nie jest problem). Problem natomiast pojawił się w momencie gdy tekstu jest mało (tak że nie jest koneiczne przewijanie) content ma sie wydłużać do dołu strony, natomiast gdy jest go dużo (przewijanie jest konieczne), left i right z boku wydłużają się do długosći content.
Oto kody:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. <title>tytul</title>
  6. <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8.   <!--[if lte IE 6]>
  9.     <style type="text/css">
  10.       body { text-align: center; }
  11.       #wrapper { text-align: left; }
  12.     </style>
  13.   <![endif]-->
  14. </head>
  15. <body>
  16. <div id="wrapper">
  17. <div id="left"></div>
  18. <div id="right"></div>
  19. <div id="cell">
  20.   <div id="logo"></div>
  21.   <div id="subheader"></div>
  22.   <div id="content">
  23.     <div id="menu">
  24.       menu<br>
  25.       menu<br>
  26.       menu<br>
  27.       menu<br>
  28.       menu<br>
  29.       menu<br>
  30.     <div id="menubottom"></div>
  31.     <div id="tresc">
  32.       tresc<br>
  33.       tresc<br>
  34.       tresc<br>
  35.       tresc<br>
  36.       tresc<br>
  37.       tresc<br>
  38.       tresc<br>
  39.       tresc<br>
  40.       </div>
  41.   </div>
  42.   <div id="stopka"></div>
  43. </div>
  44. </div>
  45. </body>
  46. </html>
[HTML] pobierz, plaintext

I CSS:
[HTML] pobierz, plaintext 
  1. * {  font: normal 12px verdana; color: white;}
  2. html, body {height:100%; }
  3. body { 
  4.   margin: 0px;
  5.   background-color: #FFF;
  6. }
  7. #wrapper { 
  8.   width:842px; 
  9.   margin: 0 auto;
  10.   height: 100%;
  11. }
  12. #right, #left{ width:33px; position:relative; height: 100%; }
  13. #left { background-image:url("gfx/left.jpg"); left:-33px; float:left; }
  14. #right { background-image:url("gfx/right.jpg"); left:33px; float:right; }
  15. #cell {
  16.   width:776px;
  17.   height:100%;
  18.   float:left;
  19.   position: relative;
  20. }
  21. #logo {
  22.   width:776px;
  23.   height:175px;
  24.   background-image:url("gfx/logo.jpg");
  25.   position:relative;
  26. }
  27. #subheader {
  28.   width:776px;
  29.   height:36px;
  30.   background-image:url("gfx/subheader.jpg");
  31. }
  32. #content {
  33.   width: 776px;
  34.   background-image:url("gfx/content.jpg");
  35.   position:relative;
  36.   display:table;
  37. }
  38. #menu {
  39.   background-image:url("gfx/menu.jpg");
  40.   width:186px;
  41.   position: relative;
  42.   left:20px;
  43.   margin:0px; padding-bottom:0px; float:left;
  44. }
  45. #menubottom {
  46.   background-image:url("gfx/menubottom.jpg");
  47.   width:186px; height:11px; font-size:1px;
  48.   position: relative;
  49. }
  50. #tresc {
  51.   width:568px;
  52.   position: relative; left:20px; top:-10px;float:left;
  53.   padding-left:5px;
  54. }
  55. #stopka {
  56.   width:776px;
  57.   height:2px;
  58.   background-image:url("gfx/stopka.jpg");
  59.   font-size:1px;
  60. }
[HTML] pobierz, plaintext


---
Przez pomyłke zamieściłem temat w złym dziale. Bardzo za to przerpaszam i prosze o przeniesienie go do odpowiedniego działu.
MMX3
26.01.2008, 00:33:05
są na to 2 sposoby... albo js albo na końcu diva który się ma rozciągać i zawiera blokowe elementy w sobie dokładasz znacznik np.:

[HTML] pobierz, plaintext 
  1. <span style="clear:both;">&nbsp;</span>
[HTML] pobierz, plaintext


powinno pomóc jeżeli dobrze zrozumiałem. Pozdrawiam
nevt
26.01.2008, 02:36:16
Cytat
są na to 2 sposoby...
heh... można jeszcze prosciej... na tabelce... ale to jest ciemna strona mocy, bo jedi zgadzaja sie tylko na divy....
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.