HTML, positionner son image au sommet du site

Résolu/Fermé
xT1G3Rx Messages postés 67 Date d'inscription mercredi 24 décembre 2014 Statut Membre Dernière intervention 26 mai 2015 - 30 janv. 2015 à 03:14
xT1G3Rx Messages postés 67 Date d'inscription mercredi 24 décembre 2014 Statut Membre Dernière intervention 26 mai 2015 - 9 févr. 2015 à 05:06
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

DerkoFR Messages postés 504 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 5 janvier 2017 72
30 janv. 2015 à 09:01
Bonjour,

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

HTML + CSS
0
xT1G3Rx Messages postés 67 Date d'inscription mercredi 24 décembre 2014 Statut Membre Dernière intervention 26 mai 2015 6
1 févr. 2015 à 06:36
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 )
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 545
30 janv. 2015 à 11:14
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
0
DerkoFR Messages postés 504 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 5 janvier 2017 72
30 janv. 2015 à 11:44
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;

}
0
xT1G3Rx Messages postés 67 Date d'inscription mercredi 24 décembre 2014 Statut Membre Dernière intervention 26 mai 2015 6
1 févr. 2015 à 06:34
j'ai essayé :(
0
xT1G3Rx Messages postés 67 Date d'inscription mercredi 24 décembre 2014 Statut Membre Dernière intervention 26 mai 2015 6
8 févr. 2015 à 19:57
Alors ??
0
codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 122
8 févr. 2015 à 20:12
bonsoir,

ça choque personne que le style soit dans le body ?
0
xT1G3Rx Messages postés 67 Date d'inscription mercredi 24 décembre 2014 Statut Membre Dernière intervention 26 mai 2015 6
9 févr. 2015 à 05:01
Habitude personelle :p
0

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

Posez votre question
codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 122
Modifié par codeurh24 le 8/02/2015 à 20:44
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
0
codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 122
8 févr. 2015 à 20:58
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>
0
xT1G3Rx Messages postés 67 Date d'inscription mercredi 24 décembre 2014 Statut Membre Dernière intervention 26 mai 2015 6
9 févr. 2015 à 05:06
Merci !
0