Bannière .CSS
Résolu
brioche95
Messages postés
632
Date d'inscription
Statut
Membre
Dernière intervention
-
Flohti Messages postés 162 Date d'inscription Statut Membre Dernière intervention -
Flohti Messages postés 162 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je commence tout juste dans la création de site. J'ai crée une bannière pour mon site mais le seul problème je ne trouve pas comment la centré grâce au fichier .CSS . Si une personne à une solution... :)
Xhtml:
<div id="banniere">
<img src="baniere.gif" alt="Bannière Powermsn" />
</div>
CSS:
???
Je commence tout juste dans la création de site. J'ai crée une bannière pour mon site mais le seul problème je ne trouve pas comment la centré grâce au fichier .CSS . Si une personne à une solution... :)
Xhtml:
<div id="banniere">
<img src="baniere.gif" alt="Bannière Powermsn" />
</div>
CSS:
???
A voir également:
- Bannière .CSS
- Bannière instagram - Guide
- Logiciel de bannière - Télécharger - Divers Web & Internet
- Bannière twitch - Forum Twitch
- Idée de bannière youtube - Forum YouTube
- Enlever le soulignement d'un lien css - Astuces et Solutions
6 réponses
Salut,
CSS :
Là l'image est centré horizontalement, tu peux reproduire ce genre de schéma verticalement avec les "top" et "height" en commentaire et un "margin-top".
CSS :
html{
width;100%;
height:100%;
}
body{
position:absolute;
left:0%;
top:0%;
width:100%;
height:100%;
}
// jusque là, c'est plus pour avoir un max de compatibilité entre les navigateur, pour qu'ils affichent la même chose
div#banniere{
position:absolute;
left:0%;
width:100%;
// top:0%;
// height:20%;
// là tu fais bien ce que tu veux pour te placer en hauteur
}
div#banniere img{
left:50%;
width:800px; // ça il faut le savoir
margin-left:-400px; // moins la moitié de la largeur
// top:0%;
// height:100%;
// pareille que le div, c'est ta mise en page
}
Là l'image est centré horizontalement, tu peux reproduire ce genre de schéma verticalement avec les "top" et "height" en commentaire et un "margin-top".
Sa ne marche toujours pas.
je te met exactement tout se que j'ai mit en XHTML et CSS.
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur PowerMsN</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="powermsn" href="aceuil_powermsn.css" />
</head>
<body>
<div id="banniere">
<img src="baniere.gif" alt="Bannière Powermsn" />
</div>
<div id="menu">
<!-- Ici on mettra le menu -->
</div>
<div id="corps">
<!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
</div>
<div id="pied_de_page">
<!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
</div>
</body>
</html>
CSS:
p
{
text-indent: 40px;
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
font-size: 16px;
}
html
{
width;100%;
height:100%;
}
body
{
position:absolute;
left:0%;
top:0%;
width:100%;
height:100%;
}
div#banniere
{
position:absolute;
left:0%;
width:100%;
top:0%;
height:20%;
}
div#banniere img
{
left:50%;
width:800px; margin-left:-400px;
top:0%;
height:100%;
}
je te met exactement tout se que j'ai mit en XHTML et CSS.
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur PowerMsN</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="powermsn" href="aceuil_powermsn.css" />
</head>
<body>
<div id="banniere">
<img src="baniere.gif" alt="Bannière Powermsn" />
</div>
<div id="menu">
<!-- Ici on mettra le menu -->
</div>
<div id="corps">
<!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
</div>
<div id="pied_de_page">
<!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
</div>
</body>
</html>
CSS:
p
{
text-indent: 40px;
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
font-size: 16px;
}
html
{
width;100%;
height:100%;
}
body
{
position:absolute;
left:0%;
top:0%;
width:100%;
height:100%;
}
div#banniere
{
position:absolute;
left:0%;
width:100%;
top:0%;
height:20%;
}
div#banniere img
{
left:50%;
width:800px; margin-left:-400px;
top:0%;
height:100%;
}
Ca a l'air propre, XHTML,
Pour les accents (=compatibilité tous navigateurs), il faudrait qu'ils arrivent dans le code de la page avec les caractères spéciaux :
é => é
è => è
ù => ù
î => î
et les apostrophes et guillements textuels (hors code quoi) :
' => ’
" => "
Pour les accents (=compatibilité tous navigateurs), il faudrait qu'ils arrivent dans le code de la page avec les caractères spéciaux :
é => é
è => è
ù => ù
î => î
et les apostrophes et guillements textuels (hors code quoi) :
' => ’
" => "
Voilà...
CSS:
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
#banniere
{
width: 760px;
height: 100px;
background-image: url("baniere.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
}
CSS:
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
#banniere
{
width: 760px;
height: 100px;
background-image: url("baniere.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Oui, il y a un width;aussi, correct :
Si tu n'as pas : https://addons.mozilla.org/fr/firefox/addon/web-developer/
*{
position:absolute;
}
p{
text-indent: 40px;
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
font-size: 16px;
}
html{
width:100%;
height:100%;
}
body{
left:0%;
top:0%;
width:100%;
height:100%;
}
div#banniere{
left:0%;
width:100%;
top:0%;
height:20%;
}
div#banniere img{
left:50%;
width:800px; margin-left:-400px;
top:0%;
height:100%;
}
Si tu n'as pas : https://addons.mozilla.org/fr/firefox/addon/web-developer/
