Diseñando una plantilla

woodyush · #1 (**permalink**) 27/08/2007, 01:34

Hola estaba haciendo una plantilla para mi sitio y estoy muy acostumbrado a usar firefox pero por las dudas probe en internet explorer como se veia y dios mio se ve espantoso. La probe en IE 6.0 y Firefox 2.0, si alguien la quiere mirar para decirme como puedo lograr algo decente y que se pueda ver en ambos navegadores, y si no tambien pueden cambiar los colores o los que les parezca que esta mal para poder mejorar, solo recuerden que la pagina es para un sitio informal y alegre. :P

Plantilla.htm

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="Estilo.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="contenedor">
 <div id="dintel"></div>
 <div id="menu">
  <ul>
   <li><a href="#">Seccion 1</a></li>
   <li><a href="#">Seccion 2</a></li>
   <li><a href="#">Seccion 3</a></li>
   <li><a href="#">Seccion 4</a></li>
  </ul>
 </div> 
 <div id="contenido">Este texto es  contenido
 <a href="#" title="Enlace">Enlace</a>
 <input class="boton" name="boton" type="button" value="Boton">
 <input class="textbox" name="textbox" type="text">
 <textarea class="textarea" name="textarea" cols="40" rows="10"></textarea>
 <h1>Esta es una cabecera</h1>
 <h2>Esta es una cabecera</h2>
 <h3>Esta es una cabecera</h3>
 </div>
</div>
</body>
</html>

Estilo.css

Código:

/* CSS Document */
body{
	background-color: #ECE9F7;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
}

a:visited{
 color:#0000FF;
}

h1,h2,h3{
	color: #4F4F4F;
}

#contenedor{
	height: 100%;
	font-family: "Lucida Sans";
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	text-align: left;
}

#menu{
	background-color: #FFDB91;
	text-align: left;
	width: 20%;
	float: left;
}

#menu ul{
	list-style-type: none;
	padding: 0% 0% 20% 0%;
	text-align: center;
}


#menu li:hover{
	border-style: outset;
	border-width: thin;
	border-color: White;
}

#menu a{
	text-decoration: none;
	color: #CD853F;
	font-weight: bold;
	line-height: 30px;
}

#contenido{
	width: 80%;
	height: 100%;
	text-align: center;
	background-color:#FFFFFF;
	font-size: 12px;
	margin-left: 20%;
}

#dintel{
 height:50px;
 background-color:#FFCC66;
 padding-bottom:10%;
}

.boton{
 background-color:#FFCC66;
 border-style:ridge;
 border-color:#CC9900;
}

.boton:hover{
 cursor:pointer;
}

.textbox{
 border-style:ridge;
 border-color:#FFFFFF;
}

.textbox:hover{
 background-color:#EEEEEE;
}

.textarea{
 border-style:ridge;
 border-color:#FFFFFF;
}

.textarea:hover{
 background-color:#EEEEEE;
}