Une aide pour insérer un div sur le site

aqua92 Messages postés 35 Statut Membre -  
Dalida Messages postés 7114 Statut Contributeur -
Bonjour,

J'essai d'insérer (sans résultat probant) un div d'une largeur de 100 environ sur ce site :

https://www.institut-beaute-bio-aquamarine.com/

à gauche du texte et entre la fleur et les pierres afin d'y mettre des informations style actualités.
Est ce que quelqu'un pourrait m'apporter ses connaissances techniques pour effectuer les modifs nécessaires.

Avec mes remerciements

CSS 
/* Generated by KaZcadeS */
* {
    margin: 0;
    padding: 0;
}
body {
    background-position: center;
    background-attachment: fixed;
    background-repeat: repeat;
}
#wrapper {
    margin: 0 auto;
    padding-top: 5px;
    background-color: white;
    color: #ffff99;
    width: 1025px;
    height: 1220px;
}
#titrefixe {
    border-left: 2px solid #33cc00;
    border-right: 2px solid #33cc00;
    padding-right: 10px;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 50%;
    text-align: center;
    height: 18px;
    font-size: smaller;
    font-family: verdana;
    color: #009900;
    width: 1010px;
    font-weight: inherit;
}
#header {
    border-left: 2px solid #33cc00;
    border-right: 2px solid #33cc00;
    border-bottom: 2px solid #33cc00;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    text-align: center;
    background-image: url(../images/banniere_fond/salon_beaute_chaville_viroflay_sevres_92_78.jpg);
    width: 1020px;
    height: 120px;
    background-color: white;
}
#defilant {
    border-left: 2px solid #33cc00;
    border-right: 2px solid #33cc00;
    padding: 10px;
    background: #ffff99 none repeat scroll 0% 50%;
    float: left;
    height: 5px;
    line-height: 5px;
    text-align: center;
    font-family: verdana;
    font-weight: bold;
    color: #009900;
    font-size: smaller;
    width: 1000px;
}
#content {
    border-left: 2px solid #990000;
    border-right: 2px solid #990000;
    margin: 0px;
    background-repeat: repeat;
    float: left;
    color: #990000;
    display: inline;
    font-size: small;
    font-family: verdana;
    background-position: center;
    padding-right: 0px;
    padding-top: 0px;
    background-image: url(../images/banniere_fond/fond_content.jpg);
    width: 860px;
    padding-bottom: 0px;
    height: 950px;
}
#Zone_direction {
    margin-left: 10px;
    text-align: left;
    margin-top: 10px;
    margin-right: 10px;
}
#Zone_Titre {
    margin-left: 10px;
    margin-right: 10px;
}
#Zone_corps {
    margin-right: 10px;
    overflow: auto;
    margin-left: 140px;
    height: 858px;
}
#rightcolumn {
    border-right: 2px solid #990000;
    margin: 0px 0px 5px 5px;
    float: left;
    background-color: #ffffff;
    width: 153px;
    height: 945px;
}
#footer {
    margin: 0px;
    padding: 10px;
    background: #990000 none repeat scroll 0% 50%;
    clear: left;
    color: #ffff66;
    font-family: verdana;
    font-size: medium;
    width: 1004px;
}
h1 {
    margin-top: 15px;
    margin-bottom: 15px;
    font-family: Verdana;
    text-align: right;
    font-size: large;
}
h2 {
    text-align: center;
    font-family: Verdana;
    padding-bottom: 0px;
    font-size: small;
}
h3 {
    margin: 15px 15px 5px;
    color: #990000;
    font-family: verdana;
    padding-bottom: 0px;
    font-size: small;
}
h4 {
    margin-right: 15px;
    margin-left: 15px;
    font-family: verdana;
}
h5 {
    margin-right: 15px;
    margin-left: 15px;
    font-family: verdana;
    font-size: x-small;
}
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;
}
A voir également:

16 réponses

Réponse 1 / 16
math 2000 Messages postés 2833 Statut Membre 405
 
le html 
<div class="mon-div">ton texte </div>


et le css 

.mon-div(
width: 100px;
)
0
Réponse 2 / 16
aqua92 Messages postés 35 Statut Membre
 
je te remercie. J'avais bien essayé cela mais il faut changer, à mon avis, d'autres coordonnées des autres div et c'est la que ça se complique
0
Réponse 3 / 16
math 2000 Messages postés 2833 Statut Membre 405
 
fais moi une capture d'écran avec l'endroit ou tu veux te div et ce que tu veux mettre dedans je le fais et je t'explique si je trouve
0
Réponse 4 / 16
aqua92 Messages postés 35 Statut Membre
 
Je te l'ai envoyé sur l'adresse gmail de ton profil.

Merci encore.
0

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

Posez votre question
Réponse 5 / 16
math 2000 Messages postés 2833 Statut Membre 405
 
j'ai rien trouvé à part la position absolute
<div
style="position: absolute; width: 185px; height: 548px; top: 556px; left: 36px;"
id="navcontainer">
<ul>
<li>ytuit-i-</li>
<li>ytuit-i</li>
</ul>
</div>
0
Réponse 6 / 16
aqua92 Messages postés 35 Statut Membre
 
Il se place correctement en mode normal sur Komposer mais quand je le mets en ligne, il sort du "wrapper" et se place à gauche du site.

Aurais tu une idée pour le recadrer dans le site ?

Merci encore
0
Réponse 7 / 16
math 2000 Messages postés 2833 Statut Membre 405
 
si tu augmentes le nombre de pb au left
0
Réponse 8 / 16
aqua92 Messages postés 35 Statut Membre
 
je ne comprends pas trop ce que tu veux me dire.
0
Réponse 9 / 16
math 2000 Messages postés 2833 Statut Membre 405
 
le nombre de pixel au left
à dimanche
0
Réponse 10 / 16
arthezius Messages postés 3756 Statut Membre 475
 
math ton code est très bien si ce n'est que mettre une valeur au left l'es moin. Le placement sera différent pour chaque résolution.
A la place met ça: 
left:50%;margin-left:- xpx;

Je sais pas combien il en faudra donc fait des tests mais ça sera mieux.
Pour tout expliquer, la méthode de math place ton cadre par rapport au côté gauche de l'écran. Suivant la résolution la marge à gauche n'est pas forcement toujours la même.
Moi je place par rapport au milieu et le décale vers la gauche d'autant que nécessaire.
0
Réponse 11 / 16
math 2000 Messages postés 2833 Statut Membre 405
 
oui je sais il vaut mieux utliser les pourcentage sinon psi on fait par rapport au coté droit ça regle le pb ?
0
Réponse 12 / 16
aqua92 Messages postés 35 Statut Membre
 
Bonjour,

désolé pour cette réponse tardive mais we oblige ...
je fais les essais mardi pour vous donner le résultat ..

Bon we
0
Réponse 13 / 16
arthezius Messages postés 3756 Statut Membre 475
 
math, côté droite ou gauche le problème reste le même. Le milieu reste le même pour tous quelques soit la résolution et a priori la largeur de la mise en page (bloc centrale) est fixe (sauf si largeur variable).
Donc si on pars de ce principe et si tel est le cas, c'est seulement avec la méthode que je propose, en partant du milieu et en décalant vers la gauche avec une valeur négative sur un margin-left que sera possible le placement. En tout cas c'est je pense ce qui est le plus simple.
0
Réponse 14 / 16
aqua92 Messages postés 35 Statut Membre
 
j'ai essayé de le mettre avant ou après le div Zone_corps ... tout se décale vers le bas ou il ne se place pas là ou il faut ...
0
Réponse 15 / 16
Dalida Messages postés 7114 Statut Contributeur 923
 
salut,

si j'ai bien suivi, il faut ajouter une colonne à gauche et lui mettre une marge en haut.

dans <div id="Zone_corps"> ajoute un <div> (en premier) de la largeur que tu veux, qui flotte à gauche et qui a une marge haute égale à la hauteur de la fleur.
et pour <div id="Zone_corps"> tu lui ajoutes un {padding} à gauche pour ne pas qu'il empiète sur la nouvelle colonne.
0
aqua92 Messages postés 35 Statut Membre
 
Je te remercie - c'est impeccable (en plus de ce que m'as dit de faire, il fallait aussi modifié le div zone corps)

Je profite pour te poser une nouvelle question suite à cet ajout :
Je souhaiterais le mettre sur quelques pages mais avec le CSS, ce sont toutes les pages qui vont le recevoir.
J'ai remarqué la chose suivante : quand il y a du texte dans de nouveau div, tout est parfait mais quand il est vide, le <div id="Zone_corps"> prend toute la largeur du div content.

Comment éviter cela ?
Je ne sais pas si tu en besoin mais je te mets le nouveau css : 

/* Generated by KaZcadeS */
* {
    margin: 0;
    padding: 0;
}
body {
    background-position: center;
    background-attachment: fixed;
    background-repeat: repeat;
}
#wrapper {
    margin: 0 auto;
    padding-top: 5px;
    background-color: white;
    color: #ffff99;
    width: 1025px;
    height: 1220px;
}
#titrefixe {
    border-left: 2px solid #33cc00;
    border-right: 2px solid #33cc00;
    padding-right: 10px;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 50%;
    text-align: center;
    height: 18px;
    font-size: smaller;
    font-family: verdana;
    color: #009900;
    width: 1010px;
    font-weight: inherit;
}
#header {
    border-left: 2px solid #33cc00;
    border-right: 2px solid #33cc00;
    border-bottom: 2px solid #33cc00;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    text-align: center;
    background-image: url(../images/banniere_fond/salon_beaute_chaville_viroflay_sevres_92_78.jpg);
    width: 1020px;
    height: 120px;
    background-color: white;
}
#defilant {
    border-left: 2px solid #33cc00;
    border-right: 2px solid #33cc00;
    padding: 10px;
    background: #ffff99 none repeat scroll 0% 50%;
    float: left;
    height: 5px;
    line-height: 5px;
    text-align: center;
    font-family: verdana;
    font-weight: bold;
    color: #009900;
    font-size: smaller;
    width: 1000px;
}
#content {
    border-left: 2px solid #990000;
    border-right: 2px solid #990000;
    margin: 0px;
    background-repeat: repeat;
    float: left;
    color: #990000;
    display: inline;
    font-size: small;
    font-family: verdana;
    background-position: center;
    padding-right: 0px;
    padding-top: 0px;
    background-image: url(../images/banniere_fond/fond_content.jpg);
    width: 860px;
    padding-bottom: 0px;
    height: 950px;
}
#Zone_direction {
    margin-left: 10px;
    text-align: left;
    margin-top: 10px;
    margin-right: 10px;
}
#Zone_Titre {
    margin-left: 10px;
    margin-right: 10px;
}
#Zone_corps {
    overflow: auto;
    height: 858px;
    margin-left: 5px;
    margin-right: 10px;
}
#col_gauche {
    float: left;
    margin-top: 200px;
    height: 400px;
    width: 150px;
}
#rightcolumn {
    border-right: 2px solid #990000;
    margin: 0px 0px 5px 5px;
    float: left;
    background-color: #ffffff;
    width: 153px;
    height: 945px;
}
#footer {
    margin: 0px;
    padding: 10px;
    background: #990000 none repeat scroll 0% 50%;
    clear: left;
    color: #ffff66;
    font-family: verdana;
    font-size: medium;
    width: 1004px;
}
h1 {
    margin-top: 15px;
    margin-bottom: 15px;
    font-family: Verdana;
    text-align: right;
    font-size: large;
}
h2 {
    text-align: center;
    font-family: Verdana;
    padding-bottom: 0px;
    font-size: small;
}
h3 {
    margin: 15px 15px 5px;
    color: #990000;
    font-family: verdana;
    padding-bottom: 0px;
    font-size: small;
}
h4 {
    margin-right: 15px;
    margin-left: 15px;
    font-family: verdana;
}
h5 {
    margin-right: 15px;
    margin-left: 15px;
    font-family: verdana;
    font-size: x-small;
}
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;
}
0
Dalida Messages postés 7114 Statut Contributeur 923 > aqua92 Messages postés 35 Statut Membre
 
salut,

Je souhaiterais le mettre sur quelques pages mais avec le CSS, ce sont toutes les pages qui vont le recevoir.
le plus simple serait de changer l'identifiant sur les pages qui doivent avoir la colonne.
peut être en doublant l'identifiant d'une classe, je ne sais pas si ça fonctionne.
ou alors en embarquant le style dans le balise pour les pages concernées.

J'ai remarqué la chose suivante : quand il y a du texte dans de nouveau div, tout est parfait mais quand il est vide, le <div id="Zone_corps"> prend toute la largeur du div content.
Comment éviter cela ?
as-tu essayé de lui appliquer {height} ou {min-height} ?
0
Réponse 16 / 16
aqua92 Messages postés 35 Statut Membre
 
J'ai oublié ... merci math 2000 et Arthezius .... ça m'a permis d'avancer et de découvrir de nouvelles chosses.

Cdl

Luc
0

Discussions similaires

'Votre colis est dans le site de livraison qui dessert votre adresse' que faire
relakztek82 -
Unemeuf -

25 réponses