duda de maquetacion con css

rufus · #1 (**permalink**) 18/06/2009, 12:35

hola :)

tengo una celda de 400 pixeles de ancho y 278 de alto

en esta quiero poner a la izquierda un texto alineado a la izquierda.

seria asi un encabezado h5 y justo abajo de este un parrafo.

<h5>
<p>

y a la derecha a la mitad de la altura de la celda quiero colocar una imagen pequeña.
lo que la maquetacion quedaria asi

<h5>
</h5>
<p>
....
... <img>
....
</p>

este es el codigo que e usado pero no consigo hacer esto como yo quiero. con el codigo ke voy a poner me salen el encabezado y el parrafo como si estuvieran en dos columnas paralelas y a la derecha eso si la imagen pero colocado en la esquina superior derecha y yo la quiero a la mitad de la celda.

esto es lo que me sale en el firefox con los codigos que e puesto a continuacion.

<img>
<h5></h5> <p></p>

que tengo que modificar en el css???

codigo:

html:

Código:

 <div id="celdatextoazul">	<img src="imagenes/logazo copia.gif" width="180" height="66" />
 <h5>Nosotros</h5>
 
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>MUDANZAS 2000 S.L
es un grupo líder a nivel nacional en transportes, mudanzas y guardamuebles, desde 1947 a su servicio.
Ver más información</p>
 </div>

css:

Código:

#celdatextoazul{
width:400px;
height:278px;
float:left;
background-color:#9999CC;
overflow: auto;
position: relative;

}

#celdatextoazul img{
float: right;
list-style-image:url(imagenes/logazo copia.gif)
}
	
	#celdatextoazul p {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#000000;
	}
	
#celdatextoazul h5 {
	float: left;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	color:#CCCCCC;
	}

willyfc · #2 (**permalink**) 18/06/2009, 13:04

Pruebalo de esta manera:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#celdatextoazul{
width:400px;
height:278px;
text-align:left;
background-color:#9999CC;
display:table;
}
 
#celdatextoazul img{
float: right;
display:block;
margin:5px;
/*list-style-image:url(imagenes/logazo copia.gif) -- Esto no entiendo que hace aquí*/
}
#celdatextoazul p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
display:block;
padding:10px;
clear:both;
}
    
#celdatextoazul h5 {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    color:#CCCCCC;
    padding:10px 2px;
    overflow:hidden;
}
</style>
</head>
 
<body>
<div id="celdatextoazul">
    <img src="imagenes/logazo copia.gif" width="180" height="66" />
    <h5>Nosotros</h5>
    <p>MUDANZAS 2000 S.L
    es un grupo líder a nivel nacional en transportes, mudanzas y guardamuebles, desde 1947 a su servicio.
    Ver más información</p>
</div>
</body>
</html>