Pb Css et ascenseurs Résolu/Fermé

Question

Bonjour,

Souhaitant mettre une image de fond sur un div du site, il me faut effectuer quelques modifs et compte tenu de mes limites et de mes essais infructueux, je crains le pire dans une tentative à modifier plusieurs parametres du CSS.

Jusque là, mon footer s'adaptait à la longueur de ma page mais ce système est incompatible, me semble-t-il, avec un image de fond (qui se déformerait)

A vouloir mettre une image de fond  et un ascenceur dans le "div Zone_corps", je pense qu'il est aussi nécessaire (d'après mes essais) de modifier les autres div.

Aussi peut-être est il préférable de le mettre dans le "div Content"

Est ce que quelqu'un pourrait me dire ce qui est le mieux et que je dois changer et les changer par quoi ?.
Je ne pense pas que le css du menu soit nécessaire pour cela.

Voila l'adresse du site : 
https://www.institut-beaute-bio-aquamarine.com/

Ps: je travaille avec Komposer

Merci d'avance
Luc

Voir mon CSS :
/* Generated by KaZcadeS */
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: white;
}
#wrapper {
    margin: 0 auto;
    width: 1122px;
    padding-top: 5px;
    background-color: white;
    color: #ffff99;
}
#titrefixe {
    padding-right: 10px;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 50%;
    text-align: center;
    height: 18px;
    font-size: smaller;
    width: 1110px;
    font-family: verdana;
    font-weight: inherit;
    color: #009900;
}
#header {
    background-repeat: no-repeat;
    background-position: center;
    padding-right: 10px;
    padding-bottom: 10px;
    float: left;
    width: 1110px;
    height: 125px;
    background-image: url(../AquaDream_images/image%20logos/essai%20coccinnelle%20bio.bmp);
}
#defilant {
    border-top: thin solid #009900;
    padding: 10px;
    background: #ffffff none repeat scroll 0% 50%;
    float: left;
    height: 5px;
    line-height: 5px;
    text-align: center;
    width: 1100px;
    font-family: verdana;
    font-weight: bold;
    color: #009900;
    font-size: smaller;
}
#content {
    border-right: thin solid #990000;
    margin: 0px;
    background-repeat: repeat;
    padding-right: 10px;
    padding-bottom: 10px;
    float: left;
    color: #990000;
    display: inline;
    padding-top: 0px;
    width: 930px;
    min-height: 800px;
    font-size: small;
    font-family: verdana;
    background-position: center;
    background-image: url(../AquaDream_images/Image%20fond/aquamarinebeaute.bmp);
}
#Zone_direction {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
#Zone_Titre {
    margin-right: 10px;
    margin-left: 10px;
    padding-bottom: 10px;
}
#Zone_corps {
    margin-right: 10px;
    margin-left: 10px;
    padding-top: 10px;
    margin-top: 10px;
}
#rightcolumn {
    margin: 0px 0px 5px;
    padding: 0px 10px 10px;
    width: 150px;
    float: left;
    background-color: #ffffff;
    height: 800px;
}
#footer {
    margin: 0px;
    padding: 10px;
    background: #990000 none repeat scroll 0% 50%;
    clear: left;
    color: #ffff66;
    width: 1100px;
    font-family: verdana;
    font-size: medium;
}
h1 {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    font-family: Verdana;
    font-size: x-large;
}
h2 {
    text-align: center;
    font-family: Verdana;
    padding-bottom: 0px;
    font-size: large;
}
h3 {
    margin: 15px 15px 5px;
    color: #990000;
    font-family: verdana;
    padding-bottom: 0px;
    font-size: medium;
}
h4 {
    margin-right: 15px;
    margin-left: 15px;
    font-family: verdana;
}
h5 {
    margin-right: 15px;
    margin-left: 15px;
    font-family: verdana;
}
h6 {
    margin-right: 15px;
    margin-left: 15px;
    font-family: verdana;
}
p {
    margin: 15px;
    font-family: verdana;
}
a:link {
    text-decoration: none;
    background-color: transparent;
    color: #009900;
}
a:visited {
    text-decoration: none;
    background-color: transparent;
    color: #009900;
}
a:hover {
    text-decoration: underline;
    background-color: transparent;
    color: #cc9933;
}
a:active {
    color: #990000;
    text-decoration: underline;
    background-color: transparent;
}

Posotaz · Answer

Bonjour,

Une image de fond ne se déforme jamais. Par défaut elle se répète, autrement tu connais la propriété CSS background-repeat pour contrôler la technique de répétition (horizontale ou verticale seule, les deux ou aucune répétition).

Je pense que tu as répondu toi-même à la question en essayant ce que tu suggérais. Ca fonctionne fort bien mais tu constates que le texte devient très peu lisible. Il est d'ailleurs déconseillé d'utiliser des images de fond sous du texte principal.

Voilà ce que j'ai modifié : 

h1 {
    text-align: right; /* Pour que le titre se positionne dans l'espace blanc */
    ...

#Zone_corps {
    margin-left: 200px; /* Pour maintenir un décalage raisonnable à gauche avec l'image de fond */
    overflow: auto; /* Pour ajouter l'ascenceur */
    height: 300px; /* Pour limiter la hauteur du texte de sorte qu'elle touche à peine le bas de l'image du fond */


Personnellement je trouve c'est plus lisible et cadré même si l'idée de l'ascenseur ne me plait pas énormément pour des raisons pratiques de navigation... :-)

aqua92 · Answer

Je te remercie Posotaz. 

J'ai suivi tes conseils qui répondaient exactement à ce que je voulais obtenir mais je constate comme toi que l'ascenceur, tantôt 1 seul, tantôt 2 sur certaines pages donne un résultat désastreux.

Faut que je modifie mon image de fond pour l'adapter au mieux par rapport à ce que tu m'as montré. Un fond avec image axées à gauche sera préférable !!!

Peux tu me dire les modifs a faire pour que mon div rightcolumn et les images soient le plus à droite possible de manière à élargir le div content (si le rightcolumn fait 100, voir 80 ça serait bien)


Je te remercie

Posotaz · Answer

Salut,

Je n'ai pas pu répondre plus tôt mais je vois que tu as su résoudre le problème à merveille au niveau du résultat. C'est beaucoup plus clair comme ça, félicitations ! En général j'évite de fixer les tailles en px, je préfère jouer sur les proportions en % mais parfois on n'a pas toujours le choix. Merci de venir passer le message en résolu. :-)

Pb Css et ascenseurs

3 réponses

Discussions similaires