menu orizzontale in basso a un div

**sifting** · 18-11-2013, 18:14

Scusate se la domanda può sembrar stupida ma sto cercando di imparare...

Io dovrei semplicemente creare un menù ( tramite una lista UL e LI ) all'interno di un DIV. Il fatto è che questo menù lo vorrei in orizzontale ( e ok, usando float:left ) ma lo vorrei a sinistra e in basso del div!
Non riesco proprio a farlo... mi date una mano? Io vorrei una cosa del genere...

http://s8.postimg.org/acstyq1fp/div.jpg

ecco il codice scritto da me:

NELL' HTML
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>

MENTRE NEL CSS :

body {
position:relative;
margin:2px auto;
width:60em;
}

header{
width:60em;
position:relative;}

header, main, footer{
border:1px solid red;
display:block;}

nav {
background-color:#999;
height:9.38em;
width:60em;
}

footer{
height:9.38em;}

main{
background-color:#933;
width:60em;
height:37.50em;
border:1px solid black;}

body > header{
border: 0;
border-bottom: #09C;
margin: 1px auto;
position: relative;
background-color: #0066FF;
}

nav{display:block;
border-top:3px #000000;
}

nav ul{height:28px;
margin:1px auto;
width:10.2em;
white-space:nowrap;
list-style:none outside none;}

nav ul li {
float:left;
text-align:right;}

Grazie ...

**sifting** · 19-11-2013, 00:37

Ho forse sbagliato sezione...? Proprio nessuno...?

**carlomarangoni** · 21-11-2013, 01:04

Non ho seguito il tuo codice ma ti ho fatto un codice di esempio in modo che tu possa trarre la logica e aggiustare il tuo

codice:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#nav {
 background-color: #FF9;
 margin: 0px;
 padding: 0px;
 height: 500px;
 width: 100%;
 position: relative;
}
#nav ul {
 float: left;
 display: block;
 position: absolute;
 right: 0px;
 bottom: 0px;
 list-style: none;
}
#nav ul li {
 padding: 20px;
 float: left;
}
</style>
</head>
<body>
<div id="nav">
 <ul>
     <li>qui il link 1</li>
     <li>qui il link 2</li>
     <li>qui il link 3</li>
  </ul>
<div style="clear:both;"></div>
</div>
</body>
</html>

**sifting** · 21-11-2013, 09:33

grazie, sei stato gentilissimo!! E molto utile!!! E cosa più importante ho anche capito dove sbagliavo. Grazie ancora!

Discussione: menu orizzontale in basso a un div

Strumenti discussione

Ricerca discussione

Visualizza

menu orizzontale in basso a un div

Permessi di invio