Estoy desperadooooooooooo, Dios........ tan díficil es emmaquetar una web y que se vea bien en los dos navegadores IE y firefox???
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:
/* ----------------------- 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;
}
Y aqui la web
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>
No consigo ajustar las dos barras de menus, he probado metiéndola dentro de la cabecera pero entonces se desajustaaaaaaaa, lo quité fuera y se comporta... pero ahora quiero incluir otra mas dentro del cuerpo y no hay manera!
Una mano plis
Muchas Gracias!!!