(novato) dudas

jhz1983 · #1 (**permalink**) 01/01/2011, 02:25

buenas acabo de empezar con css... hasta ahora no he tenido muchos problemas.. pero la maquetación con capas me da bastante por culo xD

en explorer he conseguido que se viera bien...

http://img401.imageshack.us/img401/4792/resultadoexplorer.jpg
en firefox la capa login dentro de cabecera se me coloca donde le sale la polla..

http://img80.imageshack.us/img80/6967/resultadofirefox.jpg[/URL]

os pongo el html y el css debajo.

Código HTML:

<HTML>
<HEAD>
      <LINK REL="stylesheet" HREF="maqueta.css" type="text/css">
      <TITLE>
         Tú mejor opción para encontrar empleo
      </TITLE>
   </HEAD>
<BODY>
<Div id="contenedor">
<Div id="cabecera">
<H1><Font face="arial" color="white">Honda Hornet</Font></H1>
   <div id="login">
Email     <input type="text" id="name"><BR>
Password<input type="password" id="password"><BR>
<input type="submit" value="login"><BR>
   </div>
 </div>
<Div id="navbar">
</div>
<Div id="cuerpo"> hola
</div>
<Div id="foot"> k tal
</div>
</div>
</BODY>
</HTML>

Código CSS:

Ver originalBody {
     text-align: center;
}
 
#contenedor {
 
   width: 700px;
   height: 760px;
   text-align: left;
   background-color: black;
   margin: 0 auto;
   padding: 10px;
 
   }
 
  #cabecera
   {
   width: 684px;
   height: 80px;
   padding: 5px 10px 5px 10px;
   overflow: hidden;
   }
 
#login
 {
    width: 150 px;
    height: 80 px;
    background-color: yellow;
    position: absolute;
    top: 0px;
    right: 0 px;
    
 }
 
#navbar {
   width: 140px;
   height: 634px;
   float: left;
   background-color: brown;
   display: block;
 
}
#cuerpo {
   width: 540px;
   height: 634px;
   float: left;
   background-color: red;
   display: block;
   padding: 10px;
 
}
 
#foot {
width: 684px;
height: 100px;
clear: both;
padding: 10px;
background-color: yellow;
}
 
input {
   width: 80px;
   size: 12;
   font-size: 8pt;
   border: 1px solid;
}

GAST0N · #2 (**permalink**) 01/01/2011, 02:41

antes que nada MUY FELIZ AÑO NUEVO!!

sabes, cuando empieces a maquetar hacelo por firefox y no por explorer... y fijate el login, la posicion absoluta, sacasela, flota todo a la izquierda menos el contenedor

jomaruro · #3 (**permalink**) 01/01/2011, 05:14

Hola:

Primero la etiqueta <font> está obsoleta deberías indicarla en el CSS mediante font-family.

Segundo no has definido estilos para el h1.

Partiendo de eso deberías cambiar en tu css:

Código CSS:

Ver originalh1 {
    float:left;
}
 
#login {
    width: 150 px;
    height: 80 px;
    background-color: yellow;
    position: relative;
    float:right;
}

Cambiando eso te quedará igual en IE8 y FF3.6

Saludos.

jhz1983 · #4 (**permalink**) 01/01/2011, 22:47

ok ahora funciona perfecto , ya que estamos el titulo honda hornet en firefox me aparece como centrado verticalmente , en explorer esta ok .. no entiendo muy bien como hay diferencias de espacios tan bestias entre los navegadores

GAST0N · #5 (**permalink**) 01/01/2011, 23:48

tu html tenes el DOCTYPE ??

jhz1983 · #6 (**permalink**) 02/01/2011, 02:58

he estado indagando que són los doctypes perdonar mi ignorancia... y bueno de momento he puesto este <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> aunque he notado que algunos elementos se alinean igual en los 2 navegadores ahora.. el titulo del header "Honda Hornet" en el ff me siguen apareciendo demasiado abajo

jhz1983 · #7 (**permalink**) 03/01/2011, 02:07

creo que el problema esta en la etiqueta h1 ya que al poner texto normal me sale arriba a la derecha en cualquier navevagor, al final lo he solucionado con h1 { margin: 0; } k dolor de cabeza por esta chorrada xD