Foundation 6

Par DiabolicaTrix, il y a 10 ans


Les bases HTML/CSS

J'essaie de faire un petit design grafikart be like pour me pratiquer. Pour le faire, j'utilise Foundation 6 sur Linux avec Apache2. Je réussi à créer la top-bar et de changer la couleur grâce à scss. Donc mon code ressemble à ça:

<div class="top-bar"> <div class="top-bar-title"> <div class="logo"></div> </div> <div class="top-bar-left"> <ul class="stupid-menu menu"> <li>Test</li> </ul> </div> </div>

et mon css:

@charset 'utf-8'; @import 'settings'; @import 'foundation'; @import 'motion-ui'; @include foundation-global-styles; @include foundation-grid; @include foundation-typography; @include foundation-button; @include foundation-label; @include foundation-menu; @include foundation-title-bar; @include foundation-top-bar; .color-menu-text { @include menu-text; color: #6d7a8b; } .logo { background-color: #3ca94a; position: relative; height: 60px; width: 80px; overflow: hidden; } .stupid-menu { vertical-align: middle; }

Le problème étant que le résultat ressemble à ça:

Malgré mon vertical-align: middle et mes nombreux tests.

PS: Je suis vraiment mauvais avec CSS/HTML.

5 réponses

lucasbenard, il y a 10 ans

Personnellement, je n'aime pas utiliser le vertical-align. Je préfère faire ainsi:

top: 50px; margin-top: -25px;

Ce n'est bien sûr pas le code complet, mais l'idée est là, placer les élements "à la main", plutôt que de faire confiance à une propriété un peu foireuse.

Defy, il y a 10 ans

moi le préfère jouer avec le line-height comme ceci:

.logo { background-color: #3ca94a; position: relative; height: 60px; width: 80px; overflow: hidden; } .stupid-menu { line-height: 60px; }
Grafikart, il y a 10 ans

Il te manque un lien

<div class="top-bar"> <div class="top-bar-title"> <div class="logo"></div> </div> <div class="top-bar-left"> <ul class="stupid-menu menu"> <li><a href="#">Test</a></li> </ul> </div> </div>
lucasbenard, il y a 10 ans

@Defy: Aussi oui, c'est une autre méthode parfaitement valable.

Benjamin Derepas, il y a 10 ans

Ou y'a la méthode flexbox