Centrar un título y una imagen en el encabezado

efrencitopool · #1 (**permalink**) 03/12/2011, 09:54

Quiero agregar mi web un texto izquierda centrado y luego una imagen a la derecha.

Ejemplo:

Si la imagen es de alto 100, quiero que el título este a la mitad de la altura de la imagen..

El mejor Forosweb ____________________________________ IMAGEN

Lo intente con fload de la siguiente manera, pero no consigo centrar el texto

<HTML>
<div id=cap>
<br>
<br>
<H1> Formula 1 </H1>
<img src="formula.jpg" width="200" height="100" />
<div id="clear">
</div>
</div>
</HTML>

<CSS>

div#cap {
background-color: green;
margin-left: 10px;
margin-right: 10px;
padding:10px;
}

div#cap img {
float: right;
}

div#clear {
clear: both;
}

div#cap h1 {
display: inline;
padding-top: 10px;
padding-left: 40px;
}

</CSS>

Saludos y gracias! ~

emprear · #2 (**permalink**) 03/12/2011, 13:25

En primer lugar, no presentes más código de esta manera

<HTML>
<div id=cap>
<br>

incluí siempre un doctype valido ,el head y el body
no utilices id para tus divs "clear", usá class, siempre es probable que necesites otras de esas en el resto del html, y los id deben ser únicos
no intentes posicionar cosas con saltos de línea <br>

tu html y css deberían ser

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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
div#cap {
background-color: green;
text-align: right;
padding: 20px;
}
div#cap h1 {
float: left;
}
div.clear {
clear: both;
}
/*]]>*/
</style>
</head>
<body>
    
<div id="cap">
<h1>formula 1</h1>
<img src="formula.jpg" width="200" height="100" alt="" />
</div>
 
<div class="clear"></div>
 
</body>
</html>

y desde ya , empezar con unos buenos manuales
Saludos

efrencitopool · #3 (**permalink**) 03/12/2011, 14:01

¡¡Interesanteeeeee, sí señor!! Gracias por las aclaraciones sobre "div y class".

Yo estaba posicionando la imagen la derecha, porque de esa manera me lo dijo el profesor, estabamos intentado posicionar el título y la imagen y sin solución.

Pero lo curioso es que, ¿como puede ser que la imagen se pone automáticamente en la parte derecha?? Es mi gran curiosidad ahora mismo, por que acabo de modificar y me sale bien. Y lo mejor de todo, he quitado:
--> CSS <---

div.clear {
clear: both;
}

luego en "HTML"

<div class="clear"></div>

Y me sigue saliendo bien. ¿qué curioso no? puedes probarlo y me comentas..

Por cierto, ¿me recomiendas algun enlace? es que ando mirando algo para crear una web de un Pub (un bar por las noches).

Gracias por la ayuda!! :)

emprear · #4 (**permalink**) 03/12/2011, 15:42

lo que pone la imagen a la derecha es text-align:right, ya que la misma se comporta como un elemento inline dentro del div.
Como eso afectaría también al h1, a este le aplicamos float:left;
la div que hace el clear, en tu caso no hace diferencia, la dejé por el comentario que te hice.

Saludos

efrencitopool · #5 (**permalink**) 03/12/2011, 16:13

Hostia, valee, ¡¡qué interesanteeeeee!!!!

Muchas gracias por las molestias y por hacer que esto me empieze a gustar más y más! :D

Una cosa más, ¿sabes de alguna web donde pueda mirarme alguna plantilla o algo de lo que yo pueda seguir? Es que intento hacer una web de un pub de noche (es un bar de copas).

Saludos de nuevo, gracias!~~

emprear · #6 (**permalink**) 03/12/2011, 16:29

hay decenas de sitios con templates, probá en este
http://www.freewebtemplates.com/
Si estás empezando, para aprender, te recomiendoque busques las que son xhtml+css. Las premium ó las que tienen un precio pasalas por alto, con respecto al tema específivo de tu página, no se si habrá, pero tenés las estructuras y es cosa de reemplazar alguna imagen

De seguro en Goolge encontras muchos otros sitios (pero insisto, busca las que diga xhtml)

Saludos

efrencitopool · #7 (**permalink**) 05/12/2011, 03:05

Hola, una pregunta, como puedo hacer para poder separar el "logotipo" del "menu"

Lo intento y no hay manera..

Saludos y gracias!