Hi, I am trying to achieve this simple layout
http://img478.imageshack.us/my.php?image=boceto2ah.gif
and I have problems with the navigation div (the numbers)
btw, the right way its somthing like
1234
5678
at bottom of that line, not vertical like that image
and this is the code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>hola mundo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
<!--
body, html {
margin: 15px 0 0 0;
padding: 0;
background: #fff;
color: #000;
}
body {
min-width: 764px;
}
#contain {
background: #fff;
margin: 0 auto;
width: 764px;
height: 419px;
}
#main {
background: #514c38;
float: left;
width: 382px;
height: 419px;
font: .7em Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #eeeeee;
}
#content {
float: right;
width: 290px;
text-align: right;
padding: 0 10px 0 0;
}
#content h2, #content h3 {
padding: 0;
margin: 0;
color: #35ad9b;
font-weight: bold;
font-size: 1.1em;
}
#buttons {
float: left;
padding: 0;
margin: 0 0 0 18px;
width: 60px;
height: 34px;
}
#navigation {
position: relative;
bottom: 0;
padding: 0;
margin: 0;
width: 382px;
height: 10px;
text-align: right;
border: 1px solid #cccccc;
}
#navigation ul{
margin:0;
padding:0;
list-style:none;
}
#navigation li{
display:inline;
margin:0;
padding:0;
}
#mainimage {
float: right;
width: 382px;
background: #99c;
}
#mainimage ul {
margin-bottom:0;
}
#mainimage h3, #mainimage p {
padding:0 10px 0 0;
}
//-->
</style>
</head>
<body>
<div id="contain">
<div id="main">
<img src="/imagenes/cabecera.gif" alt="" width="382" height="85" />
<div id="content">
<h2>Nombre del cliente</h2>
Ejemplo descripción cliente<br /><br />
Gran mate para tomar mucho mate y más mate,<br />
mate.
</div>
<div id="buttons">
<img src="/imagenes/enlacecontacto.gif" alt="" width="60" height="17" />
<img src="/imagenes/enlaceportfolio.gif" alt="" width="60" height="17" />
</div>
<div id="navigation">asdsas acá los números</div>
</div>
<div id="mainimage"><img src="/images/granmate.jpg" alt="" align="top"/></div>
</div>
</body>
</html>
I was trying to put the bottom of #navigation equal than the bottom
of #main... using bottom: 0;
but I have no idea on how to do it...
and... It is ok the way I tryied to solve it?
Is there any other better way to make it?
TIA, and sorry for the bad english :)
--
Luciano A. Ferrer
la**************@SacaDMEgmail.com
http://relojurbano.com.ar .algún día volverás.
.... Velador elástica mueca
