¿Cómo posicionar un header fijo con fondo repetido en CSS/HTML?

Lubricidad Hernandez · 14 May 2012

¡Buenas! Qué tal compañeros.

Me encuentro haciendo un blog completamente por gusto. Me he interesado en aprender a pasar plantillas diseñadas con Photoshop a HTML, y de éste a Wordpress. Lo cierto es que no tengo mucha idea, es mi primer "diseño" web, y lo que estudio no tiene nada que ver con ordenadores, ni con diseño ni informática, pero me gusta, así que aprendo un poco por mi cuenta a base de ensayo y error. Soy muy curioso e investigo mil veces y leo de todo antes de preguntar, pero esta vez por más vueltas que le dé, como tengo poca o ninguna idea...

Sé que mi problema es sencillo y lo resolveréis en un segundo, ¡pero yo no lo veo! Maldito de mí. La poca idea que tengo es de un blog personal que tengo en Blogger y de mi primer contacto con Wordpress, que fue para traducir una plantilla.

Quiero repetir esta imagen arriba a todo lo ancho del navegador, amoldándose al tamaño de la ventana. Pero que el Header quede completamente fijo en el centro a la anchura de 1000px. Creía saber cómo pero habré hecho un cacao...

Enlace eliminado

Mi HTML es:

Insertar CODE, HTML o PHP:

</head>
<body>


<div id="wrapper">
    <div id="header">
         <ul id="menu">
             <li><a href="#">Inicio</a></li>
             <li><a href="#">Cine</a></li>
             <li><a href="#">Música</a></li>
            <li><a href="#">Literatura</a></li>
          </ul>
         <ul id="redes">
            <li><a href="#">RSS</a></li>
             <li><a href="#">Twitter</a></li>
             <li><a href="#">Facebook</a></li>
         </ul>
         <div id="logo"></div><!-- Fin de logo -->
     </div><!-- Fin de header -->
.
.
.
</div><!-- Fin de wrapper -->


</body>
</html>

Y el CSS el siguiente:

Insertar CODE, HTML o PHP:

/* Maquetación */


#wrapper {
    widht: 1000px;
    margin: 0 auto;
}


#header {
    width: 100%;
    background:url(../img/encabezado-bg.jpg) repeat-x;
    height: 194px;
    float:left;
}


#logo {
    background:url(../img/logo.png) no-repeat;
    height: 117px;
    margin: 25px 0 0 25px;
    display:block;
}


#menu {
    float:left;
    text-align:center;
    font-family:Tahoma, Geneva, sans-serif;
    width: 375px;
    margin: 54px 0 0 350px;
}


#menu li {
    float:left;    
    display:block;
    padding: 10px;
    margin-right: 25px;    
}


#redes {
    float:left;
    display:block;
    text-align:center;
    font-family:Tahoma, Geneva, sans-serif;
    width: 227px;
    margin: 54px 0 0 30px;
}


#redes li {
    float:left;    
    display:block;
    padding: 10px;
    margin-right: 5px;    
}

Espero haber copiado suficiente código. Sé que hay cosas que podría hacer más simples, pero no tengo mucha idea, y la estoy haciendo desde cero para aprender, consultando todo lo que encuentro en internet. Uso Dreamweaver CS6, que a veces hace unas cosas más raras...

En resumidas cuentas, lo tengo así por ahora:

Enlace eliminado

Y quiero posicionarlo de este otro modo:

Enlace eliminado

¡Muchísimas gracias por la ayuda! Espero no haberla liado y entender bien los consejos que podáis darme, a ver si poquito a poco puedo lograr algo parecido a lo que he hecho en Photoshop. Sin olvidar que es mi primer diseño, claro.

¡Saludos!

Lubricidad Hernandez · 15 May 2012

¡He seguido intentándolo pero no hay manera! Qué torrrpe...

Carlosmax · 15 May 2012

el header no deberia estar flotado a la izquierda, borrale ese "float: left".

Lubricidad Hernandez · 15 May 2012

Carlosmax dijo:
el header no deberia estar flotado a la izquierda, borrale ese "float: left".

¡Gracias por la respuesta!

Pero, le quito el float y se queda igual.

Sólo consigo que se vea como quiero, dejándolo así:

Enlace eliminado

Pero entonces no se repite el background del Header. ¿Puedo hacerlo de alguna manera? Que se repita aparte o algo.

¡Gracias de nuevo!

Carlosmax · 15 May 2012

Lo q pasa es que el wrapper tiene 1000 de ancho, y el header tambien, entonces el wrapper no deberia tener limitacion de anchura, el header si debe tener el 1000 de ancho y colocarle el fondo q se repita para el wrapper, no para el header.

budha · 15 May 2012

¿y por que no pones la imagen del header como fondo del wrapper o del Body?, de esta manera te cogera todo el ancho de la pagina.

Un saludo

Vaya, ya te lo dijo tambien Carlos, justo en el mismo momento que yo

Valen · 16 May 2012

Yo lo pondría:

Display: block; para que coja todo el ancho de la página y quitaría el float como ya te han dicho, ese float no pinta nada si quieres que sea 100%.

¿Has reseteado los estilos antes de empezar a maquetar?

Lubricidad Hernandez · 16 May 2012

Carlosmax dijo:
Lo q pasa es que el wrapper tiene 1000 de ancho, y el header tambien, entonces el wrapper no deberia tener limitacion de anchura, el header si debe tener el 1000 de ancho y colocarle el fondo q se repita para el wrapper, no para el header.

¡Cierto! Lo he entendido perfectamente cuando lo he leído. Digamos que, como no entiendo mucho, lo he comprendido bien y he visualizado perfecto el fallo. Genial, me va a servir para futuras ocasiones 🙂 Muchísimas gracias.

budha dijo:
¿y por que no pones la imagen del header como fondo del wrapper o del Body?, de esta manera te cogera todo el ancho de la pagina.

Vaya, ya te lo dijo tambien Carlos, justo en el mismo momento que yo

¡Gracias igualmente Budha! Me ha venido muy bien. En body tengo puesto el fondo de 100x100px.

Valen dijo:
Yo lo pondría:

Display: block; para que coja todo el ancho de la página y quitaría el float como ya te han dicho, ese float no pinta nada si quieres que sea 100%.

¿Has reseteado los estilos antes de empezar a maquetar?

Hola Valen, muchas gracias por la respuesta 🙂 Sí, he usado el reset de Eric Meyer. Ya quité el display:block. Lo del float fue una metedura de pata de novato (bueno, ni siquiera novato, inexperto y neófito total).

Ahora mi problema es otro, y no logro dar con la solución.

¿Por qué los márgenes que aplique a #logo me desplazan toda la imagen de la cabecera (que está en #wrapper)?

Me gustaría centrar el logotipo pero no soy capaz ahora mismo.

Dejo los códigos aquí 🙂 ¡Gracias a todos por la ayuda!

HTML

Insertar CODE, HTML o PHP:

<body>


<div id="wrapper">
	<div id="header">
         <ul id="menu">
 			<li><a href="#">Inicio</a></li>
 			<li><a href="#">Cine</a></li>
 			<li><a href="#">Música</a></li>
			<li><a href="#">Literatura</a></li>
 		 </ul>
         <ul id="redes">
        	<li><a href="#">RSS</a></li>
 			<li><a href="#">Twitter</a></li>
 			<li><a href="#">Facebook</a></li>
         </ul>
         <div id="logo"></div><!-- Fin de logo -->
 	</div><!-- Fin de header -->
    
 	<div id="principal"> 
 		<div id="contenido">
        	 
		</div><!-- Fin de contenido --> 


		<div id="sidebar">
    		<div class="twitter">
        
			</div><!-- Fin de twitter -->
 
       		<div class="formulario">


        	</div><!-- Fin de formulario -->
 
		</div><!-- Fin de sidebar --> 
	</div><!-- Fin de principal -->
 
 	<div id="footer">


 	</div><!-- Fin de footer -->
</div><!-- Fin de wrapper -->


</body>

CSS

Insertar CODE, HTML o PHP:

/* RESET */


*{magin: 0; padding: 0; border: 0;}


html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}


body {
background:url(../img/bg.jpg) repeat;
}
 
a {
color: [B]Enlace eliminado[/B]
}


ol,ul {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after {
content:'';
content:none;
}




/* Maquetación */


#wrapper {
	widht: 100%;
	background:url(../img/encabezado-bg.jpg) repeat-x;
	height: 194px;
}


#header {
	width: 1000px;
	margin: 0 auto;
}


#logo {
	background:url(../img/logo.png) no-repeat;
	height: 117px;
}


#menu {
	float:left;
	text-align:center;
	font-family:Tahoma, Geneva, sans-serif;
	width: 375px;
	margin: 54px 0 0 350px;
}


#menu li {
	float:left;	
	display:block;
	padding: 10px;
	margin-right: 25px;	
}


#redes {
	float:left;
	display:block;
	text-align:center;
	font-family:Tahoma, Geneva, sans-serif;
	width: 227px;
	margin: 54px 0 0 30px;
}


#redes li {
	float:left;	
	display:block;
	padding: 10px;
	margin-right: 5px;	
}
 
#principal {
}


#contenido {
	widht: 640px;
}
    
#sidebar {
	width: 240px;
}


#twitter {
}


#formulario {
}
 
#footer{
	background:url(../img/footer-bg.jpg) repeat-x;
	height: 390px;
}

¿Cómo posicionar un header fijo con fondo repetido en CSS/HTML?

Lubricidad Hernandez

Lubricidad Hernandez

Carlosmax

Lubricidad Hernandez

Carlosmax

budha

Valen

Lubricidad Hernandez

Temas similares

Privacidad y transparencia

Privacidad y transparencia