Tamaño absoluto y relativo

soy_nicanor · #1 (**permalink**) 30/08/2012, 10:10

Tengo este codigo

Código CSS:

Ver original<style type="text/css">
#contenedor
{
    background-color:#FFFF00;
    border:solid 1px #000000;
    width:100%;
    height:400px;
}
#contenido
{
    background:#CCCCCC;
    width:800px;
    height:100px;
}
</style>

Código HTML:

Ver original<div id="contenedor"> 
<div id="contenido"> 
Hola Mundo
</div> 
</div>

pagina normal se ve asi

Mi problema es cuando maximizo el zoom del navegador,
el div contenido se pasa al div contenedor.

Se veo feo Como lo arreglo

flashmax · #2 (**permalink**) 30/08/2012, 11:14

El problema es que el contendor lo estas trabajando en porcentaje y el contenido en px.
prueba cambiando los valores de #contenido width:800px; por width:80%;

soy_nicanor · #3 (**permalink**) 30/08/2012, 11:21

Gracias flashmax Si funca

Pero El #contenido quiero que tenga un tamaño fijo

Ejemplo 800px es un tamaño estatico

flashmax · #4 (**permalink**) 30/08/2012, 12:17

ok porque quieres tener el contenedor al 100%?

soy_nicanor · #5 (**permalink**) 30/08/2012, 13:05

Cita:

Iniciado por flashmax

ok porque quieres tener el contenedor al 100%?

Quiero maquetar una pagina web algo asi

#contenedor tiene un ancho relativo 100%
Columna 2 Tiene una ancho estatico 800px

soy_nicanor · #6 (**permalink**) 30/08/2012, 17:51

umm? No logro entender

flashmax · #7 (**permalink**) 30/08/2012, 18:25

si me equivoco que alguien me corrija, si trabajas con el contenedor al 100% debes respetar los demás div con porcentaje si no cuando redimenciones el navegador no se redimencionaran! los div con width en px

soy_nicanor · #8 (**permalink**) 30/08/2012, 18:46

Me surge otro problema

Es to es mi codigo

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<style type="text/css">
.header
{
    background-color:#FFFF00;
    border:solid 1px #000000;
    width:100%;
    height: auto;
    text-align: center;
}
.contenido
{
    background:#CCCCCC;
    width:950px;
    height: auto;
}
</style>
 
<body>
 
<div class="header"> 
<h1>
Lo de la pagina
</h1>
</div>
<div class="contenido"> 
Finalmente al pie le damos también anchura,altura y color de background, y le añadimos la propiedad clear con el valor left, cuyo significado es no permitir elementos flotantes por la izquierda de este elemento. Por tanto el pie aparecera en una línea nueva, debajo del menu lateral y el contenido.
Finalmente al pie le damos también anchura,altura y color de background, y le añadimos la propiedad clear con el valor left, cuyo significado es no permitir elementos flotantes por la izquierda de este elemento. Por tanto el pie aparecera en una línea nueva, debajo del menu lateral y el contenido.
Finalmente al pie le damos también anchura,altura y color de background, y le añadimos la propiedad clear con el valor left, cuyo significado es no permitir elementos flotantes por la izquierda de este elemento. Por tanto el pie aparecera en una línea nueva, debajo del menu lateral y el contenido.
</div> 
 
</body>
</html>

El problema esta cuando maximizo

Esto una pagina normal con un zoom de 100%

Y esta es cuando maximizo a un zoom de 255%

Por que el .header no se maximiza cuando maximizo

soy_nicanor · #9 (**permalink**) 30/08/2012, 19:23

Otro problema es esto

Código CSS:

Ver original<style type="text/css">
.header
{
    background-color:#FFFF00;
    border:solid 1px #000000;
    width:30%;
    height: auto;
    text-align: center;
}
.contenido
{
    background:#CCCCCC;
    width:950px;
    height: auto;
}
</style>

Por favor ayudenme

de antemano gracias por la ayuda

soy_nicanor · #10 (**permalink**) 02/09/2012, 16:21

Cita:

Iniciado por flashmax

si me equivoco que alguien me corrija, si trabajas con el contenedor al 100% debes respetar los demás div con porcentaje si no cuando redimenciones el navegador no se redimencionaran! los div con width en px

Yo creo que Dentro de un contenedor 100% siempre existira un contenido de tamaño fijo como por ejemplo 90px

soy_nicanor · #11 (**permalink**) 03/09/2012, 11:09

alguien sabe bien del tema se lo agradeceria

memoadian · #12 (**permalink**) 03/09/2012, 18:36

Creo que el problema es lo de hacer zoom a la pantalla, si no tienes experiencia maqutando, mucho menos podrás dvertir todos los problemas que vienen al hacer zoom, tienes demasiadas dudas, tantas que hasta sería un error decirte que usaras media querys, por que aunque parecen simples pueden darte más dolores de cabeza.