Foros del Web » Creando para Internet » CSS »

Texto en div a derecha e izquierda.

 Estas en el tema de Texto en div a derecha e izquierda. en el foro de CSS en Foros del Web. Buenas noches. Hace poco escribieron en este foro esta misma pregunta, donde daban la respuesta esta: Código PHP: span . derecha { display :  block ...
  #1 (permalink)  
Antiguo 17/12/2006, 16:13
 
Fecha de Ingreso: octubre-2006
Ubicación: Quart de Poblet, Valencia
Mensajes: 767
Antigüedad: 18 años, 2 meses
Puntos: 8
Texto en div a derecha e izquierda.
Buenas noches. Hace poco escribieron en este foro esta misma pregunta, donde daban la respuesta esta:
Código PHP:
span.derecha{
display: block;
float: right
}

span.izquierda{
display: block;
float: left
} 
Y se queda así:

Y quisiera que se quedara así:


Aquí el código:
Código PHP:
<div id=contenido>
<div id=titulo>
<span class=izqda>
<h1>Lorem Ipsum
</h1></span>
<span class=dcha>
<img src=imagen.gif>blablabla
</span></div>
<div class=cuerpo>
The following text consists of a mock Latin which has been based upon the
average frequency of characters and word lengths of the English language in
 order to reproduce a reasonably accurate overall visual impression. Lorem 
ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy eiusmod 
tempor incidunt ut labore et dolore magna aliquam erat volupat.
</div>
</div> 
El css:
Código PHP:
#contenido {
    text-align:justify;
    background: #fefefe;
    width:520px;
    float:left;
    margin-bottom:10px;
    padding: 5px;
    border: #c4c4c4 solid 1px;
    font-family: Verdana, "Times New Roman", Times, serif;
    font-size: 9pt;
    color: #000000;
    }

#contenido h1 {
    padding-left:15px;
    width:auto;
    font-family: Verdana, "Times New Roman", Times, serif;
    font-size:18px;
    color: #105BAC;
    font-weight: normal;
}
#titulo {
    border: #c4c4c4 solid 1px;
    margin-bottom:5px;
}
#titulo span.izqda {
    display:block;
    float:left;
}
#titulo span.dcha {
    display:block;
    float:right;
} 
Espero su respuesta, que igual puede ser que sea una tonteria, pero espero que se solucione fácilmente.

Saludos!!!
  #2 (permalink)  
Antiguo 17/12/2006, 21:21
Avatar de kahlito
Colaborador
  
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 10 meses
Puntos: 65
Mensaje Re: Texto en div a derecha e izquierda.
Hola Tony, prueba con algo así:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alineando</title>
<style type="text/css">
#contenido {
    text-align:justify;
    background: #fefefe;
    width:520px;
    float:left;
    margin-bottom:10px;
    padding: 5px;
    border: #c4c4c4 solid 1px;
    font-family: Verdana, "Times New Roman", Times, serif;
    font-size: 9pt;
    color: #000000;
    }
#contenido h1 {
    padding-left:15px;
    width:auto;
    font-family: Verdana, "Times New Roman", Times, serif;
    font-size:18px;
    color: #105BAC;
    font-weight: normal;
}
#titulo {
    border: #c4c4c4 solid 1px;
   	width:520px;
	height:30px;
	margin-bottom:5px;
}
.izqda {
    display:inline;
    float:left;
	margin:3px;
	}
.dcha {
    display:inline;
    float:right;
	margin:3px;
}
.cuerpo{
    clear:both;
     border: #c4c4c4 solid 1px;} 
</style>
</head>

<body>
<div id=contenido>
<div id=titulo>
<h1 class=izqda>Lorem Ipsum
</h1>
<img src="imagen.igf" width="90" height="20" class="dcha">
</div>
<div class=cuerpo>
The following text consists of a mock Latin which has been based upon the
average frequency of characters and word lengths of the English language in
 order to reproduce a reasonably accurate overall visual impression. Lorem 
ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy eiusmod 
tempor incidunt ut labore et dolore magna aliquam erat volupat.
</div>
</div>
</body>
</html>
Saludosss
  #3 (permalink)  
Antiguo 18/12/2006, 10:04
 
Fecha de Ingreso: octubre-2006
Ubicación: Quart de Poblet, Valencia
Mensajes: 767
Antigüedad: 18 años, 2 meses
Puntos: 8
Re: Texto en div a derecha e izquierda.
Muchas gracias, funciona perfecto.

Saludos!!
  #4 (permalink)  
Antiguo 18/12/2006, 10:53
Avatar de c0lo  
Fecha de Ingreso: julio-2005
Ubicación: Buenos Aires
Mensajes: 281
Antigüedad: 19 años, 6 meses
Puntos: 1
Re: Texto en div a derecha e izquierda.
Fijate que el código html que pegaste, está mal. Le faltan las comillas en los atributos (class="asda").

Saludoss
__________________
Nuestro amo juega al esclavo // de esta tierra que es una herida
que se abre todos los días // a pura muerte, a todo gramo.
Violencia es mentir.
  #5 (permalink)  
Antiguo 18/12/2006, 14:46
 
Fecha de Ingreso: octubre-2006
Ubicación: Quart de Poblet, Valencia
Mensajes: 767
Antigüedad: 18 años, 2 meses
Puntos: 8
Re: Texto en div a derecha e izquierda.
Cita:
Iniciado por c0lo Ver Mensaje
Fijate que el código html que pegaste, está mal. Le faltan las comillas en los atributos (class="asda").

Saludoss
Muchas gracias, lo acababa de cambiar, porque le he pasado el test del XHTML ese y me lo ha dicho ;)

Gracias!
  #6 (permalink)  
Antiguo 18/12/2006, 15:48
Avatar de AlZuwaga
Colaborador
  
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 11 meses
Puntos: 535
Re: Texto en div a derecha e izquierda.
Otra cosa que supongo te habrá dicho el validador es que el tag img no está cerrado y le falta el atributo alt.

Pero algo que no te debe haber dicho es que en vez del <div class=cuerpo> podés usar perfectamente un <p class="cuerpo">, ganado en semántica.

Saludos
__________________
...___...
  #7 (permalink)  
Antiguo 18/12/2006, 16:08
 
Fecha de Ingreso: octubre-2006
Ubicación: Quart de Poblet, Valencia
Mensajes: 767
Antigüedad: 18 años, 2 meses
Puntos: 8
Re: Texto en div a derecha e izquierda.
Lo de la imagen también me lo ha dicho, alt y <img src="asss.gif" />

Existe algún problema por usar muchos divs?
Es que yo estaba acostumbrado a usar tablas, pero ahora que estoy en proceso de adaptación uso divs para todo.

Muchas gracias, lo cambiaré por "p".

Saludos!!
  #8 (permalink)  
Antiguo 18/12/2006, 18:19
Avatar de AlZuwaga
Colaborador
  
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 11 meses
Puntos: 535
Re: Texto en div a derecha e izquierda.
Es que.. a ver... un div es un elemento en bloque. Un p también lo es (por lo cuál podés lograr lo mismo... visualmente).

Entonces ¿cuál es la diferencia?
Que un p se ha hecho para contener un párrafo. Un div sirve para "agrupar lógicamente" otros elementos. En tu caso, el div id#contenido es perfectamente válido.

Con esto no quiero decir que el div.cuerpo no sea válido, pero siempre fijate si podés usar un elemento "con sentido" en lugar de div's.
__________________
...___...
  #9 (permalink)  
Antiguo 19/12/2006, 02:50
Avatar de kahlito
Colaborador
  
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 10 meses
Puntos: 65
Re: Texto en div a derecha e izquierda.
Cita:
Iniciado por c0lo Ver Mensaje
Fijate que el código html que pegaste, está mal. Le faltan las comillas en los atributos (class="asda").

Saludoss
Cita:
Iniciado por Al Zuwaga Ver Mensaje
Otra cosa que supongo te habrá dicho el validador es que el tag img no está cerrado y le falta el atributo alt.

Pero algo que no te debe haber dicho es que en vez del <div class=cuerpo> podés usar perfectamente un <p class="cuerpo">, ganado en semántica.

Saludos
Vaya ejemplo... , lo pegué rapido y basándome en el primer código, y luego ni me acordaba que puse el ejemplo con un Doctype XHTML 1.0 Strict, menos mal que c0lo y Al Zuwaga se han pasado por aquí para corregirlo
  #10 (permalink)  
Antiguo 19/12/2006, 10:26
 
Fecha de Ingreso: diciembre-2006
Mensajes: 16
Antigüedad: 18 años, 1 mes
Puntos: 0
Re: Texto en div a derecha e izquierda.
Cita:
Iniciado por T_O_N_N_Y Ver Mensaje
Muchas gracias, lo acababa de cambiar, porque le he pasado el test del XHTML ese y me lo ha dicho ;)

Gracias!
Donde puedo encontrar ese test de XHTML del que hablan?
Saludos
  #11 (permalink)  
Antiguo 19/12/2006, 11:23
 
Fecha de Ingreso: octubre-2006
Ubicación: Quart de Poblet, Valencia
Mensajes: 767
Antigüedad: 18 años, 2 meses
Puntos: 8
Re: Texto en div a derecha e izquierda.
http://validator.w3.org/

Saludos!
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:49.