28172 sujets

CSS et mise en forme, CSS3

[KNACSS] Quelques questions de mise en page

Bonjour,

Je n'ai pas réussi à faire la mise en page suivante avec KNACSS :
- un menu positionné complètement à gauche de l'écran
- un container englobant le contenu centré verticalement et horizontalement dans la page
- une gouttière extensible entre ces deux blocs de façon à ce qu'elle soit suffisamment large pour que le container soit centré dans une résolution d'écran importante (1920 x 1080) mais aussi suffisamment réduite pour que le container soit visible dans un format plus classique (1280 x 720, donc pour une grille de 960px en gros).

Je pourrais bidouiller en créant une troisième colonne vide qui jouerait ce rôle d'accordéon entre le menu et le container mais je ne suis pas sûr que ce soit une bonne pratique. Et que ça marche réellement en plus !

Le code suivant, si cela peut aider (la classe w1140p correspond à "width: 1140 px") :
<body class="w1140p">
        
        <div class="header-container line mod">
        <header>
             <h1 class="h1-like">
                <a href="http://www.example.com">Le titre du site</a>
            </h1>
        </header>
        </div>

        <div class="line gut">
               <div id="sidebar" class="mod left w300p">
                        <nav id="navigation">
                            <label for="toggle-menu" data-icon="&#8801;" title="menu" role="navigation"                 onclick=""></label>
                            <input type="checkbox" id="toggle-menu">
                            <ul>
                                <li><a href="#">Accueil</a></li>
                                <li><a href="#">Galerie</a></li>
                                <li><a href="#">Expositions</a></li>
                                <li><a href="#">Parcours artistique</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </nav>
                </div>
                 
                <div class="mod item main-container">
                    
                 <aside class="mod right w30">
                        <h3>aside</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
                </aside>

                    <article class="mod item">
                        <header>
                            <h1 class="h2-like">article header h1</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
                        </header>
                        <section>
                            <h2>article section h2</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
                        </section>
                        <section>
                            <h2>article section h2</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
                        </section>
                        <footer>
                            <h3>article footer h3</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p>
                        </footer>
                    </article>
                </div>
               
        </div>    
        <div class="footer-container line mod">
            <footer class="wrapper">
                <h3>footer</h3>
            </footer>
        </div>

    </body>
Ci-après une illustration de mon propos : upload/42683-Capture1.PNG et upload/42683-Capture2.PNG
Modifié par Interned (20 Sep 2012 - 12:39)
Administrateur
Hello,

Je ne suis pas sûr que ce soit exactement ce que tu souhaites, mais voici un exemple vite-fait :


<body>
	<div class="row gut">
		<aside class="col w150p one">
			<div>
				<p>aside</p>
				<p>aside</p>
				<p>aside</p>
				<p>aside</p>
				<p>aside</p>
				<p>aside</p>
				<p>aside</p>
				<p>aside</p>
			</div>
		</aside>
		<div class="col"></div>
		<aside class="col w70 two">
			<div>
				<p>Lorem Elsass ipsum réchime amet non Choucroute knack  tchao bissame hopla. Wotch a kofee avec ton BibalaekaesSalat et ta wurscht ?</p>
				<p>Yeuh non che suis au réchime, je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. Tiens, un Picon sur le comptoir.</p>
			</div>
		</aside>
	</div>
</body>
Salut,

Merci bien pour ta réponse, Raphaël, c'est effectivement la structure à laquelle j'avais pensé au départ ; elle fonctionne donc. Mais je m'étais dit que l'insertion d'une div vide comme ça relevait plus de la bidouille qu'autre chose, et qu'il y avait peut-être une solution plus pro et plus respectueuse des standards.
Modifié par Interned (11 Sep 2012 - 23:51)
Administrateur
Quand les contraintes de départ sont alambiquées, la solution l'est souvent aussi Smiley cligne
Disons qu'il s'agit plus un test, d'une expérience que d'une contrainte de départ en fait. C'était donc plutôt juste pour savoir comment ça pouvait se passer Smiley langue .

Merci encore en tous cas Smiley smile
Modifié par Interned (12 Sep 2012 - 15:13)
Je reprends mon fil de discussion parce qu'en fait d'autres questions me viennent.

Je souhaiterais aboutir à ce type d'affichage :
<body class="w960p center">
<div id="page" class="row gut">
   <div id="sidebar" class="col w200p"></div>
   <div id="primary" class="col">
           <div id="content" class=?></div>
           <div id="secondary" class=?></div>
   </div>
   <div id="footer" class=?></div>
</div>
</body>
Et cette image pour illustrer la structure (désolé, ça a un peu cafouillé entre l'image et la structure) upload/42683-Capture.PNG .
Si je peux mettre des gouttières entre la sidebar et la #main, je n'arrive pas à en obtenir pour #content et #secondary, l'imbrication des éléments semble empêcher de les afficher ?
Modifié par Interned (20 Sep 2012 - 12:44)
Sujet clos
Aller à