DIVs dentro de Divs

**experimentator** · 31/03/2007, 18:51

Hola de nuevo, estoy intentando hacer una página web y que se vea bien en firefox e iexplorer. Lo que quiero es que se vea, por el momento y poco a poco, algo así:

El siguiente paso que he querido hacer es que cada uno de los diferentes enlaces del menú de la izquierda este dentro de un DIV. Con el firefox no he tenido mucho problema y he conseguido algo así:

He cambiado los colores para identificar mejor cada DIV. En el fichero css lo he hecho de esta forma:

Código:

/* --- MENÚ --- */

#marco_menu_1 {
background-color: red;
width: 114px;
margin: 2px 2px 2px 0px;
padding: 1px 2px 2px 1px;
float: left;
}

#marco_menu_2 {
background-color: #C0C0C0;
width: 111px;
padding: 1px 2px 2px 1px;
}

#marco_menu_3 {
background-color: #999999;
width: 108px;
padding: 0px 2px 2px 0px;
}

#menu {
width: 106px;
border: #33FF33 1px solid;
text-align: left;
}

#presentacion {
background-color: red;
width: 86px;
padding: 10px 10px 5px 10px;
}

#servicios {
background-color: #CC66CC;
width: 86px;
padding: 5px 10px 5px 10px;
}

#referencias {
background-color: #99FFFF;
width: 86px;
padding: 5px 10px 5px 10px;
}

#articulos {
background-color: #FFCC99;
width: 86px;
padding: 5px 10px 5px 10px;
}

#links {
background-color: #99FF99;
width: 86px;
padding: 5px 10px 10px 10px;
}

#contacto {
background-color: #FFCC66;
width: 86px;
padding: 10px 10px 10px 10px;
}

/* --- fin de MENÚ --- */

Tengo que decir que algunas líneas de comando las introduzco dobles para que las puede interpretar firefox e iexplorer correctamente, por ejemplo en el DIV del logotipo:

Código:

/* --- LOGO --- */

#marco_logo_1 {
background-color: red;
width: 798px;
_width: 796px;
margin: 0px 0px 2px 0px;
padding: 1px 2px 2px 1px;
}

#marco_logo_2 {
background-color: #C0C0C0;
width: 795px;
_width: 793px;
padding: 1px 2px 2px 1px;
}

#marco_logo_3 {
background-color: #999999;
width: 792px;
_width: 790px;
padding: 0px 2px 2px 0px;
}

#logo {
background-color: white;
width: 790px;
_width: 790px;
border: #666666 1px solid;
}

/* --- fin de LOGO --- */

Pues ahora bien, cuando introduzco en el DIV de menú los diferentes subDIVs para los diferentes enlaces iexplorer me revienta la página (los colores están cambiados):

Llevo ya varias semanas con este problema y salgo del callejón sin salida. Al principio pensé que podía ser cosa de los margin, border y padding, que cada uno lo interpreta de una manera diferente, pero esto no me ha llevado a ningún sitio. De lo único que me he dado cuenta es que en hora que introduzco un DIV para un enlace dentro del DIV menú se me deshace todo.

¿Alguna sugerencia? Gracias

**labrujidesigns** · 31/03/2007, 19:07

A mi las divs tb me cuesta mucho controlarlas y que luzcan tal como yo quiero así que al final lo que he hecho es poner divs dentro de tablas y así parece que consigo que no se me despirule la página

**experimentator** · 31/03/2007, 19:32

Iniciado por labrujidesigns

A mi las divs tb me cuesta mucho controlarlas ...

Pero si con el firefox me funciona perfectamente porqué con el iexplorer no puede funcionar igual.

**solidaria** · 31/03/2007, 20:48

El gran dilema de todos los webmasters :?

Por qué no pruebas a meter todo el contenido en un div contenedor?
lo del menú, por qué no pruebas a hacerlo con listas?

Yo no tengo mucha idea de hojas de estilos pero yo lo haría algo así, a ver que te parece:

Código:

<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style>
<!--
body {background-color:#BBD5D7; }

/* --- CABECERA --- */
#cabecera { width:714px;; 
			height:auto; 
			padding:1px;
			background-color:#CCCCCC;
			border:1px #333333 double; 	}

/*------MENU ----*/
#menu {width:114px;
		height:auto;
		margin:20px 0 0 0;
		padding:0;
		float:left; /*que flote a la derecha*/
		background-color:#FFFFFF;
		text-align:left;
		border:1px #333333 dashed;}
#menu ul { margin:0; /* margen de la caja a la viñeta */
			padding:0;
			list-style:none; /* no viñetas */
			text-align:left;}
#menu li{ margin:0; 
		padding:1px;
		list-style:none; 
		text-align:left;}
			
			li a.uno {background-color:#FF0000; display:block; widht:100%; margin:0;}
			li a.dos {background-color:#00FF00; display:block; widht:100%; margin:0;}
			li a.tres {background-color:#0000FF; display:block; widht:100%; margin:0;}
			li a.cuatro{background-color:#FFFF00; display:block; widht:100%; margin:0;}

/*------------CONTENIDO--------*/
#contenido { float:left;
			width:580px;			
			height:auto;
			margin:20px 0 0 10px;
			padding:5px;
			background-color:#FFFFFF;
			text-align:left; 
			border:1px #666666 dashed;}
-->
</style>
</head>

<body>
<div id="cabecera">LOGOTIPO AQU&Iacute; </div>
<div id="menu">
  <ul>[*]menu
	[*]menu2[*]menu3[*]menu4[/list]</div>
<div id="contenido">
  

texto texto texto texto texto texto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto textotexto texto texto texto texto</p>
  

</p>
  

</p>
  

</p>
  

</p>
  

 "</p>
</div>


</p>
</body>
</html>

si quieres que te centre en todos los navegadores, añade al body text-align:center y mételo todo en un div contenedor.

**experimentator** · 01/04/2007, 11:24

Iniciado por solidaria

Por qué no pruebas a meter todo el contenido en un div contenedor?

Perdona, pero es que soy un poco lego en estos temas, ¿qué es un div contenedor? Supongo que te referirás a un div que contenga al resto de los divs de la página.

En el ejemplo no he copiado todo el css para no complicarlo y centrarme más en el problema. En realidad la estructura del css se parece más a esto

Código:

body {
background-color: #000099;
text-align: center;
}

#fondo {
background-color: #F0F0F0;
background-position: center;
width: 800px;
margin: auto;
padding: 4px 4px 4px 4px;
text-align: center,
}

/* --- LOGO --- */

.
.
.

/* --- fin de LOGO --- */

/* --- MENÚ --- */

.
.
.

/* --- fin de MENÚ --- */

/* --- TEXTO --- */

.
.
.

/* --- fin de TEXTO --- */

/* --- PIE --- */

.
.
.

/* --- fin de PIE --- */

Y luego en el html los diferentes divs del LOGO, MENÚ, TEXTO y PIE están contenidos dentro del div FONDO. Más o menos así:

Código:

<body>



<div id="fondo">



<div id="logo">


LOGO</p>
</div>





<div id="menu"

<div id="presentacion">
<p1>Presentación</p1>
</div>

.
.
.

</div>





<div id="texto"




Bla, bla, bla...
</p>

</div>





<div id="pie">

<div id="URL">
<p2>Home URL: http://www.miweb.es</p2>
</div>

.
.
.

</div>



</div>



</body>

</html>

Mi intención de separar los enlaces del MENÚ en divs es para luego poder modificar las características del texto y el fondo de los enlaces del MENÚ al pasar por encima el ratón, seleccionarlos, etc.

Voy a probar con las listas a ver que saco en claro.

Gracias

hq · 02/04/2007, 14:29

Una opción es usar "Float", eso si, en el momento que lo uses en un div, tendrás que hacerlo seguramente en más de uno de los que estén dentro del mismo "contenedor" (así consigues que las diferencias entre Firefox e IE no se aprecien visualmente).

Para que eches un ojo:

www.brico-ayuda.wbeh4u.com

Espero que te sirva

**experimentator** · 02/04/2007, 16:00

Aparte de mis problemas con firefox e iexplorer, tengo los problemas añadidos de que no soy un experto en esto, voy aprendiendo conforme voy probando, y no me sobra nada de tiempo. A ver si estos días de vacaciones saco algo de tiempo y con vuestros consejos reestructuro un poco la página.

Gracias y un saludo

PD: hq, no consigo abrir tu enlace.