Problème pour la création d'une page web
Résolu
Utilisateur anonyme
-
animostab Messages postés 3003 Statut Membre -
animostab Messages postés 3003 Statut Membre -
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
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:
- Problème pour la création d'une page web
- Création site web - Guide
- Supprimer une page word - Guide
- Web office - Guide
- Comment traduire une page web - Guide
- Capturer une page web complète - Guide
1 réponse
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%;
}
<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%;
}