Sujet Précédent Sujet Suivant

Problème pour la création d'une page web

Résolu/Fermé
Utilisateur anonyme - 12 oct. 2014 à 10:26
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 12 oct. 2014 à 14:17
Bonjour je suis débutant en html et je n'arrive pas à placer mon menu en haut à droite, et en aligné

Voici le code html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Monkey gaming</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>


<header>
<a href="mon_site.html"><img src="monkey.PNG" alt=""height="10%" width="6%"/></a>
<p><a href="INSCRIPTION"></a><p>
<nav>
<li class="navigation">
<ul><a href="mon_site.html"><img src="" alt="Acceuil" height="30%" width="30%"</a></ul>
<ul><a href=""><img src="" alt="Recherche" height="30%" width="30%"/></a></ul>
<ul><a href=""><img src="" alt="Mon compte" height="30%" width="30%"/></a></ul>
<ul><a href=""><img src="" alt="Options"height="30%" width="30%"/></a></ul>
<ul><a href=""><img src="" alt="Autres" height="30%" width="30%"/></a></ul>
</li>
</nav>
</header>
<section>
</section>








<footer>
<div id="wrap">

<div id="main" class="clearfix">
Votre contenu ici

</div>

</div>

<div id="footer">
<a href="https://www.instant-gaming.com/fr/"><img src="logo.PNG" alt="Instant Gaming" height="10%" width="10%"/></a>
</div>






</footer>
</body>
</html>


PS :désolé il y a une partie de mon image qui ne ce voit pas bien , si vous avez des conseils a me donner sur d'autres chose , je suis partant ;-)


Voici mon code css

*
{
color: rgb(255,0,68);
font-family: Comic sans MS;
}
body
{
background-image: url("dessin-1.PNG");
background-attachment: scroll;
background-color: grey;
position:relative;
height:1000px;
}
.navigation
{

top:15px;
right:35px;
position:absolute;
display: inline;
width: 740px;
text-align: right;
list-style-type: none;
width: 740px;
display:inline;
}

* {margin:0;padding:0}

html, body {height: 100%}
#wrap {min-height: 100%}

#main {
overflow:auto;
padding-bottom: 150px
}

#footer {
position: relative;
clear:both;
margin-top: -150px;
height: 150px
}

/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px
}






RE PS : il y a surement du code superflu mais j'essaye un peu tout et j'oublie d'enlever ce qui ne sert plus a rien ;-)



Et voici le screeshot de mon site

http://hpics.li/0e284a9
A voir également:

1 réponse

Réponse 1 / 1
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
12 oct. 2014 à 14:17
Déja un grosse erreur de code dans ton menu

<li class="navigation">
<ul><a href="mon_site.html"><img src="" alt="Acceuil" height="30%" width="30%"</a></ul>
<ul><a href=""><img src="" alt="Recherche" height="30%" width="30%"/></a></ul>
......
</li>

il faut faire
<ul class="navigation">
puis les <li>
</ul>

ensuite vire les dimensions des img de ton menu

dans ton css body il y a 2 fois un height et pas de besoin d'une position relative a body.
enfin tu as oublié a plusieurs reprises le point virgule à la fin d'une déclaration css

css pour ton menu

.navigation
{
float:right;
width: 740px;
}

.navigation ul {
list-type:none;
}

.navigation ul li {
text align: right;
display:inline-table;
width:20%;
}

.navigation ul li img {
width:100%;
}
0