Miguel, para decir eso mejor no digas nada, o al menos aporta algo
interesante...
Juan, así a primeras, es posible que sea simplemente porque el
contenido del div lateral es mayor? Al tener más texto tiende a tirar
hacia abajo.
En safari también lo veo igual...
------------------------------------------------
Diana Hervás Castillo
www.trozosdetiempo.net
El 13/10/2005, a las 23:03, Pixelperu escribió:
Es verdad, el que no sabe es como el que no ve... y cieguito estás.
----------------------------
Miguel Flores Franco
Pixelperu
Arte, Diseño, Web y Teletrabajo
http://www.pixelperu.com
Cel.: (1) 9330 8572 | Telf.: (1) 567 7475
MSN: [EMAIL PROTECTED]
SPYKE ID: pixelperu
----- Original Message ----- From: "juan romero cruz"
<[EMAIL PROTECTED]>
To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org>
Sent: Thursday, October 13, 2005 1:12 PM
Subject: [Ovillo] El que no sabe es como el que no ve
Es CSS me va a volver loco.
No encuentro explicacion a
http://kioscoelcoso.iespana.es/
por mas que busco
En ff y en netscape se escapa el div lateral del div contenido por
debajo, a pesar de estar anidado uno en el otro
Os pego el codigo HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
<title>LA WEB DEL INVIERNO</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link rel="stylesheet" href="estilosDesarrolloWeb.css">
</head>
<body>
<div id="contenedor">
<div id="cabecera"><img src="imagenes/cabecera.jpg" alt="la web del
invierno"></div>
<div id="navegador">
<a href="#" class="enlacenav">Portada</a> |
<a href="#" class="enlacenav">Invierno</a> |
<a href="#" class="enlacenav">Diciembre a Marzo</a> |
<a href="#" class="enlacenav">La Chimenea </a> |
<a href="#" class="enlacenav">Deportes de Inviernos</a>|
<a href="#" class="enlacenav">Contactos</a>
</div>
<div id="lateral">
<h2 class="titlat">buscar</h2>
<div id="fbuscar" class="cuerpolateral">
<form action="" method="post">
<div id="campotexto"><input type="text" name="criterio"></div>
<div id="botonbuscar"><input name="busca" type="image"
src="imagenes/go.gif" ></div>
<div class="radio" nowrap><input type="radio" name="op"
value="1">En la Web de Invierno</div>
<div class="radio"><input type="radio" name="op" value="2">En
toda la Web</div>
</form>
</div>
<h2 class="titlat">registro</h2>
<div id="registro" class="cuerpolateral">
<a href="#">registrese con nosotro</a> y obtenga muchas ventajas
</div>
<h2 class="titlat">otras informaciones</h2>
<div id="otras" class="cuerpolateral">
<ul>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Nuestra mision</a></li>
<li><a href="#">Agenda de Eventos</a></li>
</ul>
</div>
</div>
<div id="cuerpo">
<h1>Titulo de la pagina</h1>
<p>
En este articulo vamos a conocer la maquetacion de paginas de
estilo en cascada(CSS).
Veremos como realizar este tipo de maquetacion, junto con algunas
ventajas e inconvenientes
Para muchos sera todavia un campo por explorar.Aunque no vamos a
entrar en grandes detalles, vamos
a intentar dar a conocer la maquetacion con CSS para cubrir la
posible lagana por parte del lector
En capitulo sucesivos ampliaremos la informacion y ofreceremos
tutoriales mas practicos.
</p>
<p>
Como se ha podido aprender en el Manual de CSS,las hojas de estilo
en cascada ayudan a separar el
contenido de la forma, es decir...
</p>
<div id="navabajo">
<a href="#">Volver</a> |
<a href="#">Portada</a> |
<a href="#">Mapa del Sitio</a> |
</div>
</div>
</div>
</body>
</html>
el codigo CSS
/* CSS Document */
body{ background-image: url(imagenes/fondo.gif);
font:8pt;
font:Verdana, Arial, Helvetica, sans-serif;
color:#666666;
margin:20px 0px 20px 0px;
text-align:center;
}
#contenedor{
text-align:left;
width:700px;
background-color:#ffffff;
margin:auto;
}
#cabecera{
width:700px;
height:100px;
}
#navegador{
background-image:url(imagenes/fondonav.gif);
padding:3px 10px 5px 10px;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
#cuerpo{
width:480px;
margin-left:8px;
padding:12px 0px 10px 0px;
background-color:#ffffff;
}
#lateral{
width:200px;
background-color:#ebf2fe;
border-bottom:1px solid #cccccc;
border-left:1px solid #cccccc;
float:right;
}
.titlat{
background-color:#68729e;
color:#ffffff;
font-size:8pt;
text-transform:uppercase;
padding:7px 3px 7px 8px;
font-weight:normal;
letter-spacing:2px;
margin:0px 0px 8px 0px;
}
.cuerpolateral{
padding:5px 4px 13px 10px;
}
input{
font-size:8pt;
}
#fbuscar form{
margin-top:0px;
margin-bottom:0px;
}
#campotexto{
float:left;
}
#campotexto imput{
width:100px;
}
#botonbuscar{
padding-top:3px;
padding-left:106px;
}
#botonbuscar imput{
border:0px none;
}
.radio{
clear:both;
}
#otras ul{
margin:5px 10px 0px 0px;
padding:0px 0px 0px 0px;
list-style:none;
}
#otras li{
padding-left:14px;
background:transparent url("imagenes/bullet.gif")0 2px no-repeat;
margin-bottom:10px;
}
h1{
font-size:18px;
}
#navavajo{
font-weight:bold;
}
a.enlacenav a.enlacenav:VISITED a.enlacenav:ACTIVE a.enlacenav:FOCUS
a.enlacenav:LINK¨{
color:#494E6B;
}
A.enlacenav:HOVER{
color:#00CC00;
}
Seguro que algo hago mal pero... que??
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente
dirección: http://ovillo.org/mailman/listinfo/ovillo
______________________________________________ Renovamos el Correo
Yahoo! Nuevos servicios, más seguridad http://correo.yahoo.es
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente
dirección: http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
