Bannière .CSS
Résolu
brioche95
Messages postés
585
Date d'inscription
Statut
Membre
Dernière intervention
-
Flohti Messages postés 165 Statut Membre -
Flohti Messages postés 165 Statut Membre -
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:
???
6 réponses
-
Salut,
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%;
}-
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) :
' => ’
" => "
-
-
ba alors pourquoi il ne se centre pas ... ce qu'il y a un problème qu'elle part???
-
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;
} -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
Oui, il y a un width;aussi, correct :
*{ 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/ -
