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.
A voir également:
- Problème code CSS / XHTML
- Code ascii - Guide
- Code puk bloqué - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
- Code activation windows 10 - Guide
- Code blocks - Télécharger - Langages
5 réponses
Voici un exemple plus concret :
et en (x)HTML :
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".
<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 :
2) remplace
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.
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 ^^
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
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question