Desesperado con header

[zido45]

Hola buenas les explico, necesito que mi header ocupe todo el ancho de mi pagina y el "page" se siga quedando donde esta,

Alguna solucion ¿?

gracias

[pzin]

Muéstranos tu código y podrás recibir ayuda. Caso contrario se tornaría, como ya es, harto complicado.

[javiandgo]

Una de dos: o el código o una imagen de lo que esta pasando... en caso mejor las dos cosas jejeje

[zido45]

vale el codigo base es este,he probado ya con width:100% y tampoco va


#header {position:relative;
background: url("../img/bg-header.png");}
#header_logo {
float:left;
display:block;
margin-top:0px;
margin-left:0px;
}

#header_right {
position:relative;
float: right
}

[pzin]

Funciona todo como debe de funcionar, y de hecho tu cabecera ocupa todo el ancho que puede, pero no puede ocupar más de 980px ya que está dentro de #page, y #page tiene un ancho de 980px.

Tendrías que darle otro ancho a #page, o bien sacar #header de #page. Recomendaría lo segundo para evitar males mayores.

[javiandgo]

Tienes dos elementos flotantes dentro del header, esto hace que se interprete el header como vacio es por eso que no se ve.

Puedes intentar aplicando la propiedad clear:both; a #header, si no te funciona crea una clase llamada .clearfix {clear:both} y luego la pones al final antes de cerrar #header.

Código HTML:

<div id="header">
 
<div id="header_logo"> El logotipo </div>
 
<div id="header_right"> El contenido de esta capa </div>
 
<div class="clearfix"> Este lo dejas sin nada </div>
 
</div> <!-- cierras el #header -->
 

[zido45]

vale a ver jeje no estoy muy puesto es css respecto a la primera respuesta como lo saco del page?

y a la segunda con clear both no me ha funcionado y lo de crear la clase donde la creo en el css?

perdon por mi ignorancia xd

[javiandgo]

Iniciado por zido45

vale a ver jeje no estoy muy puesto es css respecto a la primera respuesta como lo saco del page?

y a la segunda con clear both no me ha funcionado y lo de crear la clase donde la creo en el css?

perdon por mi ignorancia xd

Si creas la clase en el CSS o bien ponerlo asi <div style="clear:both"></div>

[pzin]

De hecho ya tienes una clase creada llamada clearfix. En las plantillas suelen venir esas cosas.

No obstante no veo que el problema esté en la altura de #header. El problema es el que te dije, que #header no puede crecer más porque está contenido en #page.

Pues sacarlo es sacarlo. Si no sabes cómo hacer eso, es altamente recomendable que mires algún tutorial de HTML, ya que es casi lo más básico.

[zido45]

vale gracias a los dos

[javiandgo]

Iniciado por Bonez

De hecho ya tienes una clase creada llamada clearfix. En las plantillas suelen venir esas cosas.

No obstante no veo que el problema esté en la altura de #header. El problema es el que te dije, que #header no puede crecer más porque está contenido en #page.

Pues sacarlo es sacarlo. Si no sabes cómo hacer eso, es altamente recomendable que mires algún tutorial de HTML, ya que es casi lo más básico.

si también me fije que ya tiene esa clase pero esta con otra propiedad un zoom. tampoco había caído en cuenta de lo que quiere hacer y tienes razon

Código HTML:

<div id="header">
<div id="header_logo"> El logotipo </div> 
<div id="header_right"> El contenido de esta capa </div> 
</div>
 
<div id=page></div>
 

Debe quedar así, solor que al momento de sacarlo de allí se le ira a la izquierda ya que esta empleando una grilla