Header CSS porcentajes

fronted · #1 (**permalink**) 23/11/2012, 13:24

Les cuento que tengo que hacer un header.
El mismo le asigne un div total de 100% luego dos divs internos uno con 60% de un color y 40% de otro.
Luego coloque un container para colocarle adentro los logos y un texto a la derecha.
El problema que tengo es que cuando quiero posicionar el logo y el div derecha no se posicionan dentro si no que afuera.
Les pego el codigo y gracias.

Código HTML:

<html>
<head>
 <STYLE type="text/css">


 #headercontainer
 {
  width: 100%;
  height: 70px;
  margin: 0 auto;
}

#headerlateral{
  width: 60%;
  height: 70px;
  background-color: red;
  float:left;
}

#headerderecho{
  width: 40%;
  height: 70px;
  background-color: yellow;
  float:right;
}

#headercontenedor{
  width: 990px;
  height: 70px;
  background-color: #fff;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}

#logo{
  width: 300px;
  height: 70px;
  background-color: #000;
  float: left;
  margin-top: 0px;
  position: relative;
}

#derecha{
  width: 300px;
  height: 70px;
  background-color: #000;
  float: right;
  margin-top: 0px;
  position: relative;
}

 </style>


</head>
  <body>

  <div id="headercontainer">
 <div id="headerlateral"></div>
 <div id="headerderecho"></div>
 <div id="headercontenedor">
  <div id="logo"></div>
  <div id="derecha"></div>
 </div>
    <div>
</body>
</html>

pzin · #2 (**permalink**) 23/11/2012, 13:51

Puedes solucionarlo usando algo así:

Código CSS:

Ver original#logo,#derecha {top:-70px}

De todas formas, parece un poco extraño y poco convencional lo que estás haciendo. ¿Cual es el objetivo de hacerlo así? Pregunto, porque seguramente existan formas más limpias de hacer lo que quieres.
Arreglarlo con top:-70px es una chapuza para salir del paso de lo que parece otra. Por eso pregunto qué quieres hacer exactamente a ver si hay alguna otra alternativa.

En algún momento al amontonar chapuzas tienes la casa llena de porquería y se viene abajo.

fronted · #3 (**permalink**) 23/11/2012, 13:59

Aqui te muestro como seria.

La parte de color verde claro seguiria para la derecha hasta el fin del monitor.
Es decir de izquierda hasta donde comienza lo verde seria blanco luego cuando va esa parte verde sigue hasta el final seria algo asi como un div de dos colores.

Luego lleva un logo y el texto de bienvenidos .

Espero me puedas ayudar.
Muchas Gracias te adjunto la imagen.

http://subir.cc/images/nuevokpk.gif

pzin · #4 (**permalink**) 23/11/2012, 14:26

Si es complicarse la vida lo que haz hecho.

A falta del interior —que no debería de tener mucho misterio— puedes simplificarlo un poco.

Código HTML:

Ver original<header>
  <div>
    <img src="http://subir.cc/images/sinttuhhh.gif">
  </div>
</header>

Código CSS:

Ver originalheader {
  width: 100%;
  height: 99px; /* esto según estaba la imagen sin la sombra */
  overflow: hidden;
  background: -moz-linear-gradient(left,  rgb(255,255,255) 50%, rgb(0,124,132) 50%);
  background: -webkit-gradient(linear, left top, right top, color-stop(50%,rgb(255,255,255)), color-stop(50%,rgb(0,124,132)));
  background: -webkit-linear-gradient(left, rgb(255,255,255) 50%,rgb(0,124,132) 50%);
  background: -o-linear-gradient(left, rgb(255,255,255) 50%,rgb(0,124,132) 50%);
  background: -ms-linear-gradient(left, rgb(255,255,255) 50%,rgb(0,124,132) 50%);
  background: linear-gradient(to right, rgb(255,255,255) 50%,rgb(0,124,132) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#007c84',GradientType=1 );
}
  
header>div {
    width: 1000px;
    margin: 0 auto;
}

Debería de funcionar en todos los navegadores —incluyendo IE6. Lo único que tendrías que cambiar header por div para tener una compatibilidad con html5 o usar un normalize de CSS y html5shiv.
Aunque seguramente te sea más fácil cambiar header por div.

Está en blanco, aunque yo veo la imagen de color gris.

fronted · #5 (**permalink**) 23/11/2012, 14:39

Muchas gracias Bonez.
Por lo que veo tu agregastes la imagen que te pase, yo lo que necesito es que la imagen que te pase quede toda hecha en divs no con imagenes.
Hasber si me puedes ayudar

pzin · #6 (**permalink**) 23/11/2012, 14:49

Entonces lo que querías hacer era peor todavía.

Entonces te vale con poner dos DIV flotados dentro de otro elemento, con las medidas que necesites, uno a la izquierda y otra a la derecha, ¿no?

Algo del tipo:

Código HTML:

Ver original<header>
  <div id="logo"></div>
  <div id="bienvenido"></div>
</header>

Código CSS:

Ver originalheader {
  width: 960px;
  margin: 0 auto;
}
 
  header div#logo {
    float: left;
    width: 100px; /* o lo que sea */
  }
 
  header div#bienvenido {
    float: right;
    width: 100px; /* o lo que sea */
  }

Y no, no agrandé la imagen que me pasaste. Es la misma imagen.

fronted · #7 (**permalink**) 23/11/2012, 14:59

Perdon amigo yo mal interprete ahora vi lo que hicistes antes y me sirvio mucho, no entendia bien porque tenia la imagen luego entendi era para que viera como queda, mil perdones.
Muchas gracias por la ayuda!!!!