Foros del Web » Creando para Internet » CSS »

Problema simple

Estas en el tema de Problema simple en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 25/07/2006, 12:31
 
Fecha de Ingreso: septiembre-2005
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 0
Problema simple

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)

Última edición por sidunvger; 25/07/2006 a las 12:41
  #2 (permalink)  
Antiguo 25/07/2006, 13:22
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
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;"
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #3 (permalink)  
Antiguo 25/07/2006, 14:08
Avatar de qwerty_wq  
Fecha de Ingreso: enero-2005
Mensajes: 109
Antigüedad: 12 años, 10 meses
Puntos: 1
Con eso debería valer, pero es cierto que esto puede ser un quebradero de cabeza.
  #4 (permalink)  
Antiguo 26/07/2006, 12:18
 
Fecha de Ingreso: septiembre-2005
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 0
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.
  #5 (permalink)  
Antiguo 26/07/2006, 12:23
 
Fecha de Ingreso: julio-2004
Ubicación: San Sebastián de los Reye
Mensajes: 140
Antigüedad: 13 años, 4 meses
Puntos: 2
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
__________________
tecomweb.com - diseño y desarrollo Web
  #6 (permalink)  
Antiguo 26/07/2006, 13:44
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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
__________________
oohh... quisiera ser godines!!!
  #7 (permalink)  
Antiguo 27/07/2006, 11:10
 
Fecha de Ingreso: septiembre-2005
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 0
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.
  #8 (permalink)  
Antiguo 27/07/2006, 11:35
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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.
__________________
oohh... quisiera ser godines!!!
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




La zona horaria es GMT -6. Ahora son las 20:42.