Acercar elementos a los margenes del documento

crujikoki · #1 (**permalink**) 01/08/2008, 02:35

Hola,

No se si el título deja muy claro lo que quiero hacer, pero lo explico mejor por si a caso.

Lo que me sucede esque tengo un div que va a contener mi menú horizontal y será fijo. Lo que no consigo hacer es que obtenga todo el ancho del documento y que a más a más se pegue a los margenes superior y izquierdo del documento... No se si me he explicado muy bien. Para solucionar cualquier duda que tengais al respecto os adjunto el cófigo:

Código PHP:

   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
        <title>Filmoteca</title> 
        <style type="text/css"> 
             
            body 
            { 
                background-color: #000000; 
            } 
             
            h2 
            { 
                color: #FFFFFF; 
                font-family: sans-serif; 
            } 
             
            div.seleccion 
            { 
                margin-top: 150px; 
            } 
             
            .boton 
            { 
                color:white; 
                background:#638cb5; 
                /*border:0px;*/ 
                width:120px; 
                height:30px; 
            } 
 
            .menu 
            { 
                width: 100%; 
                background: #eee none; 
            } 
             
            .menu ul 
            { 
                float:left; 
                width:100%; 
                padding:0; 
                margin:0; 
                list-style-type:none; 
            } 
             
            .menu a 
            { 
                float:left; 
                width:6em; 
                text-decoration:none; 
                color:white; 
                background-color:#eee; 
                padding:0.2em 0.6em; 
                border-right:1px solid white; 
            } 
             
            .menu a:hover 
            { 
                background-color:#ff3300 
            } 
             
            .menu li 
            { 
                display:inline 
            } 
        </style> 
    </head> 
    <body> 
        <div class="menu"> 
            <ul> 
                <li><a href="#">A&ntilde;adir</a></li> 
                <li><a href="#">Consultar</a></li> 
            </ul> 
        </div>         
    </body> 
</html>

Evidentemente puedo acercar el div al margen poniéndole un margin-left negativo y listos, pero a parte de que no me parece muy elegante creo que si la resolución de la pantalla es diferente me joderá el diseño.

Otra cosa, puede ser por esto?: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

La verda que no tengo conocimientos profundos sobre el tema y por eso tengo estas dudas y quizás he dicho alguna tontería. Agradezco cualquier tipo de ayuda.

Muchas gracias de antemano!!!

Mikmoro · #2 (**permalink**) 01/08/2008, 02:38

Prueba añadiendo esto al principio de los estilos:

* {margin: 0; padding: 0;}

Puede que eso te descuadre alguna otra cosa, porque lo que hace es eliminar los márgenes y rellenos por defecto de la mayoría de los elementos.

crujikoki · #3 (**permalink**) 01/08/2008, 03:25

Eres grande tio!!!
Se me ha pegado a los margenes que ni hecho a medida. Pero ahora me pasa otra cosilla, que aun que le ponga la anchura al 100% por la derecha me queda un huequecillo muy feo... Lo podría solucuionar poniendo más pixels que el máximo de la pantalla y quitando el scroll horizontal pero también me parece poco profesionar...

Tienes/eis alguna colución para esto?
Muchas gracias!!!

Mikmoro · #4 (**permalink**) 01/08/2008, 04:10

¿Qué elemento es el que quieres poner al 100%? Si es un div, y no tiene nada raro sin ponerle width debería ocupar el 100%.
Si es el "ul", para que coja el 100% deberás añadir:

html, body {width: 100%;}

crujikoki · #5 (**permalink**) 01/08/2008, 05:40

Hola,
Gracias por responder nuevamente. Pero si no lepongo el width al div se me acorta hasta el límite del menú (del ul).

Creo que lo haré a lo cutre y listos, tampoco es tan grabe.

Saludos y muchas gracias de nuevo!

Mikmoro · #6 (**permalink**) 01/08/2008, 07:07

No creo que se te corte, pero para saberlo seguro, añade al div un borde tipo

border: solid 1px #f00

Así verás sus bordes y sabrás hasta dónde llega. Lo que creo más bien que te ocurre es que en realidad estás viendo el fondo del "ul" y no del div. Imagino.