Problème code CSS / XHTML
Résolu
Lilie
-
Lilie -
Lilie -
Bonjour,
Je me suis mise récemment à apprendre les bases du xhtml et du css afin de pouvoir créer un
site. Hélas, j'ai besoin d'aide dans mon projet.
Sur ma page, j'aimerais que les liens ( textes, bric à brac etc.. ) soient des menus de haut afin
d'obtenir des liens relatifs. Le soucis, c'est que je ne sais pas comment le coder pour obtenir
quelque chose comme :
Textes Albums photos Quotes Bric à brac Pour en savoir + Me contacter
Voici ma page de test :
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title> Page 1</title>
<style>
#moncadre {
width:800px;
margin:auto;
padding:10px;
background-color:#FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
body {
background-color: #FFFFFF;
color: #000000;
margin: 50px;
font-family: " Bookman old style ", " Comic sans ms "," Franklin Gothic Medium " , " Zapf Chancery ";
font-size: x-large;
line-height: 160%;
margin-right: 50px;
}
</style>
</head>
<body>
<div id="moncadre"><p> <a href="cible.html">Textes</a> </p>
<p> <a href="cible.html"> Album photos </a> </p>
<p> <a href="cible.html"> Quotes </a> </p>
<p> <a href="cible.html"> Bric à brac </a> </p>
<p> <a href="cible.html"> Pour en savoir + </a> </p>
<p> <a href="mailto:..."> Me contacter </a> </p>
</div>
</body>
</html>
Merci d'avance de votre aide.
Je me suis mise récemment à apprendre les bases du xhtml et du css afin de pouvoir créer un
site. Hélas, j'ai besoin d'aide dans mon projet.
Sur ma page, j'aimerais que les liens ( textes, bric à brac etc.. ) soient des menus de haut afin
d'obtenir des liens relatifs. Le soucis, c'est que je ne sais pas comment le coder pour obtenir
quelque chose comme :
Textes Albums photos Quotes Bric à brac Pour en savoir + Me contacter
Voici ma page de test :
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title> Page 1</title>
<style>
#moncadre {
width:800px;
margin:auto;
padding:10px;
background-color:#FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
body {
background-color: #FFFFFF;
color: #000000;
margin: 50px;
font-family: " Bookman old style ", " Comic sans ms "," Franklin Gothic Medium " , " Zapf Chancery ";
font-size: x-large;
line-height: 160%;
margin-right: 50px;
}
</style>
</head>
<body>
<div id="moncadre"><p> <a href="cible.html">Textes</a> </p>
<p> <a href="cible.html"> Album photos </a> </p>
<p> <a href="cible.html"> Quotes </a> </p>
<p> <a href="cible.html"> Bric à brac </a> </p>
<p> <a href="cible.html"> Pour en savoir + </a> </p>
<p> <a href="mailto:..."> Me contacter </a> </p>
</div>
</body>
</html>
Merci d'avance de votre aide.
Configuration: Windows XP Firefox 3.0
5 réponses
-
Voici un exemple plus concret :
<style type="text/css"> #topMenu {width: 205px; height: 23px; margin:7px auto 0 auto; padding-top:12px; padding-left: 700px; background-image:url( !! chemin vers ton image.... !!);} #topMenu ul {margin: 0; padding:0; list-style:none;} #topMenu li {display:inline; border-left: #a0a0a0 solid 1px; padding-left: 5px; padding-right:5px;} #topMenu li a:link { text-decoration: none; color:#95ccff;} #topMenu li a:visited { text-decoration: none; color:#95ccff;} #topMenu li a:hover { text-decoration: underline; color:#fff;} </style>
et en (x)HTML :<div id="topMenu"> <ul><li>Mes liens</li><li>Mon album photo</li></ul> </div>
Oublie pas de remplacer "!! chemin vers ton image.... !!" par un chemin vers une image du style http://www.google.com/image.jpg ou "./images/mesimages/monimage.gif". -
Salut !
Si tu veux plusieurs conseil :
1) Ne met pas tes liens comme ca, fait sous forme de puce :<ul><li>Lien 1</li><li>Lien 2</li></ul>
2) remplace<style>
par<style type="text/css">
, et surtout rajoute une DTD sinon tu va avoir quelques problèmes .
Ton problème repose sur le fit que tu met "<p>" à chaque fois, une balise de paragraphe, essaye avec mon code de ul et li et tu verra ca marchera. -
Effectivement ça marche.
Merci beaucoup pour ta réponse rapide et efficace.
Merci pour les autres conseils aussi, ils sont les bienvenus ^^ -
Tiens si jamais tu sais pas ce que c'est que la DTD ou que tu veux choisir laquel mettre :
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
