problemas con los div y el css2

walterwn · #1 (**permalink**) 30/01/2010, 18:56

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-- pagina --</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
 
<![endif]-->
</head>
<body class="front not-logged-in one-sidebar sidebar-left">
<div id="header-region"></div>
<div id="page">
  <div id="page-inner">
    <!-- <div id="skip-to-nav"><a href="#navigation">Skip to Navigation</a></div> //-->
    <div id="header"><img src="images/cabecera.png" width="750" height="167" /></div>
    <div id="main">
        <div id="main-inner" class="clear-block with-navbar">
            <div id="content">
            <div id="content-inner"><div id="content-area"><h1>contenido </h1>
              <br /> contenido contenido<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
fin del contenido 
 
                
            </div>
            </div>
            </div>
            <div id="navbar">menu lineal de la pagina web</div>
            <div id="sidebar-left">
            <h2>menu </h2>
            <ul>
             <li>abcd </li>
             <li>abcd </li>
             <li>abcd </li>
             <li>abcd </li>
             <li>abcd </li>
            </ul>
            
            
            </div>
        
        </div>
        
        
    
    
    </div>
    <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>
  </div>
</div>
</body>
</html>

y esta es la hoja de estilo:

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
 
body, caption, th, td, input, textarea, select, option, legend, fieldset
  {
margin:0;
padding:0;
font-size:100&#37;;
background-color: white;
    font-family: Tahoma, Verdana, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
  }
 
/** block-level elements **/
  p, ul, ol, dl, pre, table, fieldset, blockquote
  {
    margin: 1em 0;
  }
ul, ol
  {
    margin-left: 0;
    padding-left: 2em;
  }
.clear-block {
display:block;
}
#header
  {
  background: url(images/fnd_header.png) no-repeat center;
  height: 167px;
  }
 
#page {
    font-size:0.875em;
    line-height:1.286em;
}
#page{
    min-width:750px;
}
#page-inner {
    margin:auto;
    width:750px;
    border: 1px solid black;
}
#skip-to-nav {
    float:right;
    font-size:0.8em;
    margin:0 !important;
}
.block {
margin-bottom:1em;
}
 
#navbar {
    float:left;
    height:3.6em;
    margin-left:0;
    margin-right:-100%;
    padding:0;
    width:100%;
    background-color: #b0c4de;
}
 
#content {
float:left;
margin-left:0;
margin-right:-100%;
padding:0;
width:100%;
background-color: #e1fff3;
}
 
#navbar {
float:left;
height:3.6em;
margin-left:0;
margin-right:-100%;
padding:0;
width:100%;
}
#main {
position:relative;
}
 
 
#sidebar-left {
float:left;
margin-left:0;
margin-right:-200px;
padding:0;
width:200px;
background-color: #ffe4e1;
}
 
#content-inner, .no-sidebars #content-inner {
margin:0;
padding:0;
}
 
.sidebar-left #content-inner {
padding-left:200px;
padding-right:0;
}
 
 
 
#header, #content, #navbar, #sidebar-left, #sidebar-right, #footer, #closure-blocks {
overflow:visible;
word-wrap:break-word;
}
 
.with-navbar #content, .with-navbar #sidebar-left, .with-navbar #sidebar-right {
margin-top:3.6em;
}
 
#navbar {
overflow:hidden;
}
#footer{
    background-color: 
}

donde esta mi error??? eso lo he visto que hacen en las paginas como drupal, me falta algun atributo ???

gracias.

walterwn · #2 (**permalink**) 30/01/2010, 19:20

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???

cristian_cena · #3 (**permalink**) 30/01/2010, 20:54

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!