Image décentrer avec le CSS
Zangetsu
Messages postés
1031
Statut
Membre
-
Zangetsu Messages postés 1031 Statut Membre -
Zangetsu Messages postés 1031 Statut Membre -
Bonjour,
Voilà, j'ai un souci lorsque je veux centrer un bete pied de page (image noire). Autant le background s'est centré sans souci, autant celui ci ne veut pas. Juger vous meme le code et l'affichage, je vois pas où je me suis planté.
Code :
.piedpage
{
display:block;
position:absolute;
left: 105px;
top: 924px;
}
Image :
[URL=https://imageshack.com/][IMG]http://img520.imageshack.us/img520/8484/problemext0.th.jpg[/IMG][/URL]
Si quelqu'un connait la réponse ce serait sympa de me la donner.
Merci beaucoup d'avoir lu.
Voilà, j'ai un souci lorsque je veux centrer un bete pied de page (image noire). Autant le background s'est centré sans souci, autant celui ci ne veut pas. Juger vous meme le code et l'affichage, je vois pas où je me suis planté.
Code :
.piedpage
{
display:block;
position:absolute;
left: 105px;
top: 924px;
}
Image :
[URL=https://imageshack.com/][IMG]http://img520.imageshack.us/img520/8484/problemext0.th.jpg[/IMG][/URL]
Si quelqu'un connait la réponse ce serait sympa de me la donner.
Merci beaucoup d'avoir lu.
A voir également:
- Image décentrer avec le CSS
- Image iso - Guide
- Légender une image - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Image gratuite - Guide
3 réponses
salut,
avec un positionnement absolu et sans connaitre le contexte, difficile à dire.
as-tu essayé d'augmenter la valeur de {left} ?
avec un positionnement absolu et sans connaitre le contexte, difficile à dire.
as-tu essayé d'augmenter la valeur de {left} ?
tu vires l'image et dans ta CSS :
ou alors tu le mets sur <body>.
div.Chap5{
background-image:url(../Image/piedpage.png); /* à adapter au contexte */
background-repeat:no-repeat;
background-position:0 0;
padding-bottom:40px; /* mettre la hauteur de l'image */
}
ou alors tu le mets sur <body>.
J'ai changé comme tu l'a dit mais c'est pas bon alors j'ai tenté autre chose et regarde ce qui se passe.
[URL=https://imageshack.com/][IMG]http://img514.imageshack.us/img514/3677/problemewt6.th.jpg[/IMG][/URL]
en fait il est centré partout sur la feuille mais qd j'atteint le dessous, il se décale à gauche. Le CSS c'est :
body
{
background:url(../Fond_ecran/Fond2.png) no-repeat top center fixed;
background:url(../Image/piedpage.png) no-repeat bottom center fixed;
}
.Chap1
{
padding:0px;
position:absolute;
text-align:justify;
left: 157px;
top: 332px;
}
.Chap2
{
padding:0px;
position:absolute;
text-align:justify;
left: 155px;
top: 421px;
}
.Chap3
{
padding:0px;
position:absolute;
text-align:justify;
left: 157px;
top: 535px;
}
.Chap4
{
padding:0px;
position:absolute;
text-align:justify;
left: 155px;
top: 645px;
}
.Chap5
{
padding:0px;
position:absolute;
text-align:justify;
left: 157px;
top: 778px;
}
.piedpage
{
display:block;
position:absolute;
left: 105px;
top: 924px;
}
LE PIRE : c'est que depuis le début, dans CS3, le preview dit que mon code est juste j'ai un screen regarde :
[URL=https://imageshack.com/][IMG]http://img442.imageshack.us/img442/4343/problemegf0.th.jpg[/IMG][/URL]
[URL=https://imageshack.com/][IMG]http://img514.imageshack.us/img514/3677/problemewt6.th.jpg[/IMG][/URL]
en fait il est centré partout sur la feuille mais qd j'atteint le dessous, il se décale à gauche. Le CSS c'est :
body
{
background:url(../Fond_ecran/Fond2.png) no-repeat top center fixed;
background:url(../Image/piedpage.png) no-repeat bottom center fixed;
}
.Chap1
{
padding:0px;
position:absolute;
text-align:justify;
left: 157px;
top: 332px;
}
.Chap2
{
padding:0px;
position:absolute;
text-align:justify;
left: 155px;
top: 421px;
}
.Chap3
{
padding:0px;
position:absolute;
text-align:justify;
left: 157px;
top: 535px;
}
.Chap4
{
padding:0px;
position:absolute;
text-align:justify;
left: 155px;
top: 645px;
}
.Chap5
{
padding:0px;
position:absolute;
text-align:justify;
left: 157px;
top: 778px;
}
.piedpage
{
display:block;
position:absolute;
left: 105px;
top: 924px;
}
LE PIRE : c'est que depuis le début, dans CS3, le preview dit que mon code est juste j'ai un screen regarde :
[URL=https://imageshack.com/][IMG]http://img442.imageshack.us/img442/4343/problemegf0.th.jpg[/IMG][/URL]
c'est peut être parce que tu ne joues pas le jeu de XHTML/CSS à fond.
il ne faudrait pas de {position:absolute;} (sauf exception) et les images décoratives ne devrait pas apparaitre dans le HTML mais uniquement dans la CSS.
pour travailler il faut dabord un bon document HTML valide et après s'attaquer à la mise en page en laissant faire la disposition normale autant que possible.
par exemple, ta succession de <div> contenant des <p> ressemble fort à une liste, tu aurais pu la loger dans une <ul> ou <ol>, en CSS, c'est plus simple à gérer, tu as un containeur global et des éléments.
et pour DW, ce n'est pas forcement le meilleur.
comme tu le vois, les CSS ne sont pas qu'une histoire de propriétés, il faut prendre en compte le contexte.
rien ne vaut de rester au plus près du code, pour ça un simple éditeur de texte suffit amplement.
si tu n'es pas trop avancé dans ton projet, mieux vaut peut être envisager de re-travailler la structure HTML pour pouvoir la mettre en page plus facilement.
il ne faudrait pas de {position:absolute;} (sauf exception) et les images décoratives ne devrait pas apparaitre dans le HTML mais uniquement dans la CSS.
pour travailler il faut dabord un bon document HTML valide et après s'attaquer à la mise en page en laissant faire la disposition normale autant que possible.
par exemple, ta succession de <div> contenant des <p> ressemble fort à une liste, tu aurais pu la loger dans une <ul> ou <ol>, en CSS, c'est plus simple à gérer, tu as un containeur global et des éléments.
et pour DW, ce n'est pas forcement le meilleur.
comme tu le vois, les CSS ne sont pas qu'une histoire de propriétés, il faut prendre en compte le contexte.
rien ne vaut de rester au plus près du code, pour ça un simple éditeur de texte suffit amplement.
si tu n'es pas trop avancé dans ton projet, mieux vaut peut être envisager de re-travailler la structure HTML pour pouvoir la mettre en page plus facilement.
ça devrait te simplifier la tâche.
pour construire ton document HTML ne raisonne pas en terme de présentation mais en terme de contenu.
en premier il te faut un document contienne un maximum de données textuelles (pour les moteurs de recherche) et qu'il "ait du sens".
chaque balise à un rôle dans la structure du document (titre, lien, liste, tableau…).
donc cela veut dire que la balise elle-même fait sens, on parle de sémantique et il faut la respecter.
par la suite quand tu attaque l'intégration de ton design, tu vas te poser la question de savoir sur quelle balise tu peux appliquer quel style.
si tu n'as pas assez de balise pour reproduire un effet tu pourras toujours ajouter des balises sémantiquement neutres comme <div> ou <span>.
bon courage !
pour construire ton document HTML ne raisonne pas en terme de présentation mais en terme de contenu.
en premier il te faut un document contienne un maximum de données textuelles (pour les moteurs de recherche) et qu'il "ait du sens".
chaque balise à un rôle dans la structure du document (titre, lien, liste, tableau…).
donc cela veut dire que la balise elle-même fait sens, on parle de sémantique et il faut la respecter.
par la suite quand tu attaque l'intégration de ton design, tu vas te poser la question de savoir sur quelle balise tu peux appliquer quel style.
si tu n'as pas assez de balise pour reproduire un effet tu pourras toujours ajouter des balises sémantiquement neutres comme <div> ou <span>.
bon courage !
<p>
<input name="Login" type="text" dir="ltr" lang="fr" value="Login" size="15" maxlength="16" />
<input name="Motdepasse" type="password" value="Password" size="15" maxlength="16" />
<input name="Forum" type="button" dir="ltr" lang="fr" value="Forum" />
</p>
<!--DEBUT CHAP ET VID-->
<!-- Chapitre 1-->
<div class="Chap1">
<p>
Chapitre 1 : Interface du logiciel 3Ds Max 9</p>
</div>
<br />
<div class="Chap2">
<p>
Chapitre 2 : Interface du logiciel 3Ds Max 9</p>
</div>
<br />
<!--Chapitre 3-->
<div class="Chap3">
<p>
Chapitre 3 : Interface du logiciel 3Ds Max 9</p>
</div>
<br />
<!--Chapitre 4-->
<div class="Chap4">
<p>
Chapitre 4 : Interface du logiciel 3Ds Max 9</p>
</div>
<br />
<!--Chapitre 5-->
<div class="Chap5">
<p>
Chapitre 5 : Interface du logiciel 3Ds Max 9</p>
</div>
<br />
<img src="../Image/piedpage.png" class="piedpage" alt="image modif en block" />
</body>
</html>
voilà le corps de cette page. J'ai transformé l'img en block j'ai mis le bout de code css et ca foire. Je pourrais effectivement bouger en px, mais alors, selon l'écran qu'on utilise, ca va se décentrer par rapport au background qui se recentre tout seul.