Texto en div a derecha e izquierda.

T_O_N_N_Y · #1 (**permalink**) 17/12/2006, 16:13

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

kahlito · #2 (**permalink**) 17/12/2006, 21:21

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

T_O_N_N_Y · #3 (**permalink**) 18/12/2006, 10:04

Muchas gracias, funciona perfecto.

Saludos!!

c0lo · #4 (**permalink**) 18/12/2006, 10:53

Fijate que el código html que pegaste, está mal. Le faltan las comillas en los atributos (class="asda").

Saludoss

T_O_N_N_Y · #5 (**permalink**) 18/12/2006, 14:46

Cita:

Iniciado por c0lo

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!

AlZuwaga · #6 (**permalink**) 18/12/2006, 15:48

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

T_O_N_N_Y · #7 (**permalink**) 18/12/2006, 16:08

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

AlZuwaga · #8 (**permalink**) 18/12/2006, 18:19

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.

kahlito · #9 (**permalink**) 19/12/2006, 02:50

Cita:

Iniciado por c0lo

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

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

Fix3r · #10 (**permalink**) 19/12/2006, 10:26

Cita:

Iniciado por T_O_N_N_Y

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

T_O_N_N_Y · #11 (**permalink**) 19/12/2006, 11:23

http://validator.w3.org/

Saludos!