Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ustawienie DIV
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
mateofi
21.07.2006, 18:55:06
Witam,

Mam następujący problem.

Mam dwa pliki:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html
  2.      PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3.     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4.      <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  7. <meta name="Description" content="Mateofi homepage " />
  8. <meta name="Robots" content="all" />
  9. <meta name="Pragma" content="no-cache" />
  10. <meta name="author" content="Mateusz Fijałek" />
  11. <meta name="keywords" content="xhtml, css, php, mateofi, homepage" />
  12. <meta http-equiv="Content-Language" content="pl" />
  13. <title>mateofi homepage - Strona domowa Mateusza Fijałka</title>
  14. <link rel="Stylesheet" href="styl/styl.css" type="text/css" />
  15.   </head>
  16.   <body xml:lang="pl">
  17.     <div id="panel">
  18.     <ul class="menug">
  19.      <li>Strona Główna | </li>
  20.      <li>Mapa strony | </li>
  21.      <li>Kontakt</li>
  22.     </ul>
  23.     </div>
  24.       <div id="bok">
  25.           <div id="top">
  26.           <h1>Strona domowa Mateusza Fijałka</h1>
  27.           </div>
  28.           <div id="menu">
  29.            <ul class="menu1">
  30.             <li>Strona Główna</li>
  31.             <li>O mnie</li>
  32.             <li>Artykuły
  33.               <ul class="menu2">
  34.                   <li>XHTML</li>
  35.                   <li>CSS</li>
  36.                   <li>php</li>
  37.                   <li>Różne</li>
  38.               </ul>
  39.             </li>
  40.             <li>Tutoriale</li>
  41.             <li>Portfolio</li>
  42.             <li>Linki</li>
  43.             <li>Kontakt</li>
  44.          </ul>
  45.          </div>
  46.          <div id="tresc">
  47.          dasd
  48.          </div>
  49.    </body>
  50. </html>
[HTML] pobierz, plaintext


i css
[HTML] pobierz, plaintext 
  1. html{
  2.     background:#F0F2F3 url(pasek_gora.gif) repeat-x;
  3. }
  4. body{
  5.     width:700px;
  6.     margin:0 auto 0 auto;
  7.     text-align:center;
  8. }
  9.  
  10.  
  11. #bok{
  12.     width:210px;
  13.     float:left;
  14. }
  15. #top{
  16.     background: url(top.gif) no-repeat;
  17.     width:100%;
  18.     height:110px;
  19.     margin:0;
  20.     padding:0;
  21. }
  22. h1{
  23.     color:#FFFFFF;
  24.     margin:0;
  25.     padding-top:85px;
  26.     text-align:center;
  27.     font-size:10px;
  28.     font-family:verdana;
  29. }
  30. #menu{
  31.     background: url(menu.gif) no-repeat;
  32.     height:259px;
  33.     width:100%;
  34.     padding:20px;
  35.     font-size:13px;
  36.     font-family:Verdana;
  37.     color:#FFFFFF;
  38. }
  39.  
  40. *.menu1{
  41.     padding-left:20px;
  42.     margin:0;
  43.     text-align:left;
  44. }
  45. *.menu1 li{
  46.     list-style: url(menu1.gif);
  47. }
  48. *.menu2{
  49.     padding-left:30px;
  50.     margin:0;
  51.     text-align:left;
  52. }
  53. *.menu2 li{
  54.     list-style: url(menu2.gif);
  55. }
  56. #panel{
  57.     float:right;
  58. }
  59. *.menug{
  60.     font-size:11px;
  61.     font-family:Verdana;
  62.     color:#F0CB4A;
  63.     text-decoration:bold;
  64. }
  65. *.menug li{
  66.     display:inline;
  67. }
  68. #tresc{
  69.     width:470px;
  70.     background-color:red;
  71. }
[HTML] pobierz, plaintext


Witam, i jak to zrobić, aby DIV treść znajdował się w tym: http://www.wadowice.ovh.org/hp2.gif miejscu, a nie na samym dole.

Kombinuje jak mogę a tu dalej nic

strona z tym DIVEM na dole jest tutaj:
http://www.mateofi.ovh.org/homepage/index.html

Pozdrowienia
mateofi
ens0re
21.07.2006, 19:09:01
Chyba coś z floatami zes zsypał. #panel słuzy jako kontener i ma float: right; #bok to menu i jest float: left; - ok, natomiast #tresc nie ma zadnego nadanego floata. Usun z #panel float: right; i daj to #tresc.
mateofi
21.07.2006, 19:48:30
nie pomogło sad.gif
ens0re
21.07.2006, 20:35:53
Namieszałeś w kodzie :/ I tak wszystko jest namieszane, ale efekt masz taki jak chciałeś:
[HTML] pobierz, plaintext 
  1. html{
  2. background:#F0F2F3 url(pasek_gora.gif) repeat-x;
  3. }
  4. body{
  5. width:700px;
  6. margin:0 auto 0 auto;
  7. text-align:center;
  8. }
  9.  
  10.  
  11. #bok{
  12. width:210px;
  13. float:left;
  14. }
  15. #top{
  16. background: url(top.gif) no-repeat;
  17. width:100%;
  18. height:110px;
  19. margin:0;
  20. padding:0;
  21. }
  22. h1{
  23. color:#FFFFFF;
  24. margin:0;
  25. padding-top:85px;
  26. text-align:center;
  27. font-size:10px;
  28. font-family:verdana;
  29. }
  30. #menu{
  31. background: url(menu.gif) no-repeat;
  32. height:259px;
  33. width:100%;
  34. padding:20px;
  35. font-size:13px;
  36. font-family:Verdana;
  37. color:#FFFFFF;
  38. }
  39.  
  40. *.menu1{
  41. padding-left:20px;
  42. margin:0;
  43. text-align:left;
  44. }
  45. *.menu1 li{
  46. list-style: url(menu1.gif);
  47. }
  48. *.menu2{
  49. padding-left:30px;
  50. margin:0;
  51. text-align:left;
  52. }
  53. *.menu2 li{
  54. list-style: url(menu2.gif);
  55. }
  56. #panel{
  57. float:right;
  58. }
  59. *.menug{
  60. font-size:11px;
  61. font-family:Verdana;
  62. color:#F0CB4A;
  63. text-decoration:bold;
  64. }
  65. *.menug li{
  66. display:inline;
  67. }
  68. #tresc{
  69. width:470px;
  70. margin-top: 85px;
  71. float: left;
  72. background-color:red;
  73. }
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  7. <meta name="Description" content="Mateofi homepage " />
  8. <meta name="Robots" content="all" />
  9. <meta name="Pragma" content="no-cache" />
  10. <meta name="author" content="Mateusz Fijałek" />
  11. <meta name="keywords" content="xhtml, css, php, mateofi, homepage" />
  12. <meta http-equiv="Content-Language" content="pl" />
  13. <title>mateofi homepage - Strona domowa Mateusza Fijałka</title>
  14. <link rel="Stylesheet" href="index/styl.css" type="text/css" />
  15. </head>
  16. <body xml:lang="pl">
  17. <div id="panel">
  18. <ul class="menug">
  19. <li>Strona Główna | </li>
  20. <li>Mapa strony | </li>
  21. <li>Kontakt</li>
  22. </ul>
  23. </div>
  24. <div id="bok">
  25. <div id="top">
  26. <h1>Strona domowa Mateusza Fijałka</h1>
  27. </div>
  28. <div id="menu">
  29. <ul class="menu1">
  30. <li>Strona Główna</li>
  31. <li>O mnie</li>
  32. <li>Artykuły
  33. <ul class="menu2">
  34. <li>XHTML</li>
  35. <li>CSS</li>
  36. <li>php</li>
  37. <li>Różne</li>
  38. </ul>
  39. </li>
  40. <li>Tutoriale</li>
  41. <li>Portfolio</li>
  42. <li>Linki</li>
  43. <li>Kontakt</li>
  44. </ul>
  45. </div>
  46. </div>
  47. <div id="tresc">
  48. dasd
  49. </div>
  50.  
  51. </div>
  52. </body>
  53. </html>
[HTML] pobierz, plaintext
mateofi
21.07.2006, 20:43:32
w IE nie działa. Próbowałem już tym sposobem. Dawałem także position absolute, ale to zaś po zmianie roździelczości się psuje sad.gif

EDIT: w IE działa przy maksymalnej szerokości 450.
ens0re
21.07.2006, 21:01:52
Bo masz w menu taką linijke: padding-left:20px; Możesz dać do body width: 720px; ale to i tak bedziesz miał w IE przerwe 20px menu od tresci.
mateofi
21.07.2006, 21:17:56
a w Operze top sie obniża o ok 10 px sad.gif
ens0re
21.07.2006, 21:22:17 
[HTML] pobierz, plaintext 
  1. * {margin: 0; padding: 0; }
  2.  
  3. html{
  4. background:#F0F2F3 url(pasek_gora.gif) repeat-x;
  5. }
  6. body{
  7. width:720px;
  8. margin:0 auto 0 auto;
  9. text-align:center;
  10. }
  11.  
  12.  
  13. #bok{
  14. width:210px;
  15. float:left;
  16. }
  17. #top{
  18. background: url(top.gif) no-repeat;
  19. width:100%;
  20. height:110px;
  21. margin:0;
  22. padding:0;
  23. }
  24. h1{
  25. color:#FFFFFF;
  26. margin:0;
  27. padding-top:85px;
  28. text-align:center;
  29. font-size:10px;
  30. font-family:verdana;
  31. }
  32. #menu{
  33. background: url(menu.gif) no-repeat;
  34. height:259px;
  35. width:100%;
  36. padding:20px;
  37. font-size:13px;
  38. font-family:Verdana;
  39. color:#FFFFFF;
  40. }
  41.  
  42. *.menu1{
  43. padding-left:20px;
  44. margin:0;
  45. text-align:left;
  46. }
  47. *.menu1 li{
  48. list-style: url(menu1.gif);
  49. }
  50. *.menu2{
  51. padding-left:30px;
  52. margin:0;
  53. text-align:left;
  54. }
  55. *.menu2 li{
  56. list-style: url(menu2.gif);
  57. }
  58. #panel{
  59. float:right;
  60. }
  61. *.menug{
  62. font-size:11px;
  63. font-family:Verdana;
  64. color:#F0CB4A;
  65. text-decoration:bold;
  66. }
  67. *.menug li{
  68. display:inline;
  69. }
  70. #tresc{
  71. width:470px;
  72. margin-top: 100px;
  73. float: left;
  74. background-color:red;
  75. }
[HTML] pobierz, plaintext 

[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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <meta name="Description" content="Mateofi homepage " />
  7. <meta name="Robots" content="all" />
  8. <meta name="Pragma" content="no-cache" />
  9. <meta name="author" content="Mateusz Fijałek" />
  10. <meta name="keywords" content="xhtml, css, php, mateofi, homepage" />
  11. <meta http-equiv="Content-Language" content="pl" />
  12. <title>mateofi homepage - Strona domowa Mateusza Fijałka</title>
  13. <link rel="Stylesheet" href="styl.css" type="text/css" />
  14. </head>
  15. <body>
  16. <div id="panel">
  17. <ul class="menug">
  18. <li>Strona Główna | </li>
  19. <li>Mapa strony | </li>
  20. <li>Kontakt</li>
  21. </ul>
  22. </div>
  23. <div id="bok">
  24. <div id="top">
  25. <h1>Strona domowa Mateusza Fijałka</h1>
  26. </div>
  27. <div id="menu">
  28. <ul class="menu1">
  29. <li>Strona Główna</li>
  30. <li>O mnie</li>
  31. <li>Artykuły
  32. <ul class="menu2">
  33. <li>XHTML</li>
  34. <li>CSS</li>
  35. <li>php</li>
  36. <li>Różne</li>
  37. </ul>
  38. </li>
  39. <li>Tutoriale</li>
  40. <li>Portfolio</li>
  41. <li>Linki</li>
  42. <li>Kontakt</li>
  43. </ul>
  44. </div>
  45. </div>
  46.  
  47. <div id="tresc">
  48. dasd
  49. </div>
  50.  
  51. </div>
  52. </body>
  53. </html>
[HTML] pobierz, plaintext

Mi wszedzie jest ok, tyle ze w IE tresc jest o 20px odsunieta w prawo od menu. W Operze i FF jest git.
mateofi
21.07.2006, 21:31:20
dzięki wielkie smile.gif działa. jeszcze raz wielkie dzięki smile.gif
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.