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

No Html/Css Como faco para que uma div não tenha sua dimensão ou posição altera por outra div em outro z-index?

Pessoal no exemplo a seguir, quero deixar a div "contornoDeFundo" atrás de todos os outros itens da pagina, tornando-o uma especie de background que faz um contorno. Porém deixei que sua dimensão horizontal fosse determinada apenas pelos limites da pagina menos as margens. Só que ta parando antes dos outros elementos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <title>Titulo</title>
    <style type ="text/css">

    #cabecalho{
        position: relative;
        z-index:2;
        height:60px;
        border: thin blue inset;
        clear:both;
        background-color:#00FFFF;
        padding:20px 50px 50px 20px;
        margin: 60px 90px 90px 30px;
        border-radius:30px;
    }
    #cabecalho h1{
        z-index:2;
        text-align:center;

    }

    #contornoDeFundo{
        position:absolute;
        z-index:1;
        margin:90px 30px 30px 0px;
        height: 1200px;
        border: 3px double green;
        border-radius:30px;
    }

    #menu{
    position: relative;
        z-index:2;
        height: 30px;
        margin: 0px 30px 0px 0px; 
        clear:both;
    }
    #menu li {
        z-index:2;
        border-bottom: outset 3px #cccccc;
        border-left:outset 3px #cccccc;
        background-color: #cccccc;
        list-style-type:none;
        display: inline;
        border-top-right-radius:30px;
    }

    #conteudo{
        position: relative;
        z-index:2;
        height:300px;
        width:70%;
        border: 3px #cccccc inset;
        float:left;
        clear:right;
        padding: 20px 20px 20px 20px;
        background-color:#00FFFF;
        border-radius:30px;
        margin:0px 100px 60px 0px;
    }
    </style>
</head>
<body>
    <div id="contornoDeFundo">
    </div>
    <div id="cabecalho">
    <p>Bem Vindo ao Site</p>
    </div>
    <div id="menu">
        <ul>
            <li>Home</li>
            <li>Contato</li>
            <li>Sobre</li>
        </ul>    
    </div>

    <div id="conteudo">
    </div>

</body>
</html>
  • Olá Leonardo, você teria como mandar uma imagem para exemplificar o que você deseja?

    William Seiti Mizuta   23 de mai de 2013
  • sim , mas para eu poder mostrar direito oque eu quero, conhece um programa que faca designe de site?

    leonardo   23 de mai de 2013
  • como posso fazer upload de imagens aki?

    leonardo   23 de mai de 2013
  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!

3 respostas

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