GARANTIR DESCONTO

Fórum Elementos do menu um por cima do outro (CSS 3) #526618

23/07/2015

0

Infraestrutura

Gente to começando a fazer o meu primeiro site em html 5 e css 3, mas quando fui editar o meu menu os links de cada elemento ficaram um por cima do outro, e eu queria saber como faço para concertar isso. Vou deixar o codigo em html , css e imagem abaixo. E desde ja agradeço a quem responder :D

Codigo em html:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilo.css">
        <title>StormTech</title>
    </head>
    <body>
        <header>
            <img id="bg-cabecalho" src="img/bg.cabeçalho.png"/>
        </header>
        <nav>
            <img id="bg-menu" src="img/bg.menu.png"/>
            <ul>
                <li><a href="#">|Home|</a></li>
                <li><a href="#">Portifólio|</a></li>
                <li><a href="#">Contato|</a></li>
                <li><a href="#">Sobre mim|</a></li>
            </ul>
        </nav>
        <div>
            <img id="baner" src="img/baner.png"/>
        </div>
    	<div id="conteudo">   
            <article>
            </article>
        </div>  
        <footer>
            <img id="bg-rodape" src="img/bg.rodape.png"/>
        </footer>
    </body>
</html>


Codigo em css:

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

#bg-cabecalho,#bg-menu,nav ul li{
	position: absolute;
}

#conteudo{
	width: 1200px;
	height: 1200px;
	margin: 0 auto;
	border: 1px solid black;
}

#bg-cabecalho{
	width: 100%;
	height: 172px;
	z-index: 1;
}

#bg-menu{
	width: 870px;
	height: 78px;
	border-radius: 10px;
	top: 135px;
	left: 220px;
	z-index: 2;
}

#bg-rodape{
	width: 100%;
	height: 49px;
	margin-bottom: -10px;
}

#baner{
	width: 100%;
	height: 254px;
	margin-top: 350px;
	
}

nav ul li{
	width: 387px;
	height: 40px;
	display: inline;
	top: 165px;
	left: 250px;
	z-index: 3;
}


img:
[img:descricao=img do problema]http://arquivo.devmedia.com.br/forum/imagem/443867-20150723-111450.png[/img]
Juliana

Juliana

Responder

Posts

23/07/2015

Randrade

Em se css você está definindo a posição da lista como absolute (não só da lista, e sim de várias coisas). Isso não é uma boa prática. Você deve tratar cada item separadamente.

Seu problema está aqui:

#bg-cabecalho,#bg-menu,nav ul li{
    position: absolute;
}


Mas para não atrapalhar o seu código, basta adicionar a posição relativa na lista, ficando assim o css de seu menu:

nav ul li{
    width: 387px;
    height: 40px;
    display: inline;
    top: 165px;
    left: 250px;
    z-index: 3;
    position: relative!important;// Aqui você define a posição como relativa (o !importante serve para "sobrescrever" o que já possui)
}


Olha um [url:descricao=Exemplo de seu código aqui.]http://jsfiddle.net/randrade/87ur5fng/[/url]

Caso não seja isso que necessite, explique melhor que reformulo minha resposta.
Responder

Gostei + 0

23/07/2015

Juliana

valew resolveu meu problema... tentei usar o position absolute pra não precisar usar os confusos float's na hora de organizar a posição de cada elemento, mas parece que complicou mais ainda, agradeço a ajuda ;)
Responder

Gostei + 0

23/07/2015

Gabriela Monte

.CSS pode parecer simples, eu passaria "mal" com esse problema, sempre que vem duvidas eu recorro ao forum, até as questões bem simples de falta de atenção minha.
Responder

Gostei + 0

23/07/2015

Randrade

valew resolveu meu problema... tentei usar o position absolute pra não precisar usar os confusos float's na hora de organizar a posição de cada elemento, mas parece que complicou mais ainda, agradeço a ajuda ;)

Juliana, você já conhece o Bootstrap?
Com ele você consegue fazer um site responsivo, e sem "muito esforço".

.CSS pode parecer simples, eu passaria "mal" com esse problema, sempre que vem duvidas eu recorro ao forum, até as questões bem simples de falta de atenção minha.


Quando são casos assim, eu sempre levanto um ambiente no JsFiddle para testar.
E no caso dela, você pode ir por eliminatória (se não entender de css) e ir excluindo até achar o problema. Depois só trabalhar em cima.
Responder

Gostei + 0

23/07/2015

Gabriela Monte

Confesso que ainda tenho que aprender a trabalhar/estudar assim.
Responder

Gostei + 0

23/07/2015

Randrade

Confesso que ainda tenho que aprender a trabalhar/estudar assim.

Com o tempo você vai aprendendo suas próprias "técnicas de debug" e fará isso naturalmente. Não se preocupe com isso agora. Apenas foque em estudar.
Responder

Gostei + 0

23/07/2015

Jothaz

Confesso que ainda tenho que aprender a trabalhar/estudar assim.

Com o tempo você vai aprendendo suas próprias "técnicas de debug" e fará isso naturalmente. Não se preocupe com isso agora. Apenas foque em estudar.


Eu quase não tenho tempo para desenvolver, mas não cosnigo mais sem o JsFiddle e as Ferramentas do desenvolvedor (F12 ou CRTL+SHIFT+I).

Css não é trivial, mas tendo disposição para estudar e pesquisar não chegar a ser tão complicado assim.
Responder

Gostei + 0

23/07/2015

Juliana

Não conheço, mas vou dar uma olhada qualquer coisa que contribua pro meu estudo em desenvolvimento web ta valendo e mais uma vez obrigada pela ajuda.
Responder

Gostei + 0

23/07/2015

Gabriela Monte

Vou começar a utilizar essas ferramentas que auxiliam no desenvolvimento, Obrigada tambem pela ajuda.
Responder

Gostei + 0

23/07/2015

Jothaz

Não conheço, mas vou dar uma olhada qualquer coisa que contribua pro meu estudo em desenvolvimento web ta valendo e mais uma vez obrigada pela ajuda.


Vou começar a utilizar essas ferramentas que auxiliam no desenvolvimento, Obrigada tambem pela ajuda.


No início pode parecer intimidador, todavia com disposição pesquisar e estudar vai ficando cada vez mais simples e prático.

Ontem mesmo estávamos com um problema de um grid (table) que estava quebrando o lay-out no IE9 e versões anteriores (e no caso o IE9 é o padrão, pois ainda estamos migrando para outros browsers), mas funcionava em outra versões e browsers normalmente. Já tinha um bom tempo que o pessoal estava tentando resolver e não resolvia. Usando esta ferramenta e alguns comando css resolvi o problema em pouco tempo.

Então as Ferramentas do desenvolvedor não quebra um galho quebra a arvore toda.

Depois de clicar em F12 ou CRTL+SHIFT+I vai aparecer a tela abaixo, onde você poderá ver até a alma da página. kkkkkkkkkkkkkkk

[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20150723-174639.png[/img]
Responder

Gostei + 0

23/07/2015

Randrade

Depois de clicar em F12 ou CRTL+SHIFT+I vai aparecer a tela abaixo, onde você poderá ver até a alma da página. kkkkkkkkkkkkkkk


Minha vida foi muito mais feliz após eu descobrir essas ferramentas. Sem falar que existem outras que auxiliam muito mais. kkkkkkkkkkkk
Responder

Gostei + 0

23/07/2015

Gabriela Monte

Ainda bem que ainda estou estudando conceito básicos, no inicio mesmo, então acho que não da para se perder muito! Obrigada pela dica, apartir de agora, segui-las.
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar