Foros del Web » Creando para Internet » CSS »

¿Porq el <H1> se sale del ancho?

Estas en el tema de ¿Porq el <H1> se sale del ancho? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/06/2009, 14:53
Avatar de valenti77  
Fecha de Ingreso: julio-2008
Ubicación: Berisso, Buenos Aires
Mensajes: 244
Antigüedad: 9 años, 5 meses
Puntos: 4
¿Porq el <H1> se sale del ancho?

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!
  #2 (permalink)  
Antiguo 02/06/2009, 15:04
Avatar de WillxD  
Fecha de Ingreso: febrero-2009
Ubicación: Lima =D!
Mensajes: 82
Antigüedad: 8 años, 9 meses
Puntos: 3
Respuesta: ¿Porq el <H1> se sale del ancho?

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
  #3 (permalink)  
Antiguo 02/06/2009, 15:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Porq el <H1> se sale del ancho?

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 02/06/2009 a las 15:13
  #4 (permalink)  
Antiguo 02/06/2009, 15:17
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: ¿Porq el <H1> se sale del ancho?

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 diseñes usando tablas.
  #5 (permalink)  
Antiguo 02/06/2009, 15:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Porq el <H1> se sale del ancho?

Cita:
Iniciado por hades87 Ver Mensaje
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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 02/06/2009, 16:05
Avatar de valenti77  
Fecha de Ingreso: julio-2008
Ubicación: Berisso, Buenos Aires
Mensajes: 244
Antigüedad: 9 años, 5 meses
Puntos: 4
Respuesta: ¿Porq el <H1> se sale del ancho?

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...
  #7 (permalink)  
Antiguo 02/06/2009, 16:07
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: ¿Porq el <H1> se sale del ancho?

Y reiterando lo dicho por kseso? has probado a poner espacios entre palabras?
__________________
No diseñes usando tablas.
  #8 (permalink)  
Antiguo 02/06/2009, 16:21
Avatar de valenti77  
Fecha de Ingreso: julio-2008
Ubicación: Berisso, Buenos Aires
Mensajes: 244
Antigüedad: 9 años, 5 meses
Puntos: 4
Respuesta: ¿Porq el <H1> se sale del ancho?

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:

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!
  #9 (permalink)  
Antiguo 02/06/2009, 16:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Porq el <H1> se sale del ancho?

¿Escribo en castellano? ¿O tendré de pronto don de lenguas y yo sin enterarme?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 02/06/2009, 18:26
Avatar de valenti77  
Fecha de Ingreso: julio-2008
Ubicación: Berisso, Buenos Aires
Mensajes: 244
Antigüedad: 9 años, 5 meses
Puntos: 4
De acuerdo Respuesta: ¿Porq el <H1> se sale del ancho?

Quedate tranquilo que es castellano jaja, a no ser que yo tenga el don de el entendimiento de lenguas y todavia sigo sin enterarme
  #11 (permalink)  
Antiguo 03/06/2009, 01:39
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: ¿Porq el <H1> se sale del ancho?

kseso? creo que has de volver a modificar tu firma jajaja
__________________
No diseñes usando tablas.
  #12 (permalink)  
Antiguo 03/06/2009, 05:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Porq el <H1> se sale del ancho?

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:09.