Hola compañeros! Resulta que estoy desarrollando una web con su hoja de estilos. He creado un menú deplegable horizontal en css y logrado que se vea bien en los navegadores principales, lo que el 'cuerpo' donde iran los contenidos se ve un poco distinto entre ellos.
Solo me gustaria que si alguien fuera amable y se lo currase, le echara un ojo a mi codigo para que me pueda decir en que sitios cometo errores para poder hacer correcciones... se que existen validadores, pero que mejor que un programador/diseñador en persona para resolver problemas, no¿?
weno, aqui esta el codigo css:
Código:
a {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
color:#000000;
font-size:13px;
padding-top:10em;
}
a:hover {
text-decoration:underline;
}
h1{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#333333;
font-size:24px;
}
h2{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#333333;
font-size:18px;
text-decoration:underline;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:1.1em;
color:#000000;
float:left;
text-align:center;
}
h4{
border-width:thin;
border-style:dotted;
background-color:#FFFF66;
font-size:14px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
margin-top:10px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
color:#FFF;
float:left;
}
.negrita { font-weight:bold; }
body {
background-color:#FFF;
}
#contenedor {
font-family:Arial, Helvetica, sans-serif;
background-image:url(img/web_DOA_background.jpg);
width: 800px;
height:600px;
}
#cabecera {
width:100%;
height:6.85em;
margin-bottom:1.3em;
}
html>body #cabecera_Logo {
width:8.9em;
height:6.85em;
float:left;
background-image:url(img/WebDOA_logo.png);
}
#cabecera_Logo {
width:8.9em;
height:6.85em;
background-image:url(img/WebDOA_logo.png);
float:left;
margin-top:0.7em;
margin-left:0.5em;
}
html>body #cabecera_Titol {
width:25.6em;
height:6.85em;
background-image:url(img/WebDOA_titol.png);
float:left;
}
#cabecera_Titol {
width:25.6em;
height:6.85em;
background:url(img/WebDOA_titol.png);
float:left;
}
/*---------------------------------------------*/
#menu_Principal{
width:77%;
float:left;
height:4.50em;
}
#menu {
font-size: 0.7em;
width: 100%;
position: relative;
float:left;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 {
float: left;
width: 20%;
}
#menu ul li { float: left;}
#menu ul li a {display: block;
text-decoration: none;
color:#000;
background-color: #a20000;
border-top: solid 1px #a20000;
border-bottom: solid 1px #a20000;
padding: 0px;
position: relative;
height:36px;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color:#000;
color: #a20000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;width: 458px;border: solid 1px #a20000;border-top: none;background-color: #a20000; left:6em;
}
#menu ul li ul li a {width: 100%;
border: none;
background-color: #a20000;
padding:0px 2px 0px 2px;
left:1.5em;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: 40px;}
ul.dos {left: 40px;}
ul.cuatro {left: 40px;}
/*----------------------------------------*/
#contenido {
width:44em;
background-color:#FFFFFF;
filter: alpha(opacity=70);
opacity: .7;
height:22em;
position:relative;
top:6em;
}
#contenido .text{
width:65%;
height:100%;
background-color:#F00;
float:left;
position:relative;
top:-72px;
filter: alpha(opacity=70);
}
#contenido .foto{
width:35%;
height:100%;
background-color:#333;
float:left;
position:relative;
top:-72px;
filter: alpha(opacity=70);
}
/*---------------------------------------------------*/
#credits{
width:50em;
height:1.25em;
position:relative;
top:5em;
}
#credits .credits2 {
border-right:double;
border-right-color:#333333;
padding-right:0.5em;
}
#credits .mapaweb {
border-right:double;
border-right-color:#333333;
padding:0em 0.5em 0em 0.5em;
}
el html os dejo el link aqui para que no ocupe tanto el mensaje: "http : //citmprojectes.upc.es:8080/ jaumemc / Web_DO_Alella /index_MF2.html"
(dejo espacios para que pase el link.
PD: hay una funcion javascript que sirve para cargar imagenes para los botones, es solo un comportamiento, que solo he copiado en el primer apartado del menu para que no ocupara tanto el codigo.
PD2: no entiendo porque los links del apartado '#credits' son seleccionables desde 'tan arriba' en firefox, como si tuvieran mucho padding...
gracias por vuestra ayuda y a seguir desarrollando!