18041 sujets

Questions générales et questions de débutants

[résolu] Colonnes fluides et padding

Bonjour,

Je suis débutant en développement web, et donc je nourris mes maigres connaissances des tutoriels présents sur le web, et notamment ceux d'alsacréations.

Mon problème s'est posé lorsque j'ai essayé de reproduire l'exemple présent dans ce tutoriel:

http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#offres

Fait 1 : Je réalise les modifications de base en CSS fournies dans le tuto --> exactement ce que le tuto montre, le côté cosmétique en moins.

Problème 1 : Je cherche à aérer un peu plus l'ensemble, et donc je rajoute un padding:10px --> problème, les div semblent augmenter leur largeur au lieu de réduire la taille prise par le texte d'où un chevauchement. (cf annexe 1)

Fait 2 : Pour m'amuser à combiner les deux techniques, j'ai intégré la technique que je viens d'évoquer à la mise en forme suivante: http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#cols. J'ai légèrement modifié la structure en remplaçant les div de la sidebar et du contenu par ul et ol et je n'ai mis que trois colonnes au lieu des quatre du tutoriel initial.

Problème 2 : Non seulement le chevauchement dû au padding apparait à nouveau, mais la colonne du milieu, fixée en absolute, et placée grâce à left:33%, chevauche le footer! Alors que la première colonne, aussi en absolute et avec la même height:100% ne le fait pas. (cf annexe 2)


Annexe 1 : code CSS du tutoriel avec rajout d'un padding:10px

<style type="text/css">
* {padding:0; margin:0;} 
ol {position:relative; margin:0 10%; list-style:none;} 
ul {list-style:inside;} 
h1 {text-align:center;} 
#decouverte,#start,#services {position:absolute; width:25%; height:100%; padding:10px} 
#start {right:50%;} 
#services {left:50%;} 
#power {margin-left:75%;}
</style>


lien vers le tutoriel: http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#offres



Annexe 2 : code combinant les deux exemples du tutoriel

<style type="text/css">
*{margin:0; padding:0}

#conteneur{margin: 0 20%; position:relative}
#header{background:yellow; height:30px}
#sidebar{width:20%; position:absolute; background:green;list-style-position:inside}
#sidebar li {margin:30px 5%;}
#footer{background:pink; height:30px}

#colonnes{list-style:none;margin-left:20%; background:lightblue; position:relative;}
.liste1, .liste2, .liste3{text-align:justify; padding:10px;}
.liste1, .liste2{position:absolute; width:33%; height:100%;}
.liste2{left:33%; background:darkred;}
.liste3{margin-left:66%; background:purple;}
</style>



<body>
<div id="conteneur">
    
    <div id="header">&nbsp;</div>
    
        <ul id="sidebar">
             <li>Le commencement
             <li>Le milieu
             <li>la fin
        </ul>
    
    <ol id="colonnes">
        <li class="liste1">
                <h1>Sed nibh dui</h1>
                <p>sodales iendrerit ut eget eros. </p>
                <p>Suspendisse potenti. ec a nisl justo.</p>
        </li>
        <li class="liste2">
                <h1>Aliquam volutpat</h1>
                <p>turpis ac orces. In sem lectus, tincidunt sed dignissim </p>
                <p>eget, egestas sed lorem. Aenean sed nibh sem, vitae auctor enim. Maecenas interdum ligula vitae sapien ornare facilisis. Aenean interdum vehicula pretium.</p> 
        </li>
        <li class="liste3">
                <h1>Lorem ipsum dolor</h1>
                <p> sit amet, consectetur adipiscing elit. Aenean a tortor arcu. Mauris sagittis, dolor vitae volutpat ullamcorper, nibh risus suscipit purus, vel faucibus lorem lacus eu libero. Nulla eros eros, porta posuere sodales nec, mattis in orci. Sed nibh                     dui, sodales in euismod id, auctor sed nisi. Aliquam quis arcu massa. Suspendisse ultrices gravida lorem sed auctor. Nam purus elit, auctor ac pharetra sed, malesuada ut leo. Nulla ante libero, scelerisque sit amet porta sed, vestibulum at                         ipsum. Maecenas dictum justo sed ipsum adipiscing hendrerit ut eget eros. Suspendisse potenti. Sed sed purus nec puru</p>
        </li>
    </ol>
    
    <div id=footer>&nbsp;</div>

</div>
</body>


lien vers les tutoriels utilisés:
http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#cols
http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#offres

Merci d'avance pour votre aide. En espérant que ce ne soit pas juste une erreur de syntaxe!
Modifié par Arkos971 (28 Feb 2011 - 15:16)
a écrit :
Problème 1 : Je cherche à aérer un peu plus l'ensemble, et donc je rajoute un padding:10px --> problème, les div semblent augmenter leur largeur au lieu de réduire la taille prise par le texte d'où un chevauchement. (cf annexe 1)


C'est le fonctionnement normal du modèle de boîte en CSS2.x (sauf sous IE6 bien entendu). La largeur d'un bloc est égale a width + padding + border. Tu devrais chercher un tutoriel sur le sujet.

Pense que tu peux aussi rajouter des marges sur les éléments contenus dans ton bloc pour créer une aération.
Modifié par jb_gfx (23 Feb 2011 - 18:29)
jb_gfx a écrit :


C'est le fonctionnement normal du modèle de boîte en CSS2.x (sauf sous IE6 bien entendu). La largeur d'un bloc est égale a width + padding + border. Tu devrais chercher un tutoriel sur le sujet.

Pense que tu peux aussi rajouter des marges sur les éléments contenus dans ton bloc pour créer une aération.


Merci de ta réponse, j'ai lu un peu sur le fonctionnement du modèle boîte et je comprends maintenant le chevauchement, vu que mes boîtes étaient hors du flux.

Donc la solution la plus évidente serait de rajouter une div à l'intérieur de ces boite et de donner un padding à ces div pour éviter le chevauchement. Mais est-ce la solution la plus "propre"? Car le tutoriel mentionné ne faisait mention que de "détails cosmétiques" pour arriver au résultat montré en images. Or là j'ai rajouté des éléments dans le html.

Par ailleurs je n'ai toujours pas compris pourquoi le width=100% provoque un chevauchement de la colonne du milieu mais pas de la première colonne. Une idée?

Merci d'avance.
jb_gfx a écrit :
C'est le fonctionnement normal du modèle de boîte en CSS2.x (sauf sous IE6 bien entendu).

Non, y compris sous IE6.
IE6 implémente le modèle de boite CSS. C'est IE 5.0/5.5 qui ne l'implémentait pas.
Arkos971 a écrit :
Donc la solution la plus évidente serait de rajouter une div à l'intérieur de ces boite et de donner un padding à ces div pour éviter le chevauchement. Mais est-ce la solution la plus "propre"?

C'est une solution correcte.
Tu peux changer de modèle de boite en utilisant la propriété CSS3 box-sizing:
http://developer.mozilla.org/en/CSS/box-sizing
Par contre, ce n'est pas compatible IE7.

Tu peux aussi appliquer des marges ou du padding aux enfants directs de tes conteneurs:
.column > * {
  padding-left: 10px;
  padding-right: 10px;
}
mais pour un contenu important ou changeant ça peut être difficile comme solution.

Enfin, si tu travailles sur un site qui a une largeur fixe en pixels, rien ne t'interdit d'appliquer une largeur en pixels qui tombe juste. Si tu veux un élément dont la largeur totale est 200px, tu peux avoir width: 180px; padding: 0 10px; par exemple.
Sujet clos
Aller à