Foros del Web » Creando para Internet » CSS »

ayuda con encabezado

Estas en el tema de ayuda con encabezado en el foro de CSS en Foros del Web. hola! tengo un blog, al cual estoy tratando de alinear el encabezado en un espacio de 1366x159. el tema es que nose como modificar este ...
  #1 (permalink)  
Antiguo 08/09/2010, 14:39
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
ayuda con encabezado

hola! tengo un blog, al cual estoy tratando de alinear el encabezado en un espacio de 1366x159. el tema es que nose como modificar este codigo:

#logo { float:left;height:8px;margin-top:8px;}
#logo h1{background: url(http://img227.imageshack.us/img227/359/encabezadograndecopia.png) top left no-repeat; text-indent: -9999px;float:left;width:1366px;height:149px;}


para que el encabezado me ocupe todo el ancho de pagina...y ademas que se ajuste a todas las resoluciones de pantalla.

alguien me ayuda? este es el blog: www.apachweb.blogspot.com

gracias!!
  #2 (permalink)  
Antiguo 08/09/2010, 14:52
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda con encabezado

Viendo el contenido del tema, esto iría en CSS, por lo cual te contesto en CSS
  #3 (permalink)  
Antiguo 08/09/2010, 14:56
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

ahh perdon pense que estaba en esa seccion..ahora posteo ahi.. gracias
  #4 (permalink)  
Antiguo 08/09/2010, 14:56
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

jajaja estoy en la seccion css!!!
  #5 (permalink)  
Antiguo 08/09/2010, 15:01
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda con encabezado

Hola!

Realmente la cosa no está en el logo, si no en el div que contiene el head, #header-wrap

No se que resolución usas, pero yo desde 1280 x 1024 me dice que hay mas ancho de web, lo adecuado es esto:

Este es el code en css, busca el tuyo y cámbialo por este:
Código CSS:
Ver original
  1. #header-wrap {
  2. height:206px;
  3. margin-bottom:0;
  4. margin-left:auto;
  5. margin-right:auto;
  6. margin-top:0;
  7. [B]width:1263px;[/B]}


La imagen que pongas de head no ha de ser mayor de unos 1300 pero puedes dejar la que está y sustituir esta parte del code, cambiala por la que tu tienes:
Código CSS:
Ver original
  1. #logo h1 {
  2. -moz-background-clip:border;
  3. -moz-background-origin:padding;
  4. -moz-background-size:auto auto;
  5. background-attachment:scroll;
  6. background-color:transparent;
  7. background-image:url("http://img227.imageshack.us/img227/359/encabezadograndecopia.png");
  8. background-position:center top;
  9. background-repeat:no-repeat;
  10. float:left;
  11. height:149px;
  12. text-indent:-9999px;
  13. width:1263px;
  14. }

Espero que te sirva
  #6 (permalink)  
Antiguo 08/09/2010, 15:02
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda con encabezado

Será que marcaste o te marcaron ambas categorías
  #7 (permalink)  
Antiguo 08/09/2010, 15:09
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

Cita:
Iniciado por Shaito Ver Mensaje
Hola!

Realmente la cosa no está en el logo, si no en el div que contiene el head, #header-wrap

No se que resolución usas, pero yo desde 1280 x 1024 me dice que hay mas ancho de web, lo adecuado es esto:

Este es el code en css, busca el tuyo y cámbialo por este:
Código CSS:
Ver original
  1. #header-wrap {
  2. height:206px;
  3. margin-bottom:0;
  4. margin-left:auto;
  5. margin-right:auto;
  6. margin-top:0;
  7. [B]width:1263px;[/B]}


La imagen que pongas de head no ha de ser mayor de unos 1300 pero puedes dejar la que está y sustituir esta parte del code, cambiala por la que tu tienes:
Código CSS:
Ver original
  1. #logo h1 {
  2. -moz-background-clip:border;
  3. -moz-background-origin:padding;
  4. -moz-background-size:auto auto;
  5. background-attachment:scroll;
  6. background-color:transparent;
  7. background-image:url("http://img227.imageshack.us/img227/359/encabezadograndecopia.png");
  8. background-position:center top;
  9. background-repeat:no-repeat;
  10. float:left;
  11. height:149px;
  12. text-indent:-9999px;
  13. width:1263px;
  14. }

Espero que te sirva



que hago con la parte que dice #logo ? la dejo como esta?
  #8 (permalink)  
Antiguo 08/09/2010, 15:12
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda con encabezado

Cita:
Iniciado por limoncillo Ver Mensaje
jajaja estoy en la seccion css!!!
Cita:
Iniciado por limoncillo Ver Mensaje
que hago con la parte que dice #logo ? la dejo como esta?
Si, esa la dejas sin editar.

No se si es que quitaste alguna parte del CSS o estás editando aparte, pero veo el head más abajo de lo normal.

  #9 (permalink)  
Antiguo 08/09/2010, 15:21
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

si...puse el codigo q me dijiste y quedo asi...lueg le saque #logo y se alineo de la forma en que esta ahora.

tambien cambie el ancho y largo de la imagen para q abarque todo el ancho... pero igualmente esta apenitas desalineada...

como soluciono eso?

muchas gracias por tu ayuda!!
  #10 (permalink)  
Antiguo 08/09/2010, 15:23
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda con encabezado

Que resolución tiene tu pantalla?
  #11 (permalink)  
Antiguo 08/09/2010, 15:43
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

Cita:
Iniciado por Shaito Ver Mensaje
Que resolución tiene tu pantalla?
en la notebook tengo 15.4 "

en la de escritorio tengo 22" y no se ve bien el banner en este :( esta corrido
  #12 (permalink)  
Antiguo 08/09/2010, 15:44
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

en la de 22 una resolucion de pantalla de 108 pix
  #13 (permalink)  
Antiguo 08/09/2010, 15:45
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda con encabezado

Cita:
Iniciado por limoncillo Ver Mensaje
en la notebook tengo 15.4 "

en la de escritorio tengo 22" y no se ve bien el banner en este :( esta corrido
Me refiero a la resulución en pixels, 1080 x 1024, 1024 x 768, 800 x 600 etc

En cuanto al problema, puedes hacer que la imagen se redimensione al paso de cambiar el tamaño de la pantalla
  #14 (permalink)  
Antiguo 08/09/2010, 15:46
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda con encabezado

Yo me tengo que marchar un par de horas, pero al volver te puedo dar una solución simple para que el head se haga más pequeño según sea la resolución del monitor.
  #15 (permalink)  
Antiguo 08/09/2010, 16:09
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

Cita:
Iniciado por Shaito Ver Mensaje
Yo me tengo que marchar un par de horas, pero al volver te puedo dar una solución simple para que el head se haga más pequeño según sea la resolución del monitor.
ok..te lo agradeceria mucho!! te espero entonces!! voy a estar toda la tarde cerca de la compu

1366 x 768 pix es la resolucion de mi notebook!
  #16 (permalink)  
Antiguo 08/09/2010, 16:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ayuda con encabezado

Veo que esa página pertenece a una protectora de animales. Creo, y por eso se lo comento, que debería conocer el gestor de contenidos bambu
Si lo encuentra interesante para sus propósitos, contacte con Tunait, moderadora de estos foros y autora del cms.

Sobre su consulta:
veo que ahora tiene un scroll debido debido al h1 del logo. Deje así ese selector:
Código CSS:
Ver original
  1. #logo h1 {
  2. background:url("http://img227.imageshack.us/img227/359/encabezadograndecopia.png") no-repeat scroll center top transparent;
  3. height:159px;
  4. text-indent:-9999px;
  5. width:100%;
  6. }
Pero deberá prevenir colapsos en resoluciones menores: asigne un min-width (y sus equivalentes para las ver. de ie)
Y para prevenir desparrames en resoluciones muy altas, añada un max-width (lo mismo para ie)
  #17 (permalink)  
Antiguo 08/09/2010, 17:00
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

Cita:
Iniciado por kseso? Ver Mensaje
Veo que esa página pertenece a una protectora de animales. Creo, y por eso se lo comento, que debería conocer el gestor de contenidos [URL="http://www.tunait.com/blog/index.php/category/animales/bambu-cms/"]bambu[/URL]
Si lo encuentra interesante para sus propósitos, contacte con [URL="http://www.forosdelweb.com/miembros/tunait/"]Tunait[/URL], moderadora de estos foros y autora del cms.

Sobre su consulta:
veo que ahora tiene un scroll debido debido al h1 del logo. Deje así ese selector:
Código CSS:
Ver original
  1. #logo h1 {
  2. background:url("http://img227.imageshack.us/img227/359/encabezadograndecopia.png") no-repeat scroll center top transparent;
  3. height:159px;
  4. text-indent:-9999px;
  5. width:100%;
  6. }
Pero deberá prevenir colapsos en resoluciones menores: asigne un min-width (y sus equivalentes para las ver. de ie)
Y para prevenir desparrames en resoluciones muy altas, añada un max-width (lo mismo para ie)
hola gracias por contestar...si la pag es para la asociacion a la cual colaboro activamente y necesitamos de este medio para poder difundir y llegar a mas gente..

como veras tengo una idea muy basica de html y css... pero hago lo q puedo..con ayuda de foros y google.

donde deberia agregar min-width y max-width??

gracias! y tuteame! jajaja no soy vieja!
  #18 (permalink)  
Antiguo 08/09/2010, 18:26
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda con encabezado

Cita:
Iniciado por limoncillo Ver Mensaje
donde deberia agregar min-width y max-width??
Pués en el #header-wrap más bien
  #19 (permalink)  
Antiguo 08/09/2010, 19:02
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

Cita:
Iniciado por Shaito Ver Mensaje
Pués en el #header-wrap más bien
y q valores les doy al min y max width?
  #20 (permalink)  
Antiguo 08/09/2010, 19:03
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda con encabezado

Sinceramente no se para que usarlos, si esperas unos minutos a que termine una cosa te doy un code para el encabezado
  #21 (permalink)  
Antiguo 08/09/2010, 23:19
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

ayuda? :P creo que voy a achicarlo nomas al encabezado..a no ser q alguien me guie..?
  #22 (permalink)  
Antiguo 09/09/2010, 08:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ayuda con encabezado

Creo que llegados a este punto, debería usted considerar el adquirir una base mínima de css y html.
Un buen punto de inicio, a mi entender, son los manuales que encontrará en www.librosweb.es
  #23 (permalink)  
Antiguo 09/09/2010, 08:46
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda con encabezado

Cita:
Iniciado por limoncillo Ver Mensaje
ayuda? :P creo que voy a achicarlo nomas al encabezado..a no ser q alguien me guie..?
En unas horas regresaré y te daré un codigo en css y Html para el head con las explicaciones.
  #24 (permalink)  
Antiguo 09/09/2010, 10:18
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

Cita:
Iniciado por Shaito Ver Mensaje
En unas horas regresaré y te daré un codigo en css y Html para el head con las explicaciones.
gracias..igualmente ya lo achique al encabexzado a 1000x148...del mismo tamaño que el blog y quedo bien. espero que pueda verse bien en todas las resoluciones...
  #25 (permalink)  
Antiguo 09/09/2010, 18:05
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda con encabezado

Lo prometido es deuda, así que aquí te dejo lo que tienes que hacer para que tu header se acomode al tamaño de cada pantalla!

Así es como te tiene que quedar al cambiar el css: (Solo sustituye las partes que hay abajo)
Código CSS:
Ver original
  1. #header-wrap {
  2. height:206px;
  3. margin-bottom:0;
  4. margin-left:auto;
  5. margin-right:auto;
  6. margin-top:0;
  7. width:100%;
  8. }
  9. #logo {
  10. float:left;
  11. height:20px;
  12. margin-top:8px;
  13. }
  14. #logo h1 {
  15. -moz-background-clip:border;
  16. -moz-background-origin:padding;
  17. -moz-background-size:auto auto;
  18. background-attachment:scroll;
  19. background-position:left top;
  20. float:left;
  21. height:148px;
  22. text-indent:-9999px;
  23. width:100%;
  24. }

Y añade esta otra línea:
Código CSS:
Ver original
  1. .subir120px{margin-top:-120px}
Y ahora, desde el HTML de la web, busca esta sección:
Código HTML:
Ver original
  1. <div id="logo">
  2. <h1><a href="http://apachweb.blogspot.com/"></a></h1>
  3. </div>

Y cámbiala por esta otra:
Código HTML:
Ver original
  1. <div style="width:100%; text-align:center;">
  2.     <img src="2.png">
  3.     <div class="subir120px">
  4.     <img src="1.png" style="height:140px; float:left;">
  5.     <img src="3.png" style="height:140px; float:right;">
  6.     </div>
  7. </div>

Si no te funciona bien avisa

Última edición por Shaito; 09/09/2010 a las 18:16
  #26 (permalink)  
Antiguo 13/09/2010, 11:50
 
Fecha de Ingreso: septiembre-2010
Mensajes: 31
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: ayuda con encabezado

Cita:
Iniciado por Shaito Ver Mensaje
Lo prometido es deuda, así que aquí te dejo lo que tienes que hacer para que tu header se acomode al tamaño de cada pantalla!

Así es como te tiene que quedar al cambiar el css: (Solo sustituye las partes que hay abajo)
Código CSS:
Ver original
  1. #header-wrap {
  2. height:206px;
  3. margin-bottom:0;
  4. margin-left:auto;
  5. margin-right:auto;
  6. margin-top:0;
  7. width:100%;
  8. }
  9. #logo {
  10. float:left;
  11. height:20px;
  12. margin-top:8px;
  13. }
  14. #logo h1 {
  15. -moz-background-clip:border;
  16. -moz-background-origin:padding;
  17. -moz-background-size:auto auto;
  18. background-attachment:scroll;
  19. background-position:left top;
  20. float:left;
  21. height:148px;
  22. text-indent:-9999px;
  23. width:100%;
  24. }

Y añade esta otra línea:
Código CSS:
Ver original
  1. .subir120px{margin-top:-120px}
Y ahora, desde el HTML de la web, busca esta sección:
Código HTML:
Ver original
  1. <div id="logo">
  2. <h1><a href="http://apachweb.blogspot.com/"></a></h1>
  3. </div>

Y cámbiala por esta otra:
Código HTML:
Ver original
  1. <div style="width:100%; text-align:center;">
  2.     <img src="2.png">
  3.     <div class="subir120px">
  4.     <img src="1.png" style="height:140px; float:left;">
  5.     <img src="3.png" style="height:140px; float:right;">
  6.     </div>
  7. </div>

Si no te funciona bien avisa


gracias lo pruebo y te aviso ;) gracias por preocuparte!

Etiquetas: encabezado
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 13:25.