Foros del Web » Creando para Internet » CSS »

Centrar un título y una imagen en el encabezado

Estas en el tema de Centrar un título y una imagen en el encabezado en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/12/2011, 09:54
 
Fecha de Ingreso: diciembre-2011
Mensajes: 20
Antigüedad: 10 años, 7 meses
Puntos: 0
Centrar un título y una imagen en el encabezado

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! ~
  #2 (permalink)  
Antiguo 03/12/2011, 13:25
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años
Puntos: 1567
Respuesta: Centrar un título y una imagen en el encabezado

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. div#cap {
  9. background-color: green;
  10. text-align: right;
  11. padding: 20px;
  12. }
  13. div#cap h1 {
  14. float: left;
  15. }
  16. div.clear {
  17. clear: both;
  18. }
  19. /*]]>*/
  20. </head>
  21.    
  22. <div id="cap">
  23. <h1>formula 1</h1>
  24. <img src="formula.jpg" width="200" height="100" alt="" />
  25. </div>
  26.  
  27. <div class="clear"></div>
  28.  
  29. </body>
  30. </html>

y desde ya , empezar con unos buenos manuales
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 03/12/2011, 14:01
 
Fecha de Ingreso: diciembre-2011
Mensajes: 20
Antigüedad: 10 años, 7 meses
Puntos: 0
Respuesta: Centrar un título y una imagen en el encabezado

¡¡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!! :)
  #4 (permalink)  
Antiguo 03/12/2011, 15:42
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años
Puntos: 1567
Respuesta: Centrar un título y una imagen en el encabezado

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 03/12/2011, 16:13
 
Fecha de Ingreso: diciembre-2011
Mensajes: 20
Antigüedad: 10 años, 7 meses
Puntos: 0
Respuesta: Centrar un título y una imagen en el encabezado

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!~~
  #6 (permalink)  
Antiguo 03/12/2011, 16:29
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años
Puntos: 1567
Respuesta: Centrar un título y una imagen en el encabezado

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 05/12/2011, 03:05
 
Fecha de Ingreso: diciembre-2011
Mensajes: 20
Antigüedad: 10 años, 7 meses
Puntos: 0
Respuesta: Centrar un título y una imagen en el encabezado

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

Lo intento y no hay manera..



Saludos y gracias!

Etiquetas: encabezado, html, fondo
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 12:07.