Foros del Web » Creando para Internet » CSS »

¿Porqué me ocurre esto?

 Estas en el tema de ¿Porqué me ocurre esto? en el foro de CSS en Foros del Web. Hola amigos, tengo un problema con el css. Veréis, en la web que os voy a poner tengo un problema con la página de "about_me". ...
  #1 (permalink)  
Antiguo 24/03/2012, 10:45
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 14 años
Puntos: 4
Pregunta ¿Porqué me ocurre esto?
Hola amigos, tengo un problema con el css.

Veréis, en la web que os voy a poner tengo un problema con la página de "about_me".

Como veréis tengo 2 cosas, una imagen y un div. Yo quiero usar el float_left, para así, de esta manera poder poner una al lado del otro, pero cada vez que uso float:left, el wrapper (el fondo blanco) desaparece...

http://s310876771.mialojamiento.es/about_me.html

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="robots" content="nofollow" />
  5.  
  6. <title>Prat Basses Luthier</title>
  7. <link rel="stylesheet" type="text/css" media="screen" href="css/pratbasses.css"/>
  8. <meta name="robots" content="noindex,nofollow">
  9.  
  10.  
  11. <link href='http://fonts.googleapis.com/css?family=Fondamento' rel='stylesheet' type='text/css'>
  12. <link href='http://fonts.googleapis.com/css?family=Forum' rel='stylesheet' type='text/css'>
  13.  
  14.  
  15. </head>
  16.  
  17. <body>
  18.     <header>
  19.         <img src="images/logo-prat-basses.png" alt="logo-prat-basses" width="130" height="130" />
  20.     </header>
  21.     
  22.     <div id="wrapper">
  23.         <nav>
  24.             <ul>
  25.                 <li><a href="index.html">Home</a></li>
  26.                 <li><a href="#">Basses</a></li>
  27.                 <li><a href="#">Friends</a></li>
  28.                 <li><a href="about_me">About Me</a></li>
  29.                 <li><a href="#">Contact</a></li>
  30.             </ul>
  31.         </nav>
  32.         <section id="about_me">
  33.             <img src="images/oscar-prat.jpg" alt="oscar-prat" width="250" height="327" />
  34.             <article>
  35.             
  36.             </article>
  37.         </section>
  38.     </div>  
  39.         
  40.     <footer>
  41.         <p>All rights reserved - Copyright 2012</p>
  42.     </footer>
  43.  
  44. </body>
  45.  
  46. </html>

Código CSS: 
Ver original
  1. /***** GENERAL *****/
  2.  
  3. * {
  4.     padding:0; 
  5.     margin:0
  6. }
  7.  
  8. html {
  9.     background-color: black;
  10.     font-size: 1em;
  11.     background: #f0b7a1; /* Old browsers */
  12. /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  13.     background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMGI3YTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkzMTQxNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  14.     background: -moz-radial-gradient(center, ellipse cover,  #f0b7a1 0%, #931414 0%, #000000 100%); /* FF3.6+ */
  15.     background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f0b7a1), color-stop(0%,#931414), color-stop(100%,#000000)); /* Chrome,Safari4+ */
  16.     background: -webkit-radial-gradient(center, ellipse cover,  #f0b7a1 0%,#931414 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
  17.     background: -o-radial-gradient(center, ellipse cover,  #f0b7a1 0%,#931414 0%,#000000 100%); /* Opera 12+ */
  18.     background: -ms-radial-gradient(center, ellipse cover,  #f0b7a1 0%,#931414 0%,#000000 100%); /* IE10+ */
  19.     background: radial-gradient(center, ellipse cover,  #f0b7a1 0%,#931414 0%,#000000 100%); /* W3C */
  20.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
  21. }
  22.     
  23. #wrapper {
  24.     margin-top: 150px;
  25.     margin-left: auto;
  26.     margin-right: auto;
  27.     width: 940px;
  28.     background-color: white;
  29.     -webkit-border-radius: 5px;
  30.     -moz-border-radius: 5px;
  31.     border-radius: 5px;
  32.     -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .6);
  33.     -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .6);
  34.     box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .6);
  35. }
  36.  
  37.  
  38. /***** HEADER *****/
  39.  
  40. header {
  41.     width: 940px;
  42.     margin: 20px auto -150px auto;
  43.     height: 150px;
  44. }
  45.  
  46. header img {
  47.     display: block;
  48.     margin: auto;
  49. }
  50.  
  51.  
  52. /***** NAVEGACIÓ *****/
  53.  
  54. nav {
  55.     float: left;
  56.     width: 100%;
  57.     height: 80px;
  58.     -webkit-box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.6);
  59.     -moz-box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.6);
  60.     box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.6);
  61.     -moz-border-radius-topleft: 5px;
  62.     -moz-border-radius-topright: 5px;
  63.     -moz-border-radius-bottomright: 0px;
  64.     -moz-border-radius-bottomleft: 0px;
  65.     -webkit-border-radius: 5px 5px 0px 0px;
  66.     border-radius: 5px 5px 0px 0px;
  67.     font-family: 'Fondamento', cursive;
  68.     font-size: 1.5em;
  69.     background: #c42727; /* Old browsers */
  70. /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  71.     background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjNDI3MjciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjYwOTA5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  72.     background: -moz-radial-gradient(center, ellipse cover,  #c42727 0%, #260909 100%); /* FF3.6+ */
  73.     background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c42727), color-stop(100%,#260909)); /* Chrome,Safari4+ */
  74.     background: -webkit-radial-gradient(center, ellipse cover,  #c42727 0%,#260909 100%); /* Chrome10+,Safari5.1+ */
  75.     background: -o-radial-gradient(center, ellipse cover,  #c42727 0%,#260909 100%); /* Opera 12+ */
  76.     background: -ms-radial-gradient(center, ellipse cover,  #c42727 0%,#260909 100%); /* IE10+ */
  77.     background: radial-gradient(center, ellipse cover,  #c42727 0%,#260909 100%); /* W3C */
  78.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c42727', endColorstr='#260909',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
  79. }
  80.  
  81. nav ul {
  82.     width: 100%;
  83.     height: 80px;
  84.     display: inline;
  85.     list-style-type: none;
  86.     padding-top: 60px;
  87.     line-height: 80px;
  88. }
  89.  
  90. nav ul li {
  91.     display: block;
  92.     }
  93.  
  94. nav ul li a {
  95.     float: left;
  96.     text-decoration: none;
  97.     width: 120px;
  98.     height: 60px;
  99.     text-align: center;
  100.     color: #fafafa;
  101.     margin-left: 55px;
  102.     text-shadow: 0px 0px 3px #969696;
  103.     filter: dropshadow(color=#969696, offx=0, offy=0);
  104. }
  105.  
  106. nav ul li a:hover {
  107.     background: #c42727; /* Old browsers */
  108. /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  109.     background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjNDI3MjciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjM2QwZTBlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  110.     background: -moz-radial-gradient(center, ellipse cover,  #c42727 0%, #3d0e0e 100%); /* FF3.6+ */
  111.     background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c42727), color-stop(100%,#3d0e0e)); /* Chrome,Safari4+ */
  112.     background: -webkit-radial-gradient(center, ellipse cover,  #c42727 0%,#3d0e0e 100%); /* Chrome10+,Safari5.1+ */
  113.     background: -o-radial-gradient(center, ellipse cover,  #c42727 0%,#3d0e0e 100%); /* Opera 12+ */
  114.     background: -ms-radial-gradient(center, ellipse cover,  #c42727 0%,#3d0e0e 100%); /* IE10+ */
  115.     background: radial-gradient(center, ellipse cover,  #c42727 0%,#3d0e0e 100%); /* W3C */
  116.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c42727', endColorstr='#3d0e0e',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
  117.     width: 120px;
  118.     height: 60px;
  119.     -moz-border-radius-topleft: 0px;
  120.     -moz-border-radius-topright: 0px;
  121.     -moz-border-radius-bottomright: 5px;
  122.     -moz-border-radius-bottomleft: 5px;
  123.     -webkit-border-radius: 0px 0px 5px 5px;
  124.     border-radius: 0px 0px 5px 5px;
  125.     -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.6);
  126.     -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.6);
  127.     box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.6);
  128.     text-align: center;
  129.     float: left;
  130.     text-decoration: none;
  131.     color: black;
  132.     margin-left: 55px;
  133.     text-shadow: 0px 0px 3px #969696;
  134.     filter: dropshadow(color=#969696, offx=0, offy=0);
  135.     -webkit-transition: color 0.3s ease-in-out;
  136.     -moz-transition: color 0.3s ease-in-out;
  137.     -o-transition: color 0.3s ease-in-out;
  138.     transition: color 0.3s ease-in-out;}
  139.     
  140. /***** FOOTER *****/
  141.  
  142. footer {
  143.     margin: auto;
  144.     width: 940px;
  145.     height: 150px;
  146.     text-align: center;
  147.     color: white;
  148.     font-family: 'Forum', cursive;
  149. }
  150.  
  151. /***** ABOUT ME *****/
  152.  
  153. section#about_me img{
  154.     margin-left: 50px;
  155.     margin-top: 50px;
  156.     -webkit-box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.2);
  157.     -moz-box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.2);
  158.     box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.2);
  159.     }
  160.     
  161. section#about_me article {
  162.     width: 400px;
  163.     height: 200px;
  164.     border: 1px solid black;
  165. }


Muchas gracias de antemano.

Saludos!
  #2 (permalink)  
Antiguo 24/03/2012, 11:50
Avatar de ryugen
Colaborador
  
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 16 años, 2 meses
Puntos: 187
Respuesta: ¿Porqué me ocurre esto?
Tu problema es el clasico problema de floats de CSS, cuando dispones de elementos flotantes dentro de una caja, esta deja de utilizar los elementos que flotan para calcular la altura, por lo tanto al flotar ambos elementos la caja desaparece ya que no contiene elementos.
Hay varios fix para este problema, como agregar debajo de tus elementos un div con la propiedad CSS "clear:both;":
Código CSS: 
Ver original
  1. .clearfix { clear:both;}
Código HTML: 
Ver original
  1. <section id="about_me" class="cf">
  2.             <img src="images/oscar-prat.jpg" alt="oscar-prat" width="250" height="327">
  3.             <article>
  4.             
  5.             </article>
  6.                          <div class="clearfix"></div>
  7.         </section>


Sin embargo la tecnica que yo utilizo es la siguiente, aplico la siguiente clase CSS al elemento padre contenedor, en tu caso la section con id "about-me"
Código CSS: 
Ver original
  1. /* For modern browsers */
  2. .cf:before,
  3. .cf:after {
  4.     content:"";
  5.     display:table;
  6. }
  7.  
  8. .cf:after {
  9.     clear:both;
  10. }
  11.  
  12. /* For IE 6/7 (trigger hasLayout) */
  13. .cf {
  14.     zoom:1;
  15. }

Entonces quedaria algo asi:
Código HTML: 
Ver original
  1. <section id="about_me" class="cf">
  2.             <img src="images/oscar-prat.jpg" alt="oscar-prat" width="250" height="327">
  3.             <article>
  4.             
  5.             </article>
  6.         </section>

La primera tecnica introduce marcado innecesario y no semántico.

Por otro lado la segunda técnica introduce CSS no valido (en el hack para IE 6 y 7), pero como solución puede ofrecerse ese estilo en una hoja de estilo proporcionada solo para aquellos navegadores
  #3 (permalink)  
Antiguo 25/03/2012, 21:55
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 9 meses
Puntos: 306
Respuesta: ¿Porqué me ocurre esto?
También puedes ponerle al contenedor padre:
Código CSS: 
Ver original
  1. estilopadre{
  2. overflow:hidden;}

saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #4 (permalink)  
Antiguo 28/03/2012, 08:09
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 14 años
Puntos: 4
Respuesta: ¿Porqué me ocurre esto?
Muchas gracias a los dos por las respuestas, siento no haber respondido antes!

He provado la técnica que me ha comentado ryugen, y me ha funcionado perfectamente!(la segunda, la que tu aplicas) Lo mismo con la técnica de C2am.

Saludos :)

Etiquetas: float
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 13:35.