4

Soy un poco novato y me ha surgido un error creando una web. La idea es crear una web con una cabecera y un menú lateral fijos. El caso es que el menú lateral se superpone con la cabecera habiéndoles puesto float:left y clear:both a ambos. He probado a ir cambiando position:fixed a absolute y a poner clear:both pero tampoco me da resultado.Así se ve ahora la web (la tengo en local, no está subida a Internet)

Dejo el código:

.top {
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 height: 64px;
 box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
    position: fixed;
    float: left;
    display: block;
}

.logo {
 height: 32px;
 width: 32px;
 padding: 15px;
 float: left;
}

.titulo {
 float: left;
}

.cd-modal-action img:hover {
 opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.cuerporec {
 display: block;
 clear: both;
}

.sidebar {
 float: left;
 position: fixed;
 clear: both;
 width: 255px;
 box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
 height:100%;
 display: block;
 left: 0px;
 color: #5b5b5b;
}

.sidebar a {
 height: 23px;
    color: grey;
    display: block;
    padding: 12px;
    text-decoration: none;
    line-height: 48px;
    border-top: 1px solid rgba(0,0,0,0.08);
    clear: both;
}

.sidebar a:hover {
 color: #ff6d00;
 background-color: #edf0f2;
}

.sidebar a:active {
 color: #ff6d00;
}

.sidebar p {
 font: 500 13px Roboto,sans-serif;
 text-transform: uppercase;
 float: left;
 padding: 0px 5px;
}


.alrededor {
 /*margin: 60px 10px 10px 255px;*/
 float: right;
 background-color: grey;
}

h2 {
 color: #444;
 font: bold 18px 'Roboto',sans-serif;
}


h1, h2, h3, h4, h5, h6, p {
 font-family: 'Roboto', sans-serif;
 padding: 10px;
 margin-top: 7px;
}

h1 {
 font-size: 25px;
 color: black;
 max-height: 60px;
}


/*ICONOS*/
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  float: left;
  padding: 0 10px;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
/*FIN ICONOS*/
<!DOCTYPE html>

<html class="no-js" lang="es-ES" prefix="og: http://ogp.me/ns#">

 <head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
   
  <title>prueba</title>
  <meta name="description" content="hola" />

  <link rel='stylesheet' id='cv'  href='file:///C:/Users/Javier/Desktop/cv%20analytics/cv.css' type='text/css' media='all' />
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
  <script src="file:///C:/Users/Javier/Desktop/cv%20analytics/modernizr.js"></script> <!-- Modernizr -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

 </head>

 <body>

  <div class="top">
   
   <div class="logo">
    <img src="file:///C:/Users/Javier/Desktop/cv%20analytics/img/ic_analytics.svg">
   </div>
   
   <div class="titulo">
    <h1>prueba</h1>
   </div>

  </div>

  <div class="sidebar">

   <div id="nav">
   
       <div class="cuerporec">

           <a href="#"><i class="material-icons">home</i> <p>Página principal</p></a>
           <a href="#"><i class="material-icons">work</i> <p>asdfa</p></a>
           <a href="#"><i class="material-icons">school</i> <p>asdfafa</p></a>
           <a href="#"><i class="material-icons">language</i> <p>asdfa</p></a>
           <a href="#"><i class="material-icons">build</i> <p>dfdfafa</p></a>
           <a href="#"><i class="material-icons">flag</i> <p>asdfaa</p></a>

           <a href="#"><i class="material-icons">email</i></a>

       </div>

   </div>

  </div>

  <div class="alrededor">
   aa 
  </div>

 </body>

</html>

Se me colapsan todos los divs, no lo entiendo. Igual es un error tonto, pero no me doy cuenta, ¿alguien me puede ayudar?

  • 3
    Yo lo veo bien, o ¿cuál es el resultado esperado? – Shaz Mar 23 '18 at 04:23
  • 2
    No sé a ti, pero a mí se me ve con la cabecera bien. Eso que se te ve a ti en la captura de pantalla no lo veo yo. – OscarGarcia Mar 23 '18 at 10:12
  • Perdón, he corregido el CSS del artículo original. Tenía puesto un "margin-top: 58px;" en ".sidebar" como parche temporal y se me había olvidado quitarlo, por eso lo veíais correcto, pero en realidad no lo está. De hecho ese "aa" que se ve en la esquina superior derecha de la página no debería estar tampoco superpuesto. – silenciovirus Mar 23 '18 at 12:16

1 Answers1

1

Ya que tu sidebar tiene un position:fixed;, establece la propiedad top para determinar una distancia entre el borde superior y tu sidebar

.sidebar {
  top:65px;
}

.top {
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 height: 64px;
 box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
    position: fixed;
    float: left;
    display: block;
}

.logo {
 height: 32px;
 width: 32px;
 padding: 15px;
 float: left;
}

.titulo {
 float: left;
}

.cd-modal-action img:hover {
 opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.cuerporec {
 display: block;
 clear: both;
}

.sidebar {
 float: left;
 position: fixed;
    top: 65px;
 clear: both;
 width: 255px;
 box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
 height:100%;
 display: block;
 left: 0px;
 color: #5b5b5b;
}

.sidebar a {
 height: 23px;
    color: grey;
    display: block;
    padding: 12px;
    text-decoration: none;
    line-height: 48px;
    border-top: 1px solid rgba(0,0,0,0.08);
    clear: both;
}

.sidebar a:hover {
 color: #ff6d00;
 background-color: #edf0f2;
}

.sidebar a:active {
 color: #ff6d00;
}

.sidebar p {
 font: 500 13px Roboto,sans-serif;
 text-transform: uppercase;
 float: left;
 padding: 0px 5px;
}


.alrededor {
 /*margin: 60px 10px 10px 255px;*/
 float: right;
 background-color: grey;
}

h2 {
 color: #444;
 font: bold 18px 'Roboto',sans-serif;
}


h1, h2, h3, h4, h5, h6, p {
 font-family: 'Roboto', sans-serif;
 padding: 10px;
 margin-top: 7px;
}

h1 {
 font-size: 25px;
 color: black;
 max-height: 60px;
}


/*ICONOS*/
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  float: left;
  padding: 0 10px;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
/*FIN ICONOS*/
<!DOCTYPE html>

<html class="no-js" lang="es-ES" prefix="og: http://ogp.me/ns#">

 <head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
   
  <title>prueba</title>
  <meta name="description" content="hola" />

  <link rel='stylesheet' id='cv'  href='file:///C:/Users/Javier/Desktop/cv%20analytics/cv.css' type='text/css' media='all' />
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
  <script src="file:///C:/Users/Javier/Desktop/cv%20analytics/modernizr.js"></script> <!-- Modernizr -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

 </head>

 <body>

  <div class="top">
   
   <div class="logo">
    <img src="file:///C:/Users/Javier/Desktop/cv%20analytics/img/ic_analytics.svg">
   </div>
   
   <div class="titulo">
    <h1>prueba</h1>
   </div>

  </div>

  <div class="sidebar">

   <div id="nav">
   
       <div class="cuerporec">

           <a href="#"><i class="material-icons">home</i> <p>Página principal</p></a>
           <a href="#"><i class="material-icons">work</i> <p>asdfa</p></a>
           <a href="#"><i class="material-icons">school</i> <p>asdfafa</p></a>
           <a href="#"><i class="material-icons">language</i> <p>asdfa</p></a>
           <a href="#"><i class="material-icons">build</i> <p>dfdfafa</p></a>
           <a href="#"><i class="material-icons">flag</i> <p>asdfaa</p></a>

           <a href="#"><i class="material-icons">email</i></a>

       </div>

   </div>

  </div>

  <div class="alrededor">
   aa 
  </div>

 </body>

</html>
Mauro Petrini
  • 1,635
  • 9
  • 16
  • 1
    Gracias! Pensaba que era incorrecto ponerle un top o un margin-top, no me había dado cuenta de que al ser fixed salen del flujo. – silenciovirus Mar 23 '18 at 14:05
  • @silenciovirus Por si te sirve para aclarar esas dudas escribí una pregunta-respuesta en relación a eso: [¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?](https://es.stackoverflow.com/questions/37930/cual-es-la-diferencia-entre-position-relative-position-absolute-y-position) – Francisco Romero Mar 24 '18 at 10:17