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
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
A voir également:
- Bannière .CSS
- Bannière instagram - Guide
- Enlever couleur lien css ✓ - Forum CSS
- Supprimer bannière freebox tv ✓ - Forum Box et Streaming vidéo
- Css exposant ✓ - Forum CSS
- Css download - Télécharger - HTML
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
9 août 2009 à 21:22
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".
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
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%;
}
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%;
}
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
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 :
é => é
è => è
ù => ù
î => î
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) :
' => ’
" => "
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
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???
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
9 août 2009 à 22:00
manque un "position:absolute;" dans le css #banniere img, excuse-moi^^
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
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;
}
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;
}
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
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é :
Vire ça, reprends l'miens s'te plaît !!!
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 !!!
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
9 août 2009 à 22:09
Refait un copier coller de CSS stp
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
9 août 2009 à 22:16
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/
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
10 août 2009 à 18:12
T'as fait ça ?
