No lo consigo, cuando se ve bien en Firefox se ve mal en IE, y viceversa.
Se me quitan las ganas del CSS.
Quiero hacer una simple web... con un contenedor y dentro de ella una cabecera y un cuerpo a 3 columnas.
Dentro de la cabecera quiero incluir una barra horizontal de menus y dentro del cuerpo otra distinta pero tb horizontal que es donde ira el buscador y demás cosas...
Tengo esto
ESTILO.CSS
Código:
Y aqui la web/* ----------------------- GENERAL ------------------------------- */
body {
background:#6B8699 url(../pix/body_bg.jpg) repeat-x scroll center top;
border:0pt none;
color:#425966;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:70%;
line-height:1.3;
margin:0;
padding:0;
text-align:center; /* Página centrada en IE */
}
/* ----------------------- CABECERA ------------------------------- */
#cabecera {
height:150px; /* Altura cabecera */
/*margin:0pt auto; /* Auto = centrado */
width:994px; /* Ancho */
background:#98DBC6;
}
#cabecera .titulo {
color:#FAB18C;
font-size:17px;
line-height:30px;
padding:10px 0pt 0pt 39px; /* (TOP - RIGHT - BOTTOM - LEFT) Ajustar posicion del texto*/
width:400px;
height:100%;
background:blue;
position:relative;
float:left;
}
#cabecera .eslogan {
color:#FAB18C;
font-size:17px;
line-height:18px;
padding:5px 0pt 5pt 0px; /* (TOP - RIGHT - BOTTOM - LEFT) Ajustar posicion del texto*/
width:200px;
position:relative;
background:red;
float:right;
margin-top:100px;
margin-right:60px;
}
/* MENU PRINCIPAL (HORIZONTAL DE CABECERA)*/
#nav1 {
font-size:12px;
line-height:2;
/*margin:60pt 0pt 0px 0px; /* PT en lugar de PX para que quede pegado abajo*/
/*padding:3px 10px 5px;*/
width:994px;
background:#FFD2FC;
position:relative;
border-style:solid;
border-width:1px;
border-color:#000000;
text-align:center;
}
#nav2 {
float:left;
text-align:left;
font-size:12px;
line-height:2;
margin-top: 10px;
/*margin:60pt 0pt 0px 0px; /* PT en lugar de PX para que quede pegado abajo*/
/*padding:3px 10px 5px;*/
width:994px;
background:white;
position:absolute;
border-style:solid;
border-width:1px;
border-color:#000000;
}
/* ----------------------- FIN CABECERA ------------------------------- */
/* ----------------------- CONTENIDO ------------------------------- */
#contenedor{
background-color:#84B2CC;
border-style:solid;
border-width:1px;
border-color:#000000;
margin: 0 auto;
width:994px;
height:auto;
}
/* COLUMNA IZQUIERDA */
.izquierda{
float: left;
width: 20%;
height: 600px;
margin: 0 auto;
background-color:#5B9EC9;
border-style:solid;
border-width:1px;
border-color:#000000;
}
/* PARTE CENTRAL*/
.principal{
width: 60%;
height: 600px;
width: auto;
margin: 0 auto;
background-color:#FFF;
border-style:solid;
border-width:1px;
border-color:#000000;
}
/* COLUMNA DERECHA */
.derecha{
float: right;
width: 20%;
height: 600px;
margin: 0 auto;
background-color:#BCD9EC;
border-style:solid;
border-width:1px;
border-color:#000000;
}
.titulo2 {
color:#FAB18C;
font-size:17px;
font-style:italic;
text-align:left;
line-height:18px;
padding:10px 0pt 0pt 50px; /* Ajustar posicion del texto*/
margin-left:10px;
background:#F8F7E5 url(post-bg.gif) no-repeat scroll left top;
}
/* ----------------------- FIN CONTENIDO ------------------------------- */
/* ----------------------- PIE DE PAGINA------------------------------- */
.footer{
width:auto;
height:30px;
background-color:#D6E3EC;
border-style:solid;
border-width:1px;
border-color:#000000;
margin:5px;
}
WEB.HTML
Código HTML:
<html> <head> <title> Probando Estilo IE/Firefox </title> <link href="estilo.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="contenedor"> <div id="cabecera"> <div class="titulo">Titulo Web</div> <div class="eslogan">Eslogan</div> </div> <div id="nav1"> Opcion1 - Opcion2 - Opcion3 - Opcion4 - Opcion5 </div> <div id="nav2"> Opcion1 - Opcion2 - Opcion3 - Opcion4 - Opcion5 </div> <div class="izquierda"> <ul> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> </ul> </div> <div class="derecha"> </div> <div class="principal"> <h2 class="titulo2">Título del contenido</h2> <h3>Subapartado</h3> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> </div> <div class="footer"> <p>Web - Copyright 2008</p> </div> </div> </body> </html>
Una mano plis
Muchas Gracias!!!
