Problema con div

Francisco01 · #1 (**permalink**) 25/03/2007, 15:48

Hola, hace poco que empiezo a utilizar divs enmede tablas, y ahora mismo tengo un problema, solo con IE, con Firefox no, pero claro, tiene que ir bien con todo xD, la cuestion es que un div es mas grande de lo que deve de ser, por eso mismo el fondo que es una imagen se repite por abajo y no quiero que sea mas grande de 40px, bueno, aqui os paso el codigo:

Código:

<html>
<head>
<style type="text/css">
@import url("estilo.css");
</style>
</head>
<body>
<div id="pagina">
<div id="cabecera">
</div>
<div id="menu">
<div id="botones1">
<div id="uno"><a href="#"></a></div>
<div id="dos"><a href="#"></a></div>
<div id="tres"><a href="#"></a></div>
</div>
<div id="blanco">
</div>
<div id="formularios">
<form>
<input type="text" style="margin-right:6px; width:100px; height:20px;">
<input type="password" style="width:100px; height:20px;">
</form>
</div>
<div id="boton">
<a href="#"></a>
</div>
</div>
</div>
</body>
</html>

y este el del estilo

Código:

body {
text-align:center;
margin-top:0;
background:#000000;
font-family:Arial;
}

#pagina {
width:800px;
overflow:hidden;
margin:auto;
}

#pagina #cabecera {
width:800px;
height:80px;
background-repeat:no-repeat;
background-position:left;
background-image:url(imagenes/CB.jpg);
}

#pagina #menu {
height:40px;
clear:both;
width:800px;
background-image:url(imagenes/TX1.gif);
margin-bottom:0;
}



#pagina #menu #botones1 {
width:100px;
padding-top:10;
padding-bottom:10;
text-align:center;
height:40px;
float:left;


}

#pagina #menu #botones1 #uno {
width:20px;
height:20px;
float:left;
margin:0 0 0 10;
background:url(imagenes/IC1.gif);
background-position:0 -20;
background-repeat:no-repeat;
}

#pagina #menu #botones1 #dos {
width:20px;
height:20px;
float:left;
margin:0 0 0 10;
background:url(imagenes/IC2.gif);
background-position:0 -20;
background-repeat:no-repeat;
}

#pagina #menu #botones1 #tres {
width:20px;
height:20px;
float:left;
margin:0 10 0 10;
background:url(imagenes/IC3.gif);
background-position:0 -20;
background-repeat:no-repeat;
}

#pagina #menu #botones1 #uno a {
width:20px;
height:20px;
float:left;
background:url(imagenes/IC1.gif);
background-repeat:no-repeat;
}

#pagina #menu #botones1 #dos a {
width:20px;
height:20px;
float:left;
background:url(imagenes/IC2.gif);
background-repeat:no-repeat;
}

#pagina #menu #botones1 #tres a {
width:20px;
height:20px;
float:left;
background:url(imagenes/IC3.gif);
background-repeat:no-repeat;
}

#pagina #menu #botones1 #uno a:hover {
background-image:none;
}

#pagina #menu #botones1 #dos a:hover {
background-image:none;
}

#pagina #menu #botones1 #tres a:hover {
background-image:none;
}
#pagina #menu #blanco {
width:430px;
background-image:url(imagenes/TX2.gif);
background-repeat:repeat-x;
height:40px;
float:left;
}

#pagina #menu #formularios {
width:230px;
height:40px;
padding:10 0 10 0;
float:left;
background-image:url(imagenes/TX2.gif);
background-repeat:repeat-x;
}

#pagina #menu #boton {
width:20px;
height:20px;
margin:10 10 10 10;
float:left;
background-repeat:no-repeat;
background:url(imagenes/IC4.gif);
background-position:0 -20;
}

#pagina #menu #boton a {
width:20px;
height:20px;
float:left;
background-repeat:no-repeat;
background:url(imagenes/IC4.gif);
background-position:0 0;
}

#pagina #menu #boton a:hover {
background-image:none;

}

Espero que me puedan ayudar

jesusbet · #2 (**permalink**) 26/03/2007, 01:54

más datos... explica qué div quieres que sea exacto... quieres altura exacta o anchura exacta?

para que el fondo no se repita puedes usar la propiedad:
#tuDiv {
background-repeat: none;
}

en vez de none puede ser repeat-x o repeat-y, dependiendo del eje en que quieras que se repita.

También tienes las propiedades height que te definen el alto específico, recuerda que para IE6, el padding aumenta el tamaño de tu div.

Saludos

Francisco01 · #3 (**permalink**) 26/03/2007, 08:01

el div que quiero que sea exacto es menu, y quiero que sea exacto en altura y anchura, y lo de que no se repita ya lo sabia, pero aunque no se repita el div ocupa y claro al poner otro div debajo no me deja pegarlo completamente y se queda el espacio que ocupa de mas.

Un saludo y gracias

jesusbet · #4 (**permalink**) 26/03/2007, 09:59

haz esto: agrega el siguiente código al final de tu hoja de estilos:
* {
margin: 0;
padding: 0;
}

Francisco01 · #5 (**permalink**) 26/03/2007, 10:11

Funciono, muchas gracias, pero tengo una duda, por que como no se lo que hace el * me a parecido como magia, que hace el *??

Un saludo

jesusbet · #6 (**permalink**) 26/03/2007, 10:15

el * se llama selector universal (de hecho se usa en todo el mundo de la informática como selector universal).

En este pedacito de código CSS, lo que hace es eliminar el padding y margin de TODOS los elementos, por lo que tendrás que definir los margin de los párrafos de ahora en adelante, es mejor trabajar así, resetear los padding y margin con ese selector y luego asignarlos uno por uno (a los que necesites)

Francisco01 · #7 (**permalink**) 26/03/2007, 10:18

Lo que suponia, esque yo pensaba que todo tenia como predeficino margin 0 y padding 0 menos lo del body, gracias por el cursillo xD.

Un saludo