ayuda con encabezado

limoncillo · #1 (**permalink**) 08/09/2010, 13:39

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!!

Shaito · #2 (**permalink**) 08/09/2010, 13:52

Viendo el contenido del tema, esto iría en CSS, por lo cual te contesto en CSS

limoncillo · #3 (**permalink**) 08/09/2010, 13:56

ahh perdon pense que estaba en esa seccion..ahora posteo ahi.. gracias

limoncillo · #4 (**permalink**) 08/09/2010, 13:56

jajaja estoy en la seccion css!!!

Shaito · #5 (**permalink**) 08/09/2010, 14:01

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#header-wrap {
height:206px;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
[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#logo h1 {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:transparent;
background-image:url("http://img227.imageshack.us/img227/359/encabezadograndecopia.png");
background-position:center top;
background-repeat:no-repeat;
float:left;
height:149px;
text-indent:-9999px;
width:1263px;
}

Espero que te sirva

Shaito · #6 (**permalink**) 08/09/2010, 14:02

Será que marcaste o te marcaron ambas categorías

limoncillo · #7 (**permalink**) 08/09/2010, 14:09

Cita:

Iniciado por Shaito

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#header-wrap {
height:206px;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
[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#logo h1 {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:transparent;
background-image:url("http://img227.imageshack.us/img227/359/encabezadograndecopia.png");
background-position:center top;
background-repeat:no-repeat;
float:left;
height:149px;
text-indent:-9999px;
width:1263px;
}

Espero que te sirva

que hago con la parte que dice #logo ? la dejo como esta?

Shaito · #8 (**permalink**) 08/09/2010, 14:12

Cita:

Iniciado por limoncillo

jajaja estoy en la seccion css!!!

Cita:

Iniciado por limoncillo

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.

limoncillo · #9 (**permalink**) 08/09/2010, 14:21

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!!

Shaito · #10 (**permalink**) 08/09/2010, 14:23

Que resolución tiene tu pantalla?

limoncillo · #11 (**permalink**) 08/09/2010, 14:43

Cita:

Iniciado por Shaito

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

limoncillo · #12 (**permalink**) 08/09/2010, 14:44

en la de 22 una resolucion de pantalla de 108 pix

Shaito · #13 (**permalink**) 08/09/2010, 14:45

Cita:

Iniciado por limoncillo

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

Shaito · #14 (**permalink**) 08/09/2010, 14:46

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.

limoncillo · #15 (**permalink**) 08/09/2010, 15:09

Cita:

Iniciado por Shaito

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!

kseso? · #16 (**permalink**) 08/09/2010, 15:26

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#logo h1 {
background:url("http://img227.imageshack.us/img227/359/encabezadograndecopia.png") no-repeat scroll center top transparent;
height:159px;
text-indent:-9999px;
width:100&#37;;
}

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)

limoncillo · #17 (**permalink**) 08/09/2010, 16:00

Cita:

Iniciado por kseso?

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#logo h1 {
background:url("http://img227.imageshack.us/img227/359/encabezadograndecopia.png") no-repeat scroll center top transparent;
height:159px;
text-indent:-9999px;
width:100%;
}

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!

Shaito · #18 (**permalink**) 08/09/2010, 17:26

Cita:

Iniciado por limoncillo

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

Pués en el #header-wrap más bien

limoncillo · #19 (**permalink**) 08/09/2010, 18:02

Cita:

Iniciado por Shaito

Pués en el #header-wrap más bien

y q valores les doy al min y max width?

Shaito · #20 (**permalink**) 08/09/2010, 18:03

Sinceramente no se para que usarlos, si esperas unos minutos a que termine una cosa te doy un code para el encabezado

limoncillo · #21 (**permalink**) 08/09/2010, 22:19

ayuda? :P creo que voy a achicarlo nomas al encabezado..a no ser q alguien me guie..?

kseso? · #22 (**permalink**) 09/09/2010, 07:08

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

Shaito · #23 (**permalink**) 09/09/2010, 07:46

Cita:

Iniciado por limoncillo

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.

limoncillo · #24 (**permalink**) 09/09/2010, 09:18

Cita:

Iniciado por Shaito

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...

Shaito · #25 (**permalink**) 09/09/2010, 17:05

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#header-wrap {
height:206px;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
width:100%;
}
#logo {
float:left;
height:20px;
margin-top:8px;
}
#logo h1 {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-position:left top;
float:left;
height:148px;
text-indent:-9999px;
width:100%;
}

Y añade esta otra línea:

Código CSS:

Ver original.subir120px{margin-top:-120px}

Y ahora, desde el HTML de la web, busca esta sección:

Código HTML:

Ver original<div id="logo">
<h1><a href="http://apachweb.blogspot.com/"></a></h1>
</div>

Y cámbiala por esta otra:

Código HTML:

Ver original<div style="width:100%; text-align:center;">
    <img src="2.png">
    <div class="subir120px">
    <img src="1.png" style="height:140px; float:left;">
    <img src="3.png" style="height:140px; float:right;">
    </div>
</div>

Si no te funciona bien avisa

limoncillo · #26 (**permalink**) 13/09/2010, 10:50

Cita:

Iniciado por Shaito

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#header-wrap {
height:206px;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
width:100%;
}
#logo {
float:left;
height:20px;
margin-top:8px;
}
#logo h1 {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-position:left top;
float:left;
height:148px;
text-indent:-9999px;
width:100%;
}

Y añade esta otra línea:

Código CSS:

Ver original.subir120px{margin-top:-120px}

Y ahora, desde el HTML de la web, busca esta sección:

Código HTML:

Ver original<div id="logo">
<h1><a href="http://apachweb.blogspot.com/"></a></h1>
</div>

Y cámbiala por esta otra:

Código HTML:

Ver original<div style="width:100%; text-align:center;">
    <img src="2.png">
    <div class="subir120px">
    <img src="1.png" style="height:140px; float:left;">
    <img src="3.png" style="height:140px; float:right;">
    </div>
</div>

Si no te funciona bien avisa

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