DIV con Width:100% en el TOP no funciona - Problema serio

datcom · #1 (**permalink**) 04/12/2012, 12:11

Señores, expertos, ingeniueros css`s esto si es jodido:

Pego el codigo porque me supera y no eh encontrado solucion en internet
A simple vista todo barbaro el div se ajusta a la pantalla al cien x cien pero cuando achico la ventana y corro el scroll de abajo hacia la derecha se corta el div y queda sin fondo un pedazo. Miren.

Código HTML:

<html>
<head>

<style>

 body {
    font-family: Cookies, Verdana, Tahoma, Geneva, sans-serif;
    font-size:100%;
    color: #c1c1c1;
}

.contenedor {
background-color:red;
height:100%;
width:100%;
position:fixed;
margin:0;
}

#top {
width: 100%;
height: 60px;
margin: 0;
background: #0A0A0A;
text-align: center;
}

.banner {

width: 700px;
margin: 0px auto;
padding: 0 70px;
text-align: left;}

* {
margin: 0;
padding: 0;
border: none;
outline: none;
}

.menu {
float: right;
list-style: none;
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
display: block;
}

.menu li{
list-style: none;
float: left;}

.menu li a{
color: #EEE;
margin: 0 10px;
text-decoration: none;
font-weight: bold;
line-height: 60px;
}


</style>

</head>
<body>
<div id="top">
<div class="banner ">
<div style="float:left;">LOGO</div>
<div style="float:right;">
<ul class="menu">
<li><a href="#">Link a </a></li>
<li><a href="#">Link a </a></li>
<li><a href="#">Link a </a></li>
</ul>
</div>
</div>
</div>
<div class="contenedor"></div>
</body>
</html>

Hagan la prueba, achiquen el navegador y corran a la derecha. se corta .
Gracias saludos!

Pleyano · #2 (**permalink**) 04/12/2012, 16:36

Yo lo resolvería añadiendo min-width: 840px a #top, para evitar que se reduzca menos de esa cantidad. Aunque desconozco si existe una mejor forma de solucionar el problema ;)

flashmax · #3 (**permalink**) 04/12/2012, 18:03

Cita:

Iniciado por Pleyano

Aunque desconozco si existe una mejor forma de solucionar el problema ;)

Hola ....si la otra seria maquetiandola así:

Código HTML:

<html>
<head>

<style>

 body {
    font-family: Cookies, Verdana, Tahoma, Geneva, sans-serif;
    font-size:100%;
    color: #c1c1c1;
}

.contenedor {
background-color:red;
height:100%;
width:100%;
position:fixed;
margin:0;
}
.contenido {
background-color:green;
height:100%;
width:100%;
margin:0;
}

#top {
width: 100%;
height: 60px;
margin: 0;
background: #0A0A0A;
text-align: center;
}

.banner {

width: 700px;
margin: 0px auto;
padding: 0 70px;
text-align: left;}

* {
margin: 0;
padding: 0;
border: none;
outline: none;
}

.menu {
float: right;
list-style: none;
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}

.menu li{
list-style: none;
float: left;}

.menu li a{
color: #EEE;
margin: 0 10px;
text-decoration: none;
font-weight: bold;
line-height: 60px;
}


</style>

</head>
<body>
<div class="contenedor">
<div id="top">
<div class="banner "></div>
<div style="float:left;">LOGO</div>
<div style="float:right;">
<ul class="menu">
<li><a href="#">Link a </a></li>
<li><a href="#">Link a </a></li>
<li><a href="#">Link a </a></li>
</ul>
</div>
</div>
<div class="contenido">Colocar aquí el contenido para  class "contenido" Colocar aquí el contenido para  class "contenido" Colocar aquí el contenido para  class "contenido"</div>
</div>
</body>
</html>

datcom · #4 (**permalink**) 05/12/2012, 16:42

Barbaro gracias, funciona bien.