Sobre el ancho de página ...

Luciérnaga · 30 Abr 2011, 11:38 · Solicitar retirada

Bien, hoy me encuentro con un problema que no soy capaz de resolver, y es sobre el ancho de la página (800px) que sobresale de esta medida y no doy con la solución por más que leo el manual y demás ...
[contenido no disponible]
Uploaded with ImageShack.us

Veamos, en el código del archivo estilos.css tengo puesto lo siguiente:
* {margin:0px;padding:0px;border:0px}
body {background-color:#90EE90;text-align:center}
img {border-style:none}
p {text-align:justify}
.centrado {text-align:center}
h1 {font-size:1.2em;color:blue;font-weight:bold;text-decoration:underline;text-align:center}
h2 {font-size:1.1em;color:blue;font-weight:bold;text-decoration:none;text-align:center;}
h3 {font-size:1.2em;color:brown;font-weight:bold;text-decoration:underline;text-align:center}
h4 {font-size:1.0em;color:green;font-weight:bold;text-decoration:none;text-align:left;text-indent:15px;}
#global {width:800px;margin:5px 5px 5px 5px;}
#curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden}
#cabecera {background-color:white;border-left:black 1px solid;border-right:black 1px solid;height:25px}
#logotipo {background-color:silver;border-left:black 1px solid;border-top:black 1px solid;border-right:black 1px solid;width:200px;padding-top:15px;float:left;height:85px}
#publicidad {background-color:pink;border-right:black 1px solid;border-top:black 1px solid;width:600px;padding-top:30px;float:right;height:85px}
#navegacion {background-color:white;border:black 1px solid;height:20px}
#navegacion li {float:left;list-style:none;margin:0px 55px 0px 55px}
#navegacion ul {margin-left:50px}
#contenido {background-color:orange;width:800px;float:left;border-left:black 1px solid;border-right:black 1px solid;padding-top:10px;font-family:arial;font-size:0.8em}
#contenido p {margin:0px 8px 10px 8px}
#menu {background-color:yellow;width:150px;float:left;text-align:left;margin:3px 10px 3px 3px;background-image:url(objetos/menu-parte-inferior.gif);background-position:bottom;padding-bottom:7px}
#menu li {list-style:none;margin:4px 8px 4px 10px}
#menu h2 {padding-top:12px;text-decoration:underline;font-size:12px;background-image:url(objetos/menu-parte-superior.gif)}
#pie {border:black 1px solid;width:800px;height:38px}
#pieuno {background-color:silver;padding-left:4px;float:left;width:110px}
#piedos {border-left:black 1px solid;float:left;width:488px;height:36px;padding-top:16px}
#pietres {border-left:black 1px solid;background-color:cyan;float:left;width:200px;heifht:36px;padding-top:17px}
#base {background-color:white;border-left:black 1px solid;border-right:black 1px solid}
#curva-inferior {background-image:url(objetos/curva-inferior.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden}
a {color:blue;text-decoration:none}
a:link {}
a:visited {}
a:hover {color:red;text-decoration:underline;background-color:silver}
a:active {}
#pietres a {color:blue;text-decoration:none}
#pietres a:link {}
#pietres a:visited {}
#pietres a:hover {color:black;text-decoration:underline;background-color:silver}
#pietres a:active {color:black}

Si modifico la linea #contenido sobre el parámetro "width:800px" y lo voy reduciendo pixel a pixel se va estrechando el ancho de la página, pero nunca queda EXACTO con el resto de la línea vertical.
¿Cuál o qué otros parámetros influyen en el mismo?
Gracias por las respuestas, algún día aprenderé a solventar mis errores ... jejejeje

PostData: Después de RE-EDITAR este mensaje algunos parámetros se modifican "supongo" por algún efecto del editor ??????????

ricky · 30 Abr 2011, 15:25 · Solicitar retirada

modifica la capa global

Yaneth · 30 Abr 2011, 16:12 · Solicitar retirada

hola

debes darnos la url de tu web
o bien pegar aqui tambien los codigos html

saludos

victor5atodogas · 30 Abr 2011, 19:50 · Solicitar retirada

Creo que colocar la URL nos ofrece la posibilidad de ver y poder resolver tu duda en 2 min o copiar el codigo y hacernos una pagina con ese codigo, etc.....resumiendo, k con la URL te podremos ayudar + y mejor!

Saludos.

Luciérnaga · 30 Abr 2011, 23:39 · Solicitar retirada

Ahí va ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<title>Este es el título de mi web y puedo escribir lo que quiera!</title>
<link rel="stylesheet" href="estilosplantilla.css" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera"><h1>Bienvenidos a mi página web. Muy pronto estará lista!</h1></div>
<div id="logotipo">
<a href="plantilla.html">
<img alt="Bienvenidos a mi plantilla. Espacio para un logotipo" src="objetos/sonrisa.gif" width="60px" height="60px" />
</a>
</div>
<div id="publicidad">Espacio para insertar un gráfico</div>
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
<li><a href="#">Sección 4</a></li>
</ul>
</div>


<div id="contenido">


<div id="menu">
<h2>Menú</h2>
<ul>
<li><a href="#">Elemento de lista 01</a></li>
<li><a href="#">Elemento de lista 02</a></li>
<li><a href="#">Elemento de lista 03</a></li>
<li><a href="#">Elemento de lista 04</a></li>
<li><a href="#">Elemento de lista 05</a></li>
<li><a href="#">Elemento de lista 06</a></li>
<li><a href="#">Elemento de lista 07</a></li>
<li><a href="#">Elemento de lista 08</a></li>
<li><a href="#">Elemento de lista 09</a></li>
</ul>
</div>


<h1>Esta será la zona principal de la web</h1>
<p><i>En estas páginas vas a aprender a crear una página web, a escoger un servidor de pago o gratuito, a subirla a internet, a mejorarla y actualizarla a tu gusto e incluso a sacarle un buen provecho económico si lo deseas. No hace falta que tengas conocimientos de nada, simplemente con leer estas lecciones lo vas a lograr, verás. El resultado final será una web igual que esta, con su foro, un top, un directorio de enlaces, optimizada para aparecer en buenas posiciones en los buscadores, con un código html y css válidos, etc, etc.</i></p>
<h2>Y este es mi segundo párrafo</h2>
<p><i>Vaya... los márgenes no están mal del todo, pero vemos que los dos primeros párrafos no parece que hayan tomado el margen izquierdo para separarse del menú principal. Esto es por que se cuenta el margen desde la parte izquierda de la capa #contenido, mientras que en esos dos párrafos debería contarse desde la derecha del menú, verdad? Vamos a ver como solucionamos esto.</i></p>
<p><i>Para eso tendríamos que poner un margen por la derecha para el menú, y como pertenece a la capa #menu tocaría retocar esa línea en estilo-general.css añadiéndole esto último que he subrayado:</i></p>
<img alt="plantilla-roja (80K)" src="imagenes/plantilla-roja.jpg" height="302" width="400" />
</div>


<div id="pie">
<div id="pieuno"><p>Contactos: <a href="mailto:[correo eliminado]"><img alt="Pulsa para escribir un E-mail" src="objetos/buzon.gif" height="32px" width="32px" /></a></p></div>
<div id="piedos"><p class="centrado">©2011 - MI EMPRESA, S.L. - Todos los derechos reservados - <a href="avisolegal/avisolegal.html">Aviso legal</a></p></div>
<div id="pietres"><p class="centrado">Mapa de la web</p></div>
</div>
<div id="base"><p class="centrado">Página creada por PFP</p></div>
<div id="curva-inferior"></div>
</div>


</body>
</html>

Gracias.

Luciérnaga · 13 May 2011, 11:27 · Solicitar retirada

Realmente estoy decepcionado con el foro al ver (comprobar) que se va postergando una respuesta a preguntas de un principiante ansioso por descubrir este mundo de las web ...
No culpo a nadie en concreto sino a las consecuencias que reportan al desanimo cualquier decepción surgidas por imponderables de la vida, bien por falta de tiiempo, bien por desconocimiento, etc. etc.
Hoy he descubierto el tremendo error mío, sí, lo reconozco, y digo que lo he descubierto después de incansables intentos y horas y horas de lectura del manual, y lo voy a postear para que si cualquier otro principiante topa con el mismo problema sepa resolverlo, mis dotes didácticas están a años luz del amigo Jorgens que admiro por sus redacciones de texto, tanto en sus manuales como en la web CCTW, y dicho esto paso a lo siguiente:

En los textos expuestos en este hilo haciendo patente la sobresalida del ancho de 800px en la capa "contenido" se quiebra una regla importante claramente expuesta en el manual y la repito aquí:
Si defines un borde en un elemento, ese elemento no puede llevar también definido un ancho concreto mediante el width, es decir, no le podemos asignar una cantidad numérica, solamente se le puede definir width:auto. ¡Si no seguimos esta regla, la web no se verá bien en todos los navegadores!.

Solución: quitar los parámetros "width:800px;float;left;" de la línea #contenido en el archivo .css y se restablecerá el ancho a 800px correctamente.

Mis disculpas al foro y a cualesquiera personas que se hayan sentido aludidos en este mensaje. Gracias.
Seguiré intentando mejorar en todos los sentidos. Hasta la próxima.
:)

victor5atodogas · 13 May 2011, 11:46 · Solicitar retirada

No es que nadie del foro quiera ayudarte; lo que pasa es que normalmente TODOS tenes una web de pruebas mediante hosting gratuito o lo que sea....y nosotros no somos ADIVINOS; necesitamos la URL para ver la web en funcionamiento y asi localizar el error o errores facilmente; pero si esto no esta, es dificil que te podamos ayudar a ti y cualquiera salvo fallos muy simples.

No obstante, me alegro de que hayas solucionado el problema.

Luciérnaga · 13 May 2011, 12:41 · Solicitar retirada

Hola Victor:
Ciertamente no la he subido al hosting y eso que lo tengo será por ........ no sé que decirte.
De todas formas me alegro de que, tan prontamente, hayas dado tu opinión al respecto.
Seguiré intentando mejorar y como que, cada vez, será más y más dificil resolver los problemas que surjan a medida que vaya avanzando en el desarrollo de mi aprendizaje, prometo que a la próxima pregunta que postee ya estarán colgados en mi hosting mis "pinitos" ...
Gracias. ;-)