Tema: ¿Porqué me ocurre esto?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/03/2012, 10:45
Avatar de sergi_multimedia
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!