Comunidad de diseño web y desarrollo en internet online

Problema con pequeña hoja de estilos

Citar            
MensajeEscrito el 16 Jul 2008 08:56 pm
Buenas, tengo un pequeño problema, tengo la siguiente pàgina de ejemplo en XHTML:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prototip de p&agrave;gina complexa</title>
<link href="estils.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='contenidor'>
   <div id='contingut'>
      <p>Contingut1</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ante. In ut est vel augue ullamcorper porttitor. Proin diam arcu, dictum semper, consectetuer in, tristique nec, erat. Etiam congue. Nulla at risus. Proin faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vestibulum mi nec metus. Nulla eget quam. Duis lectus tortor, ultricies id, hendrerit ac, aliquam in, nisi. Nam eros lacus, viverra tincidunt, vestibulum quis, varius id, velit. Curabitur gravida, neque aliquam tincidunt mollis, mi tortor eleifend nisi, vitae aliquam massa pede non sapien. Morbi pharetra. Vivamus tristique neque et augue. </p>
      
      <p>Sed dapibus. Sed ac tellus vitae erat ultricies malesuada. Duis eu massa non sapien aliquet adipiscing. Nulla ut justo in tellus congue porttitor. Morbi in enim. Donec interdum. Proin sodales eleifend est. Sed non est eu quam sodales ultricies. Quisque semper. Maecenas gravida purus cursus eros. Suspendisse facilisis, purus in tempor facilisis, sapien ligula vulputate diam, vitae blandit velit massa sit amet dui. Vivamus ut felis. Quisque egestas, ipsum ut pretium fermentum, turpis magna fringilla neque, nec iaculis turpis ante vel nibh. Curabitur tellus. Donec tristique, ipsum in facilisis pellentesque, erat metus ultrices enim, nec vulputate tellus pede at justo.</p> 
      
      <p>Nulla eget augue in turpis molestie convallis. Phasellus vitae nisi quis nibh adipiscing interdum. Suspendisse non leo ac elit ullamcorper convallis. Praesent id pede eget massa elementum egestas. Donec lacinia lobortis mauris. Suspendisse arcu sapien, tempor vitae, faucibus quis, aliquam sed, ante. Etiam malesuada volutpat orci. Morbi felis sem, vestibulum vitae, laoreet in, imperdiet nec, velit. Donec pellentesque pharetra ipsum. Ut porta risus eget tellus. Curabitur gravida, nulla vel vehicula facilisis, ipsum eros bibendum pede, vel gravida tortor mauris at sem. Aliquam volutpat felis quis metus. In mauris. Duis sapien turpis, ultrices ac, adipiscing non, tempor sit amet, felis.                                </p>
   </div>
   <div id='contingut2'>
      <p>Contingut2</p>
      <p>Etiam pretium nibh nec odio. Mauris fermentum dui eget velit. Aenean lacinia erat ut velit. Maecenas eu magna sit amet lorem condimentum vehicula. Donec pede tortor, rutrum sit amet, condimentum vitae, sodales at, odio. Maecenas vehicula, justo nec vestibulum molestie, turpis nibh varius magna, a lacinia ipsum justo vitae arcu. Phasellus tincidunt enim egestas erat. In porttitor lectus eu purus. Aliquam facilisis, eros nec luctus viverra, odio ante sagittis metus, quis iaculis orci risus non est. Duis dictum rhoncus neque. Aliquam nulla. Donec eget velit. Aenean luctus lacinia turpis. Proin turpis elit, volutpat quis, ultricies quis, adipiscing ac, erat. Nullam accumsan eros dignissim ligula. Ut mattis tempor felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. </p>
      
      <p>Praesent in eros eget metus dignissim faucibus. Mauris lacus. Nam risus erat, adipiscing in, facilisis vel, blandit quis, augue. Nam rutrum adipiscing risus. Aliquam erat volutpat. Nullam sed risus vitae ipsum molestie placerat. Phasellus vitae purus quis risus hendrerit dapibus. Curabitur commodo malesuada tellus. Integer vehicula. Vestibulum dolor.</p>
</div>
</body>
</html>

con su hoja de estilos:

Código :

/* CSS Document */
body {background:#EFEFEF;}
#contenidor {margin:auto; width: 700px; background:#CCCC99;}
#contingut {width:60%; float:left;}
#contingut2 {width:30%; float:right;}


Pero no sé porqué, el fondo de div#contenidor no se ve.

Cuál es el problema?

Gracias ;)

Por ferranpujol

177 de clabLevel



 

Mataró (Barcelona), España

opera
Citar            
MensajeEscrito el 16 Jul 2008 11:43 pm
Veo todo perfecto no le veo el problema a la hoja.

Por elbrujodigital

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Jul 2008 04:03 am
te explico:
cuando algo flota ya sea con float o position absolute, esta caja se despega del contendor, por tanto no hace crecer su contenedor (en este caso #contenidor)
la solución: a #contingut2 quitale el float

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 17 Jul 2008 03:04 pm
Muchas gracias, pero si quito el float a #contingut2, entonces aparece debajo de #contingut1, no en una columna a su derecha como cuando tiene float:right.


Como puedo obtener este resultado pero con el fondo?



Gracias de nuevo ;)

Por ferranpujol

177 de clabLevel



 

Mataró (Barcelona), España

msie
Citar            
MensajeEscrito el 17 Jul 2008 04:33 pm
Usa una de las medidas en pixeles o baja en 1% la medida de alguno de los contenedores.

PD: Lo vi rápido asi que puede que este equivocado.

Por Reymond

Claber

1111 de clabLevel

5 tutoriales
1 articulo

Genero:Masculino  

Mobile developer

firefox
Citar            
MensajeEscrito el 17 Jul 2008 10:24 pm
He probado, no funciona ninguna. Si el problema est como dice Inyaka, por mucho que cambie los tamaños seguiré sin obtener el fondo. Por lo tanto supongo que necessito un mètodo que no sea float para conseguir el mismo resultado.

Por ferranpujol

177 de clabLevel



 

Mataró (Barcelona), España

opera
Citar            
MensajeEscrito el 18 Jul 2008 01:08 am
div central con margen a ambos lados de un poco mas de tamaño que tus columnas las columans si las puedes flotar para que queden en la posición que quieras
¿entiendes la idea?

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 18 Jul 2008 03:55 pm
mmmm...no mucho XD

Por ferranpujol

177 de clabLevel



 

Mataró (Barcelona), España

msie
Citar            
MensajeEscrito el 18 Jul 2008 08:49 pm
Ok, sorry por la tardanza pero ya lo revise con mas calma.

Haz lo siguiente, en el codigo de CSS agrega esta linea:

Código :

.clear{clear:both;}


Y en el HTML justo donde termina tu contenedor principal agrega esta otra:

Código :

<div class='clear'></div>


Y luego me dices que tal :wink:

Por Reymond

Claber

1111 de clabLevel

5 tutoriales
1 articulo

Genero:Masculino  

Mobile developer

firefox
Citar            
MensajeEscrito el 19 Jul 2008 10:23 am
:O caray, muchas gracias.......i como es que así funciona?

Por ferranpujol

177 de clabLevel



 

Mataró (Barcelona), España

msie

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.