Hola lista.
Estoy desarrollando una CSS y hace días que estoy varado en un problema
que no consigo solucionar.
Dicha CSS tiene una parte principal que flota a la izquierda y otra que
lo hace a la derecha. La presentación en los navegadores es correcta,
pero cuando se amplia desde el navegador, el tamaño del texto la sección
flotante de la derecha pasa debajo de la sección que flota a la
izquierda. He usado porcentajes justamente para que cuando ello ocurra
mantenga las proporciones, pero no he podido solucionar el tema que deje
de flotar a la derecha y lo envíe debajo. Estando las medidas expresadas
en 'em' y en '%' ¿no debería guardar las proporciones y mantenerse
flotando a la derecha? Además, los porcentajes expresados no son los que
veo representados, las suma de ellos debe ser menos al 100%, ¿no
entiendo el porqué?
En este mensaje he puesto al CSS y el XHTML usado.
Muchas gracias a todos por su tiempo.
Saludos, Diego.
-------------------------------------------------------------------------
***CSS***
-------------------------------------------------------------------------
* {
border: 0;
margin: 0;
padding: 0;
}
body {
width: 100%;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#contenedor {
width: 780px;
margin: 0 auto; /*centrar contenedor en body */
padding-top: 2em;
text-align: left;
}
#cabecera {
background-color: White;
color: Black;
margin-top: 1em;
margin-bottom: 1em;
}
#logo {
position: relative;
width: 480px;
height: 90px;
}
#cuerpo {
width: 780px;
left: 50%;
}
#principal {
float: left;
width: 60%;
display: inline;
padding: 1em;
overflow: auto;
}
.laterales {
float: right;
width: 12em;
display: inline;
margin-top: 2em;
padding: 1em;
overflow: auto;
background-color: #FAFAD2;
color: Black;
}
.cola {
float: left;
width: 6em;
margin-bottom: 2em;
font-size: 0.9em;
}
.colb {
float: right;
width: 6em;
margin-bottom: 2em;
font-size: 0.9em;
}
#principal p {
font-size: 0.9em;
/*margin: 0.3em 0;*/
text-indent: 2em;
/*letter-spacing: 0.1em;*/
/*word-spacing: 0.1em;*/
/*line-height: 2em;*/
line-height: 1.5em;
margin-top: 2em;
margin-bottom: 2em;
}
#principal p:first-letter {
float: left;
font-size: xx-large;
}
p {
font-size: 0.8em;
margin: 0.3em 0;
}
/*
#principal p:before {
line-height: 4em;
}
#principal p:after {
line-height: 12em;
}*/
a:link {
color: #1e90ff;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted #2f5dde;
}
a:visited {
color: #005fbb;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted #2f5dde;
}
a:hover {
color: #000;
border: 0;
text-decoration: underline;
}
a:focus {
background: #f9f7f4;
color: #cc0000;
}
a:active {
background: #f9f7f4;
color: #000;
border: 0;
text-decoration: underline;
}
.frase {
clear: both;
margin-top: 1em;
margin-bottom: 1em;
padding: 1em;
font-weight: bolder;
background-color: Aqua;
color: White;
width: 80%;
}
-------------------------------------------------------------------------
***XHTML***
-------------------------------------------------------------------------
<!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"; xml:lang="es">
<head>
<title>Sitios ....</title>
<meta name="description" content="Desarrollo y diseño de ..." />
<meta name="keywords" content="diseño, desarrollo,
accesibilidad, usablidad, xhtml, css, diseño corporativo" />
<link rel="shortcut icon" href="sitcol.ico" type="image/x-icon" />
<meta http-equiv="content-type" content="application/xhtml+xml;
charset=iso-8859-1" />
<!--<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />-->
<link rel="stylesheet" href="sitcol.css" type="text/css"
media="all" />
</head>
<body>
<div id="contenedor">
<div id="cuerpo">
<div id="principal">
<div id="cabecera">
<img src="sitcol.png" alt="Sitios ..."
width="480" height="90" id="logo" />
</div>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nam sem. Suspendisse sollicitudin.
......</p>
<p>Mauris nec ipsum et erat nonummy ultricies. Nulla
lobortis. Curabitur adipiscing leo et purus. Vivamus
nec sem..........</p>
<p>Pellentesque vehicula, augue ut lacinia blandit,
turpis magna semper eros, at tincidunt erat massa a
lacus. ............</p>
</div>
<div class="laterales">
<div class="cola">
<p>Lorem Pellentesque vehicula, augue ut lacinia
blandit, turpis magna semper eros,
at tincidunt erat massa a lacus. Proin ultrices
condimentum ipsum. Sed vehicula
lorem at lacus. In consectetuer interdum diam.
Praesent eget sapien.</p>
</div>
<div class="colb">
<p>Ipsum Pellentesque vehicula, augue ut lacinia
blandit, turpis magna
semper eros, at tincidunt erat massa a lacus.
Proin ultrices condimentum ipsum. Sed
vehicula lorem at lacus. In consectetuer
interdum diam. Praesent eget sapien.</p>
</div>
<div class="frase">
<a href="/diecol.html" accesskey="a" title="este
enlace .....">Este enlace es una prueba</a></p>
</div>
<div class="frase">
<q
cite="http://www.ejemplo.com/trabajosamorperdido";>
¡Recompensa! ¡Oh! Esa es la palabra latina para
tres peniques.
William Shakespeare (Trabajos de amor perdido).</q>
</div>
</div>
</div>
</div>
</body>
</html>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
