HTML, positionner son image au sommet du site [Résolu/Fermé]

Signaler
Messages postés
67
Date d'inscription
mercredi 24 décembre 2014
Statut
Membre
Dernière intervention
26 mai 2015
-
Messages postés
67
Date d'inscription
mercredi 24 décembre 2014
Statut
Membre
Dernière intervention
26 mai 2015
-
Comme le dit le titre, j'aimerai positionner mon image au sommet de mon site web, en effet, j'ai utilisé une balise ( <img> ) avec but de la positionner au sommet de mon site web et de mettre mon menu par dessus, mais il a un espace entre le sommet de la page et mon image ( environ 8px ). Je ne sais pas si c'est à cause de mon navigateur ( Firefox ) ou tout simplement mon code source, merci de me répondre ;)

6 réponses

Messages postés
504
Date d'inscription
vendredi 7 novembre 2014
Statut
Membre
Dernière intervention
5 janvier 2017
55
Bonjour,

C'est tres simple passe moi ton code je te fait un tutoriel ;)

HTML + CSS
Messages postés
67
Date d'inscription
mercredi 24 décembre 2014
Statut
Membre
Dernière intervention
26 mai 2015
6
Voici mon code:

<!doctype html"
<html>
<head>
<title>Spiritrevolution</title>
<meta charset="utf-8">
</head>
<body>
<style>
body {
background-image:url("image/fond.jpg");
}
#logo
{
height: 141px;
padding-top: 0px;
position: relative;
top: 0px;
left: 250px;
horizontal-align: middle;


display: non
}
ul#menu_horizontal li {
display : inline;
padding : 0 0.5em;
}
ul#menu_horizontal {
list-style-type : none;
}
#menu_horizontal a {
color: white;
}
#menu_horizontal a:hover {
color: #C8E8FF;
}
#menu_horizontal {
background-color: #4eb9f9;
weight: 1164px;

}
</style>
<img src="image/spiritrevolution.jpg" id="logo">
<ul id="menu_horizontal">
<li><a href="accueil.php">Accueil</a></li>
<li><a href="news.php">News</a></li>
<li><a href="livreor.php">Livre d'or</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="admin.php">Admin</a></li>
</ul>

Oui quelque instructions css ne servent à rien ( simples tests )
Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
430
Salut,

Les navigateurs peuvent effectivement avoir par défaut des marges sur le contenu de ta page.
Tu peux essayer de réinitialiser ces marges en css comme ceci :
html, body {
    margin: 0;
    padding: 0;
}


Bonne journée
Messages postés
504
Date d'inscription
vendredi 7 novembre 2014
Statut
Membre
Dernière intervention
5 janvier 2017
55
Bonjour pitet

Il veut mettre juste une images en haut il peut faire


<img id="Imageenhaut" href"lien/lien"> </img>


Est dans son css

#imageenhaut {
margin: 0;
padding: 0;

}
Messages postés
67
Date d'inscription
mercredi 24 décembre 2014
Statut
Membre
Dernière intervention
26 mai 2015
6
j'ai essayé :(
Messages postés
67
Date d'inscription
mercredi 24 décembre 2014
Statut
Membre
Dernière intervention
26 mai 2015
6
Alors ??
Messages postés
760
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
99
bonsoir,

ça choque personne que le style soit dans le body ?
Messages postés
67
Date d'inscription
mercredi 24 décembre 2014
Statut
Membre
Dernière intervention
26 mai 2015
6
Habitude personelle :p
Messages postés
760
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
99
font-weight:bold;
a la place de weight: 1164px;

display: none;
a la place de display: non

vertical-align: middle;
a la place de horizontal-align: middle;
mai si c'est de l'horizontal c'est plutot text-align: center meme pour une image
Messages postés
760
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
99
Evidemment vue le niveau technique tu code, tout est a recommencer car par la suite tout vas devenir bancal.

Voici le code amélioré a partir du tient:

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Spiritrevolution</title>
<style>
body {
background-color:#000;
margin:0px;
padding:0px;
}
#logo
{
height: 141px;
padding-top: 0px;
position: relative;
text-align: center;

}
ul#menu_horizontal li {
display : inline;
padding : 0 0.5em;
}
ul#menu_horizontal {
list-style-type : none;
margin: 0px 0px 0px 0px;
}
#menu_horizontal a {
color: white;
}
#menu_horizontal a:hover {
color: #C8E8FF;
}
#menu_horizontal {
background-color: #4eb9f9;
font-weight: bold;

}

#header{
text-align: center;
}

#nav{
text-align: center;
}
</style>
</head>
<body>

<div id="header">
<img src="http://spiritrevolution.free.fr/images/flymaxi.jpg" id="logo" />
</div>
<div id="nav">
<ul id="menu_horizontal">
<li><a href="accueil.php">Accueil</a></li>
<li><a href="news.php">News</a></li>
<li><a href="livreor.php">Livre d'or</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="admin.php">Admin</a></li>
</ul>
</div>
</body>
</html>
Messages postés
67
Date d'inscription
mercredi 24 décembre 2014
Statut
Membre
Dernière intervention
26 mai 2015
6
Merci !