Foros del Web » Creando para Internet » CSS »

como puedo mandar mi header hasta arriba?

Estas en el tema de como puedo mandar mi header hasta arriba? en el foro de CSS en Foros del Web. con cual codigo css puedo mandar el div mi header hasta arriba?? hasta el top sin nada de margen no conozco mucho de css...
  #1 (permalink)  
Antiguo 22/07/2009, 21:26
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
como puedo mandar mi header hasta arriba?

con cual codigo css puedo mandar el div mi header hasta arriba??

hasta el top sin nada de margen no conozco mucho de css
  #2 (permalink)  
Antiguo 22/07/2009, 21:31
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: como puedo mandar mi header hasta arriba?

Hola

Encabeza tu estilo con esto:

html, body {
margin: 0; padding: 0;
}

Y luego coloca el div del header con estos valores:

div_del_header {
position: absolute; /*(o relative, según tu diseño)*/
top: 0px;
}

Prueba y nos cuentas.

Bye
  #3 (permalink)  
Antiguo 22/07/2009, 21:43
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: como puedo mandar mi header hasta arriba?

waoooooooo.

no se como lo haces pero ya quedo jajajaa muchisimas gracias!!
  #4 (permalink)  
Antiguo 22/07/2009, 21:47
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: como puedo mandar mi header hasta arriba?

lo de position absolute es para alinear el div?

lo q pasa es que lee pongo center pq quiero que quede centrado, pero siempre se va a la izquierda, es mi ultima pregunta lo juro jejeje, que debo poner para que se valla el div al centro?

muchas gracias !
  #5 (permalink)  
Antiguo 22/07/2009, 22:21
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: como puedo mandar mi header hasta arriba?

Hola luciio

Ajusta tus medidas, cambiando los px de esta muestra:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Centrar una cabecera en el ancho y ajustarla a cero px arriba</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
}
#div_header {
	position: absolute;
	width: 600px;
	height: 120px;
	margin-left: -300px; /*aquí pones la mitad del ancho, en valor negativo*/
	top: 0px;
	left: 50%;
	background-color:#ffff66;
	border: 1px solid #484848;
}
</style>
</head>

<body>
<div id="div_header"></div>
</body>

</html> 
Los colores son sólo para testar el resultado.

Bye
  #6 (permalink)  
Antiguo 22/07/2009, 22:55
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: como puedo mandar mi header hasta arriba?

mmm y su contenido?... que dara debajo del header...
intenta con
Código css:
Ver original
  1. body{margin: 0;}
  2. #contenedor{width:960px; margin:auto;overflow:hidden;}
Código html:
Ver original
  1. <div id="contenedor">
  2.    <div id="div_header"></div>
  3.    <div id="div_contenido"></div>
  4.    <div id="div_footer"></div>
  5. </div>

chao y suerte...
  #7 (permalink)  
Antiguo 23/07/2009, 04:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como puedo mandar mi header hasta arriba?

uy! casi, pero a ambos se os escapó un detallito
el reset es mejor aplicarlo al selector universal (*), y no al html y body
La razón es sencilla: hay propiedades que no se heredan. Así que es más efectivo si se aplica así:
Cita:
* {margin:0;padding:0; border:0; outline:none; position: relative;}
Y yo incluyo 'position' porque lo estimo conveniente.

Si posicionas un elemento 'absolute', lo sacas del flujo, con lo que el resto se comporta como si no existiese, así que lo que haya a continuación de "header" deberá tener un margen superior sensiblemente mayor que él (para evitar solapamientos)

Alexk: 'margin: 0 auto;'

Disculpad las puntualizaciones.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 23/07/2009, 09:43
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: como puedo mandar mi header hasta arriba?

kseso? jeje... ya se... gracias, se me olvido
  #9 (permalink)  
Antiguo 23/07/2009, 13:21
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: como puedo mandar mi header hasta arriba?

hola, al poner el div "contenedor" desaparece el header :S.

lo pongo asi:

style.css:

#contenedor{
width:100%;
margin:auto;
overflow:hidden;
position:relative
}

#div_header {
position: absolute;
width: 450px;
height: 450px;
margin-left: -225px; /*aquí pones la mitad del ancho, en valor negativo*/
top: 0px;
left: 50%;
background-image: url(imagenes/logo.jpg)
}


HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>LOGRAFICO.</title>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
</head>

<body>
<div id="contenedor">
<div id="div_header"></div>
</div>
</body>
</html>


en cuanto kito el div contenedor aparece el hedaer de nuevo pero si quisiera tener el div contenedor para que fuera como el body de la pagina. alguien sabe cual es mi problema?

muchas gracias x sus enseñanzas jejee
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #10 (permalink)  
Antiguo 23/07/2009, 13:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como puedo mandar mi header hasta arriba?

Cita:
<div id="contenedor">
<div id="div_header"></div>
Si haces eso apoyado en tu css, creo que te será más conveniente, útil y productivo parar por un momento de seguir escribiendo código y hacerte con una base mínima de html y css.

Pásate por www.librosweb.es y lee los manuales de iniciación a css y html.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 23/07/2009, 13:40
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: como puedo mandar mi header hasta arriba?

disculpas, estoy leyendo esta guia orita: http://www.sidar.org/recur/desdi/mcss/manual/indice.php, solo que ps de repente no me salen las cosas jejeje, quiza voy muy rapido, gracias por la respuesta de todos modos.

por cierto, que estoi haciendo mal ahi? jejejeje

<div id="contenedor">
<div id="div_header"></div>
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #12 (permalink)  
Antiguo 23/07/2009, 13:59
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como puedo mandar mi header hasta arriba?

Se agradece que te hayas tomado mis palabras tan bien, Luciio.
Pero permíteme que cambie la pregunta, creo que será más efectiva:
¿qué estructura quieres lograr?
Por lo que has dicho es una página centrada, con el header pegado al borde superior y ¿qué va debajo?
una columna, dos, tres...
¿terminado con un 'pie'?
Comenta y seguro que ya hay algo ya hecho y que podrás utilizar como ejemplo y base para experimentar y aprender haciendo la adaptación.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 23/07/2009, 14:09
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: como puedo mandar mi header hasta arriba?

apenas inicio con el css, quiero hacer un contenedor donde vaya todo el sitio.

agregar dentro de el contenedor un header
debajo de el header otros 3 divs (1 a la iskierda 400px alto y 2 a la derecha200px alto c/u), estos 3 divs harian un cuadro no se si los tendria que acoplar los 3 en uno solo
y un pie de pagina jeje

asi quedaria: http://www.teatrovallarta.com/estructura.jpg

solo que generalmente aprendo muy bien estudiando y practicando es lo que estaba haciendo ahora, solo que yo tambien te entiendo a ti ya que muchas veces cuando tenemos el apoyo nos enviciamos en estar preguntando y esas cosas, te agradezco tu ayuda hermano.
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #14 (permalink)  
Antiguo 23/07/2009, 14:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como puedo mandar mi header hasta arriba?

Pues vamos con unos apuntes en vez de código, si te parece bien, y en base a ellos vas creando el código:
lo primero es el obligado mini puesta a cero de cs:
Cita:
* {margin:0;padding:0; border:0; outline:none; position: relative;}
Creas un contenedor general del ancho que precises y para colocarlo centrado "margin: 0 auto;" esto ya lo habíamos visto.
Dentro de él va a ir la página completa
lo primero el header (o cabecera) con la altura que necesites y un pequeño margen inferior (margin-bottom:Xpx) para la separación de las cajas azules.
la caja azul grande a continuación con sus medidas y flotada a la izquierda.
a continuación para las dos pequeñas podrías colocarlas directamente en el html, pero creo mejor crear una caja contenedora de anchura necesaria, y en ella metes las dos azules pequeñas. cierra esta caja padre después de las dos azules pequeñas.
y ahora por último el pie de página con sus altura.
Cierra ahora el contenedor general.

Sólo tienes que dar altura a las cajas que de antemano sepas el contenido, de ser incierto no se lo des.

Muy esquemáticamente.

Pero si quieres esquemas de cajas, pasa por www.araudi.net || www.cssplay.co.uk || http://matthewjamestaylor.com/ y si necesitas más ejemplos, comenta.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 23/07/2009, 14:41
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: como puedo mandar mi header hasta arriba?

muchisimas gracias!

me parece perfecto, voi a empezar a trabajar con eso haber como me va, nomas me voi a hechar un lonche rapidisimo pk aki en mexico ya kasi dan las 3 y empiezo con todo eso, te cuento haber como me va!, gracias por el apoyo hermano!
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #16 (permalink)  
Antiguo 23/07/2009, 15:10
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: como puedo mandar mi header hasta arriba?

estoy bien chavo, creoq ue si tendre que ver modelos de cajas para conocer mas sobre la estructura del css.

estoy haciendolo mal, hice el header que tiene una altura de 450 pixeles, luego hice una caja abajo pero la acomode ahi dandole una distancia desde el top de 450 pixeles jajajaja, y es que no se como dejar una caja debajo de otra, bajare estructuras para ver como va eso :S

thx bro.
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #17 (permalink)  
Antiguo 23/07/2009, 15:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como puedo mandar mi header hasta arriba?

Lucio, ¿te diste cuenta que nunca dije nada de 'position:absolute'?
incluí en el selector universal (*) 'position: relative', así las cajas que no tienen anchura definida ocuparán todo el ancho del contenedor principal y la que le sigue se colocará justo debajo de ella (sin espacios a no ser que marques tú los márgenes) y si no están flotadas se irán acomodando según aparecen en el html (si lo están se altera el flujo para colocarse en su lugar).

Pero bueno, así empezamos todos (al menos yo) a base de prueba y error, ver cómo lo hacen en otras páginas y emularlo para comprenderlo.

Sería realmente fácil convertir en código tu dibujo, si es lo que quieres lo hago, ahora que he visto que lo estás intentando. Pero me temo que para la próxima estaremos igual. Tú me dices qué quieres. (en serio, ahora sin sarcasmos ni retranca).

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #18 (permalink)  
Antiguo 23/07/2009, 15:48
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: como puedo mandar mi header hasta arriba?

Entiendo. se que seria muy facil para ti hacerlo pero tmb no me ayudaria en nada.

No sabes todo lo que eh aprendido en este rato brother! jejeje entre tu ayuda y el manual que me recomendaste de librosweb.es ya pude situar la caja debajo y si comprendi lo de el global (*) 'position: relative' jejeje, cada vez mas me doi cuenta de lo mal que estaba y apenas asi como dices tu; hechando a perder se aprende, terminaria este sitio si tu me hicieras el template de las cajas, pero no aprenderia nada

sigo orita haciendo pruebas con este sitio, estoy bien emocionado porque nunca me habia dado la oportunidad de comprender css, y ahora que lo hago veo que las posibilidades con esto son muchisimas.

GRACIAS bro! :D que buena onda !

aqui seguire dando rols aber si me atoro en algo mas
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #19 (permalink)  
Antiguo 23/07/2009, 15:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como puedo mandar mi header hasta arriba?

Perfecto, Luciio.
Será un placer volver a coincidir contigo si surge alguna duda y puedo ayudar en algo.

Hasta entonces.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #20 (permalink)  
Antiguo 23/07/2009, 15:53
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: como puedo mandar mi header hasta arriba?

terminando todo esta shamba te lo pasare (no se si en unos dias lo termine jajaja) para que me des un visto bueno ;)
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #21 (permalink)  
Antiguo 23/07/2009, 17:28
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: como puedo mandar mi header hasta arriba?

ups tengo un pequeño problemilla, ya hice la estructura mas o menos como quedaria, pero a la hora de poner el pie de pagina, me lo carga dentro de uno de los 2 cuadros de la izquierda (el de abajo) IMAGEN AQUI

mi codigo es este:

HTML.
Cita:
<body>
<div id="disenoweb">
</div>
<div id="contenedor">
<div id="div_header">
</div>
<div id="bodyleft">
</div>
<div id="bodyrup">
</div>
<div id="bodyrdown">
</div>
<div id="pie"></div>
</div>
</body>
CSS
Cita:
* {margin:0;padding:0; border:0; outline:none; position: relative;}

#contenedor{
width:450px;
margin-left: -225px;
left: 50%;
top: 0px
}

#div_header {
width: 450px;
height: 450px;
top: 0px;
background-image: url(imagenes/logo.jpg);
margin-bottom: 5px;
}

#bodyleft {
width: 195px;
height: 300px;
margin-left: 5px;
float: left;
background: #CCCCCC
}

#bodyrup {
width: 240px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
height: 145px;
float: right;
background: #CCCCCC
}

#bodyrdown {
width: 240px;
margin-left: 5px;
margin-right: 5px;
height: 150px;
float: right;
background: #CCCCCC
}

#pie {
width: 450px;
height: 20px;
background: #CCCCCC;
position: relative
}

segun yo tengo bien cerradas las etiquetas pero pues estoy bien chavo no se porque no manda al pie de pagina abajo
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #22 (permalink)  
Antiguo 23/07/2009, 17:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como puedo mandar mi header hasta arriba?

Luciio
Un par de añadidos y ya lo tienes.
En el html añade lo resaltado en negrita:
Cita:
<div id="bodyrdown">
</div>
<div class="corte"></div>
<div id="pie"></div>
en el css
Cita:
#contenedor{/*modificado*/
width:450px;
margin: 0 auto;
overflow:hidden;
border: 1px solid #444;
}
.corte {clear: both;}
Por cierto, tienes fuera de '#contenedor' un div vacío y que no está declarado en el css:
Cita:
<body>
<div id="disenoweb">
</div>

<div id="contenedor">...
¿qué tal queda uno después de conseguirlo por tí mismo?

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #23 (permalink)  
Antiguo 23/07/2009, 17:57
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: como puedo mandar mi header hasta arriba?

voy manejando camino a mi casa orita, pq sali del trabajo llego y hago esos cambios, que buena onda, la verdad se siente super bien el hacer algo por ti mismo, eh "diseñado" antes pero todo lo hacia con dreamweaver ahora quiero aprender a hacer las cosas yo solo por muchos beneficios que tiene esto no? jeje

por cierto... que error tenia bro? eso de corte para q fue? jejeje

y me quede con la duda cuando me comentaste:
Cita:
<div id="contenedor">
<div id="div_header"></div>
Si haces eso apoyado en tu css, creo que te será más conveniente, útil y productivo parar por un momento de seguir escribiendo código y hacerte con una base mínima de html y css.
hay cual era mi error? es q me gustaria saber todo eso para tener un codigo lo mas limpio posible

gracias hermano!
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #24 (permalink)  
Antiguo 23/07/2009, 18:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como puedo mandar mi header hasta arriba?

Sobre el '.corte {clear:both;}':
Los elementos flotados salen del flujo del documento (esto es, el resto se comportan como si no estuviesen) y por eso el pie se colocaba sobre ellos.
la propiedad y valor 'clear: both' lo que hace es forzar a que todo lo que venga después de ella(en el html) se coloque debajo (en el eje y).
Puedes ver más información aquí

Sobre el código que me recuerdas, no le pasaba nada. Pero tampoco era nada. En el css ya empezabas a liarla con position, márgenes negativos y otras cosas que no venían a cuento.
Era una forma como otra cualquiera de incitarte y motivarte para que llegases a lo que has llegado por tí mismo.

Mejor prolongar algo este tema y enfocarlo a una cuestión productiva que no tenerte que "aguantarte" todos los días con las mismas cuestiones básicas

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #25 (permalink)  
Antiguo 23/07/2009, 19:16
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
De acuerdo Respuesta: como puedo mandar mi header hasta arriba?

hola, ya quedo el documento nomas que le tuve que quitar unas cosas al #contenedor que me pasaste.

me dijiste que lopusiera asi:
Cita:
#contenedor{/*modificado*/
width:450px;
margin: 0 auto;
overflow:hidden;
border: 1px solid #444;
}
.corte {clear: both;}
pero se veia mal se hacia muy a la derecha y yo lo tenia centrado lo tuve que dejar asi:

Cita:
#contenedor{
width:450px;
margin-left: -225px;
left: 50%;
top: 0px
border: 1px solid #444;
}
y ya se ve bien, solo le quite el overflow q todabia no lo estudio y el margin que me pasaste para que se pudiera centrar ia q asi lo tenia configurado.

no se si hice bien, pero si se siente muy shido el ver tu codigo y saber q tu lo hiciste jejejeje
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
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 17:42.