Llevo un tiempo leyendo este foro desde que decidí cambiar el diseño para hacer mi web en CSS (Lenguaje del cual conozco poco). El caso es que despues de probar con el diseño y seguir algunos pasos que he leido aquí, he llegado a un punto en el que se me plantean varios problemas.
Por si es mas facil, la direccion donde está la muestra de este diseño que estoy haciendo es: w w w. todoestopa. com/PRUEBA/10.html (No me deja poner el enlace directo
)La primera cosa es que el diseño se ve bien (exceptuando algunas cosas que me gustaria cambiar que luego ya explicaré) en Internet Explorer, pero con el Mozilla Firefox, no se porqué motivo, me salen algunas cosas desfiguradas respecto al diseño. Además, los fondos de los menus, de la barra superior y del pie de pagina, no se por qué, pero no aparecen
No se si es que hay algo del diseño que está mal hecho, o que hay que modificar algo para que se vea bien para ambos navegadores.
Lo segundo es que dentro del "diseño que se ve bien", en Explorer, también hay alguna cosa que no me sale tal y como yo quiero:
Lo que yo busco es que los menus laterales se ajusten respecto al texto que hay en el div central. Es decir, que según el texto que haya en el central, los menús vayan hasta ese punto. Lo mismo que los dos divs de bajo, quiero que se situen justo después de que en el div central acabe el texto. Sin embargo, ahora mismo, los menus y los divs de bajo están muy por debajo de donde acaba el texto del div central, sin saber porqué.
Por si resulta mas facil, aqui os dejo los codigos del CSS:
Código PHP:
/* CSS Document */
body {
margin-left: 2px;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 4px;
background-color: #300C06;
scrollbar-track-color:#2F0C06;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-3dlight-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-arrow-color:#ff9900;
scrollbar-face-color:#170104;
font-family:"Comic Sans MS";
}
#todo {
width: 100%;
height: 100%;
margin: auto;
text-align: center;
}
#cuerpo {
background-color: #300C06;
font-family:"Comic Sans MS";
width: 100%;
height: 100%;
margin: auto;
}
#centro {
background-image: url(imagenes/fondos/fondo.gif);
width: 100%;
height: 100%;
}
#central {
width: 100%;
height: 100%;
}
#barranavegacion {
background-color: #300C06;
height:23px;
background-image: url(menu css/barranavegacion.gif);
text-align:left;
}
#publicidad {
text-align:center;
width: 100%;
height:auto;
}
#menui {
float: left;
width: 118px;
height: 100%;
background-image: url(menu css/menu2.gif);
background-attachment: fixed;
background-color: #300C06;
text-align:center;
}
#menud {
float: right;
width: 118px;
height: 100%;
background-image: url(menu css/menu2.gif);
background-attachment: fixed;
background-color: #300C06;
text-align:center;
}
#cabecera {
background-image: url(imagenes/fondos/banner-.gif);
background-color: #2d0c05;
background-position:center;
background-repeat:no-repeat;
width: 100%;
height:85px;
}
#pie{
background-color: #300C06;
color: #FF9900;
font-family:"Comic Sans MS";
font-size:12px;
font-weight:bold;
text-align: center;
width:auto;
height:auto;
float:inherit;
background-image: url(menu css/barranavegacion.gif);
}
.menu { font-size : 13px; color : #FF9900 }
a.menu:link { text-decoration: none; color : #FF9900; }
a.menu:visited { text-decoration: none; color : #FF9900; }
a.menu:active { text-decoration: underline; color : #ffcc33; }
a.menu:hover{ text-decoration: underline; color : #ffcc33; }
.barranavegacion { font-size : 14px; color : #FFFF33 }
a.barranavegacion:link { text-decoration: none; color : #FF9900; }
a.barranavegacion:visited { text-decoration: none; color : #FF9900; }
a.barranavegacion:active { text-decoration: underline; color : #ffcc33; }
a.barranavegacion:hover{ text-decoration: underline; color : #ffcc33; }
Código HTML:
<html> <head> <link href="css-.css" rel="stylesheet" type="text/css"> </head> <body> <div id="todo"> <div id="cabecera"></div> <div id="cuerpo"> <div id="menui" class="menu"><a href="enlace.html"></a> <p class="menu"><a href="descargas/descargas.htm" target="principal"></a></p> <p class="menu"><a href="enlace.html" class="menu">Enlace</a></p> <p class="menu"><a href="enlace.html" class="menu">Enlace</a></p> <p class="menu"><a href="enlace.html" class="menu">Enlace</a></p> <p class="menu"><a href="enlace.html" class="menu">Enlace</a></p> <p class="menu"><a href="enlace.html" class="menu">Enlace</a></p> <p class="menu"><a href="enlace.html" class="menu">Enlace</a></p> </div> <div class="menu" id="menud"> <p><a href="enlace.html" class="menu">Enlace</a></p> <p><a href="enlace.html" class="menu">Enlace</a></p> <p><a href="enlace.html" class="menu">Enlace</a><a href="enlace.html" class="menu"></a></p> <p><a href="enlace.html" class="menu">Enlace</a></p> <p><a href="enlace.html" class="menu">Enlace</a></p> <p><a href="enlace.html" class="menu">Enlace</a></p> </div> <div class="barranavegacion" id="barranavegacion"><a href="../home.htm" target="_parent" class="barranavegacion">Home</a>><a href="categoria1.htm" class="barranavegacion">Categoria 1</a>><a href="seccion1.htm" class="barranavegacion">Sección 1</a>>Sección</div> <div id="central"> <div id="centro"> <p>texto de prueba </p> <p></p> </div> <div id="publicidad"><img src="publicidad.jpg"></div> <div class="menu" id="pie">Pie de pagina </div> </div> </div> </div> </body> </html>
Gracias de antemano
