Estoy haciendo un Layout para una pagina que contiene: (encabezado, barra de navegacion vertical, contenido, pie y algunos elementos del diseno).
lo hice por medio de divs anidadas pero al principio no podia ubicar la barra de navegacion a la izquierda, el contenido al centro y un div de diseno a la derecha..se ubicaban en la posicion correspondiente, pero uno abajo de otro, como si no pudieran compartir el espacio horizontal...Luego lei acerca de la propiedad float y la aplique a ver si funcionaba....lo hizo aunque no se porque tuve que empezar a poner top-margin en numeros negativos...en fin con todo y eso, logre empezar a posicionar mis elementos. Pero solo estaba probando en firefox...cuando probe en otros navegadores (opera, explorer) los elementos se acomodaron de una forma distinta...
Porque y si alguien me ayuda con la solucion le estare eternamente agradecida....
el codigo esta asi:
Código :
<body> <div id="Wrap"> <div id="encabezado"></div> <div id="fdo-adentro"><!--abierto--> <div id="expertos"></div> <div id="para-barnav"> <ul id="navi"> <li ><a href="#">Quienes somos </a></li> <li><a href="#">Mision</a></li> <li><a href="#">Vision</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Recursos</a></li> <li><a href="#">Clientes</a></li> <li><a href="#">Empleo</a></li> <li><a href="#">Inicio</a></li> <li><a href="#">Consultas</a></li> </ul> <div id="phone"> </div> <div id="abajo-phone"> </div> </div><!--para barnav--> <div id="adentro-der"> <div id="contenido"> <div id= "titulo"><h2>Quienes Somos</h2></div> <div id= "par"> <p>texto</p> </div><!--par--> </div><!--contenido--> </div> <div id="barra-derecha-"></div> <div id="barra-abajo"> <div id="pie"> <p>informacion de la compania</p> </div><!--pie--> </div><!--barra abajo--> </div><!--fondo adentro--> </div> </body> </html>
y el css:
Código :
body {
background-color: #2d3440;
text-align:center;
}
#Wrap{
width:800px;
margin:0 auto;
text-align:left;
top:0px;
height:922px;
margin:0 auto;
color: #4B5361;
}
#titulo {
height: 40px;
font-family:Arial, Helvetica, sans-serif;
color: #2d3440;
margin-top: 0px;
background:#a0a2a5;
text-align: center;
font-size: 18px;
}
#par {
margin-top: 5px;
margin-bottom:auto;
margin-left: 20;
margin: 20px;
padding: 0px;
font-family:Arial, Helvetica, sans-serif;
color: #2D3440;
}
#encabezado {
left:0px;
top:10px;
width:800px;
height:160px;
background-image:url(Images/encabezado.gif);
}
#expertos {
left:0px;
top:160px;
width:780px;
height:45px;
background-image:url(Images/expertos.gif);
}
#expcob-04 {
left:749px;
top:204px;
width:10px;
height:628px;
}
#barra-derecha- {
float:right;
margin-right:10px;
margin-top:-667px;
width:39px;
height:625px;
background-color:#FBDB4C;
}
#expcob-06 {
left:798px;
top:204px;
width:2px;
height:718px;
}
#fdo-adentro {
left:0px;
top:100px;
width:800px;
height:621px;
background-color:#4F5765;
}
#para-barnav {
float:left;
margin-left:px;
top:70px;
width:138px;
height:410px;
background-color:#616876;
}
#navi {
left:0px;
top:30px;
width:138px;
list-style:none;
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
color: #787C84;
}
#navi li {
padding:0px;
border:1px;
border-color: #a0a2a5;
border-style:solid;
font-family: Arial, Helvetica, sans-serif;
color:#CCCCCC;
margin-left: 0px;
margin-right: 0px;
margin-top: 5px;
margin-bottom: 5px;
border-color: #a0a2a5;
}
#navi li a {
margin:0px;
display:block;
border:1px;
padding:5px;
text-decoration:none;
text-align:left;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight: normal;
color: #FFFF99;
}
#navi li a:hover {
background-color:#FBDB4C;
text-align:center;
color: #2d3440;
font-weight: bold;
}
#phone {
left:11px;
margin-top:10px;
width:138px;
height:185px;
background-image:url(Images/phone.png);
border:none;
}
#abajo-phone {
left:11px;
margin-top:0px;
width:138px;
height:85;
background-color: #616876;
top: -5px;
}
#fdo-adentro {
padding:0px;
left:0px;
top:205px;
width:800px;
height:625px;
background-color:#4F5765;
}
#adentro-der {
width: 445px;
margin-left: 0px;
margin-top: 0px;
}
#contenido {
margin-top:-20px;
margin-left:150px;
width:590px;
height:621px;
background-color:#787C84;
}
#barra-abajo {
left:0px;
margin-top:-50px;
width:759px;
height:90px;
background-color:#FBDB4C;
text-align:center;
}
#pie {
margin-top: 6px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #2d3440;
}
[/code] 