Martin Szyszlican escribió:
> Trent Chandra escribió:
>
>> 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é?
>>
>>
> El problema parece ser el overflow.
> Cuando el texto es mas grande que el 60%, se cae.
> Probá con overflow: auto o overflow:hidden en ambos floats.
> Una pregunta:
> No te conviene hacer dos float:left, y en el de la derecha, poner otro
> div adentro con float:right ?
>
> Martin.
>
>> 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
>>
>>
>>
>
>
>
Hola, gracias por las sugerencias.
Probé la primera, la de cambiar los "overflow" y no me funcionó, se
comporta igual.
La segunda no te entendí bien que lo que me dices que tengo cambiar.
Muchas gracias.
Saludos, Diego.
_______________________________________________
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
