28172 sujets

CSS et mise en forme, CSS3

[Résolu] Box et knacss (débutant)

Bonjour,
débutant en html/css, j'ai une petite question concernant les boîtes en général, avec knacss en particulier.
Par exemple :
<!doctype html>
<head>
    <meta charset="UTF-8">
    <title>Le nom du site - Accueil</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/knacss.css" media="all">
</head>
<body>
    <header id="header" role="banner" class="line">
        <div class="h1-like txtcenter">Le nom du site</div>
    </header>
    <nav id="navigation" role="navigation" class="autogrid3">
        <div><a href="#">Page 1</a></div>
        <div><a href="#">Page 2</a></div>
        <div><a href="#">Page 3</a></div>
    </nav>
    <div id="main" role="main" class="line">
        <p>Voici du texte.</p>
    </div>
</body>

Ma question : lorsque je visionne la page avec l'inspecteur de Firefox par exemple, l'élément #navigation :
a une hauteur de 42 px
a une font-size de 14 px
les liens sont positionnés sur la limite supérieure de la boîte
il y a comme une ligne vide entre les liens et la limite inférieure de la boîte
le texte de #main apparaît donc après un espace 'vide' que je souhaiterais réduire

J'ai essayé les options 'pa0' et 'ma0' de knacss mais sans résultats probants.
Avez vous des pistes à me suggérer ?
Merci.
upload/54618-capt01.png
Bonjour, et merci de ton aide (et merci pour knacss aussi).
En consultant le codepen, j'ai constaté que je n'obtenais pas le même rendu avec Firefox qu'avec Safari (sous Safari, l'espace que je mentionnais n'est pas présent).
Première idée : vider le cache de Firefox -> le rendu devient identique à celui de Safari. Le rouge de la honte recouvre mon visage Smiley cligne
Mais : lorsque je consulte mes pages locales, avec même code source (enfin, presque ...), le problème est toujours là. La différence :
J'avais téléchargé knacss.css en local et l'incluait dans la page html avec 
<link rel="stylesheet" href="css/knacss.css" media="all">

tandis que l'exemple codepen importe avec
@import url(http://knacss.com/css/knacss.css);

Hum ...
Bilan : la version de knacss que j'avais téléchargé en local n'est pas identique à celle chargée en ligne via le @import.
Je suis donc retourné sur http://knacss.com/builder/ et ai téléchargé une version Classic en cochant tous les modules, et désormais j'ai un résultat cohérent.
Est-ce que cette version Classic est identique à celle fournie lors d'un import depuis http://knacss.com/css/knacss.css ?
(Sujet marqué comme résolu.)
En fait, je viens de sortir une mise à jour majeure de KNACSS hier, à peu près au moment de ton message. Il y a certainement un rapport avec ton problème
ah peut-être ...
Mais l'adresse 
http://knacss.com/css/knacss.css
est-elle dimensionnée pour distribuer knacss aux milliards de visteurs potentiels de mon (futur) site ?
numa a écrit :
ah peut-être ...
Mais l'adresse _http://knacss.com/css/knacss.css est-elle dimensionnée pour distribuer knacss aux milliards de visteurs potentiels de mon (futur) site ?

Bonjour,

Je ne pense pas que cela soit fait pour cela...
Si l'idée est d'obtenir la toute dernière mouture de ton framework préféré, bower pour ne citer que lui, devrait pouvoir t'aider.

Ceci étant dit, le rythme des modifications permet de voir venir, et il vaut certainement mieux étudier les incidences que ces modifications peuvent avoir sur tes pages que de mettre à jour aveuglément et s'étonner après coup des différences, d'autant plus si tu utilises une version personnalisée, répondant à des besoins particuliers, tu n'as sans doute pas besoin de toutes les fonctionnalités proposées par Knacss, si ? Smiley cligne
Administrateur
numa a écrit :

Mais l'adresse 
http://knacss.com/css/knacss.css
est-elle dimensionnée pour distribuer knacss aux milliards de visteurs potentiels de mon (futur) site ?

Non, il ne faut surtout pas faire ainsi.

Il y a deux moyens de télécharger KNACSS, ils sont détaillés dans le Tutoriel : http://knacss.com/demos/tutoriel.html#install
Sujet clos
Aller à