Tema: Problemas con div y footer
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 08/12/2010, 22:45
monigote
 
Fecha de Ingreso: diciembre-2010
Mensajes: 40
Antigüedad: 14 años
Puntos: 0
Respuesta: Problemas con div y footer
Bueno dire como tengo acomodado mis divs y luego pondre el codigo css que tengo y mi codigo php lo pongo en el contentwrapper dentro de un form. Muchas gracias


<div id="background">


<div id="headerwrap">


<div id="header">


</div>

</div>
</div>

<div id="outerWrapper">
<div id="contentWrapper">

</div>
</div>


<div id="Footer">

</div>


Código CSS: 
Ver original
  1. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  2.     margin: 0;
  3.     padding: 0;
  4.     border: 0;
  5.     outline: 0;
  6.     font-size: 100&#37;;
  7. }
  8. a { /*-- Removes dotted outline from clicked links in FF --*/
  9.     outline: none;
  10. }
  11. img {
  12.     border:none;
  13. }
  14. .clearer {
  15.     clear:both;
  16. }
  17. blockquote {
  18.     background: #F2F2F2 url(images/blockquote.png) no-repeat top left;
  19.     border: 1px solid #D7D7D7;
  20.     padding: 10px 10px 10px 40px;
  21. }
  22. /*-- Main structure for the layout --*/
  23. body {
  24.     color: #333;
  25.     font-family: Arial, Helvetica, sans-serif;
  26.     font-size: 12px;
  27.     line-height: 17px;
  28.     margin: 0 0 0 0;
  29.     padding: 0 0 0 0;
  30.     text-align: center;
  31.     background: #000;
  32. }
  33. #background {
  34.     background: #F2F2F2;
  35. }
  36. #outerWrapper {
  37.     margin: 0 auto 0 auto;
  38.     text-align: left;
  39.     width: 960px;
  40. }
  41. #contentWrapper {
  42.     overflow: hidden;
  43.     clear:left;
  44. }
  45. #sidebar {
  46.     float: right;
  47.     padding: 20px 0px 10px 0px;
  48.     width: 310px;
  49. }
  50. #Content {
  51.     margin: 0 0px 0 0;
  52.     padding: 20px 0px 10px;
  53.     float: left;
  54.     width: 640px;
  55. }
  56. #Footer {
  57.     border-top: solid 1px #666;
  58.     padding: 10px 10px 0px;
  59.     background: #000 url(images/footerbg.png) repeat-x top;
  60.     height: 61px;
  61.     color:#999;
  62. }
  63.  
  64. /*-- Heading styles --*/
  65. h1 {
  66.     font: normal 26px/36px Verdana, Geneva, sans-serif;
  67.     letter-spacing: -1px;
  68. }
  69. h2 {
  70.     font: bold 20px/30px Verdana, Geneva, sans-serif;
  71.     letter-spacing: -1px;
  72. }
  73. h3 {
  74.     font: bold 17px/27px Verdana, Geneva, sans-serif;
  75.     letter-spacing: -1px;
  76.     color: #069;
  77. }
  78. h4 {
  79.     font: bold 14px/24px Verdana, Geneva, sans-serif;
  80. }
  81. h5 {
  82.     font: bold 13px/20px Verdana, Geneva, sans-serif;
  83.     color: #069;
  84. }
  85. h6 {
  86.     font: bold 12px/18px Verdana, Geneva, sans-serif;
  87. }
  88.  
  89. /*-- Link styles --*/
  90. a, a:link {
  91.     color: #069;
  92.     text-decoration: none;
  93. }
  94. a:hover {
  95.     color: #000;
  96.     text-decoration:underline;
  97. }
  98. a:visited, a:active {
  99.     color: #000;
  100. }
  101. .entry a.more-link { /*-- Removes underline from more link --*/
  102.     text-decoration:none;
  103. }
  104. #header a, #header a:link, #header a:active, #header a:visited {
  105.     color: #FFF;
  106. }
  107. #header a:hover {
  108.     color: #0CF;
  109. }
  110. #Footer a, #Footer a:link, #Footer a:active, #Footer a:visited {
  111.     color: #CCC;
  112. }
  113. #Footer a:hover {
  114.     color: #FFF;
  115. }
  116.  
  117. /*-- Header styles --*/
  118. #headerwrap {
  119.     padding: 0;
  120.     text-align: center;
  121.     background: url(images/headerbg.png) repeat-x top;
  122. }
  123. #header {
  124.     width:960px;
  125.     height:94px;
  126.     margin:0px auto;
  127.     text-align:left;
  128.     background: url(images/headerfill.jpg) no-repeat center top;
  129. }
  130. #header p {
  131.     margin: 0px;
  132. }
  133. .title { /*-- This is the title of your blog --*/
  134.     font: bold 30px/30px "Trebuchet MS", Arial, Helvetica, sans-serif;
  135.     color: #FFF;
  136.     float: left;
  137.     width: 600px;
  138.     padding-top: 15px;
  139. }
  140. .title a:hover {
  141.     text-decoration:none;   
  142. }
  143. .description { /*-- This is the line of text below your blog title --*/
  144.     font: 16px/20px Georgia, "Times New Roman", Times, serif;
  145.     color: #FFF;
  146.     float: left;
  147.     clear: left;
  148.     padding-top: 7px;
  149. }
  150. .topnav { /*-- This is the RSS links in the header --*/
  151.     float:right;
  152.     color: #000;
  153.     text-align:right;
  154.     font: bold normal 12px Arial, Helvetica, sans-serif;
  155.     padding-right: 7px;
  156.     padding-top: 10px;
  157. }
  158.  
  159. /* Navigation Styles */
  160. #menu {
  161.     width:960px;
  162.     position:relative;
  163.     margin:0 auto;
  164.     display:block;
  165.     height:35px;
  166.     font-size:12px;
  167.     font-weight:bold;
  168.     font-family:Arial, Helvetica, sans-serif;
  169. }
  170. #menu ul {
  171.     margin:0;
  172.     padding:0;
  173.     list-style-type:none;
  174. }
  175. #menu ul li {
  176.     display:block;
  177.     float:left;
  178.     margin:0;
  179.     padding:0;
  180. }
  181. #menu ul li a {
  182.     display:block;
  183.     float:left;
  184.     color:#CCC;
  185.     text-decoration:none;
  186.     font-weight:bold;
  187.     padding:8px 20px 0 20px;
  188. }
  189. #menu ul li a:hover {
  190.     color:#FFFFFF;
  191.     height:27px;
  192.     background:transparent url(images/nav_bg.png) 0px -35px no-repeat;
  193. }
  194.  
  195.  
  196. /*-- Post styles --*/
  197. .posttitle {
  198.     font-size: 24px;
  199.     font-weight: normal;
  200.     border-bottom: 1px solid #F2F2F2;
  201.     padding-bottom: 5px;
  202. }
  203. .posttitle a:hover {
  204.     text-decoration:none;
  205. }
  206.  
  207. #navwrap {
  208.     height:35px;
  209.     background: transparent url(images/nav_bg.png) repeat-x top left;
  210.     clear: both;
  211. }
  212.  
  213. /*-- Sidebar styles --*/
  214. #sidebar h5 { /*-- This is the title of each widget --*/
  215.     background: url(images/sidebarh3.jpg) no-repeat top center;
  216.     font: normal 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
  217.     color: #FFF;
  218.     padding-left: 8px;
  219.     padding-top: 5px;
  220.     padding-bottom: 5px;
  221.     margin-bottom: 8px;
  222. }
  223. #sidebar ul {
  224.     padding: 8px;
  225.     margin-bottom: 10px;
  226.     margin: 0px;
  227.     padding: 0px;
  228.     list-style: none;
  229. }
  230. #sidebar ul ul {
  231.     border:none;
  232.     background:none;
  233. }
  234. #sidebar ul li {
  235.     border: 1px solid #CCC;
  236.     background: #FFF url(images/boxbg.png) repeat-x top;
  237.     margin-bottom:10px;
  238.     padding: 7px;
  239. }
  240. #sidebar ul li ul li {
  241.     margin-left: 8px;
  242.     background: url(images/arrow.png) no-repeat left top;
  243.     padding-left: 9px;
  244.     padding-bottom: 5px;
  245.     border:none;
  246.     margin-bottom:0;
  247.     padding-top: 0px;
  248. }
  249. #sidebar ul.children {
  250.     padding-top:3px;
  251. }
  252. #sidebar ul.children li { /*-- This styles the sub categories in the hierarchy --*/
  253.     background: url(images/childbullets.png) no-repeat left top;
  254.     padding-bottom:2px;
  255. }
  256.  
  257. .box {
  258.     background: #FFF url(images/boxbg.png) repeat-x top;
  259.     padding: 20px;
  260.     border: 1px solid #CCC;
  261.     margin-bottom: 10px;
  262. }
  263.  
  264. .right {
  265.     float: right;
  266.     margin-bottom: 10px;
  267.     margin-left: 10px;
  268. }
  269. .left {
  270.     float: left;
  271.     margin-right: 20px;
  272.     margin-bottom: 5px;
  273. }