Foros del Web » Creando para Internet » CSS »

Problema con div

Estas en el tema de Problema con div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/03/2007, 16:48
 
Fecha de Ingreso: marzo-2007
Mensajes: 347
Antigüedad: 10 años, 8 meses
Puntos: 2
Problema con div

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
  #2 (permalink)  
Antiguo 26/03/2007, 02:54
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
Re: Problema con div

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
  #3 (permalink)  
Antiguo 26/03/2007, 09:01
 
Fecha de Ingreso: marzo-2007
Mensajes: 347
Antigüedad: 10 años, 8 meses
Puntos: 2
Re: Problema con div

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
  #4 (permalink)  
Antiguo 26/03/2007, 10:59
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
Re: Problema con div

haz esto: agrega el siguiente código al final de tu hoja de estilos:
* {
margin: 0;
padding: 0;
}
  #5 (permalink)  
Antiguo 26/03/2007, 11:11
 
Fecha de Ingreso: marzo-2007
Mensajes: 347
Antigüedad: 10 años, 8 meses
Puntos: 2
Re: Problema con div

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
  #6 (permalink)  
Antiguo 26/03/2007, 11:15
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
Re: Problema con div

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)
  #7 (permalink)  
Antiguo 26/03/2007, 11:18
 
Fecha de Ingreso: marzo-2007
Mensajes: 347
Antigüedad: 10 años, 8 meses
Puntos: 2
Re: Problema con div

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:30.