inline e inline-block e propriedades de css para tag

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

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

09/02/2017

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

09/02/2017

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:

Primeiro limite o tamanho do seu header, algo como:header { width: 600px; }
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;
 }
```
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;
 }
```
Retirar as bolinhas da lista: nav ul { list-style: none }

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