Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z divami
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Balas
27.11.2005, 16:34:53
Mam problem. Chce umiescic 2 divy obok siebie, Mam taki kod:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body {margin: 0px; background-image: url("./images/bg.gif"); margin:0; padding:0; height:100%; text-align:center; color: #fff;}
  5. img {border: 0px; margin: 0px; padding: 0px;}
  6.  
  7. #glowny {margin: 0 auto; width: 804px; text-align: justify; background-image: url("./images/body-bg.jpg");}
  8. #text-bar {width: 100%; height: 18px; background-image: url("./images/top-text-bar.jpg"); font-size: 12px; text-align: left; vertical-align: center;}
  9. #text-bar h1 {font-size: 12px; margin:0px 10px 0px 10px; font-weight: bold; font-family: Verdana; color: #000;}
  10. #logo{width: 100%; height: 150px; background-image: url("./images/logo.jpg"); font-size: 0px;}
  11. #top-menu{width: 100%; height: 52px;}
  12. #top-menu-items{width: 100%; height: 40px; padding: 0px; margin: 0px;}
  13.  
  14. #body {width: 804px; padding: 0px; margin: 0px;}
  15. #menu {width: 162px; left: 0px;}
  16. #other {width: 642px; right: 0px;}
  17.  
  18. #footer-text {width: 100%; height:40px; background-image: url("./images/footer.jpg");}
  19.  
  20. .header-bar{width: 100%; height:12px; background-image: url("./images/header-bar.jpg"); font-size: 0px;}
  21. .bar {width: 100%; height:12px; background-image: url("./images/bar.jpg"); font-size: 0px;}
  22.  
  23. </style>
  24. </head>
  25. <body>
  26. <div id="glowny">
  27.  
  28. <div id="header">
  29. 	<div class="bar"></div>
  30. 	<div id="text-bar"><h1>Metal Dream - portal o Metallice i Dream Theater</h1></div>
  31. 	<div class="header-bar"></div>
  32. 	<div id="logo"></div>
  33. 	<div class="header-bar"></div>
  34. </div>
  35. <div id="top-menu">
  36. 	<div id="top-menu-items"><a href=""><img src="./images/menu-item1.jpg" alt="Strona główna"></a><a href=""><img src="./images/menu-item2.jpg" alt="Forum"></a><a href=""><img src="./images/menu-item3.jpg" alt="Download"></a><a href=""><img src="./images/menu-item4.jpg" alt="Metallica"></a><a href=""><img src="./images/menu-item5.jpg" alt="Dream Theater"></a></div>
  37. 	<div class="bar"></div>
  38. </div>
  39.  
  40. <div id="body">
  41. <div id="menu">cos :)<br />cos :)</div>
  42. <div id="other">cos :)<br />cos :)</div>
  43. </div>
  44.  
  45. <div id="footer">
  46. 	<div class="bar"></div>
  47. 	<div id="footer-text"></div>
  48. </div>
  49.  
  50. </div>
  51. </body>
  52. </html>
[HTML] pobierz, plaintext


Chce zeby Menu i Other byly obok siebie i zeby rozciagaly one warstwe body. Jak to zrobic questionmark.gif probowalem z float ale wtedy sie nie rozciaga sad.gif
shpyo
27.11.2005, 16:54:20
HINT: float: left/right;
Balas
27.11.2005, 17:37:30
Pisalem ze tak robilem... ale div pod nimi ma sie tez rozciagnac na ich dlugosc sad.gif A jak tak zrobie to nie idzie smile.gif
strange
27.11.2005, 17:47:02
Proszę:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  4. <style type="text/css">img {border: 0px; margin: 0px; padding: 0px;}
  5.  
  6. #glowny {margin: 0 auto; width: 804px; text-align: justify; background-image: url("./images/body-bg.jpg");}
  7. #text-bar {width: 100%; height: 18px; background-image: url("./images/top-text-bar.jpg"); font-size: 12px; text-align: left; vertical-align: center;}
  8. #text-bar h1 {font-size: 12px; margin:0px 10px 0px 10px; font-weight: bold; font-family: Verdana; color: #000;}
  9. #logo{width: 100%; height: 150px; background-image: url("./images/logo.jpg"); font-size: 0px;}
  10. #top-menu{width: 100%; height: 52px;}
  11. #top-menu-items{width: 100%; height: 40px; padding: 0px; margin: 0px;}
  12.  
  13. #content {width: 804px; padding: 0px; margin: 0px;}
  14. #menu {width: 162px; left: 0px; float: left;}
  15. #other {width: 642px; right: 0px; float: right;}
  16.  
  17. #footer-text {width: 100%; height:40px; background-image: url("./images/footer.jpg");}
  18.  
  19. .header-bar{width: 100%; height:12px; background-image: url("./images/header-bar.jpg"); font-size: 0px;}
  20. .bar {width: 100%; height:12px; background-image: url("./images/bar.jpg"); font-size: 0px;}
  21.  
  22. </style>
  23. </head>
  24. <body>
  25. <div id="glowny">
  26.  
  27. <div id="header">
  28. <div class="bar"></div>
  29. <div id="text-bar"><h1>Metal Dream - portal o Metallice i Dream Theater</h1></div>
  30. <div class="header-bar"></div>
  31. <div id="logo"></div>
  32. <div class="header-bar"></div>
  33. </div>
  34. <div id="top-menu">
  35. <div id="top-menu-items"><a href=""><img src="./images/menu-item1.jpg" alt="Strona główna"></a><a href=""><img src="./images/menu-item2.jpg" alt="Forum"></a><a href=""><img src="./images/menu-item3.jpg" alt="Download"></a><a href=""><img src="./images/menu-item4.jpg" alt="Metallica"></a><a href=""><img src="./images/menu-item5.jpg" alt="Dream Theater"></a></div>
  36. <div class="bar"></div>
  37. </div>
  38.  
  39. <div id="content">
  40. <div id="menu">cos :)<br />cos :)</div>
  41. <div id="other">A tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA tu jest trescA</div>
  42. </div>
  43.  
  44. <div id="footer">
  45. <div class="bar"></div>
  46. <div id="footer-text"></div>
  47. </div>
  48.  
  49. </div>
  50. </body>
  51. </html>
[HTML] pobierz, plaintext



Co poprawiłem, użyłeś body jako miejsca na menu i other a to jest błąd, ponieważ standardowo klasa body jest używana do określenia wyglądu pierwszej warstwy tnz. (tło, suwaki itd.)
Poprawiłem Ci nazwę na content.
A dodatkowo oczywiście floaty...


Pozdrawiam i mam nadzieję, że o to chodziło...


Poprawiłem


----edit----
Do wstawiania kodów źródłowych HTML służy tag [ html ]
Tym razem poprawiłem, ale proszę używać odpowiednich tagów bbCode
~mike_mech
Balas
27.11.2005, 17:51:42
Mowilem ze float juz uzywalem a po zmianie nazwy ten sam efekt sad.gif (content sie nie rozciaga. Nie wiem czemu ale pod IE wyglada jak powinno a pod FF juz nie.

Czekam na dalsze propozycje smile.gif bo sam juz mecze sie z tym i nic nie wychodzi.

PS. u ciebie jest blad bo nie to body zmieniles w stylach winksmiley.jpg

edit

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body {margin: 0px; background-image: url("./images/bg.gif"); margin:0; padding:0; height:100%; text-align:center; color: #fff;}
  5. img {border: 0px; margin: 0px; padding: 0px;}
  6.  
  7. #glowny {margin: 0 auto; width: 804px; text-align: justify;}
  8. #text-bar {width: 100%; height: 18px; background-image: url("./images/top-text-bar.jpg"); font-size: 12px; text-align: left; vertical-align: center;}
  9. #text-bar h1 {font-size: 12px; margin:0px 10px 0px 10px; font-weight: bold; font-family: Verdana; color: #000;}
  10. #logo{width: 100%; height: 150px; background-image: url("./images/logo.jpg"); font-size: 0px;}
  11. #top-menu{width: 100%; height: 52px;}
  12. #top-menu-items{width: 100%; height: 40px; padding: 0px; margin: 0px;}
  13.  
  14. #content {width: 804px; padding: 0px; margin: 0px;}
  15. #menu {width: 162px; left: 0px; float: left;}
  16. #other {width: 642px; right: 0px; float: right;}
  17.  
  18. #footer-text {width: 100%; height:40px; background-image: url("./images/footer.jpg"); float: right;}
  19.  
  20. .header-bar{width: 100%; height:12px; background-image: url("./images/header-bar.jpg"); font-size: 0px;}
  21. .bar {width: 100%; height:12px; background-image: url("./images/bar.jpg"); font-size: 0px;}
  22.  
  23. </style>
  24. </head>
  25. <body>
  26. <div id="glowny">
  27.  
  28. <div id="header">
  29. <div class="bar"></div>
  30. <div id="text-bar"><h1>Metal Dream - portal o Metallice i Dream Theater</h1></div>
  31. <div class="header-bar"></div>
  32. <div id="logo"></div>
  33. <div class="header-bar"></div>
  34. </div>
  35. <div id="top-menu">
  36. <div id="top-menu-items"><a href=""><img src="./images/menu-item1.jpg" alt="Strona główna"></a><a href=""><img src="./images/menu-item2.jpg" alt="Forum"></a><a href=""><img src="./images/menu-item3.jpg" alt="Download"></a><a href=""><img src="./images/menu-item4.jpg" alt="Metallica"></a><a href=""><img src="./images/menu-item5.jpg" alt="Dream Theater"></a></div>
  37. <div class="bar"></div>
  38. </div>
  39. <div style="float: right; background-image: url('./images/body-bg.jpg');">
  40. <div id="menu">cosdsadsad</div>
  41. <div id="other">A tu jest tresc</div>
  42. </div>
  43.  
  44.  
  45. <div class="bar" style="float: right;"></div>
  46. <div id="footer-text"></div>
  47.  
  48.  
  49. </div>
  50. </body>
  51. </html>
[HTML] pobierz, plaintext


Zmienilem tylko w stopce i w "kontenerze" tez na float i wszystko dziala smile.gif guitar.gif

PS. czemu nie ma tego posta co przez chwila strange napisal questionmark.gif biggrin.gif laugh.gif
Zajec
27.11.2005, 19:24:58
Przyznaję - czytałem temat bardzo ogólnikowo.

Zakładam, że w jednym div'ie masz dwa divy z nadanym float. To, że div-rodzic się nie rozciąga jest natulanym zachowaniem. Tak funkcjonuje float, że nie wpływa na rozmiary rodzica.

Nadaj div'owi-rodzicowi jakiś id i użyj
Kod
#id:after {
display: block;
clear: both;
content: "";
}
Cała reszta pod spodem będzie już normalnie się układać. A szkoda tak z div'ami kombinować.
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.