Hello everybody,
My question today is very simple 
I would like to have a horizontal menu. How can I do that?
Thanks in advance.
You could do something like this:
<ul id="nav">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
#nav {
float:left;
list-style:none;
width:100%;
margin:0;
padding:0;
}
#nav li {
float:left;
margin:0;
padding:0;
}
#nav a {
display:block;
float:left;
}
Hi Kohoutek,
I tried your code and I played around with it. The only problem I’m having is that the menu appears on the left, and overlaps the border of a heading. How can I have a menu that appears horizontally on the center and doesn’t touch the border of the first heading?
Thanks a lot for your help
Hi lila23,
it appears on the left because I floated the menu. Do you have a URL where I can see what you’re looking to do?
You don’t have to float the ul:
#nav {
list-style:none;
width:100%;
margin:0;
padding:0;
}
#nav li {
margin:0;
padding:0;
display: inline;
}
#nav a {
float:left;
}
I unfortunately don’t have a url as I haven’t hosted it yet. It’s just a test before I design my website.
I just tried the new Css code you gave me; it’s still showing on the left. This is my HTML code along with the CSS code.
HTML Code
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” >
<head>
<title>Bienvenue sur mon site </title>
<meta http-equiv=“Content-Type” content=“text/html;
charset=utf-8” />
<link rel=“stylesheet” media=“screen” type=“text/css” title=“Design” href=“design2.css”/>
</head>
<body>
<div id=“header”> <img src=“drenchinfrench.jpg”
alt=“Drench in French”
width=“1300” height=“216”/> </div>
<ul id=“navigation”>
<li><a href=“frenchtest2.html”>Acceuil</a></li>
<li><a href=“quisommesnous2.html”>Qui sommes-nous?</a></li>
<li><a href=“contacteznous2.html”>Contactez-nous</a></li>
</ul> </div>
<h1 class=“supergrand”>Comment écrire en français sur un document HTML </h1>
<h2>Particularités</h2>
<p><img src=“…/frenchtest2/giftest.gif” class=“floatingimage” alt=“floating image”/></p>
<div><p>Je veux juste tester quelque chose. Je parie que si j’écris plusieurs
lignes, je pourrais eventuellement avoir le gif Ă gauche. Je crois que je commence Ă comprendre.
Bon c’est un peu barbant mais j’ai quand même compris quelque chose de très important! Youpi!
Ah ce forum, je vous dis franchement il est magnifique. Je l’aime beaucoup. Ils m’ont beaucoup aidée
. Je n’ai pas à m’en plaindre. Tiens, je me demande ce que je vais apprendre après. Il faut que je les
remercie. Sans eux j’aurais jamais pu trouver pourquoi j’avais pas l’image flottante à gauche de
tous mes paragraphes. </p></div>
<p><img src=“…/frenchtest2/giftest.gif” class=“floatingimage” alt=“floating image”/></p>
<p>Je veux juste essayer <span class= “bleu”> cette page</span> pour voir si on peut
taper les accents dans des textes html. Ça serait super si je pouvais le faire.<br/>
Ça me sera super utile. Je dois parler et parler et raconter n’importe quoi pour que le paragraphe soit long et
que je puisse finalement mettre mon image flottante. C’est quand même bizarre que je ne sois pas
encore parvenue à mettre mon image flottante. C’est pas facile facilement. Mais bon, je vais quand
même tout essayer comme d’hab!</p>
<p>J’ai vraiment hâte de voir ce que ça va donner sur le web et j’ai aussi hâte de construire mon
website. J’aime le HTML, c’est pas de ma faute. J’aime le web design! Bon je crois que je vais
arrĂŞter de radoter </p>
<h1>Alors ça donne quoi finalement?</h1>
<p>Bon maintenant qu’est ce que je vais raconter? Il faut dire que je me suis super bien sentie aujourd’hui. J’ai aussi remarqué que j’ai beaucoup d’énergie dernièrement. Je pense que c’est du au fait que je fais pas mal de releasing </p>
<p>Mais bon je n’en suis pas sûre non plus. La vie est belle. Un jour John Lennon a écrit: <q>Life is what’s <em>happening</em> to you when you’re busy making other plans.</q> J’ai de l’énergie. Je suis positive et je me sens bien. Que demande le peuple!Mais il me reste encore beaucoup à faire car j’ai toujours de la peur en moi. Je veux me libérer de cette peur, me libérer complétement.</p>
<p>Il faut dire que j’aime <em class=“grand”>la vie </em> de plus en plus! Je la trouve très <em>belle</em> Et oui! Moi qui était plutôt <strong> pessimiste </strong></p>
<p>C’est vraiment la 1<sup>ère</sup> fois que je prends la vie du bon côté, que je ne passe pas mon temps à pleurnicher sur mon sort. Je trouve d’ailleurs mon sort plutôt beau!</p>
<p>Il y a une fable que j’aime beaucoup. Je pense que vous la connaissez. Il s’agit de <em> Le Renard et le Corbeau</em>. Voici le texte:</p>
<blockquote>
<p>
Maitre corbeau sur un arbre perché<br/> tenait en son bec un fromage.<br/> Maitre Renard par l’odeur alléché<br/> Lui tint à peu près ce langage<br/>Bonjour monsieur du Corbeau<br/>Que vous êtes joli<br/></p>
</blockquote>
<p>Bon maintenant je dois mettre des liens sur ce forum. Alors si je me souviens bien pour mettre un lien, il faut faire ça. Bon comme je suis bête. J’ai oublié de vous présenter le lien que je voulais mettre. Alors je crois que je vais mettre le plus simple. Juste pour essayer 
Alors à mon avis le plus simple c’est Google bien sûr! Voiçi le lien
<a href=“http://www.Google.com”>Google</a>
</p>
</body>
</html>
CSS code:
h1
{
color: green;
font-size: 40px;
text-align: center;
border: 3px outset black;
}
h2
{ color: blue;
font-size: 20px;
border: 4px double maroon;
text-align: center;
}
.rouge
/*
juste pour tester
*/
{
color: red;
font-size: 18px;
}
.bleu
{
color: blue;
}
body
p em
{
color: blue;
}
.minuscule
{
font-size: xx-small;
}
.trespetit
{
font-size: x-small;
}
.petit
{
font-size: small;
}
.moyen
{
font-size: medium;
}
.grand
{
font-size: large;
}
.tresgrand
{
font-size: x-large;
}
.supergrand
font -size: xx-large;
}
.petit_em
{
font-size: 0.7em;
}
.grand_em
font-size: 1.3em;
}
h1
{
font-family: "Arial Black", Arial, Verdana, serif;
}
p
{
font-family: Arial,"Comic Sans Ms", "Trebuchet MS", Georgia, serif;
}
a
{
text-decoration: none;
color: red;
font-style: italic;
}
a:hover
{
text-decoration: underline;
color: green;
}
{
a:focus
background-color: #FFCC66;
}
a:visited
{
color: blue;
}
blockquote
{
text-align: center;
background-color: blue;
width: 50%;
text-align: center;
}
p
.floatingimage
{
float: left;
}
p:first-letter
{
float: left;
font-size: 3em;
font-family: Arial, Georgia, "Times New Roman", Times, serif;
margin-righ: 5px;
color: red;
background-color: black;
}
#navigation {
list-style:none;
width:100%
margin:0;
padding:0;
}
#navigation li {
margin:0;
padding:0;
display: inline;
}
#navigation a {
float:left;
}
Ah, I see what you’re looking to do.
Then you can do the following:
#nav {
list-style:none;
width:100%;
margin:0;
padding:0;
position:relative;
left:50%;
}
#nav ul {
position:relative;
left:-50%;
}
#nav li {
margin:0;
padding:0;
display: inline;
}
#nav a {
float:left;
}
You’d now have to wrap your navigation inside a div container:
<div id="nav">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
Thank you Kohoutek. I just tried the new code and it’s indeed in the middle of the page and horizontal; however, it’s still on the border of my first heading. Maybe a little padding will separate the menu from the border. Also, how can we separate the links. I have now something like:
HomeAboutusContactus 
Hi lila23,
yes, you can add some paddings for the anchors and margins to add more space between your elements.
I just deleted the float element and the overlapping disappeared! Yeah!
I just want to know now how to separate my horizontal links
Add padding to the anchors (your a element).
Thank you Kohoutek!!! It worked like magic!!!