problemas con el div de contenido

moreh · 19 Nov 2010, 19:48 · Solicitar retirada

he terminado el curso y al escribir en el contenido seme descoloca y ya no se que hacer
este es el c.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>G.I.T</title>

<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="centrado""publicidad"><h2>G.I.Titulcia</h2></div>
</div>
<div id="navegacion">
<ul>

fotos

videos

foro

</div>

<div id="contenido">

<div id="menu">
<h1>menu</h1>
<ul>

presentacion-grupo

fotos-misterio

leyendas-urbanas

historia-de-lugares-visitados

</div>

<h1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<h2>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div id="pie">
<div id="pieuno">
<ul>

Foro Ejemplo

Contactos

Directorio

TopSite

<a href="#">Mapa de..
</div>
</div>

<div id="curva-inferior"></div>

</div>
</body>
</html>
y esta el codigo de estilos.css:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:Golden ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }

#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:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 60px 0px 70px }
#navegacion ul { margin-left: 60px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {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:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif) }
#pie {border-left: black 1px solid ; border-right: black 1px solid ;
border-top: black 1px solid ; height: 65px }
#pie li {list-style: none ; font-size: 12px }
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }

#curva-inferior {background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:20px ;
overflow: hidden ; }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

spitfire2 · 20 Nov 2010, 08:36 · Solicitar retirada

Debes escribir textos, si escribes muchas xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx seguidas, el navegador lo toma como si fuese una sola palabra larga y se desarma el "contenido" tambien puedes poner xxxxx xxx xxxx xxx xxx ó dasasd asdad adsasd asdasd asdasd asdas asda como si fueran palabras, me explico?

si no es eso seguimos probando, saludos

PD: Tu archivo html esta relacionado a la hoja de estilos "estilo-general.css"
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

pero la hoja de estilos que muestras se llama estilos.css

podrias mostrarnos estilo-general.css ?

moreh · 20 Nov 2010, 14:07 · Solicitar retirada

muchas gracias spitfire2

Tenías razón ese era el problema, pero ahora tengo otro, cuando escribo en el contenido justo debajo de la barra de navegación la linea que rodea el div de contenido no llega hasta arriba de nuevo este es el c.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>G.I.T</title>

<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad"><h2>G.I.Titulcia</h2></div>
</div>
<div id="navegacion">
<ul>

fotos

videos

foro

</div>

<div id="contenido">

<div id="menu">
<h1>menu</h1>
<ul>

presentacion-grupo

fotos-misterio

leyendas-urbanas

historia-de-lugares-visitados

</div>

<p class="blanco">Sujetos que se anuncian en los periódicos como parapsicólogos, ofreciendo curas milagrosas, solucionar
problemas del amor, mejorar su suerte, adivinar números de la lotería, y prácticamente sacarle de todo tipo de
aprieto imaginable. Desgraciadamente no sólo no existen personas por la ciencia capaz de tales proezas; y si
existiesen, no serían llamados parapsicólogos.</p>
<p class="blanco">La parapsicología es el estudio más o menos científico de los fenómenos llamados paranormales, que son
aquellos no explicables mediante teorías físicas, biológicas o psicológicas.</p>

<p class="centrado">[contenido no disponible]</p>

<p class="blanco">No se podría hablar de la parapsicología como una ciencia aplicada debido a que los fenómenos que estudia
son complejos y los resultados positivos son irrepetibles.</p>
<p class="blanco">Una de las críticas principales es que los hallazgos rara vez permiten ser corroborados con un segundo
experimento en condiciones similares. Una crítica similar se hace a la pretensión de los parapsicólogos de que
los fenómenos paranormales desafían el principio de casualidad.</p>
<p class="blanco">Por último, los parapsicólogos creen que los científicos, los físicos, son ingenuos ante la evidencia empírica
[contenido no disponible]
de estos fenómenos, y que por el contrario, los ilusionistas profesionales serían los más capacitados para
evaluar los experimentos parapsicológicos, por su facilidad para descubrir los trucos.</p>
<p class="blanco">Una de las dificultades de la parapsicología es la de demostrar la autenticidad de los fenómenos que estudia.
La parapsicología satisface en muchas ocasiones la necesidad sentida por numerosos sectores de la población,
de contar con creencias específicas que sustituyan a otras creencias anteriores en crisis o las enriquezcan con
nuevos elementos.</p>
<p class="blanco">Una de las dificultades de la parapsicología es la de demostrar la autenticidad de los fenómenos que estudia.
La parapsicología satisface en muchas ocasiones la necesidad sentida por numerosos sectores de la población,
de contar con creencias específicas que sustituyan a otras creencias anteriores en crisis o las enriquezcan con
nuevos elementos.</p>
<p class="blanco">Una de las dificultades de la parapsicología es la de demostrar la autenticidad de los fenómenos que estudia.
La parapsicología satisface en muchas ocasiones la necesidad sentida por numerosos sectores de la población,
de contar con creencias específicas que sustituyan a otras creencias anteriores en crisis o las enriquezcan con
nuevos elementos.</p>
<p class="blanco">Una de las dificultades de la parapsicología es la de demostrar la autenticidad de los fenómenos que estudia.
La parapsicología satisface en muchas ocasiones la necesidad sentida por numerosos sectores de la población,
de contar con creencias específicas que sustituyan a otras creencias anteriores en crisis o las enriquezcan con
nuevos elementos.</p>
</div>

<div id="pie">
<div id="pieuno">
<ul>

Foro Ejemplo

Contactos

Nos Enlazan

</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>

Directorio

TopSite

Mapa de la Web

</div>
</div>

<div id="curva-inferior"></div>

</div>
</body>
</html>

y este el codigo de la hoja de estilo:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:Golden ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#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:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 60px 0px 70px }
#navegacion ul { margin-left: 60px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {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:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif) }

#pie {border-left: black 1px solid ; border-right: black 1px solid ;
border-top: black 1px solid ; height: 65px }
#pie li {list-style: none ; font-size: 12px }
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }

#curva-inferior {background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:20px ;
overflow: hidden ; }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
.centrado {text-align:center}

una vez más gracias

spitfire2 · 21 Nov 2010, 07:47 · Solicitar retirada

Es por esta linea:

#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
Solo cambia el cinco en rojo por un cero

Y tambien deberias cambiar el height en esta linea por 85px que es el alto de la capa cabecera, o bien poner los dos iguales en 100px u otro numero, para que se vean bien, miralo en firefox

<div id="logotipo">[contenido no disponible]</div>