1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Posicionamento com CSS3

Bom galera, estou montando um site para um cliente (1.º deles aliás), então estou tentando montar algo que fique visualmente legal.

No primeiro momento, pensei em colocar como cabeçalho uma imagem que fique lá estática, mesmo quando a tela seja rolada para baixo, abaixo pensei em colocar um menu, com home, contato, etc, e abaixo algumas informações sobre os serviços prestados.

Estou com dificuldades no posicionamento dos elementos, se alguém puder ajudar, ficarei grato

Página home

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

    <head>
        <!--título da página-->
        <title>Ayusso Entretenimento</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--pegando o estilo css-->
        <link rel="stylesheet" type="text/css" href="css/estilo.css">
    </head>

    <body>

        <figure class="imagemFixa"> <!--Esta imagem deve ocupar todo o cabeçalho e ficar fixa, mesmo quando a página é rolada para baixo-->
            <img src="imagens/Teste.jpg"/>
        </figure>

        <!--iniciando o corpo-->
        <div id="interface">
            <!--iniciando cabeçalho-->
            <header class="cabecalho">
                <nav>
                    <ul>
                        <img src="imagens/teste 2.jpg"/>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="trabalhos.html">Nossos trabalhos</a></li>
                        <li><a href="orcamento.html">Solicite um orçamento</a></li>
                    </ul>
                </nav>
                <!--fim da lista de menu-->
            </header>



        </div>
    </body>
</html>

CSS

@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
}

/*
1º informar a tag pai
2º informar a classe
3º informar a tag filho
4º formatações
*/

/* Formatação do cabeçalho */

header.cabecalho li{
    display: inline;
    padding: 10px;
    position: relative;
    top: -40px;
    font-family: verdana;
    left: 700px;
    text-transform: uppercase;
}

header.cabecalho ul{
    position: relative;
    width: 100%;
    height: 97px;
    list-style: none;
    padding: 0;
    margin: 0;
    border: solid #dad6d6;
}

header.cabecalho a{
    text-decoration: none;
}

figure.imagemFixa img{
    position: fixed;
}
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags html5 css3 ou faça a sua própria pergunta.