Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS,xHTML] Problem z divem
Forum PHP.pl > Forum > Po stronie przeglądarki
Yumi
21.03.2008, 12:50:28
Witam,
Mam nastepujący problem: jak przenieść diva z jasno niebieskim tłem w górę, w tak, żeby zaczynał się na równi z menu po lewej i nie stracił właściwości rozszerzania sie pod wpływem treści.

css.css

Kod
@charset "utf-8";
body {
font : 100% Verdana, Arial, Helvetica, sans-serif;
background : #ffffff;
margin : 0;
padding : 0;
text-align : center;
color : #000000;
}
.main #container {
width : 780px;
background : #ffffff;
margin : 50px auto;
border : 1px solid #000000;
text-align : left;
}
.main #header {
background : #ffffff;
padding : 0 10px 0 20px;
}
.main #header p {
color : #d10000;
font-family : Arial, Helvetica, sans-serif;
font-size : smaller;
text-align : right;
}
.main #header h1 {
margin : 0;
padding : 10px 0;
}
.headermenu {
padding : 0;
width : 760px;
border-top : 5px solid #d10000;
margin-left : 6px;
background : transparent;
voice-family : "\"}\"";
voice-family : inherit;
background : #ccff33;
}
.headermenu ul {
margin : 0;
margin-left : 0;
padding : 0;
list-style : none;
}
.headermenu li {
display : inline;
margin : 0 2px 0 0;
padding : 0;
}
.headermenu a {
float : left;
display : block;
font : bold 12px Arial;
color : black;
text-decoration : none;
margin : 0 1px 0 0;
padding : 5px 10px 9px 10px;
background-color : white;
}
.headermenu a:hover {
background-color : #d10000;
padding-top : 9px;
padding-bottom : 5px;
color : white;
}
.headermenu .current a {
background-color : #d10000;
padding-top : 9px;
padding-bottom : 5px;
color : white;
}
#ddblueblockmenu {
float : none;
border : 0 solid black;
border-bottom-width : 0;
width : 180px;
margin-left : 6px;
margin-top : 45px;
}
#ddblueblockmenu ul {
margin : 0;
padding : 0;
list-style-type : none;
font : normal 12px 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu li a {
display : block;
padding : 3px 0;
padding-left : 3px;
width : 170px;
text-decoration : none;
color : white;
background-color : #2175bc;
border-bottom : 1px solid #90bade;
border-left : 7px solid #1958b7;
}
* html #ddblueblockmenu li a {
width : 207px;
width : 209px;
}
#ddblueblockmenu li a:hover {
background-color : #2586d7;
border-left-color : #1c64d1;
}
#ddblueblockmenu div.menutitle {
color : white;
border-bottom : 1px solid black;
padding : 1px 0;
padding-left : 5px;
background-color : black;
font : bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
.main #mainContent {
margin-left : 230px;
margin-bottom : 10px;
padding : 0 20px;
background : #00ccff;
}
.main #footer {
padding : 0 10px 0 20px;
background : #d10000;
}

.main #footer .stopka {
margin : 0;
background : #d10000;
color : #ffffff;

}
.main #footer p {
text-align:right;
}

.clearfloat {
clear : both;
height : 0;
font-size : 1px;
line-height : 0;
}


index.xhtml

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MIS Consulting &amp; Training </title>
<link href="css.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="main">

<div id="container">
   <div id="header">
     <img src="" alt="MIS Consulting &amp; Training" width="" height="" /> <p>Dedicated solutions to enhance your performance</p>
   <!-- end #header --></div>
    <div class="headermenu">
         <ul>
             <li class="current"><a title="O nas" href="index.php?site=aboutus">O nas</a></li>
             <li><a title="Consulting" href="index.php?site=consulting">Consulting</a></li>
             <li><a title="Training" href="index.php?site=training">Training</a></li>
             <li><a title="Zapytanie ofertowe" href="index.php?site=question">Zapytanie ofertowe</a></li>
             <li><a title="Publikacje" href="index.php?site=publications">Publikacje</a></li>
                 <li><a title="Kontakt" href="index.php?site=acontact">Kontakt</a></li>
      </ul>
   </div>

       <div id="ddblueblockmenu">
     <div class="menutitle">Usługi MIS Consulting </div>
         <ul>
             <li><a href="/sites/index.php?site=aboutus.php">Tworzenie systemu controllingu</a></li>
             <li><a href="/sites/index.php?site=aboutus.php">Wdrażanie rachunku kosztów</a></li>
             <li><a href="/sites/index.php?site=aboutus.php">Controlling Sprzedaży</a></li>
             <li><a href="/sites/index.php?site=aboutus.php">Re-engineering procesów biznesowych</a></li>
             <li><a href="/sites/index.php?site=aboutus.php">Modelowanie finansowe</a></li>

       </ul>

     <div class="menutitle">Usługi MIS Training</div>
         <ul>
         <li><a href="/sites/index.php?site=aboutus.php">Controlling i rachunkowość zarządcza w praktyce</a></li>
         <li><a href="/sites/index.php?site=aboutus.php">Profejsonalne raportowanie oraz analizy finansowe w Excelu</a></li>
         <li><a href="/sites/index.php?site=aboutus.php">Excel jako narzędzie wspomagające pracę księgowego</a></li>
         <li><a href="/sites/index.php?site=aboutus.php">jakis teks</a></li>
         </ul>
            
     </div>
     <div id="mainContent">
     vsvdsvd
     </div>
    
   <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
   <br class="clearfloat" />
   <div id="footer">
     <stopka>informacje kontaktowe stopka autorska :)</stopka>
                 <p>
                 <a href="http://validator.w3.org/check?uri=referer"><img
                 src="http://www.w3.org/Icons/valid-xhtml11"
                 alt="Valid XHTML 1.1" height="4" width="88" border="0" /></a>
              
                 <a href="http://jigsaw.w3.org/css-validator/">
                 <img style="border:0;width:88px;height:4px"
                 src="http://jigsaw.w3.org/css-validator/images/vcss"
                 alt="Poprawny CSS!" /></a>
                 </p>
   <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
arecki
21.03.2008, 16:56:33
Tak miało być ?

html:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>MIS Consulting &amp; Training </title>
  6. <link href="aaa.css" rel="stylesheet" type="text/css" />
  7. <!--[if IE 5]>
  8. <style type="text/css">
  9. /* place css box model fixes for IE 5* in this conditional comment */
  10. .twoColFixLtHdr #sidebar1 { width: 230px; }
  11. </style>
  12. <![endif]--><!--[if IE]>
  13. <style type="text/css">
  14. /* place css fixes for all versions of IE in this conditional comment */
  15. .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
  16. .twoColFixLtHdr #mainContent { zoom: 1; }
  17. /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
  18. </style>
  19. <![endif]--></head>
  20.  
  21. <body class="main">
  22.  
  23. <div id="container">
  24.    <div id="header">
  25.      <img src="" alt="MIS Consulting &amp; Training" width="" height="" /> <p>Dedicated solutions to enhance your performance</p>
  26.    <!-- end #header --></div>
  27.     <div class="headermenu">
  28.          <ul>
  29.              <li class="current"><a title="O nas" href="index.php?site=aboutus">O nas</a></li>
  30.              <li><a title="Consulting" href="index.php?site=consulting">Consulting</a></li>
  31.              <li><a title="Training" href="index.php?site=training">Training</a></li>
  32.              <li><a title="Zapytanie ofertowe" href="index.php?site=question">Zapytanie ofertowe</a></li>
  33.              <li><a title="Publikacje" href="index.php?site=publications">Publikacje</a></li>
  34.              <li><a title="Kontakt" href="index.php?site=acontact">Kontakt</a></li>
  35.       </ul>
  36.    </div>
  37. 	<div id="content">
  38.        <div id="ddblueblockmenu">
  39.      	<div class="menutitle">Usługi MIS Consulting </div>
  40.          <ul>
  41.              <li><a href="/sites/index.php?site=aboutus.php">Tworzenie systemu controllingu</a></li>
  42.              <li><a href="/sites/index.php?site=aboutus.php">Wdrażanie rachunku kosztów</a></li>
  43.              <li><a href="/sites/index.php?site=aboutus.php">Controlling Sprzedaży</a></li>
  44.              <li><a href="/sites/index.php?site=aboutus.php">Re-engineering procesów biznesowych</a></li>
  45.              <li><a href="/sites/index.php?site=aboutus.php">Modelowanie finansowe</a></li>
  46.  
  47.        </ul>
  48.  
  49.      	<div class="menutitle">Usługi MIS Training</div>
  50.          <ul>
  51.          <li><a href="/sites/index.php?site=aboutus.php">Controlling i rachunkowość zarządcza w praktyce</a></li>
  52.          <li><a href="/sites/index.php?site=aboutus.php">Profejsonalne raportowanie oraz analizy finansowe w Excelu</a></li>
  53.          <li><a href="/sites/index.php?site=aboutus.php">Excel jako narzędzie wspomagające pracę księgowego</a></li>
  54.          <li><a href="/sites/index.php?site=aboutus.php">jakis teks</a></li>
  55.          </ul>
  56.  
  57.      </div>
  58. 	     <div id="mainContent">
  59. 	     vsvdsvd
  60. 	     </div>
  61. 	</div>
  62.  
  63.    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
  64.    <br class="clearfloat" />
  65.    <div id="footer">
  66.      <stopka>informacje kontaktowe stopka autorska :)</stopka>
  67.                  <p>
  68.                  <a href="http://validator.w3.org/check?uri=referer"><img
  69.                  src="http://www.w3.org/Icons/valid-xhtml11"
  70.                  alt="Valid XHTML 1.1" height="4" width="88" border="0" /></a>
  71.  
  72.                  <a href="http://jigsaw.w3.org/css-validator/">
  73.                  <img style="border:0;width:88px;height:4px"
  74.                  src="http://jigsaw.w3.org/css-validator/images/vcss"
  75.                  alt="Poprawny CSS!" /></a>
  76.                  </p>
  77.    <!-- end #footer --></div>
  78. <!-- end #container --></div>
  79. </body>
  80. </html>
[HTML] pobierz, plaintext


css:
[HTML] pobierz, plaintext 
  1. @charset "utf-8";
  2. body {
  3. font : 100% Verdana, Arial, Helvetica, sans-serif;
  4. background : #ffffff;
  5. margin : 0;
  6. padding : 0;
  7. text-align : center;
  8. color : #000000;
  9. }
  10. .main #container {
  11. width : 780px;
  12. background : #ffffff;
  13. margin : 50px auto;
  14. border : 1px solid #000000;
  15. text-align : left;
  16. }
  17. .main #header {
  18. background : #ffffff;
  19. padding : 0 10px 0 20px;
  20. }
  21. .main #header p {
  22. color : #d10000;
  23. font-family : Arial, Helvetica, sans-serif;
  24. font-size : smaller;
  25. text-align : right;
  26. }
  27. .main #header h1 {
  28. margin : 0;
  29. padding : 10px 0;
  30. }
  31. .headermenu {
  32. padding : 0;
  33. width : 760px;
  34. border-top : 5px solid #d10000;
  35. margin-left : 6px;
  36. background : transparent;
  37. voice-family : "\"}\"";
  38. voice-family : inherit;
  39. background : #ccff33;
  40. overflow: auto;
  41. display: inline-block;
  42. }
  43. .headermenu ul {
  44. margin : 0;
  45. margin-left : 0;
  46. padding : 0;
  47. list-style : none;
  48. }
  49. .headermenu li {
  50. display : inline;
  51. margin : 0 2px 0 0;
  52. padding : 0;
  53. }
  54. .headermenu a {
  55. float : left;
  56. display : block;
  57. font : bold 12px Arial;
  58. color : black;
  59. text-decoration : none;
  60. margin : 0 1px 0 0;
  61. padding : 5px 10px 9px 10px;
  62. background-color : white;
  63. }
  64. .headermenu a:hover {
  65. background-color : #d10000;
  66. padding-top : 9px;
  67. padding-bottom : 5px;
  68. color : white;
  69. }
  70. .headermenu .current a {
  71. background-color : #d10000;
  72. padding-top : 9px;
  73. padding-bottom : 5px;
  74. color : white;
  75. }
  76. #ddblueblockmenu {
  77. float : left;
  78. border : 0 solid black;
  79. border-bottom-width : 0;
  80. width : 180px;
  81. margin-left : 6px;
  82. margin-top : 45px;
  83. }
  84. #ddblueblockmenu ul {
  85. margin : 0;
  86. padding : 0;
  87. list-style-type : none;
  88. font : normal 12px 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
  89. }
  90. #ddblueblockmenu li a {
  91. display : block;
  92. padding : 3px 0;
  93. padding-left : 3px;
  94. width : 170px;
  95. text-decoration : none;
  96. color : white;
  97. background-color : #2175bc;
  98. border-bottom : 1px solid #90bade;
  99. border-left : 7px solid #1958b7;
  100. }
  101. * html #ddblueblockmenu li a {
  102. width : 207px;
  103. width : 209px;
  104. }
  105. #ddblueblockmenu li a:hover {
  106. background-color : #2586d7;
  107. border-left-color : #1c64d1;
  108. }
  109. #ddblueblockmenu div.menutitle {
  110. color : white;
  111. border-bottom : 1px solid black;
  112. padding : 1px 0;
  113. padding-left : 5px;
  114. background-color : black;
  115. font : bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
  116. }
  117. .main #mainContent {
  118. margin-left : 230px;
  119. margin-bottom : 10px;
  120. padding : 0 20px;
  121. background : #00ccff;
  122. }
  123. .main #footer {
  124. padding : 0 10px 0 20px;
  125. background : #d10000;
  126. }
  127.  
  128. .main #footer .stopka {
  129. margin : 0;
  130. background : #d10000;
  131. color : #ffffff;
  132.  
  133. }
  134. .main #footer p {
  135. text-align:right;
  136. }
  137.  
  138. .clearfloat {
  139. clear : both;
  140. height : 0;
  141. font-size : 1px;
  142. line-height : 0;
  143. }
[HTML] pobierz, plaintext
Yumi
24.03.2008, 02:35:27
O właśnie! Dzięki wielkie... masz u mnie buzi smile.gif) jaki miałam błąd??
arecki
25.03.2008, 17:12:17
No super tylko nie wiem co Żonka na to smile.gif) A co do błedów to możesz porównać obydwa pliki i zmiany są niewielkie.
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.