Foros del Web » Creando para Internet » CSS »

problemas con los div y el css2

Estas en el tema de problemas con los div y el css2 en el foro de CSS en Foros del Web. como estan estoy haciendo una pagina web pero algo no me funciona bien y quisiera saber si me dan luces en esto. el hecho es ...
  #1 (permalink)  
Antiguo 30/01/2010, 18:56
 
Fecha de Ingreso: octubre-2006
Mensajes: 31
Antigüedad: 11 años, 2 meses
Puntos: 0
problemas con los div y el css2

como estan estoy haciendo una pagina web pero algo no me funciona bien y quisiera saber si me dan luces en esto.

el hecho es que el footer ni aparece y deberia estar abajo no por arriba.

esta es la pagina:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>-- pagina --</title>
  5. <link href="style.css" rel="stylesheet" type="text/css" />
  6. <!--[if lt IE 7]>
  7. <link rel="stylesheet" type="text/css" href="ie.css" />
  8.  
  9. <![endif]-->
  10. </head>
  11. <body class="front not-logged-in one-sidebar sidebar-left">
  12. <div id="header-region"></div>
  13. <div id="page">
  14.   <div id="page-inner">
  15.     <!-- <div id="skip-to-nav"><a href="#navigation">Skip to Navigation</a></div> //-->
  16.     <div id="header"><img src="images/cabecera.png" width="750" height="167" /></div>
  17.     <div id="main">
  18.         <div id="main-inner" class="clear-block with-navbar">
  19.             <div id="content">
  20.             <div id="content-inner"><div id="content-area"><h1>contenido </h1>
  21.               <br /> contenido contenido<br />
  22. <br />
  23. <br />
  24. <br />
  25. <br />
  26. <br />
  27. <br />
  28. <br />
  29. <br />
  30. fin del contenido
  31.  
  32.                
  33.             </div>
  34.             </div>
  35.             </div>
  36.             <div id="navbar">menu lineal de la pagina web</div>
  37.             <div id="sidebar-left">
  38.             <h2>menu </h2>
  39.             <ul>
  40.              <li>abcd </li>
  41.              <li>abcd </li>
  42.              <li>abcd </li>
  43.              <li>abcd </li>
  44.              <li>abcd </li>
  45.             </ul>
  46.            
  47.            
  48.             </div>
  49.        
  50.         </div>
  51.        
  52.        
  53.    
  54.    
  55.     </div>
  56.     <div id="footer"><div id="footer-inner" class="region region-footer"><div class="block"><div class="block-inner"><h1>pie de pagina</h1></div></div></div></div>
  57.   </div>
  58. </div>
  59. </body>
  60. </html>
y esta es la hoja de estilo:
Código CSS:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. body, caption, th, td, input, textarea, select, option, legend, fieldset
  5.   {
  6. margin:0;
  7. padding:0;
  8. font-size:100&#37;;
  9. background-color: white;
  10.     font-family: Tahoma, Verdana, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
  11.   }
  12.  
  13. /** block-level elements **/
  14.   p, ul, ol, dl, pre, table, fieldset, blockquote
  15.   {
  16.     margin: 1em 0;
  17.   }
  18. ul, ol
  19.   {
  20.     margin-left: 0;
  21.     padding-left: 2em;
  22.   }
  23. .clear-block {
  24. display:block;
  25. }
  26. #header
  27.   {
  28.   background: url(images/fnd_header.png) no-repeat center;
  29.   height: 167px;
  30.   }
  31.  
  32. #page {
  33.     font-size:0.875em;
  34.     line-height:1.286em;
  35. }
  36. #page{
  37.     min-width:750px;
  38. }
  39. #page-inner {
  40.     margin:auto;
  41.     width:750px;
  42.     border: 1px solid black;
  43. }
  44. #skip-to-nav {
  45.     float:right;
  46.     font-size:0.8em;
  47.     margin:0 !important;
  48. }
  49. .block {
  50. margin-bottom:1em;
  51. }
  52.  
  53. #navbar {
  54.     float:left;
  55.     height:3.6em;
  56.     margin-left:0;
  57.     margin-right:-100%;
  58.     padding:0;
  59.     width:100%;
  60.     background-color: #b0c4de;
  61. }
  62.  
  63. #content {
  64. float:left;
  65. margin-left:0;
  66. margin-right:-100%;
  67. padding:0;
  68. width:100%;
  69. background-color: #e1fff3;
  70. }
  71.  
  72. #navbar {
  73. float:left;
  74. height:3.6em;
  75. margin-left:0;
  76. margin-right:-100%;
  77. padding:0;
  78. width:100%;
  79. }
  80. #main {
  81. position:relative;
  82. }
  83.  
  84.  
  85. #sidebar-left {
  86. float:left;
  87. margin-left:0;
  88. margin-right:-200px;
  89. padding:0;
  90. width:200px;
  91. background-color: #ffe4e1;
  92. }
  93.  
  94. #content-inner, .no-sidebars #content-inner {
  95. margin:0;
  96. padding:0;
  97. }
  98.  
  99. .sidebar-left #content-inner {
  100. padding-left:200px;
  101. padding-right:0;
  102. }
  103.  
  104.  
  105.  
  106. #header, #content, #navbar, #sidebar-left, #sidebar-right, #footer, #closure-blocks {
  107. overflow:visible;
  108. word-wrap:break-word;
  109. }
  110.  
  111. .with-navbar #content, .with-navbar #sidebar-left, .with-navbar #sidebar-right {
  112. margin-top:3.6em;
  113. }
  114.  
  115. #navbar {
  116. overflow:hidden;
  117. }
  118. #footer{
  119.     background-color:
  120. }
donde esta mi error??? eso lo he visto que hacen en las paginas como drupal, me falta algun atributo ???

gracias.
  #2 (permalink)  
Antiguo 30/01/2010, 19:20
 
Fecha de Ingreso: octubre-2006
Mensajes: 31
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: problemas con los div y el css2

encontre la solucion, me gustaria que alguien me explique que es esto.
.clear-block:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

que significa el after???
  #3 (permalink)  
Antiguo 30/01/2010, 20:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: problemas con los div y el css2

Con los pseudo-elementos :before (antes) y :after (después) se puede insertar un contenido antes o después de un elemento determinado y definir el estilo del contenido insertado.

http://librosweb.es/css_avanzado/cap...d_content.html
http://www.sidar.org/recur/desdi/mcs...al/pseudo2.php
http://www.webintenta.com/los-pseudo...e-y-after.html

Saludos!

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:39.