HTML, positionner son image au sommet du site
Résolu
xT1G3Rx
Messages postés
67
Date d'inscription
Statut
Membre
Dernière intervention
-
xT1G3Rx Messages postés 67 Date d'inscription Statut Membre Dernière intervention -
xT1G3Rx Messages postés 67 Date d'inscription Statut Membre Dernière intervention -
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 ;)
A voir également:
- HTML, positionner son image au sommet du site
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site pour vendre des objets d'occasion - Guide
- Site pour partager des photos - Guide
6 réponses
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 :
Bonne journée
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
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>
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>
<!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 )