Bonjour, ayant pas mal écumé les forums un peu partout, je me retrouve trop souvent dans l'incapacité de jongler librement avec les propriétés display et position.
Du coup même si j ai bien lu le tutoriel initiation au positionnement CSS (partie 2) et que je comprends plutôt bien comment fonctionne l'elaboration du modele de type header+2colonnes+footer proposé dans ce tutoriel, mes questions sont en fait plutôt du type "pourquoi est ce que ma tentative de modele ne fonctionne pas".
Je vous propose mon modele, tout d'abord le code html, je ne suis pas sur qu'on puisse faire plus simple :
Maintenant, le fichier mystyle.css commenté pour tenter d'expliquer ce que j'ai compris du modele de formatage visuel tel qu'expliqué dans les chapitres 9 et 10 du draft CSS2.2.
Peut-être qu'il est évident pour vous que ceci ne marche pas par contre pour moi et avec ma lecture et comprehension partielle du draft mentionné plus haut, je ne vois pas où est le problème, dans les faits la boite de l'élement #aside s'affiche bêtement en dessous de celle de l'élément #main.
En fait, en bidouillant un peu avec les outils de développements de chrome (pour l'instant je m'y cantonne, je chercherai (peut-être à tort) à jongler avec les navigateur quand j'aurai parfaitement digéré tout ça) je m'apercois qu'un satané petit espace que je ne maitrise pas semble s'insérer entre les boites générées par #main et #aside.
De plus, il suffit que je fasse en sorte que
#main.width + #aside.margin-left + #aside.width = body.width - satanéelargeur
avec 0 < satanéelargeur < 0.25em (encadrement approximatif)
pour que l'élément #aside s'affiche bien comme une deuxième colonne à droite de #main et espacé de #aside.margin-left + satanéelargeur !
Si visuellement je pourrais me contenter de cela, ce n'est pas tant l'aspect visuel qui me gène mais le fait que je sois comme une poule devant un couteau.
Merci de votre lecture et éventuelle aide à tous.
Modifié par BaygonV (16 Aug 2015 - 16:12)
Du coup même si j ai bien lu le tutoriel initiation au positionnement CSS (partie 2) et que je comprends plutôt bien comment fonctionne l'elaboration du modele de type header+2colonnes+footer proposé dans ce tutoriel, mes questions sont en fait plutôt du type "pourquoi est ce que ma tentative de modele ne fonctionne pas".
Je vous propose mon modele, tout d'abord le code html, je ne suis pas sur qu'on puisse faire plus simple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="styles/mystyle.css" type="text/css" rel="stylesheet"/>
<title>Titre</title>
</head>
<body>
<header>
Lorem1
</header>
<div id="main">
Lorem2
</div>
<div id="aside">
Lorem3
</div>
<footer>
Lorem 4
</footer>
</body>
</html>Maintenant, le fichier mystyle.css commenté pour tenter d'expliquer ce que j'ai compris du modele de formatage visuel tel qu'expliqué dans les chapitres 9 et 10 du draft CSS2.2.
body{
width:70em;
margin-left:auto;
margin-right:auto;
margin-top:0;
}
/* Tous les positionnements sont en static (inchangés) donc la zone de contenu de la boite générée par body sera le bloc-contenant de toutes les boites générées par ses éléments enfants :
header : boite de niveau bloc par défaut et que je ne style pas plus pour la question qui m'occupe.
deux boites : #main et #aside de type inline-block
Je dimensionne ces boites de manière à ce que
#main.width + #aside.margin-left + #aside.width = body.width
et enfin j'attribue à la propriété vertical-align la valeur top pour que la boite générée par cet élément soit alignée "par le haut".
Dans ces conditions je m'attends à ce que les deux boîtes générées par #main et #aside soient englobée dans une boîte de niveau bloc anonyme qui soit pile de la largeur de body.
Enfin je ne style pas plus l element footer */
#main {
width:40em;
display:inline-block;
}
#aside {
width:27em;
margin-left:3em ;
display:inline-block;
vertical-align:top;
}
Peut-être qu'il est évident pour vous que ceci ne marche pas par contre pour moi et avec ma lecture et comprehension partielle du draft mentionné plus haut, je ne vois pas où est le problème, dans les faits la boite de l'élement #aside s'affiche bêtement en dessous de celle de l'élément #main.
En fait, en bidouillant un peu avec les outils de développements de chrome (pour l'instant je m'y cantonne, je chercherai (peut-être à tort) à jongler avec les navigateur quand j'aurai parfaitement digéré tout ça) je m'apercois qu'un satané petit espace que je ne maitrise pas semble s'insérer entre les boites générées par #main et #aside.
De plus, il suffit que je fasse en sorte que
#main.width + #aside.margin-left + #aside.width = body.width - satanéelargeur
avec 0 < satanéelargeur < 0.25em (encadrement approximatif)
pour que l'élément #aside s'affiche bien comme une deuxième colonne à droite de #main et espacé de #aside.margin-left + satanéelargeur !
Si visuellement je pourrais me contenter de cela, ce n'est pas tant l'aspect visuel qui me gène mais le fait que je sois comme une poule devant un couteau.
Merci de votre lecture et éventuelle aide à tous.
Modifié par BaygonV (16 Aug 2015 - 16:12)