Que tal gente!, soy nuevo en el tema de CSS y estoy empezando a armar mi primera web usando esta herramienta, antes que nada, el codigo:
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}
.thrColAbsHdr #container{
position: relative;
width: 1000px;
background:#EBDABE;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.thrColAbsHdr #header {
height:69px;
background: #423A3A;
padding-top: 10px;
}
.thrColAbsHdr #menu {
position: absolute;
top: 115px;
left: 0px;
width: 211px;
padding:0px;
}
.thrColAbsHdr #lista{
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #211919
text-align: Left;
}
.thrColAbsHdr #lista li{
padding-bottom:10px;
list-style-position:outside;
}
.thrColAbsHdr #lista a {
padding: 3px 10px;
}
.thrColAbsHdr #lista a:link, .thrColAbsHdr #lista a:visited{
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
color: #211919;
padding:0px;
text-decoration: none;
text-align:left;
}
.thrColAbsHdr #lista a:hover{
border-bottom-style:solid;
border-bottom-width:thin:
border-bottom-color:#000;
}
.thrColAbsHdr #imagenes {
position: absolute;
top: 115px;
right: 0;
width: 160px;
padding: 15px 10px 15px 20px;
}
.thrColAbsHdr #mainContent {
margin-top: 0px;
margin-right: 250px;
margin-left: 250px;
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.thrColAbsHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.thrColAbsHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.thrColAbsHdr #navlist li{
display: inline;
list-style-type: none;
margin-left:12px;
}
.thrColAbsHdr #navlist a {
padding: 0px;
}
#navlist a:link, #navlist a:visited{
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #C8B496;
background-color: #211919;
border-width:thin;
border-style: solid;
border-color:#BE8C4B;
padding: 2px 25px 2px 25px;
text-align:center;
text-decoration:none;
font-weight:bold;
}
.thrColAbsHdr #navlist a:hover{
color: #FFFF9D;
}
.thrColAbsHdr #navcontainer {
position: relative;
background: #A23A3A;
height: 30px;
width:1000px;
}
.thrColAbsHdr ul#navlist {
position:absolute;
white-space: nowrap;
margin-left: 45px;
margin-top: 5px;
height:20px;
width:1000px;
}
-->
</style></head>
<body class="thrColAbsHdr">
<div id="container">
<div id="header">
<img border="0" src="img/logo.gif"><img border="0" src="img/midimg.gif"/><img border="0" width=541px height=69px src="img/midbkg.gif"/></div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">YOUR LINK</a></li>
<li><a href="#">YOUR LINK</a></li>
<li><a href="#">YOUR LINK</a></li>
<li><a href="#">YOUR LINK</a></li>
<li><a href="#">YOUR LINK</a></li>
<li><a href="#">YOUR LINK</a></li>
</ul>
</div>
<div id="menu">
<ul id="lista">
<li><a href="#">HOME</a></li>
<li><a href="#">QUIENES SOMOS</a></li>
<li><a href="#">SERVICIO PARA EMPRESAS</a></li>
<li><a href="#">JUBILACIONES Y PENSIONES</a></li>
<li><a href="#">TRAMITES<br/>
ADMINISTRATIVOS-JUDICIALES</a></li>
<li><a href="#">CALCULOS PREVISIONALES</a></li>
<li><a href="#">LEYES DE JUBILACIONES Y PENSIONES</a></li>
<li><a href="#">DECRETOS DE JUBILACIONES Y PENSIONES</a></li>
<li><a href="#">NOTICIAS</a></li>
<li><a href="#">CONTACTENOS</a></li>
</ul>
</div>
<div id="imagenes">
<h3>imagenes Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #imagenes --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Como veran esta en sus comienzos la web.
El tema basicamente es el siguiente, usando Chrome la navlist donde estan los botones-links que dicen "YOUR LINK" aparecen centrados, sin embargo usando IE7 aparecen hacia la izquierda... segun lei se debe a que estos browsers utilizan diferentes renderizadores, uno usa el Safari (Chrome) y el IE ni idea, usara otro.
Bueno, esa es una de las diferencias que me "han quedado" luego de investigar lo mas posible el codigo CSS.
Gracias por todo!
(Cualquier consejo sera desde ya bienvenido, he tenido problemas tambien con el posicionamiento, si me quieren tirar un tip sobre eso tambien les agradeceria :) )
Pd.: Tuve que sacar lo del HTML porque soy nuevo y no me deja poner enlaces, pero desde luego que eso esta puesto.