Corregir descuadres

[Reverberante]

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

[kseso?]

Hola Reverberante

Siento decirte que tengo la impresión que no es cuestión de cambiar un par de valores de alguna propiedad. Creo más bien que es cuestión de planteamiento general y conocimientos de css + (x)html.

Creo que sería mejor que leyeses algo al respecto antes de seguir.
Te dejo un par de enlaces:
Las Guías de Mikmoro: Primera y segunda parte.
www.librosweb.es manuales de css y xhtml

Un saludo

[lunita87]

Es muy rara tu pagina, pero bueno....

La portada:
Si le pones un -200 se te va a ir a la izquierda, quitalo.
La foto roja esta dentro de un parrafo, que es centrado, al ponerle posicion te lo cuenta desde ese centro.
Lo blanco lo veo a ratos, no se decirte.

Visionarios:
Creo que te ocupado dos lineas porque no te cabe en una, y si te queda a la derecha es porque lo has movido hacia la derecha.
A simple vista el boton de inicio esta donde le has dicho que este.
El enlace a las parte 3 no te va.
La advertencia esta donde le has dicho que este.

No se que mania con coner left y top pero estan las cosas donde dijiste que estubieran. Prueba a usar otras cosas o medir mejor las distancias.

[Reverberante]

Siento decirte que tengo la impresión que no es cuestión de cambiar un par de valores de alguna propiedad

Bueno, es obvio que falta algo por ajustar, pero pienso que si estuviese tan mal diseñado como creo que das a entender no se vería bien en ningún navegador ni resolución. Aun desde mi bisoñez, creo que no puede separarme mucha distancia -muchos cambios quiero decir- de la corrección que busco. Después de todo, la estructura no puede ser más simple: en el caso de "visionarios" y "zavitilenuxo" sólo es un bloque de texto con un enlace sobre un background y un menú horizontal debajo; se me hace extraño que centrar un enlace y un menú bajo un texto me requiera un replanteamiento total del diseño, máxime cuando los descuadres sólo son visibles en algunos equipos. Sí es cierto que hay algunos errores como el uso de la etiqueta "center"o la utilización de "id" para más de un div, pero esto no parece influir mucho, pues como digo donde se ve bien, se ve bien.
Quizás el problema esté no tanto en el CSS, sino en que he complicado más de lo debido el html, por eso preguntaba si alguien podía decirme qué debo quitar o retocar.

Es muy rara tu pagina, pero bueno....

Es que es poco menos que un tanteo para probar el código

[kseso?]

Reverberante, creo que no me supe expresar y he motivado que entiendas lo que no quise decir.
Me refiero a que carece de una estructura (un bastidor, unos contenedores generales, ...) que estructuren la página y la compartimenten (y por eso los problemas a bajas resoluciones(1024px), o que pese a enlazar hojas de estilo, tienes muchos estilos puestos en el html...
Símplemente me refería a cosas como esas, y a que creo que en estos casos, es mejor reestructurar antes de seguir creando.

Ya siento si te sentiste ofendido.

Un saludo

[Reverberante]

Ya siento si te sentiste ofendido.

No, por Dios, kseso, no me he molestado tu apreciación, sólo me ha sorprendido al creer entender que todo estaba demasiado caótico. De enfadarme, me enfadaría conmigo mismo por no dar con la solución (he probado varios cambios sin resultado positivo), o quizás por no maquetarlo a la antigua usanza, con tablas (aunque esto es casi herético decirlo en un foro de CSS). Realmente estoy fastidiado porque estoy perdiendo mucho tiempo para lograr algo tan simple (tan engañosamente simple al parecer) como centrar un menú y dos o tres cosillas más bajo un bloque de texto.

Me refiero a que carece de una estructura (un bastidor, unos contenedores generales, ...) que estructuren la página y la compartimenten (y por eso los problemas a bajas resoluciones(1024px), o que pese a enlazar hojas de estilo, tienes muchos estilos puestos en el html...

Ese tipo de indicaciones son las que ando buscando ¿Podrías concretarme algo más específico que pudiese probar en mi caso?

Un saludo y gracias por tus sugerencias

[kseso?]

O.K.
Me alegra que así sea.
Te paso unas páginas que yo tengo como interesantes para "pillar" inspiración o "bases"
Es obligado que visites el cofre de los tesoros de Mikmoro
cssplay no puede faltar en tu colección. Si tienes tiempo, te puedes tirar tódo el tiempo libre viendo sus creaciones e intentando entender el cómo lo hace.
Estructuras límpias
CSS Mania
Sidar Org, para que despejes las dudas sobre css que te puedan surgir.

Creo que por el momento tendrás para entretener un ratito.

Un saludo

[Reverberante]

Gracias Kseso; de todas formas ojalá tuviera todo el tiempo necesario para empaparme bien de toda esa información. No domino mucho el inglés (bueno, la verdad es que no lo domino ni poco ni mucho). Eso del bastidor y los contenedores generales ¿puedo aplicarlo sin empezar desde cero todo el diseño, esto es, sin desdeñar globalmente lo que tengo hecho hasta ahora?

[kseso?]

Ahí ya me pillas.
Todo depende de lo que quieras conseguir, o los destinatarios de esas páginas, o la finalidad de ella...
Y para próximos proyectos, empezar la casa por los cimientos.
Seguro que si permaneces por estos foros te va a pasar lo que a todos nos ha ocurrido, sin darte cuenta te irás haciendo con los conocimientos y los pedacitos de códigos necesarios y con experiencia para que no te meta miedo rehacerla por completo en muy poco tiempo (y con la ayuda de los usuarios )

Un saludo (y pierde el miedo a css, es lo más sencillo que te puedas imaginar y un buen hobie en mi caso)

[Reverberante]

Sí, para mí es algo fundamental, pues un diseño aparentemente tan simple me costó mucho tiempo partiendo de cero, y me urge resolver esa puñetadita del descuadre. Como decía alguien ,"no es mi intención ser fontanero, sólo necesito que mi grifo deje de gotear".

Un saludo y gracias por tu información (y por tus ánimos , que también son importantes )

[Ekbrilo]

Además de consultar esa información tan interesante que te menciona kseso, se me ocurre que podrías probar una cosa. Si te fijas un poco verás que los elementos problemáticos son los que están fuera del div principal (me refiero a las páginas de "visionarios" y "zavitilenuxo"). No soy quién para dar lecciones a nadie en un campo como el diseño CSS, pero tal vez la situación que planteas podría mejorar si incluyeras esos elementos dentro del div mayor; por ejemplo, creas otro div o una tabla con el mismo ancho de ese div grande y situado dentro de él, metes esos elementos y le das el color de fondo del body. Con suerte tal vez esto arreglase en parte el problema; y digo en parte, porque la longitud del menú horizontal excede el ancho del div, lo que podría generar nuevos quebraderos de cabeza.

Suerte y un saludo