Forum : Foundation 6

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

Grafikart

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

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

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;
}

lucasbenard

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

Benjamin Derepas

Ou y'a la méthode flexbox