como puedo mandar mi header hasta arriba?

luciio · #1 (**permalink**) 22/07/2009, 20:26

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

hasta el top sin nada de margen no conozco mucho de css

deirdre · #2 (**permalink**) 22/07/2009, 20:31

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

luciio · #3 (**permalink**) 22/07/2009, 20:43

waoooooooo.

no se como lo haces pero ya quedo jajajaa muchisimas gracias!!

luciio · #4 (**permalink**) 22/07/2009, 20:47

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 !

deirdre · #5 (**permalink**) 22/07/2009, 21:21

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

alexk · #6 (**permalink**) 22/07/2009, 21:55

mmm y su contenido?... que dara debajo del header...
intenta con

Código css:

Ver originalbody{margin: 0;}
#contenedor{width:960px; margin:auto;overflow:hidden;}

Código html:

Ver original<div id="contenedor">
   <div id="div_header"></div>
   <div id="div_contenido"></div>
   <div id="div_footer"></div>
</div>

chao y suerte...

kseso? · #7 (**permalink**) 23/07/2009, 03:36

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

alexk · #8 (**permalink**) 23/07/2009, 08:43

kseso? jeje... ya se... gracias, se me olvido

luciio · #9 (**permalink**) 23/07/2009, 12:21

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

kseso? · #10 (**permalink**) 23/07/2009, 12:35

Cita:

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

luciio · #11 (**permalink**) 23/07/2009, 12:40

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>

kseso? · #12 (**permalink**) 23/07/2009, 12:59

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

luciio · #13 (**permalink**) 23/07/2009, 13:09

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.

kseso? · #14 (**permalink**) 23/07/2009, 13:32

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

luciio · #15 (**permalink**) 23/07/2009, 13:41

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!

luciio · #16 (**permalink**) 23/07/2009, 14:10

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.

kseso? · #17 (**permalink**) 23/07/2009, 14:40

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

luciio · #18 (**permalink**) 23/07/2009, 14:48

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

kseso? · #19 (**permalink**) 23/07/2009, 14:52

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

Hasta entonces.

luciio · #20 (**permalink**) 23/07/2009, 14:53

terminando todo esta shamba te lo pasare (no se si en unos dias lo termine jajaja) para que me des un visto bueno ;)

luciio · #21 (**permalink**) 23/07/2009, 16:28

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:

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

kseso? · #22 (**permalink**) 23/07/2009, 16:51

Luciio

Un par de añadidos y ya lo tienes.
En el html añade lo resaltado en negrita:

Cita:

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

luciio · #23 (**permalink**) 23/07/2009, 16:57

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!

kseso? · #24 (**permalink**) 23/07/2009, 17:16

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

luciio · #25 (**permalink**) 23/07/2009, 18:16

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