Problema con le liste orzzontali :(!!

**turtwig996** · 11-11-2014, 19:59

Ciao a tutti sono un principiante dell'html volevo creare una semplice testata classica: Titolo, sottotitolo e sotto la barra di navigazione.
Purtroppo qui sorge il problema non riesco a fare una lista orizzontale che sia allineata e stia all'interno dello stesso div e non capisco perché, sto andando via con la testa.

Io ho scritto questo.

codice:

<!DOCTYPE HTML>
<html>
 <head>
  <title>Titolo!</title>
  <meta>
  <link type="text/css" rel="stylesheet" href="Index.css">
  <script>
  </script>
 </head> 
 <body topmargin="0" leftmargin="0">
  <div align=center>
    <div id="main_div">
     <header>
      <hgroup>
       <h1 align=left>Titolo Principale</h1>
       <h2 align=left>..slogan...</h2>
      </hgroup> 
      <nav>
      <div align=left>
       <ul id="menu">
        <li> Home </li>
        <li> Contatti </li>  
        <li>Chi siamo</li>
        <li>Dove siamo </li>
       </ul>
       </div>
      </nav>
     </header>
   </div>
 </body>
</html>

Questo è il css:

codice:

#main_div {width: 1000px;
                border: solid 1px black;
                }


#menu    {display:block;
               list-style-type:none;
          }


#menu li   {display:block;
                 background-color:red;
                border-bottom: 1px solid red;
                width:240px;
                height:40px;
               float:left;
                 }

Molto probabilemte è un errore stupido e sto anngando in un bicchier d'acqua!!
Vi prego di aiutarmi!

Grazie in anticpo!

**sgogghy** · 12-11-2014, 22:13

codice:

#menu{    
    display:block;
    list-style-type:none;
    margin:0px;
    padding:0px;
 }

**enomiz** · 19-11-2014, 22:39

<!DOCTYPE HTML>
<html>
<head>
<title>Titolo!</title>
<style type="text/css">
#contenuto{width: 100%;background-color: blue;}
#barramenu{width: 100%;height:70px;background-color: red;}
#barramenu ul{list-style-type: none;}
#barramenu ul li{float: left;margin-right: 50px}
</style>
</head>
<body>
<div id="contenuto">
<div id="header"><h1>Titolo Principale</h1><h2>..slogan...</h2></div>
<div id="barramenu">
<ul>
<li> Home </li>
<li> Contatti </li>
<li>Chi siamo</li>
<li>Dove siamo </li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

prova questo dimmi se va bene

**ArgonautaWEB** · 29-11-2014, 02:29

<!DOCTYPE HTML>
<html>
<head>
<title>Titolo!</title>
<meta>
<style>
#main_div {width: 960px; border: solid 1px black;}
#menu {margin:0; padding:0; display:block;list-style-type:none; width:960px;}
#menu li {display:block;
background-color:red;
border-bottom: 1px solid red;
width:240px;
height:40px;
float:left
}
</style>

</head>
<body topmargin="0" leftmargin="0">
<div align=center>
<div id="main_div">
<header>
<hgroup>
<h1 align=left>Titolo Principale</h1>
<h2 align=left>..slogan...</h2>
</hgroup>
<nav>
<div align=left>
<ul id="menu">
<li> Home </li>
<li> Contatti </li>
<li>Chi siamo</li>
<li>Dove siamo </li>
</ul>
</div>
</nav>
</header>
</div>
</body>
</html>

la larghezza di #main_div le ho cambiate in 960px ... tua hai impostato la larghezza delle 4 celle interne a 240px.
240 x 4 = 960
Se la mettevi a mille rimaneva 40px di spazio da una parte o dall'altra

**ac_socmel** · 29-11-2014, 03:51

Non risponda sulla questione ma per ricordarti che "hgroup" è deprecato per cui le nuove versioni dei browser non dovrebbero più considerarlo

The <hgroup> element was introduced in HTML 5 ... It is now deprecated.

Discussione: Problema con le liste orzzontali :(!!

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Problema con le liste orzzontali :(!!

Permessi di invio