Bonjour,
En attendant mes petits bouquins, j'ai commencé à essayer de travailler avec KNACSS et je suis rapidement devant quelques soucis.
La disposition que j'aimerais avoir est la suivante:
- Une mise en page sur 960px de largeur => OK
- Un header => OK
- Un banner sous le header => OK
- Un conteneur qui contient les deux items ci-dessous => OK
- Un item qui est le "content" du site et est à gauche => OK
- Un item qui est la navigation du site et se place à droite du "content" => Pas OK
- Un gut qui sépare ces deux items => Pas OK
- Un footer => OK
C'est donc au niveau du menu que j'ai un soucis et plus précisément quand j'essaye de lui mettre un gut.
J'ai bien parcouru le site de KNACSS et essayé de reproduire l'exemple avec les gut mais sans succès du fait du menu à droite et non à gauche.
Voici le code:
J'ai bien compris que le soucis vient du fait que je ne positionne pas le "content" en flottant à gauche et que du coup mon menu vient se glisser en-dessous... Enfin, il me semble que c'est cela.
Si je mets le flottant à gauche sur le "content", il n'occupe plus toute la place libre.
Un autre soucis me chagrine concernant la hauteur de certains éléments. Par exemple, j'aimerais que le header fasse 50px de hauteur et le footer 25px de hauteur. Mais quand j'applique cela en CSS, ca dépasse niveau texte.
Ce sont sûrement deux questions cons, mais j'ai beau chercher depuis près d'une heure, avec force google, je ne trouve pas...
Merci par avance pour votre aide!
Modifié par Deumus (27 Nov 2012 - 01:08)
En attendant mes petits bouquins, j'ai commencé à essayer de travailler avec KNACSS et je suis rapidement devant quelques soucis.
La disposition que j'aimerais avoir est la suivante:
- Une mise en page sur 960px de largeur => OK
- Un header => OK
- Un banner sous le header => OK
- Un conteneur qui contient les deux items ci-dessous => OK
- Un item qui est le "content" du site et est à gauche => OK
- Un item qui est la navigation du site et se place à droite du "content" => Pas OK
- Un gut qui sépare ces deux items => Pas OK
- Un footer => OK
C'est donc au niveau du menu que j'ai un soucis et plus précisément quand j'essaye de lui mettre un gut.
J'ai bien parcouru le site de KNACSS et essayé de reproduire l'exemple avec les gut mais sans succès du fait du menu à droite et non à gauche.
Voici le code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Testons</title>
<link rel="stylesheet" href="./css/knacss.css" media="all">
<link rel="stylesheet" href="./css/default.css" media="all">
</head>
<body class="mw960p center">
<header class="line mod">
<p>Header</p>
</header>
<div class="line">
<p>Banner</p>
</div>
<div class="line gut">
<asideclass="mod content">
<p>Content</p>
</aside>
<nav class="mod left w20">
<p>Menu</p>
</aside>
</div>
<footer class="line mod">
<p>Footer</p>
</footer>
</body>
</html>
J'ai bien compris que le soucis vient du fait que je ne positionne pas le "content" en flottant à gauche et que du coup mon menu vient se glisser en-dessous... Enfin, il me semble que c'est cela.
Si je mets le flottant à gauche sur le "content", il n'occupe plus toute la place libre.
Un autre soucis me chagrine concernant la hauteur de certains éléments. Par exemple, j'aimerais que le header fasse 50px de hauteur et le footer 25px de hauteur. Mais quand j'applique cela en CSS, ca dépasse niveau texte.
Ce sont sûrement deux questions cons, mais j'ai beau chercher depuis près d'une heure, avec force google, je ne trouve pas...
Merci par avance pour votre aide!
Modifié par Deumus (27 Nov 2012 - 01:08)