Foros del Web » Creando para Internet » CSS »

(novato) dudas

Estas en el tema de (novato) dudas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/01/2011, 02:25
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 7 años
Puntos: 0
(novato) dudas

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 original
  1. Body {
  2.      text-align: center;
  3. }
  4.  
  5. #contenedor {
  6.  
  7.    width: 700px;
  8.    height: 760px;
  9.    text-align: left;
  10.    background-color: black;
  11.    margin: 0 auto;
  12.    padding: 10px;
  13.  
  14.    }
  15.  
  16.   #cabecera
  17.    {
  18.    width: 684px;
  19.    height: 80px;
  20.    padding: 5px 10px 5px 10px;
  21.    overflow: hidden;
  22.    }
  23.  
  24. #login
  25.  {
  26.     width: 150 px;
  27.     height: 80 px;
  28.     background-color: yellow;
  29.     position: absolute;
  30.     top: 0px;
  31.     right: 0 px;
  32.    
  33.  }
  34.  
  35. #navbar {
  36.    width: 140px;
  37.    height: 634px;
  38.    float: left;
  39.    background-color: brown;
  40.    display: block;
  41.  
  42. }
  43. #cuerpo {
  44.    width: 540px;
  45.    height: 634px;
  46.    float: left;
  47.    background-color: red;
  48.    display: block;
  49.    padding: 10px;
  50.  
  51. }
  52.  
  53. #foot {
  54. width: 684px;
  55. height: 100px;
  56. clear: both;
  57. padding: 10px;
  58. background-color: yellow;
  59. }
  60.  
  61. input {
  62.    width: 80px;
  63.    size: 12;
  64.    font-size: 8pt;
  65.    border: 1px solid;
  66. }

Última edición por jhz1983; 01/01/2011 a las 02:36
  #2 (permalink)  
Antiguo 01/01/2011, 02:41
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: (novato) dudas

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
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 01/01/2011, 05:14
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: (novato) dudas

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 original
  1. h1 {
  2.     float:left;
  3. }
  4.  
  5. #login {
  6.     width: 150 px;
  7.     height: 80 px;
  8.     background-color: yellow;
  9.     position: relative;
  10.     float:right;
  11. }

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

Saludos.

  #4 (permalink)  
Antiguo 01/01/2011, 22:47
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 7 años
Puntos: 0
Respuesta: (novato) dudas

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
  #5 (permalink)  
Antiguo 01/01/2011, 23:48
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: (novato) dudas

tu html tenes el DOCTYPE ??
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #6 (permalink)  
Antiguo 02/01/2011, 02:58
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 7 años
Puntos: 0
Respuesta: (novato) dudas

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
  #7 (permalink)  
Antiguo 03/01/2011, 02:07
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 7 años
Puntos: 0
Respuesta: (novato) dudas

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

Última edición por jhz1983; 03/01/2011 a las 02:17

Etiquetas: Ninguno
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 06:37.