Hace ya un par de meses, El escaparate de Rosa 
publicó un artículo donde en los comentarios se chismorréa de lo lindo pero, acá somos gente seria así que solamente nos ocuparemos del tema técnico (y seguiremos leyendo los chismes, claro.
El título lo dice todo: Header con "ancho total" y viene a cuento para seguir con el tema del último tutorial donde se hablaba de centrar los blogs.
El término ancho total se refiere justamente a eso, a que la parte superior del blog, eso que llamamos "header" ocupe todo el ancho del monitor, sin importar la resolución de este.
publicó un artículo donde en los comentarios se chismorréa de lo lindo pero, acá somos gente seria así que solamente nos ocuparemos del tema técnico (y seguiremos leyendo los chismes, claro.El título lo dice todo: Header con "ancho total" y viene a cuento para seguir con el tema del último tutorial donde se hablaba de centrar los blogs.
El término ancho total se refiere justamente a eso, a que la parte superior del blog, eso que llamamos "header" ocupe todo el ancho del monitor, sin importar la resolución de este.
La forma de hacerlo es sencilla, en realidad, no se trata de ampliar el blog o el HEADER sino de agregar una imagen extra en el BODY, una imagen que se repita y que, por ejemplo, como ha hecho Rosa, tenga colores iguales a los del HEADER mismo.
La imagen repetida la ponemos en el BODY de esta manera:
La imagen repetida la ponemos en el BODY de esta manera:
body {
background: #color url(URL_imagen) repeat-x left top;
.......
}El body es un rectángulo que equivale a la pantalla del monitor y encima de este rectángulo está nuestro blog formado por una serie de rectángulos más. Si asimilamos esto a una serie de hojas de papel transparente, diríamos que en una hoja (BODY) dibujamos algo y en otra más chica que ponemos encima (HEADER), dibujamos otra cosa con lo cual, veremos ambas.
La imagen del BODY puede ser cualquier cosa, como pueden usarse GIFs o PNGs transparentes o traslúcidos también podríamos usar modelos de fondos fijos:
La imagen del BODY puede ser cualquier cosa, como pueden usarse GIFs o PNGs transparentes o traslúcidos también podríamos usar modelos de fondos fijos:
body {
background: #color url(URL_imagen) repeat-x fixed left top;
.......
}Pero, siempre hay alguien que pide un poco más, por ejemplo ¿y si quiero hacer lo mismo con el FOOTER?
Si hemos entendido la idea de los rectángulos superpuestos, es sencillo. Hay que buscar otro que sea tan grande como el BODY y, en realidad hay uno más; un rectángulo del que normalmente no hablamos y que en realidad, es el primero, el que está más abajo de todos y que contiene a toda la página. Seguramente lo han visto: es el elemento HTML.
En toda etiqueta HTML podemos agregar propiedades CSS y esta no es la excepción así que, si quisiéramos colocar dos fondos que ocupen todo el ancho de la pantalla, podríamos usar esos dos rectángulos:
Si hemos entendido la idea de los rectángulos superpuestos, es sencillo. Hay que buscar otro que sea tan grande como el BODY y, en realidad hay uno más; un rectángulo del que normalmente no hablamos y que en realidad, es el primero, el que está más abajo de todos y que contiene a toda la página. Seguramente lo han visto: es el elemento HTML.
En toda etiqueta HTML podemos agregar propiedades CSS y esta no es la excepción así que, si quisiéramos colocar dos fondos que ocupen todo el ancho de la pantalla, podríamos usar esos dos rectángulos:
html {
background: #color url(URL_imagenFOOTER) repeat-x left bottom;
.......
}
body {
background: transparent url(URL_imagenHEADER) repeat-x left top;
.......
}El orden en que pongo las imágenes es indiferente siempre y cuando la posición de la que va abajo sea bottom y la posición de la que va arriba sea top. Lo que no es indiferente es el color de fondo porque estamos hablando de imágenes que no son muy grandes, gradientes o patterns que se repiten pero que terminan; en estos ejemplos sólo son de 5x200 pixeles así que el resto del fondo, eso que la imagen no alcanza a cubir, se llena con el color que repite el último color de la imagen (#DDDDFF).
Pensemos en las hojas transparentes, HTML es la de abajo, la pinto de un color; BODY es la de arriba, a esa le digo que sea transparente (transparent) para que se vea la de abajo, si lo hiciera al revés, la taparía y no la vería.
¿Qué pasará si en lugar de mosaicos repetitivos quiero poner una imagen fija?
No hay problema, sólo debemos cambiar repeat-x por no-repeat pero, deberemos tener en cuenta que se colocará en una posicion que dependerá del la resolución de la pantalla de quien abra la página así que, colocándola en el BODY no podremos controlarla.
Pensemos en las hojas transparentes, HTML es la de abajo, la pinto de un color; BODY es la de arriba, a esa le digo que sea transparente (transparent) para que se vea la de abajo, si lo hiciera al revés, la taparía y no la vería.
¿Qué pasará si en lugar de mosaicos repetitivos quiero poner una imagen fija?
No hay problema, sólo debemos cambiar repeat-x por no-repeat pero, deberemos tener en cuenta que se colocará en una posicion que dependerá del la resolución de la pantalla de quien abra la página así que, colocándola en el BODY no podremos controlarla.
También lo podemos colocar fijo, de tal manera que no se mueva cunado hacemos scroll, para eso usamos la palabra fixed:
body {
background: transparent url(URL_imagenFIJA) no-repeat fixed left top;
.......
}¿Y si queremos usar tres imágenes o cuatro o cinco? Parece un poco abusivo pero hay de todo.
Se nos acabaron los rectángulos predefinido pero, nada impide crear otros usando la etiqueta DIV; basta buscar la etiqueta <body> y agregar un nuevo rectángulo con un ID único:
Se nos acabaron los rectángulos predefinido pero, nada impide crear otros usando la etiqueta DIV; basta buscar la etiqueta <body> y agregar un nuevo rectángulo con un ID único:
<body> <div id='otroBODY'>
y por supuesto, debemos cerrarla. Para eso, buscamos </body> y, justo antes, colocamos el cierre:
</div>
</body>De este modo, podemos agregar cuantas se nos ocurra y luego, agregar el CSS correspondiente:
html {
background: #color url(URL_imagenFOOTER) repeat-x left bottom;
.......
}
body {
background: transparent url(URL_imagenHEADER) repeat-x left top;
.......
}
#otroBODY {background: transparent url(URL_imagenCENTRAL) no-repeat fixed left top;
}
57 comentarios:
esa es la entrada donde Rosi además de 'destripadora' hace 'ilusionismo' :)
Tengo el header en penitencia, hasta que no consiga lo que quiero...así quedará pensando contra la pared...
Necesito tener clases con vos aquí...la entrada es excelente!!! y no pongas al diablito ahhh aquí no está :O, soy de las que gusta poner fondos y más fondos...a poner en práctica HASTA LA VISTA BABY :D
Genial!!! si supieras cuanto estuve luchando con un blog de pruebas para poder ponerle un footer que abarcara todo el ancho de la pantalla... la imagen superior ya la tenía pero me faltaba lo del footer,ya que siempre quedaba la imagen limitada al ancho del footer y no sabía como hacerlo ya que no tengo mucha idea de esto, ahora voy a intentarlo y seguro me sale porque lo explicaste muy bien. ah, muy bueno el post anterior. Saludos
realmente uno todo los días aprende algo nuevo, lo de la imagen html no lo sabia, si lo de boby.
tambien te cuento que hay un código script de jQuery que podes darle movimiento al fondo body
Genial, insuperable, no puede estar mejor explicado :)
A ver cuando se decide, Doña Graciela :D
Me alegra que sirviera, Kirei. No es difícil y en realidad, hay varias formas de hacer lo mismo. Todas sirven
Vku: Sí, lo se pero prefieron los fondos quietitos para no marearme :D También es posible hacerlo si librerías, con un script "normal" Veremos si supero mi aprehensión a esas cosas y lo muestro :D
Gracias, Gem@ :$
que ondas jmiur, pasaba a saludar jejeje ya despues te pregunto algo jaja siempre ando de pregunton
atte Unimundi ahhh y no si te dije gracias, te pedi ayuda porque mi fondo desaperecio, tu me dijistes que mi codigo estaba mal puesto, no se si te repondi pero si no, gracias de nuevo
oye jmiur tuve problemas para poner comentarios, en comentarios icrustados, de la forma en que se visualiza la ligth windows es la que no me falla nada te estoy escribiendo en ella, no se si mi error es mi o que ondas, pero tuve problemas
Bueno lo espero.
Ojo para cuando lo hagas no te vallas a marear.:D
Hola JMiur! Tengo un problema, resulta que me eliminaron la cuenta en YouTube (youtube.com/worldreggaeton) por Problemas de Copyright y eso!
Entonces cuando trato de entrar me dice "Tu cuenta se ha desactivado de forma permanente.. Entonces.. Quiero hacer otra cuenta de YouTube, con la misma cuenta de Google.. Pero al parecer no se puede..
Que sabes tu?? se puede o no?
Muy bien explicado, pero para gustos los colores a mi me gusta centradito jajaja, de todos modos le puse la estrellita de favorito porsi un día me decido
Saludos
javfanel: Llegó el mail, no te preocupes ¿no lo respondía? Puede ser que se me haya pasado pero vi que todo estaba resuelto :D
Vku: Lo intentaré :D
PedorX: La verdad, l odesconozco, creo ue puedes sacar otra cuenta con un mail diferente al anterior.
Antonieta: Por suerte hay gustos para todos :D
:S JMIUR la etiqueta HTML está en todas las plantillas, encuentro /html...pero no html
Graciela:
Está en todas las plantillas y en todas las páginas webs. En este caso, es la tercera línea:
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/ ....... >
De todas maneras, no te preocupes por verla o no verla, existe igual así que siga adelante que funcionará :D
ohhh no sabía donde comenzaba...bien allá vamos...muchas gracias!!! :)
Jmiur ya puse una imágen en el footer, no es como me gusta, pero ya saldrán ideas.
Ahora mi pregunta vá hacia la navlist: quedaba algo centrada, pero como he sacado varias etiquetas, esta tirada hacia la derecha...cómo puedo volverla algo hacia la izquierda ;) jajaja recordé algo!!!
Graciela:
Está centrada, centrada con respecto al header. Para modificarla, lo primerp que debes hacer es eliminar las etiquetas CENTER. Dice algo así:
<ul id="navlist">
<center>
<li .............
...........
</center>
</ul>
Eso, la moverá completamente a la izquierda. Luego, buscas esto:
ul#navlist {
......
margin-left: 0;
}
Y allí, en lugar de cero, pones un valor. Por ejemplo:
margin-left: 115px;
casi la centra, así que cualquier bvalor más bajo la corre hacia la izquierda.
muy bien!!!...pero mira que toqué todos los códigos, no ví center :S...
Muchas gracias!!!
ul#navlist
{
margin-top:-2px;
margin-left: 0;
padding-left: 0;
white-space: nowrap;
font-size:14px;
font-family: 'Century Gothic';
tesoro no estaba center, puse montones de número en margin-top, margin-left, padding, no cambia nada
Graciela. Esa etiqueta CENTER está n la plantilla, Expandí los artilugios porque deberías ver.a. Si no se quita, siempre se centrará. Dice esto:
<div id="navcontainer">
<ul id="navlist">
<center>
<li id="active">
......................
</center>
</ul>
</div>
:S perdón J buscaba con doble comilla, uno a uno...ufff gracias ya encontré lo que dices...buen noni noni!!!
sigo con la ul#navlist: se puede agregar bordes a ella. Lo he intentado, pero sale en bloque :S...existe alguna oportunidad para mi navlist??? :)
Estoy haciendo un curso con ella jajajaja
Sí, se puede. De hecho, lo has puesto :D
En border puedes usar varias "palabras" que identifican la forma en que se verá. estás usando outset, podría ser solid o varias otras.
También podrías ponerle un fondo con background-color: #C7C7D9; o con cualquier otro color.
No sé exactamente si tenés una idea del aspecto final que querés darle.
ohhh sí :)...bien yo me refería a hacer un borde a cada una de las casillitas...pero sabes qué voy a probar a ponerle un fondo jajaja y dale con los fondos (esto es para mi).
Algo que no sabes: tengo bien aprendido solid, dashed, dotted y otras cositas que saqué de aquí...ese borde de las entradas, la sidebar lo extraje de alguna entrada tuya...gracias y buen día
stop está todo en la entrada que me indicas adiosssssssssss
Bien por lo del fondo :D
Para cada celdita, podés usar:
#navlist li
o bien
#navlist a:link, #navlist a:visited
o bien:
#navlist a:hover
o las tres al mismo tiempo.
me preguntas si tengo alguna idea jajaja...aquí estoy tratando de entender el ancho total de header.
Bien me hice un dibujo para no olvidar que cada cosa es una cajita, pero mi concentración se vá al C----O.
Ya te he contado que mi casa, casi todas son así, solo que las mamás en general no tienen un blog...esto merece una entrada: tratar de explicar qué es un blog a la gente :)...suena el TE a cada rato, tocan el timbre, qué vamos a cenar???...puedo apagar la radio??? más y más...
No te voy a hacer pregunta solo ando 'pispeando' qué antigüedad el término :D
Pues ... pispee, nomás :D
El blog tien 980 pixeles, ahora, la imagen del header tiene 950. No sé si ese dato ayuda :)
la había realizado con 980 px, Kenneth me avisó que sobresalía...nuevamenete la coloco con los 980...qué sería de mi sin mi Phixr, me encanta es simple, con el ratoncito Gimp 'no curtimos onda', me queda probar Photoshop pero debe venir gratis gratis :)...un día genial!!!
Recuerdo que sobresalía, es cierto pero me parece que era más ancha de 980 pixeles o bien tenía alguna clase de margen. Ahora, la veo ocupando el ancho perfectamente :D
hola, plis plis necesito tu ayuida estaba siguiendo tus pasos y me sale
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "body" must be terminated by the matching end-tag "".
podrias ayudarme??? :(( estoy desesperada, te voy a enviar lo que he hecho a tu correo y plis mi blog es http://princessluxe.blogspot.com/ en caso que quieras ayudarme puedes escribirme alli, ese no es mi blog de prueba te envio el codigo a tu mail. gracias
Recién he contestado tu mail y allí va la respuesta; no tendrás problemas en solucionarlo.
JMiur se puede poner una imagen del fondo a content-wraper? Lo he intentado con background: url('link') y no me deja.
Si. se puede, no deberías tener problemas ¿Qué significa que no te deja? ¿sale un error? ¿no la ves? Colocala, me avisas y me fijo; si no se ve, es posible que la direccion de la imagen sea incorrecta.
Hola.... bueno estuve precticando... y sale +-, donde pongo el código??? en que parte del html?pongo html { background: #color url(y el resto...},se me ocurrió mirar tu código fuente... y era totalmente distinto al que tengo y el codigo estaba en style y yo en mi plantilla no lo encuentro, abrí los artilugios... y nada....?parece otra plantilla y sin embargo es la misma.
El footer se puede escribir? como, porque en el dreamweaver se escribe como una parte cuaquiera de la página y vos en la demo pusite este es el footer.:D Me gusto el efecto del cambio de color en el texto, lo explicas en algún post?:)
gracias
Ese código es CSS así que, lo mejor es ponerlo entre <b:skin> y </b:skin>.
Lo que ocurre es que la plantilla y el código fuente siempre son diferentes; la plantilla posee instrucciones que crean una serie de etiquetas HTML en base a una serie de condiciones. En este caso, <b:skin> se convierte en <style>.
El footer, lo mismo que cualquier otra parte de la plantilla, se puede escribir. Por ejemplo, si hay una sección verá que en la primera pantalla de diseño, aparece un enlace allí debajo para agregar gadgets. Funcionará igual que la sidebar, Puedes agregar lo que quieras, por ejemplo, elementos HTML.
¿A cual cambio de color te referís? ¿En los enlaces?
Hola Jmiur! para añadir esta una nueva imagen en el blog, entonces como seria? escribir esta nueva funcion css
.
.
.
html {
background:#ffffff url(la imagen) repeat-x bottom;
}
body {
etc...
es asi? no hay que añadir nada mas? joe es que ya llevo un rato dandole ahi y que no hay manera. Quiero aprovechar ese recuadro html.
Gracias.
TEndría que ver lo que estás haciendo pero si, puede ponerse fondo en la etiqueta HTML como en cualquier otra.
Aki te lo dejo en un blog de pruebas JMiur. Perdona por la tardanza.. esta semana santa..
Haber si me puedes decir donde esta el fallo, ya que es algo muy simple, y no te resultara mucho trabajo encontrarlo.
mi blog de pruebas: http://assddasd.blogspot.com/
Darte las gracias Gracias JMiur como siempre ya que nos haces la vida mas fàcil a todos aquellos que empezamos aprender en este mundo de códigos y dolores de cabeza :) Un cordial saludo!
Bien, ahora la pregunta sigue siendo la misma ¿dónde quieres colocar una imagen de fondo? ¿qué imagen?
Me gustaria colocarla en el footer JMiur :S
La imagen sería esta:
http://2.bp.blogspot.com/_DYKjO_yLq2M/S7n4jkTorjI/AAAAAAAAA2U/1LM2biCnD18/s00/footer.jpg
Así como está, n ose verá nada ya que ene l footer no hay ningún contenido pero, se puede darle altura para ver algo, aunque esté vacio, agregando esto:
Por ejemplo, algo a
#footer-wrapper {
background:transparent url(http://2.bp.blogspot.com/_DYKjO_yLq2M/S7n4jkTorjI/AAAAAAAAA2U/1LM2biCnD18/s00/footer.jpg) repeat left top;
height:300px;
}
Lo que no tiene mucho sentido es usar esa imagen ya que sólo es un color fijo as´uqe sería más simple, colocar el color y nada más:
#footer-wrapper {
background-color:#222;
height:300px;
}
ya te entiendo JMiur lo que quieres decir, pero es que yo lo hago para poder tener ancho total de esa imagen de 3 colores en el footer. Por eso decia como hacerlo, con esa imagen que iria en el html situadando la imagen en bottom. Ups!! Sry!!!:D Perdón por sino me he sabido explicar. Milgracias.
Si lo que quieres es rpetir el esquema que se ve arriba, color1 color2 color1; lo que te falta es agregar alguna clase de contenido en el footer ya que, al no haber nada dentro, todo lo que tienes es un rectángulo que ocupa el ancho de la plantalla y que tampoco tiene altura.
Un ejemplo burdo; agrega en el footer un elemento HTML y allí coloca esto:
<div style="background-color:#336699;height:300px;width:760px;margin:0 auto;"></div>
además, coloca esto en el CSS:
#footer-wrapper {height: 300px;background-color:#528BC5;}
El resultado será algo como esto
Hola Jmiur, lo que quiero saber es si éstos estilos se pueden aplicar sobre el header-wrapper{... y el sidebar-wrapper{... para que muestren una imágen sobre estos cuadros, algo así como una cabecera de éstos dos :S :S :S
Cualquier estilo puede aplicarse a cualquier parte pero dependerá de lo que quieras hacer, si se trata de colocar varios fondos, hay que colocar varios divs, uno para cada uno de ellos siguiendo el mismo criterio.
<div id="sidebar-wrapper>
<div id="segundoDIV>
<div id="tercerDIV>
........
Si, muchas gracias :D :D :D
Hola JMiur, es posible centrar la imagen fija y colocarle el color que quiera a los costados de la imagen fija.Gracias :D
Saludos.. yo quisiera saber como ponerlo en pantalla completa asi como tienes este! que el banner y el menu no se ven en el medio sino pegados desde las esquinas!!!!! Please Help
A.C.:
Se centra de modo similar a cualquier otro fondo; por ejemplo:
background: transparent url(MIimagen) no-repeat fixed 50% 0;
la centra horizontalmente.
background: transparent url(MIimagen) no-repeat fixed 0 50%;
la centra verticalmente.
background: transparent url(MIimagen) no-repeat fixed 50% 50%;
la centra en ambos sentidos.
ivan cepeda:
no sé si te refieres a este blog. Si es así, no ocurre eso sino que dependerá de la resolución de la pantalla que utilices. Tal vez te refieres a este tipo de cosas.
hola, soy un seguidor tuyo y me baso en muchas cosas como las explicas acá.
La duda que tengo no se bien donde ponerla no se bien donde esta el error.
Mi blog: 2manybootlegs.blogspot.com.ar
Cuando entro en un post o alguna página, antes de que termine de cargar el rectángulo del post, se puede ver el texto de las entradas (sin formato) en el fondo, también se puede ver en "Si te gusta" que está abajo del botón "Compartir". Lo que quiero es esconder ese texto sin afectar el funcionamiento o los colores de la página. Probé un par de cosas pero todas sin resultado.
Gracias de antemano.
En realidad, podrías eliminar ese texto ya que no parece tener un uso practico. Se ve antes que el boton porque es un texto así que se carga inmediatamente.
También deberías condicionar y ocultar el widget PopularPosts1 que se muestra debajo de las entradas.
Hola, y desde ya muchísimas gracias porque este blog me viene acompañando y orientando hace un par de días porque hacía rato que no usaba Blogger, y volví a agarrarlo y como siempre, me aburría lo que tenía y quise empezar de cero.
Mi blog es http://veintiunodefebrero.blogspot.com
Mi problema es el siguiente, como vas a ver, después de que termina el texto, la página sigue bajando y no quiero eso. Hace días que vengo mirando y mirando y la verdad que no sé qué es lo que me está causando eso. Quiero que se ajuste al texto. ¿Se entiende?
Nuevamente agradezco y espero respuestas.
Eso ocurre porque en la regla de estilo de la sidebar le indicas que la altura sea de 3000 pixeles:
#sidebar-wrapper {
...
height: 3000px;
}
hola, te pido disculpas por adelantado por las molestias y lo evidente que pueda resultar mi consulta, pero créame, llevo días buscando tutoriales por la red, he intentado el de esta misma entrada en varias ocasiones ya y no lo logro, así que finalmente me decidido por consultárselo, el caso es que el tiempo se me echa encima, puesto que muy pronto lanzó mi fanzine, lo que llevo días intentando es que la cabecera de mi blog (utilizo la plantilla mínima modificada) quede como puede verse en este otro blog: http://www.finiterank.com/notas/ (con que la imagen se ajuste al ancho total de la resolución me daría por más que satisfecho), creo que el tema de los botones y demás puedo apañarlo, pero lo de la cabecera no lo logro
le estaría muy agradecido si pudiese darme algunas indicaciones
gracias y un saludo
Tendrías que mostrarme cuál es tu blog para ver la estructura. Básicamente, el header, debe estar fuera de cualquier contenedor, probablemente, inmediatamente después de la etiqueta body de tal forma que aplicándole un 100% de ancho, este, cubra el ancho total de la ventana.
Dado que estás usando una de las nuevas plantillas de Blogger y no una mínima, todo se complica más pero, en ambos casos la solución es similar. En este caso el header debe quitarse de donde esta y colocarlo fuera de culaquier div cuya clase sea content-outer ya que esta define al contenedor con un ancho de 800 pixeles.
Tal como dije antes, debes ubicar el header afuera, bien arriba, luego de la etiqueta body y después establecer las propiedades.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...