Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

inline e inline-block e propriedades de css para tag "a"

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web

por Flávio José dos Passos
| 61.8k xp | 57 posts

Como deixar a imagem desse link http://prntscr.com/e6gqy1

como a imagem desse link, exatamente com a mesma apareceria, posicionamento, sublinhado, altura, etc http://prntscr.com/e6grvs

<header>
    <img src="logo.png" alt="Minha empresa">
    <nav>
        <ul>
            <li><a href="/sobre">Sobre</a></li>
            <li><a href="/produtos">Produtos</a></li>
            <li><a href="/consultoria">Consultoria</a></li>
            <li><a href="/contato">Contato</a></li>
        </ul>
    </nav>
</header>
2 respostas
por Fabiano A. de B. Farah
| 171.5k xp | 41 posts
Desenvolvedor Web Pleno

Flávio,

Existem várias maneiras de você fazer esse tipo de formatação de seu html usando css, eu vou postar uma que fiz para você ter uma idéia e quem sabe lhe ajudar a desenvolver o que você gostaria.

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style>
    ul {
      padding: 0;
      margin: 0;
    }

    .sub-nav ul {
      padding-left: 7em;
    }

    .container-nav {
      display: flex;
      align-items: center;
      font-family: Verdana, Geneva, Tahoma, sans-serif, monospace;
      font-style: inherit;
      background-color: #efefef;
      margin: 0 25%;
      padding: 0;
    }

    .sub-nav {
      display: inline-block;
    }

    .sub-nav li {
      list-style: none;
      text-align: center;
    }

    .sub-nav li {
      margin-bottom: .8em;
    }

    .sub-nav a:link {
      color: #626262;
      font-weight: 600;
    }
  </style>
</head>

<body>
  <header>
    <nav>
      <div class="container-nav">
        <div class="sub-nav">
          <img src="minhaempresa.png" alt="Minha empresa">
        </div>
        <div class="sub-nav">
          <ul>
            <li><a href="/sobre">Sobre</a></li>
            <li><a href="/produto">Produto</a></li>
            <li><a href="/consultoria">Consultoria</a></li>
            <li><a href="/contato">Contato</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
</body>

</html>

Att. Fabiano Farah

solução!
por Vanessa Me Tonini
| 112.1k xp | 168 posts
Software Engineer Leader

Olá Flávio,

Como o Fabiano disse, existem várias maneiras de fazer a mesma coisa com CSS.

Para resolver você pode quebrar em passo como:

  1. Primeiro limite o tamanho do seu header, algo como:header { width: 600px; }

  2. Depois vc deve alinhar o nav ao lado direito da imagem e defina as dimensões igual as da logo, por exemplo: 

     nav  { 
     float: right; 
     height: 150px;
     width: 300px;
 }

  3. Adicione mais propriedades para colocar o fundo azul, e alinhar o texto ao centro, trocar a font-family : 

     nav  {  
     background:  rgb(238,239,254);  
     text-align: center;
     font-family: Arial;
 }

  4. Retirar as bolinhas da lista: nav ul { list-style: none }

  5. Cor e espaçamento nos links: 

     nav a  {
     display: block;
     color: silver;
     padding: 5px;
 }

Extra:

pra tudo ficar certinho adicione na primeira linha do seu css um reset bem simples:

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

Veja como ficou aqui: http://codepen.io/vanessametonini/pen/ggBKYe

abraços