¿Porq el <H1> se sale del ancho?

valenti77 · #1 (**permalink**) 02/06/2009, 13:53

Hola a todos, estoy haciendo una pagina y no puedo acomodar el titulo, si es muy largo sigue derecho hacia la derecha y no se ajusta al DIV como el resto, es decir el cuerpo de la noticia. Estos son los estilos:

Código:

BODY {
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align: center;
   background-color: #101015;
}
#contenedor{
   text-align: left;
   width: 800px;
   margin: 0;
}
#menu{
   background:url(Images/fondomenu.png);
   color: #333300;
   font-size:10pt;
   width:100%;
   height:30px;
   padding-top:10px;
   border:1px solid #84888E;
   color:#EAE36C;
   font:Arial;
   letter-spacing:-0.5pt;
   text-align:center;
}

#flash{
   background:#616769;
   color: #D1D1D1;
   font-size:20pt;
   width:100%;
   height:120px;
   padding:0;
   border:1px solid #83878D;
   font-weight:bold;
   margin-top:2px;
}

#cuerpo{
   margin: 10 0 10 0px;
}

#lateral{
   width: 225px;
   background-color:#373B44;
   float:right;
   height:100%;
   border-left: 1px solid #808288;
   border-right: 1px solid #808288;
   border-bottom: 1px solid #808288;
} 

#sms{   
   width:223px;
   height:33px;
   background:url(Images/fondosms.png) repeat-x;
   border-left: 1px solid #C01E1A;
   border-right: 1px solid #C01E1A;
   border-bottom: 1px solid #C01E1A;
}

#izq{
        font-weight:bold;
        float:left; 
        background:none;
        width:50%
}

#der{
       float:right;
       background:none;
       width:50%;  
       text-align:left;
}

#lateral ul{
   margin : 0 0 0 0px;
   padding: 0 0 0 0px;
   list-style: none;
}

#lateral li{
   background-color: #ffffcc;
   margin: 2 2 2 2px;
   padding: 2 2 2 2px;
   font-weight: bold;
}

#lateral a{
   color: #3333cc;
   text-decoration: none;
}

#principal{
   background-color: #fff;
   border: 5px solid #E7E7E7;
   padding: 0;
   margin-right: 250px;
   margin-left: 15px;

}

#fecha{
   height:75px;
   width:100%;
}

div.figure {
  float: left;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

div.figure p {
  text-align: justify;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

#pie{
   background-color: #cccccc;
   padding: 3 10 3 10px;
   text-align:right;
} 

#sponsor{
  width:100%;
  height:100px;
}
#adver{width:100%;
height:155px;
background:#DADADA;
}

#contacto{width:100%;
height:200px;
background:#000;
}

#header img {border:0}

html,body{margin:0;padding:0}

p{margin:0 10px 10px}


#header{
height:80px;
width:100%;
background:url(Images/fondoheader.png);
padding-top:20px;
}
#header h1{
height:0px;
line-height:10px;
margin:0;
padding-left:10px;
background: #EEE;
color: #79B30B;
}

#container{
width:830px;
margin:0 auto; 

background:#343940;
padding:0;
text-align:left
}

#footer{
clear:left;
width:100%;
text-align:center; 
height:235px;
background:#5F5F61;
color:#FFF
}

#footer p{
margin:0;
padding:0
}

#wrapper{width:830px;
background-color:#343940;
margin:auto
}
h1{color:#6BA5D1;
font-family:"Trebuchet MS",Arial;
font-weight:bold;
font-size:20pt;
line-height:1.4;
}
h2{
text-align:left;
padding-top:0px;
padding-bottom:0;
font-size:95%;
font-weight:bold;
color:#8AC0E9;
border-top:1px solid #DDDCDC;
border-bottom:1px solid #DDDCDC
}

#menu a{
color:#EAE36C;
text-decoration:none;
letter-spacing:-1.2pt;
border:0;
}

Código HTML:

<body OnContextMenu="return false">
<div id="container">
<div id="header"><a href=""><img 

src="Images/logotexto.gif"></a></div>
<div id="menu"><ul 

style="display:inline;list-style:none;font-size:11pt;letter-spacing:0;"><li 

style="float:left;padding-left:50px;"><a 

href="">Home</a></li><li 

style="float:left;padding-left:50px;"><a 

href="">Contacto</a></li><li 

style="float:left;padding-left:50px;"><a 

href="">Chat</a></li><li 

style="float:left;padding-left:50px;"><a 

href="">Sec.1</a></li><li 

style="float:left;padding-left:50px;"><a 

href="">Sec.2</a></li>
<li style="float:left;padding-left:50px;"><a 

href="">Sec.3</a></li>
<li style="float:left;padding-left:50px;"><a 

href="">Contacto</a></li></ul>
</div><div id="flash">FLASH</div>
<div id="contenedor">
  <div id="cuerpo">
   <div id="lateral"><div id="sms"></div>
<p><span style="font:impact;font-size:18pt;color:white;"><strong>Cartel</strong></span></p><div id="adver"></div><div id="contacto"></div>
   </div>
   <div id="principal"><div id="fecha"></div>
<p><h1>TituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTitul

oTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTit

uloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTitulo

TituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTitu

loTitulo</h1></p><h2>Subtitulo- Subtitulo- Subtitulo- Subtitulo- 

Subtitulo- Subtitulo- Subtitulo- Subtitulo- Subtitulo- Subtitulo-Subtitulo- 

Subtitulo- Subtitulo- Subtitulo- Subtitulo- Subtitulo- Subtitulo- Subtitulo- 

Subtitulo- Subtitulo-Subtitulo- Subtitulo- Subtitulo- Subtitulo- Subtitulo- 

Subtitulo- Subtitulo- Subtitulo- Subtitulo- Subtitulo-</h2><div 

class="figure">
  <p><img src="Images/logo.png" alt="Imagen">
  <p>Pie de imagen</p>
</div>cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo cuerpo 
<hr style="border-style:solid; border-width:1px;color:#E8E8E8;margin-left:0px;margin-bottom:10px;">
<div id="sponsor">Sponsor aqui</div>
</div> 
</div>
<div id="footer"><a href="" class=""></a></div>
</div>
</body>
</html>

Lo puse todo porque la verdad que nose que es lo que hace que el texto se salga, ya revise todo, saludoss!

WillxD · #2 (**permalink**) 02/06/2009, 14:04

Viendo tu código #principal no tiene ningún ancho definido, tampoco tiene algún float.

Luego no entiendo por qué pones lo siguiente:

Código:

<p><h1>TituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTitul

oTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTit

uloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTitulo

TituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTituloTitu

loTitulo</h1></p>

el <p> está por demás ya que solo se pone cuando es un párrafo.

Otra cosa que te recomiendo es que separes bien tu CSS, esto no debe ir en tu código html:

Código:

<li style="float:left;padding-left:50px;">

Salu2

kseso? · #3 (**permalink**) 02/06/2009, 14:07

pon algún espacio entre tanto título. Vamos, que escribas un texto normal.

Edito:
Parece que es algo bastante común últimamente

A demás de lo dicho por WillxD

hades87 · #4 (**permalink**) 02/06/2009, 14:17

Y que lo digas kseso? que en el otro tema , para darnos cuenta pasaron como 20 posts xD.

Además para el texto de prueba te aconsejo que te mires esta web http://es.lipsum.com/

kseso? · #5 (**permalink**) 02/06/2009, 14:23

Cita:

Iniciado por hades87

Y que lo digas kseso? que en el otro tema , para darnos cuenta pasaron como 20 posts xD.

Además para el texto de prueba te aconsejo que te mires esta web http://es.lipsum.com/

No es por nada, pero yo se lo dije en el #4, otra cosa es que la gente espera sólo un código para el copy/paste y parece que ni se toman la molestia de leer. Y si el problema es que no entienden/comprenden la respuesta, preguntar.

Pero bueno, así nos divertimos más.

valenti77 · #6 (**permalink**) 02/06/2009, 15:05

Gracias por su ayuda:

1° Will: Eso de parrafo quedo como una de las tantas formas que intente de que el texto no exceda el ancho, pero no hubo caso usando <p> y me olvide ahi, con respecto a lo segundo, esos estilo que agrego derecho adentro del html, lo hago para que quede bien declarado donde quiero que este cada cosa, y despues hago los estilos, pero bue, es algo que me acostumbre a hacer pero quedate tranquilo que va a desaparecer cuando este terminada.
Ya probe con un ancho antes de iniciar el tema, y con float no me acuerdo, pero creo que se veia mal in IE.

2°kseso: No quiero generar discusión de nada, pero si se lo que estoy haciendo, por algo mi titulo es ¿Porque pasa tal cosa? si no fuera asi, hubiera puesto: Quiero que el titulo quede adentro de un div y que la pagina este re linda

3°Hades: Ya conozco la pagina, es que a mi me da lo mismo probar con cualquier palabra que con lorem ipsum aunque no sea asi, pero solamente queria poner muchas palabras para ver si en caso de q el cliente ponga un titulo largo, se adapte como lo hace el contenido de la noticia, cosa que vi que no es asi.

Eso es lo que me llama la atencion, el contenido y el titulo estan dentro del mismo contenedor , pero se comportan de distintas maneras...

hades87 · #7 (**permalink**) 02/06/2009, 15:07

Y reiterando lo dicho por kseso? has probado a poner espacios entre palabras?

valenti77 · #8 (**permalink**) 02/06/2009, 15:21

Tenia razon Kseso! Y tmb con lo de Lorem Ipsum!

Era eso, ahora entendi, me lo tomaba como si todo fuera una sola palabra, disculpen las molestias. De aca me llevo:

1° Usar Lorem Ipsum
2° No estilizar en el HTML
3°Disculparme por poner un tema al pedo

Muchas gracias a todos, y mil disculpas, me estuve rompiendo la cabeza todo el dia y termino siendo una estupidez, gracias gente, saludos!

kseso? · #9 (**permalink**) 02/06/2009, 15:21

¿Escribo en castellano? ¿O tendré de pronto don de lenguas y yo sin enterarme?

valenti77 · #10 (**permalink**) 02/06/2009, 17:26

Quedate tranquilo que es castellano jaja, a no ser que yo tenga el don de el entendimiento de lenguas y todavia sigo sin enterarme

hades87 · #11 (**permalink**) 03/06/2009, 00:39

kseso? creo que has de volver a modificar tu firma jajaja

kseso? · #12 (**permalink**) 03/06/2009, 04:30

Un placer Valentín haberte ayudado.
Creo que ayer hubo choque a las 23:21 y no me enteré de la feliz noticia.
Por cierto, que creo que quedó ambiguo, mi mensaje #5 de este hilo era sobre el otro tema que mencionaba Hades (el de las 20 respuestas). No tenía nada que ver con el tuyo

Hades, no puedo, superaría los 200