Problema simple

sidunvger · #1 (**permalink**) 25/07/2006, 11:31

Bien, tengo un problema muy sencillo en sí, pero para mí de difícil resolución.

Tengo una capa DIV, con unos argumentos WIDTH y HEIGHT definidos. En este DIV tengo que poner una imagen a la izquierda y un texto a la derecha en la parte inferior del DIV, en su esquina inferior derecha con alineación RIGHT.

Para que resulte más descriptivo, ese DIV es la cabecera de la web, la imagen es el logo (en la izquierda) y el texto es un mensaje para el usuario.

Estuve TODA la tarde del domingo probando posibilidades, desde la más obvia y fácil (que sí se veía bien en Internet Explorer pero no en Firefox) hasta soluciones rarísimas. Vi manuales, ejemplos, copié diseños de otras webs para adaptarlos al mío y nada, no cuadraba.

Por favor, que alguien me diga cómo puedo hacer esto, porque si no voy a usar tablas. ¿Alguien ha visto el famoso quesito con el tiempo dedicado a diseñar una web con CSS?

Gracias de antemano.

EDITADO: esquema en: ht tp://img65.ima geshack.u s/img65/456/esquemaph7.png (quitar espacios)

kazafun · #2 (**permalink**) 25/07/2006, 12:22

No entiendo mucho la dificultad, ¿no puedes poner float:left al logo y float right al parrafo?
Como dices que height es fijo, dale al parrafo padding-top hasta que lo coloques en su sitio.

Otra solucion, si el texto del parrafo es variable y no puedes ajustar el padding-top, dale a la cabecera "position: relative;"
y al parrafo:
" position:absolute; bottom:0px; right:0px;"

qwerty_wq · #3 (**permalink**) 25/07/2006, 13:08

Con eso debería valer, pero es cierto que esto puede ser un quebradero de cabeza.

sidunvger · #4 (**permalink**) 26/07/2006, 11:18

Lo siento, pero no funciona. Es como si Firefox tomase como "referencia" la mitad del la altura del DIV para colocar el texto e Internet Explorer la parte superior.

Lo he probado todo, con padding, márgenes, aligns, vertical aligns, position... sin éxito.

hurricane · #5 (**permalink**) 26/07/2006, 11:23

Yo probaría a poner a ese div position:relative

y después jugaría con la imágen y el texto de la siguiente manera:

#nombre_de_la_capa img {
position:absolute;
top:5px; /*aquí pones los pixeles que sean*/
left:10px; /*aquí pones los pixeles que sean*/
{

#nombre_de_la_capa p {
position:absolute;
top:5px;
right: 5px;
width: /*la medida que sea*/
}

Espero que te sirva

safe · #6 (**permalink**) 26/07/2006, 12:44

mmm... te dejo mi intento:

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=iso-8859-1" />
<title>Testing...</title>
<style type="text/css">
<!--
#header {
	padding: 10px;
	background-color:#CCC;
	text-align:right;
}

#header h1 {
	float:left;
	width: 50px;
	height: 50px;
	background: #F00 url(tulogo.gif) no-repeat center center;
	margin: 0;
}
#header h1 span { display:none; }

#header p {
	margin:0;
	padding-top: 30px;
}
	
-->
</style>
</head>
<body>
	<div id="header">
		<h1><span>Nombre del sitio</span></h1>
		<p>Bienvenidos a mi sitio</p>
	</div>
</body>
</html>

en #header h1 deberias cambiar width y height por el alto y el ancho de tu imagen del logo y en background: #F00 url(tulogo.gif) no-repeat center center; cambiar el color (#FFF.. porque lo mas probable es que no se vea) y la direccion de tu imagen del logo.
Segun el alto de tu logo tambien podrias tener que cambiar el padding-top de p

sidunvger · #7 (**permalink**) 27/07/2006, 10:10

Gracias a todos por las contestaciones, y en especial a safe, porque dio en el clavo. No se me había ocurrido utilizar de esa manera un H1.

La solución de hurricane es similar a las decenas de combinaciones de lo mismo que utilicé, y por lo tanto no funciona.

Gracias.

safe · #8 (**permalink**) 27/07/2006, 10:35

De nada sidunvger...
Seguramente tambien hay una forma de lograr el mismo resultado utilizando posicionamiento absoluto y relativo. Pero ademas de ser mas complejo creo que debe ser menos "consistente" y debe generar muchas diferencias entre el resultado en cada navegador.