Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Rozciągnięcie diva
Forum PHP.pl > Forum > Przedszkole
Croos22
2.08.2010, 04:05:09
Witam
Napisałem sobie banalny szablon i zacząłem kombinować i z height:100% lecz to nic mi nie dało. Chodzi o to, że divy menu i informacje mają być zawsze rozciągnięty do końca. Na <br> proszę nie zwracać uwagi ponieważ w tym tkwi problem a to pomogło mi to sobie jakoś wyobrazić jak będzie wyglądać strona.

Wygląda to tak.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. 	<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
  7. </head>
  8. <body>
  9.  
  10. <div id="top">
  11. 	<div id="naglowek"><br><center><img src="logo.jpg" alt="Tekst alternatywny" /></center><br></div>
  12. 	<div id="menu"><br>
  13. 		<table cellpadding="0" cellspacing="0" class="brd">
  14. 	    <tr><td class="m">Nagłówek</td></tr>
  15.         <tr><td><div class="linki">
  16. 		 ><a href="#">Strona</a><br>
  17.          ><a href="#">Strona</a><br>
  18.          ><a href="#">Strona</a><br>
  19.          ><a href="#">Strona</a>
  20. 		</div>
  21. 		</table>
  22. 		</td></tr>
  23.  
  24.  
  25. 		<br>
  26. 		<table cellpadding="0" cellspacing="0" class="brd">
  27. 	    <tr><td class="m">Nagłówek</td></tr>
  28.         <tr><td><div class="linki">
  29. 		 ><a href="#">Strona</a><br>
  30.          ><a href="#">Strona</a><br>
  31.          ><a href="#">Strona</a><br>
  32.          ><a href="#">Strona</a>
  33. 		</div>
  34. 		</table>
  35. 		</td></tr>
  36.  
  37. 	<br><br><br><br><br><br><br><br><br><br><br><br>
  38.  
  39. 	</div>
  40. 	<div id="informacje"><br>
  41.  
  42. 			<table cellpadding="0" cellspacing="0" class="brd">
  43. 	    <tr><td class="m">Nagłówek</td></tr>
  44.         <tr><td><div class="linki">
  45. 		 ><a href="#">Strona</a><br>
  46.          ><a href="#">Strona</a><br>
  47.          ><a href="#">Strona</a><br>
  48.          ><a href="#">Strona</a>
  49. 		</div>
  50. 		</table>
  51. 		</td></tr>
  52.  
  53.  
  54. 		<br>
  55. 		<table cellpadding="0" cellspacing="0" class="brd">
  56. 	    <tr><td class="m">Nagłówek</td></tr>
  57.         <tr><td><div class="linki">
  58. 		 ><a href="#">Strona</a><br>
  59.          ><a href="#">Strona</a><br>
  60.          ><a href="#">Strona</a><br>
  61.          ><a href="#">Strona</a>
  62. 		</div>
  63. 		</table>
  64. 		</td></tr>
  65.  
  66. 	<br><br><br><br><br><br><br><br><br><br><br><br>
  67.  
  68.  
  69.  
  70. 	</div>
  71. 	<div id="tresc"><br>Treść strony<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
  72. 	<div id="stopka">Stopka serwisu</div>
  73. </div>
  74.  
  75. </body>
  76. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. html, body {
  2. 	background-color: #9CA400;
  3. 	color: #000;
  4. 	margin: 0;
  5. 	padding: 0;
  6. }
  7.  
  8. #top {
  9. 	width: 1000px;
  10.     border:3px solid black;
  11. 	margin: 0 auto;
  12. 	margin-top: 30px;
  13. }
  14.  
  15. #naglowek {
  16. 	background-color: white;
  17. 	border-bottom:1px dashed black;
  18.  
  19. }
  20.  
  21. #menu {
  22. 	width: 170px;
  23. 	height: 100%;
  24. 	float: left;
  25. 	overflow: hidden;
  26. 	background-color: white;
  27. 	padding-left: 6px;
  28. 	padding-right: 6px;
  29. 	}
  30.  
  31. #informacje {
  32. 	width: 170px;
  33. 	float: right;
  34. 	overflow: hidden;
  35. 	background-color: white;
  36. 	padding-left: 6px;
  37. 	padding-right: 6px;
  38. }
  39.  
  40. #tresc {
  41. 	width: 624px;
  42. 	height; 100%;
  43. 	float: left;
  44. 	overflow: hidden;
  45. 	background-color: white;
  46. 	border-right:1px dashed black;
  47. 	border-left:1px dashed black;
  48. 		padding-left: 10px;
  49. 	padding-left: 10px;
  50.  
  51.  
  52. }
  53.  
  54. #stopka {
  55. 	clear: both;
  56. 	width: 100%;
  57. 	background-color: white;
  58. }
  59.  
  60. 	.m {background: url(naglowek.jpg);
  61. width:160px;
  62. height:20px;
  63. text-align:center;
  64. font-weight:bold;
  65. color:#fff}
  66.  
  67. .linki {padding:8px;
  68. letter-spacing:1px}
  69.  
  70. .brd {border:1px solid #C6C6C6}
  71.  
  72.  
[HTML] pobierz, plaintext
mrk9109
2.08.2010, 08:05:58
Polecam:
http://www.kurshtml.boo.pl/css/wstep,szablon.html
hankos0
2.08.2010, 09:34:47
W styl diva, który ma być powtarzany wstaw 
[HTML] pobierz, plaintext 
  1. background-repeat: repeat-y;
[HTML] pobierz, plaintext

I wywal tabele z kodu. Jak się uczysz, to ucz się poprawnej budowy kodu - tabele tylko do danych tabelarycznych!
Croos22
2.08.2010, 13:03:05
Próbowałem już w ten sposób.Tyle, że tym razem z grafiką lecz jest ona rozciągnięta do tą do póki nie kończy się tekst a mi chodzi aby to było do końca div.
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.