Anónimo
Evitar salto de linea con IE
Hola,
como cabecera de un apartado de mi web, tengo esta linea de código:
<div id="titol">PROVÍNCIA DE GIRONA
<div id="petit">76 allotjaments</div>
</div>
Me gustaría que los dos textos (PROVINCIA DE GIRONA i 76 allotjaments) aparecieran el la misma línea, pero con distinto formato, por lo que he incluido un div dentro de otro.
Con la mayoría de navegadores que he probado (Firefox, Opera, Safari...) la cosa funciona perfectamente, pero con el "Maravilloso" Internet Explorer no funciona, ya que me agrega un salto de linea.
El código CSS es el siguiente:
...
div#titol {
font-family: 'Times New Roman', sans-serif;
font-weight:900;
font-size:12pt;
text-align:left;
color:#7F0000;
text-transform:none;
letter-spacing:3px;
background-color:#F18500;
border-style:solid;
border-color:#000;
border-width:1px;
margin:10px;
padding-left:20px;
}
div#titol #petit {
font-weight:200;
font-size:11pt;
float:right;
padding-right:20px;
}
...
A ver si alguien me puede ayudar a solucionarlo.
Si queréis ver con más detalle de que os hablo, aquí os dejo un link a la página:
http://www.buscadorturismerural.com/girona/girona.php
Muchas gracias !
como cabecera de un apartado de mi web, tengo esta linea de código:
<div id="titol">PROVÍNCIA DE GIRONA
<div id="petit">76 allotjaments</div>
</div>
Me gustaría que los dos textos (PROVINCIA DE GIRONA i 76 allotjaments) aparecieran el la misma línea, pero con distinto formato, por lo que he incluido un div dentro de otro.
Con la mayoría de navegadores que he probado (Firefox, Opera, Safari...) la cosa funciona perfectamente, pero con el "Maravilloso" Internet Explorer no funciona, ya que me agrega un salto de linea.
El código CSS es el siguiente:
...
div#titol {
font-family: 'Times New Roman', sans-serif;
font-weight:900;
font-size:12pt;
text-align:left;
color:#7F0000;
text-transform:none;
letter-spacing:3px;
background-color:#F18500;
border-style:solid;
border-color:#000;
border-width:1px;
margin:10px;
padding-left:20px;
}
div#titol #petit {
font-weight:200;
font-size:11pt;
float:right;
padding-right:20px;
}
...
A ver si alguien me puede ayudar a solucionarlo.
Si queréis ver con más detalle de que os hablo, aquí os dejo un link a la página:
http://www.buscadorturismerural.com/girona/girona.php
Muchas gracias !
Respuesta de Marcelo Origoni
1
Hola,
gracias por tu respuesta. Funciona correctamente... lo único es que para ajustar el ancho he tenido que hacer algunas peripecias. Te las marco en negrita.
div#titol {
font-family: 'Times New Roman', sans-serif;
color:#7F0000;
text-transform:none;
letter-spacing:3px;
background-color:#F18500;
border-style:solid;
border-color:#000;
border-width:1px;
margin:10px;
float:left;
}
div#titol #provincia {
font-weight:900;
font-size:12pt;
float:left;
padding-left:20px;
padding-right:130px;
text-align:left;
}
div#titol #petit {
font-weight:200;
font-size:11pt;
padding-right:20px;
text-align:right;
float:left;
}
<div id="titol">
<div id="provincia">PROVÍNCIA DE GIRONA</div>
<div id="petit"> 85 allotjaments</div>
</div>
El tema esta el atributo width no me funciona para definir el ancho que quiero que tenga la linea de texto, y en las diferentes páginas de la web tienen hay texto diferente por lo que no puedo definir un padding-right concreto y tengo que ajustarlo con espacios. Se te ocurre alguna forma más elegante de alinear un texto a la izquierda y el otro a la derecha.
De nuevo muchas gracias por tu atención!
Un saludo,
gracias por tu respuesta. Funciona correctamente... lo único es que para ajustar el ancho he tenido que hacer algunas peripecias. Te las marco en negrita.
div#titol {
font-family: 'Times New Roman', sans-serif;
color:#7F0000;
text-transform:none;
letter-spacing:3px;
background-color:#F18500;
border-style:solid;
border-color:#000;
border-width:1px;
margin:10px;
float:left;
}
div#titol #provincia {
font-weight:900;
font-size:12pt;
float:left;
padding-left:20px;
padding-right:130px;
text-align:left;
}
div#titol #petit {
font-weight:200;
font-size:11pt;
padding-right:20px;
text-align:right;
float:left;
}
<div id="titol">
<div id="provincia">PROVÍNCIA DE GIRONA</div>
<div id="petit"> 85 allotjaments</div>
</div>
El tema esta el atributo width no me funciona para definir el ancho que quiero que tenga la linea de texto, y en las diferentes páginas de la web tienen hay texto diferente por lo que no puedo definir un padding-right concreto y tengo que ajustarlo con espacios. Se te ocurre alguna forma más elegante de alinear un texto a la izquierda y el otro a la derecha.
De nuevo muchas gracias por tu atención!
Un saludo,
Hola Marcelo,
Al final he solucionado el problema haciendo una tabla de dos columnas. En la primera columna he alineado el texto a la izquierda y en la segunda lo he alineado a la derecha, así no depende de la longitud del texto, siempre me queda alineado y de la misma anchura.
De todas formas, muchas gracias por tu ayuda...
Recibe un cordial saludo,
Al final he solucionado el problema haciendo una tabla de dos columnas. En la primera columna he alineado el texto a la izquierda y en la segunda lo he alineado a la derecha, así no depende de la longitud del texto, siempre me queda alineado y de la misma anchura.
De todas formas, muchas gracias por tu ayuda...
Recibe un cordial saludo,