Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fabiosmendes

display: table-cell e border

Por , em Desenvolvimento frontend

Recommended Posts

fabiosmendes    0

fabiosmendes
Postado

Galera, sou meio iniciante em css mas tô tentando aprender baixando uns layouts e tentando desenvolver.

 

Acontece que, estava desenvolvendo um menu superior, consegui fazer tudo alinhado utilizando display: flex, porém queria tentar fazer com table-cell. um dos elementos no menu tinha border e acabou que ela ficou ocupando toda altura no menu, como posso arrumar isto?

 

abaixo está meu css, aceito dicas para melhorar, e um print de como está o botão: http://prntscr.com/9jew3d

.top-header {
    display: table;
    background-color: black;
    height: 100px;
    width: 100%;
}

.logotipo {
    display: table-cell;
    padding: 40px;
}

nav, ul {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

li {
    display: inline;
}

nav ul li a {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 0 10px;
}

.btn-signup {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    color: #42b8dd;
    border: 1px solid #42b8dd;
    border-radius: 5px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

fabiosmendes    0

fabiosmendes
Postado 
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>IDDO</title>
    <link rel="stylesheet" href="css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="fonts.css">
</head>
<body>
    <header class="top-header">
        <img class="logotipo" src="images/logotipo.png" title="IDDO" alt="Logotipo IDDO">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <a href="#" class="btn-signup">Sign up</a>
    </header>
</body>
</html>

o btn-signup ocupa toda a altura do bloco e tal, fica meio grande, não sei como diminuir, gostaria que ficasse semelhante a isto: http://prntscr.com/9k3di1

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito