Ayuda con diseño html

Citar

Escrito el 28 Ene 2012 09:40 pm

Hola a todos primero que nada un saludo a los visitantes y colaboradores de esta web...Mi nombre es andres llevo aproximadamente unos 3 o 4 meses leyendo informacion acerca de html5 y el nuevo css...Al grano, El dia de hoy haciendo mis actividades fuera de la computadora, se me vino ala mente un diseño y quise hacerlo pero nada que no puedo hacer que el "header" sobresalga de la manera en que lo dibuje , les adjunto una imagen que hize , realmente es un diseño sencillo, pero ese detalle no tengo idea de como hacerlo..

[url=http://img513.imageshack.us/img513/899/desingw.jpg][/url]
practicamentemi idea es hacer que header sobresalga en el eje x de lo que es div content

Ojala me entiendan y alguien pueda explicarme se los agradecere mucho.

Por murolin

8 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 29 Ene 2012 10:17 am

puede ser que tengas que usar en CSS:

body{
position:relative;/*para que sepa que dentro de body se usará "position" en los elementos dentro de éste*/}

header{
position:fixed; /*le das posición fija*/
top: 100px; /*ejemplo de distancia desde arriba hasta tu header*/
display:block; /*le indica que debe ser un objeto bloque*/
z-index:2; /*esto le indica que debe estar encima de todo*/
}

Por cci_moni

4 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 29 Ene 2012 07:40 pm

estuve checando el tip que me diste y creo que voy por buen camino aunque tengo problemas con ie :s fuck internet explorer... muchisimas gracias si termino la idea que tengo en mente luego la mostrare para que opinen!!!

Por murolin

8 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 30 Ene 2012 12:42 pm

Pues a mi se me ocurre otra idea...

Header desbordado del content

El código es:

Código HTML :

<!DOCTYPE html><!-- HTML5 is good -->
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Header desbordado del content</title>
<style type="text/css">
html {
   margin: 0; padding: 0;
   height: 100%;
}
body {
   background-color: #ccc;
   margin: 0; padding: 0;
}
h1 {
   margin: 0; padding: 0;
}
#overhead {
   height: 50px;
}
#header {
   background-color: yellow;
   height: 50px;
   margin-left: -5%;
   text-align: center;
   width: 110%;
}
#content {
   background-color: #aaa;
   height: 100%;
   margin: 0 auto;
   padding: 0;
   text-align: center;
   width: 90%;
   
}
</style>
</head>
<body>
   <div id="content">
      <div id="overhead"></div>
      <header id="header">
         <h1>&lt;header&gt;</h1>
      </header>
      <p>&lt;div id="content"&gt;</p>
   </div>
   &lt;body&gt;
</body>
</html>

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 03 Feb 2012 07:34 pm

Esta muy bien, algo mas parecido a lo ke busco, pero en IE no se ve bien :/ muchas gracias hermano voy a moverle para ke funcione en todos los navegadores .

Por murolin

8 de clabLevel

Envíale un mensaje privado

Ayuda con diseño html - css3

Escribe una respuesta rapida