Bannière .CSS

Résolu/Fermé
brioche95 Messages postés 632 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 4 mars 2012 - 9 août 2009 à 21:06
Flohti Messages postés 162 Date d'inscription mercredi 25 juillet 2007 Statut Membre Dernière intervention 7 février 2010 - 10 août 2009 à 18:12
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:

???
A voir également:

6 réponses

Flohti Messages postés 162 Date d'inscription mercredi 25 juillet 2007 Statut Membre Dernière intervention 7 février 2010 15
9 août 2009 à 21:22
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".
1
brioche95 Messages postés 632 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 4 mars 2012 167
9 août 2009 à 21:41
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%;
}
0
Flohti Messages postés 162 Date d'inscription mercredi 25 juillet 2007 Statut Membre Dernière intervention 7 février 2010 15
9 août 2009 à 21:49
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 :

é => &eacute;
è => &egrave;
ù => &ugrave;
î => &icirc;

et les apostrophes et guillements textuels (hors code quoi) :
' => &rsquo;
" => &quot;
0
brioche95 Messages postés 632 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 4 mars 2012 167
9 août 2009 à 21:51
ba alors pourquoi il ne se centre pas ... ce qu'il y a un problème qu'elle part???
0
Flohti Messages postés 162 Date d'inscription mercredi 25 juillet 2007 Statut Membre Dernière intervention 7 février 2010 15
9 août 2009 à 22:00
manque un "position:absolute;" dans le css #banniere img, excuse-moi^^
0
brioche95 Messages postés 632 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 4 mars 2012 167
9 août 2009 à 21:59
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;
}
0
Flohti Messages postés 162 Date d'inscription mercredi 25 juillet 2007 Statut Membre Dernière intervention 7 février 2010 15
9 août 2009 à 22:02
Vérifie sur tous les navigateurs, et au redimensionnement.

J'ai toujours ça dans mes pages, c'est pour ça que j'ai oublié :
*{
    position:absolute;
}


Vire ça, reprends l'miens s'te plaît !!!
0
brioche95 Messages postés 632 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 4 mars 2012 167 > Flohti Messages postés 162 Date d'inscription mercredi 25 juillet 2007 Statut Membre Dernière intervention 7 février 2010
9 août 2009 à 22:09
Refait un copier coller de CSS stp
0

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

Posez votre question
Flohti Messages postés 162 Date d'inscription mercredi 25 juillet 2007 Statut Membre Dernière intervention 7 février 2010 15
9 août 2009 à 22:16
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/
0
Flohti Messages postés 162 Date d'inscription mercredi 25 juillet 2007 Statut Membre Dernière intervention 7 février 2010 15
10 août 2009 à 18:12
T'as fait ça ?
0