Hola, estoy probando unos códigos CSS que he subido a la Red, concretamente a ]iluminigoj. idomyweb.com (añadir tres www al principio, claro).. En mi ordenador los veo bien con Firefox e Internet Explorer, y en otro equipo también, pero en alguno más aparecen los siguientes fallos:
1) En la portada, el menú vertical queda prácticamente fuera de pantalla por la izquierda, y la imagen roja le pasa lo mismo por la derecha. Además, parece quedar mucho espacio libre por la parte inferior (no sé si es cosa de la publicidad que ha puesto el hosting).
2) En
Visionarios el botón de retorno
Inicio y la barra de navegación inferior se descuadran a la derecha; más aún, en dicha barra el último enlace queda bajo el primero. En la tercera página de esa sección, la tabla
Advertencia, el enlace con fondo blanco y la barra navegatoria aparecen también a la derecha.
3) Y en
Zavitilenuxo también se descuadra el menú horizontal de navegación.
Los códigos CSS son:
Portada:
<style type="text/css">
body {
background: white;
margin-top: 50px;
margin-right: auto;
margin-botom: 75px;
margin-left: auto;
}
#navlist {
position: absolute;
left: -200px;
top: 0px;
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif, navy;
background: gray;
width: 200px;
}
#navlist li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}
#navlist li a {
display: block;
padding: 0.25em 0.5em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
#navlist li a:link {color: #448;}
#navlist li a:visited {color: #667;}
#navlist li a:hover {
border-color: #FF0000;
color: #FFF;
background: #332;
}
div {
width: 750px;
position: relative;
margin-top: 70px;
}
h3 {
font-size: 16px;
font-weight: bold;
font-family: Arial;
color: black;
text-align:
justify;
text-indent: 1cm;
}
#legal {
position: absolute;
top: 380px;
left: 250px;
width: 250px;
font: bold 14px Verdana, sans-serif;
text-align: right;
margin-bottom: 40px;
}
#legal a {
color: #000000;
text-decoration: underline;
}
#auxiliar {
width: 25px;
top: 400px;
left: 350px;
background: white;
}
</style>
Visionarios:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #00FF00;
height: auto;
font-size: 76%;
margin-top: 50px;
margin-bottom: 78px;/* center navcontainer in IE5 */
}
h1 {
font-weight: bold;
font-size: 26px;
font-family: Arial;
font-color: black;
padding-top: 80px;
padding-bottom: 50px;
text-transform: uppercase;
text-align: center;
}
h2 {
font-weight: normal;
font-size: 18px;
font-family: Arial;
font-color: black;
}
#contenido {
position: relative;
width: 760px;
background-color: #F5F5F5;
text-align: justify;
text-indent: 1cm;
margin: 0 auto;
padding: 40px 60px 20px 60px;
}
#auxiliar {
width: 110px;
height: 30px;
background: #00FF00;
position: absolute;
top: 931px;
left: 861px;
margin-top:40px;
}
a.retorno {
color: #000000;
text-decoration: none;
}
a.siguiente {
color: blue;
text-decoration: none;
}
a.inicio {
color: green;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: red;
}
table {
background-color: white;
width: 55%;
border: 2px solid;
border-color: #FF0000;
cellpadding: 0px;
cellspacing: 0px;
text-align: center;
margin left: auto;
margin right: auto;
}
h4 {
font: bold, 14px Arial, sans-serif;
color: #FF0000;
margin: 10px 15px 10px 15px;
padding: 10px 18px 10px 10px;
}
#navcontainer {
margin: 0 auto;
padding-left: 25px;
position: absolute;
top: 930px;
left: 861px;
}
#navlist {
width: 100%;
padding: 1px 1px 1px;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0 auto;
border-top: 1px solid gray;
display: inline;
}
#navlist li a {
padding: 0.25em 0.5em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
width: 150px;
display: inline;
float: left;
}
#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}
#navlist li a:hover {
border-color: #FF0000;
color: #FFF;
background: #332;
}
</style>
Zavitilenuxo:
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background: #000000;
margin-top: 47px;
margin-bottom: 78px;
padding: 0;
}
#contenido {
width: 740px;
position: absolute;
left: 50%;
margin-left: -370px;
background: black;
margin-bottom: 80px;
padding-bottom: 155px;
}
h2 {
font: normal, 16px red arial, sans-serif;
text-align: justify;
text-indent: 1cm;
color: white;
}
a.externos {color: white;}
a.internos {color: blue;}
a:visited {color: purple;}
a:hover {color: green;}
a:active {color: red;}
#navcontainer {
margin: 0 auto;
padding-left: 25px;
}
#navlist {
width: 100%;
padding: 1px 1px 1px;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0 auto;
border-top: 1px solid gray;
display: inline;
}
#navlist li a {
padding: 0.25em 0.5em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
width: 150px;
display: inline;
float: left;
}
#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}
#navlist li a:hover {
border-color: #FF0000;
color: #FFF;
background: #332;
}
#auxiliar {
width: 900px;
background-color: black;
position: relative;
top: 30px;
left: -14px;
padding-top: 40px;
padding-botton: 40px;
margin-bottom: 110px;
}
</style>
¿Alguien sabe cómo puedo corregir esos fallos y que todos esos elementos indicados aparezcan centrados en todos los equipos posibles?
Gracias anticipadas y un saludo
