Este es mi codigo html:
Cita:
<nav id="navigation">
<a href="#" class="nav-btn">Home<span></span></a>
<ul>
<li><a href="quienes somos.html">Quienes somos</a></li>
<li><a href="#">Que hacemos</a></li>
<li class="active home"><a href="social.html">Social</a></li>
<li><a href="http://vab-consulting.blogspot.com.es/" target="_blank">Blog</a></li>
<li><a href="contacto.html">Contacto</a></li> </ul>
<a href="#" class="nav-btn">Home<span></span></a>
<ul>
<li><a href="quienes somos.html">Quienes somos</a></li>
<li><a href="#">Que hacemos</a></li>
<li class="active home"><a href="social.html">Social</a></li>
<li><a href="http://vab-consulting.blogspot.com.es/" target="_blank">Blog</a></li>
<li><a href="contacto.html">Contacto</a></li> </ul>
y acá esta mi hoja de estilos:
[QUOTE]
@font-face {
font-family: 'pt-sans';
src: url('fonts/ptc75f-webfont.eot');
src: url('fonts/ptc75f-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/ptc75f-webfont.woff') format('woff'),
url('fonts/ptc75f-webfont.ttf') format('truetype'),
url('fonts/ptc75f-webfont.svg#pt_sans_captionbold') format('svg');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
outline: 0;
}
body, html { height: 100%; }
body {
font-size: 12px;
line-height: 22px;
font-family: arial, sans-serif;
color: #828282;
background: url(images/body.png) repeat 0 0;
}
a {
color: #3d6f92;
text-decoration: none;
cursor: pointer;
}
a:hover { text-decoration: underline; }
a img {
border: 0;
}
a.more {
background: url(images/green-arr.png) no-repeat 0 5px;
padding-left: 11px;
color: #3d6f92;
text-decoration: none;
font-size: 12px;
}
a.more:hover { text-decoration: none; }
/*font-family: 'Coda', cursive;*/
/*font-family: 'Jura', sans-serif;*/
article, aside, details, footer, header, menu, nav, section { display: block; }
input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }
.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }
.shell { width: 980px; margin: 0 auto; }
.header { background: url(images/header.png) repeat 0 0; }
.header .shell { padding: 21px 32px 0; width: 918px; background: url(images/header-shell2.png) no-repeat center 0; box-shadow: 0px -10px 9px rgba(0,0,0,0.7); -moz-box-shadow: 0px -10px 9px rgba(0,0,0,0.7); -webkit-box-shadow: 0px -10px 9px rgba(0,0,0,0.7); -o-box-shadow: 0px -3px 10px 9rgba(0,0,0,0.7) }
.header-top {
height: 68px;
}
#logo { width: 142px; font-size: 0; line-height: 0; float: left; }
#logo a { height: 57px; display: block; background: url() no-repeat 0 0; text-indent: -4000px; }
#navigation { float: right; padding-top: 27px; }
#navigation ul { list-style: none; list-style-position: outside; font-size: 12px; font-family: 'Coda', cursive; font-weight: 400; }
#navigation ul li { display: inline; padding-left: 34px; }
#navigation ul li a { color: #d5d4d4; }
#navigation ul li a:hover,
#navigation ul li.active a { color: #fff; text-decoration: none; }
.slider { height: 436px; }
[QUOTE]
Que tengo que poner en el html y en el CSS para que me aparezca abajo como este ejemplo que les subo?
http://subefotos.com/ver/?4907000a90e9ddf4587711bc31f64d11o.jpg
Pd: envio acortados el html y el css porque no me deja subirlo entero.
