Poner <div> en la esquina superior izquierda

Bernix · #1 (**permalink**) 08/04/2008, 10:52

Hola muy buenas a todos, tengo un problema a la hora de situar un <div> con una imagen dentro a la esquina superior izquerda. No se me encjaba y al CSS puse lo siguiente:

#links {
font-size: 11px; font-family: Verdana,Arial,Helvetica;
background-color:#0F0084;
color:#FFFFFF;
top:0px;
left:0px;
margin-top:-10px;
margin-left:0px;
padding-top:1px;
width:560px;
padding-left:230px;
}
Con IE y Firefox se ve un poco distinto. Pensaba que sin decirle nada ya se pondria en la esquina. ¿Hay otra forma de hacerlo?

Gracias

baccxus · #2 (**permalink**) 08/04/2008, 10:57

Te faltó poner "position".

Saludos

Mikmoro · #3 (**permalink**) 08/04/2008, 12:00

Si añades esto a tu css seguramente se verá igual en FF y en IE6:

* {margin: 0px;
padding: 0px;
}

Y además, efectivamente como te dice baccxus, si no pones "position" los parámetros top:0px; y left:0px; no te sirven de nada.

Si lo pones así, seguro que se te pega arriba y a la izquierda:

Cita:

* {margin: 0px; padding: 0px;
}
#links {
font-size: 11px; font-family: Verdana,Arial,Helvetica;
background-color:#0F0084;
color:#FFFFFF;
width:560px;
}

Mikel.

Bernix · #4 (**permalink**) 09/04/2008, 01:23

¿Por que el *?

Mikmoro · #5 (**permalink**) 09/04/2008, 02:46

El asterisco significa "todo", es decir, cualquierelemento, de manera que con eso lo que haces es eliminar el posible margen o padding que tienen algunos elementos de forma predeterminada. Es una buena práctica para evitar sorpresas (aunque algunas son inevitables aun así).

Mikel.

Bernix · #6 (**permalink**) 09/04/2008, 03:23

Entiendo. Igualmente en #links puedo poner el padding-top:1px; ¿no?

Muchas gracias Mikel

Mikmoro · #7 (**permalink**) 09/04/2008, 03:59

Sí, desde luego, sin problema.

Mikel.

Bernix · #8 (**permalink**) 09/04/2008, 04:27

Pero... si * es todo, no lo hara a todas las capas? yo tengo mas capas. Solo me interessa la capa de id=links.

Es lo que he estado pensando ahora, porque de momento no lo puedo probar hasta la tarde lo del *.

Mikmoro · #9 (**permalink**) 09/04/2008, 04:43

Cita:

Iniciado por Bernix

Entiendo. Igualmente en #links puedo poner el padding-top:1px; ¿no?

Pero aquí dices de ponerle el padding sólo a #links, y eso es lo que te digo que no tiene ningún problema.

La norma genérica del asterisco (*) afectará a todos los elementos, mientras un elemento no la contradiga. Si un elemento no lleva padding, pues el asterisco le dice que sea cero, pero si lleva un padding, este prevalece por encima del genérico.

Mikel.

Bernix · #10 (**permalink**) 09/04/2008, 08:35

oki oki ahora si jeje

gracias