Foros del Web » Creando para Internet » CSS »

Desesperación IE/Firefox

Estas en el tema de Desesperación IE/Firefox en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/02/2008, 05:18
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Desesperación IE/Firefox

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!!!
  #2 (permalink)  
Antiguo 10/02/2008, 06:44
Avatar de jcxnet  
Fecha de Ingreso: octubre-2005
Ubicación: Perú
Mensajes: 784
Antigüedad: 12 años, 2 meses
Puntos: 56
Re: Desesperación IE/Firefox

A ver si te sirve:
http://mitchbryson.com/free-css-templates
http://www.mycelly.com/
http://www.ssi-developer.net/main/templates/3col.shtml
__________________
►I'm a devil on the run ♂
Jcxnet.com
*Keep It Simple **
  #3 (permalink)  
Antiguo 10/02/2008, 09:08
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Desesperación IE/Firefox

Gracias por las paginas, hay cosas interesantes!

Pero vuelvo a estar en las mismas... si yo tengo definido un body

Código:
body {
	padding: 0 1%; /* MARGEN DE LA VENTANA */
	font-size: .75em;
	text-align: center;
	}
y un

Código:
iv#container {
	width: 990px;
	margin: 0 auto;
	text-align: left;
	}
	body.fullwidth div#container { width: 100%; } /* Utilizando esta ocupa todo el ancho de la pantalla*/
	body.1024width div#container { width: 990px; } /* Adaptada a una resolucion de 1280x1024 pixels */
Con el body.fullwidth va bien, pq me ocupa toda la pantalla, pero si quiero diseñar una web para una resolucion de 1024x768 que WIDTH tengo que poner para que me quede bien tanto en explorer como en Firefox, que se adapte al maximo a esa resolución y tenga un padding de un 1% a los laterales?

PD: no quiero que se extienda la web a resoluciones mayores, quiero conservar ese tamaño.

Cual y como lo hago?
  #4 (permalink)  
Antiguo 11/02/2008, 00:39
 
Fecha de Ingreso: diciembre-2007
Mensajes: 17
Antigüedad: 10 años
Puntos: 0
Re: Desesperación IE/Firefox

Qué tal, estuve checando tu código, deberías visitar páginas de css y estudies un poco más...

Te recomiendo que para la cabecera en lugar de usar divs, utilices posicionamiento absolute y relative para los elementos de ahí y además los menúes de arriba también que estén dentro de la cabecera, pero que no sean sólo texto, sino que hagas menúes de verdad con listas...

Estudia y si tienes dudas pregunta por aquí... saludos...
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 11:21.