Problema con divs y css

xorcisa · #1 (**permalink**) 24/03/2011, 13:37

Hola, pretendo que un div menu (que esta dentro de un contenido) se centre dentro del div contenido y tenga una separacion superior, un margin-top. Resulta que la separacion tiene efecto, si le aplico un borde al div contenido, si le quito el borde, el div menu se pega el div contenido. No se que ocurre, os pego el codigo y espero me podrais ayudar.

index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="contenido">
<div id="menu"></div>

</div>
</body>
</html>

estilo.css:

#contenido {
background-color:#99CC66;
width:800px;
height:435px;
border:1px solid;
}

#menu{
width:750px;
height:25px;
margin:1% auto;
background-color:#000000;
}

ArielGomeX · #2 (**permalink**) 24/03/2011, 13:52

osea quieres ponerle border al menu o al Contenido... por que no entendi muy bien...

Pero creo que tu problema radica en que estas usando "%" en ves que un espacio calculado...

ejemplo:

Código:

#contenido {
background: #99CC66;
width:800px;
height:435px;
border: solid 1px #ccc;
}


#menu{
width:750px;
height:25px;
margin-top: 10px;
background: #000;
}

xorcisa · #3 (**permalink**) 24/03/2011, 14:04

Yo no quiero poner borde a nada, quiero que el div menu se centre dentro del menu contenido y se separe de la parte superior unos pixeles (margen). Si pongo borde al contenido se separa de la parte superior, si lo quito, se pegan los divs.

El margin:1% auto; el 1% he probado con pixeles y nada y el auto es para que se centre en el div contenido.

ArielGomeX · #4 (**permalink**) 24/03/2011, 14:10

OK entendido, esto te ayudara:

#contenido {
position: relative;
background: #99CC66;
width:800px;
height:435px;
border: solid 1px #ccc;
}

#menu{
position: relative;
width:750px;
height:25px;
margin: 10px auto;
background: #000;
}

xorcisa · #5 (**permalink**) 24/03/2011, 14:25

Si quito el border del primer div, no me funciona... Es decir, me funciona con el border, lo puedo dejar y ponerlo de color blanco, pero es un poco raro no?

ArielGomeX · #6 (**permalink**) 24/03/2011, 14:32

Probaste el codigo que te puse?, el border no tiene que ver nada con los margenes que le pongas....

xorcisa · #7 (**permalink**) 24/03/2011, 14:34

Cita:

Iniciado por ArielGomeX

Probaste el codigo que te puse?, el border no tiene que ver nada con los margenes que le pongas....

Si, lo he probado, si puedes pruebalo tu, o es el chrome que me hace esto que te estoy diciendo o no se que pasa...pero yo quito el borde y se me desplazan esos pixeles que le doy al margen los dos divs a la vez; pongo el borde y solo se desplaza el div menu. He probado y el explorer hace lo mismo.

ArturoGallegos · #8 (**permalink**) 24/03/2011, 14:52

Cita:

Iniciado por xorcisa

Yo no quiero poner borde a nada, quiero que el div menu se centre dentro del menu contenido y se separe de la parte superior unos pixeles (margen). Si pongo borde al contenido se separa de la parte superior, si lo quito, se pegan los divs.

El margin:1% auto; el 1% he probado con pixeles y nada y el auto es para que se centre en el div contenido.

el 1% puede llegar a ser un tamaño bastante pequeño como para ser apreciado, coloque un margen considerable para poder notar la diferencia, muy posible su problema mas que de margenes es un problema visual...

Ahora bien hay otros elementos tanto CSS como html que podrían estar interviniendo por lo que el código que nos ha mostrado resulta insuficiente... muéstrenos el código completo suficiente para poder recrear el problema o aun mejor déjenos un link a su sitio para poder apreciar mas claramente su problema.

ArielGomeX · #9 (**permalink**) 24/03/2011, 14:56

pues debe ser el doc-type, ponle el border del mismo color del Background y bajale la cantidad de pixeles que le agregaste al width y al height del DIV.

xorcisa · #10 (**permalink**) 24/03/2011, 15:17

Cita:

Iniciado por Ag666

el 1% puede llegar a ser un tamaño bastante pequeño como para ser apreciado, coloque un margen considerable para poder notar la diferencia, muy posible su problema mas que de margenes es un problema visual...

Ahora bien hay otros elementos tanto CSS como html que podrían estar interviniendo por lo que el código que nos ha mostrado resulta insuficiente... muéstrenos el código completo suficiente para poder recrear el problema o aun mejor déjenos un link a su sitio para poder apreciar mas claramente su problema.

He probado con ese codigo nada mas, y me falla, me hace lo que os he explicado. Pense que sería el resto de la pagina por lo que probe con dos divs y el html que he pegado...de ahi que no entiendo que ocurre con los divs cuando le pongo borde o no al contenido...no me lo explico.

xorcisa · #11 (**permalink**) 24/03/2011, 15:18

Cita:

Iniciado por ArielGomeX

pues debe ser el doc-type, ponle el border del mismo color del Background y bajale la cantidad de pixeles que le agregaste al width y al height del DIV.

Para que he de hacer esto?

ArturoGallegos · #12 (**permalink**) 24/03/2011, 15:40

el doctype no tiene nada que ver, aunque ciertamente nunca me había percatado de este fallo, lo que puedes hacer es incluir el borde en el elemento padre del mismo color que el background y restarle dos pixeles en ancho y alto.... o en lugar del borde puedes usar overflow:hidden;

xorcisa · #13 (**permalink**) 24/03/2011, 15:50

Cita:

Iniciado por Ag666

el doctype no tiene nada que ver, aunque ciertamente nunca me había percatado de este fallo, lo que puedes hacer es incluir el borde en el elemento padre del mismo color que el background y restarle dos pixeles en ancho y alto.... o en lugar del borde puedes usar overflow:hidden;

Es lo que he hecho. Pero soy la primera q descubre esto, jay solucion o que pasa? ajajaj me tiene intrigada!

ArielGomeX · #14 (**permalink**) 24/03/2011, 16:53

Cita:

Iniciado por Ag666

el doctype no tiene nada que ver, aunque ciertamente nunca me había percatado de este fallo, lo que puedes hacer es incluir el borde en el elemento padre del mismo color que el background y restarle dos pixeles en ancho y alto.... o en lugar del borde puedes usar overflow:hidden;

Se nota que no sabes para que silbe el doctype.

ArturoGallegos · #15 (**permalink**) 24/03/2011, 17:07

Cita:

Iniciado por ArielGomeX

Se nota que no sabes para que silbe ?¿ el doctype.

haber señor, el doctype es unicamente para indicarle a los exploradores de que forma debe interpretar el código, de esa forma conseguimos que se vea los mas parecido posible en todos o casi todos los navegadores... de no especificar un doctype el navegador trabajaría en modo quirs y aria lo que se le venga en gana..... dicho eso, creo que no tiene relación con el problema de la compañera.

si cree que estoy equivocado y/o no se para que sirve un doctype, en lugar de usar ese tipo de comentario, haga el favor iluminarme con su sabiduría y hágame ver mi error... y créame que si me da una buena explicación y me hace caer en cuenta de mi error, hasta le daré las gracias por enseñarme algo nuevo.

-----------------------------------------

por otro lado compañera xorcisa no se si sea la primera en ver este error pero si es la primera ves que yo lo veo, sera que casi siempre al div padre aplico el overflow:hidden para que tome el alto de los elementos hijo que tengan algún float: ó tiendo mas a utilizar un padding en el elemento padre para marcar ese tipo de separación.