Problème code CSS / XHTML

Résolu
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.
A voir également:

5 réponses

Réponse 1 / 5
zogo Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   5
 
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".
1
Réponse 2 / 5
zogo Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   5
 
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.
0
Réponse 3 / 5
Lilie
 
Effectivement ça marche.

Merci beaucoup pour ta réponse rapide et efficace.

Merci pour les autres conseils aussi, ils sont les bienvenus ^^
0
Réponse 4 / 5
zogo Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   5
 
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Lilie
 
Merci, j'en cherchais justement une lol
0

Discussions similaires

sertissage des cables rj45
lekludo -
brupala -

7 réponses
Code de renvoi d'appel : Ooredo, Mobilis...
midoou07 -
Camille -

13 réponses