Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

thunder_bauer

Criação de menus com css

Por , em Desenvolvimento frontend

Recommended Posts

thunder_bauer    0

thunder_bauer
Postado

Boa noite pessoal ,

 

 

Sou iniciante em html / css e estou tendo difuldades em fazer um menu para um futuro site . Crie 3 divs, uma para ser a borda da página, dentro dela tem mais duas divs, uma para o menu do site e a outra para o conteúdo da página.

 

Mas a div que envolve as outras duas não funciona direito pois a borda que eu coloquei nela n funciona corretamente. Apenas a borda superior que é exibida. Coloque esta div como posição relativa e as outras duas como absolutas justamente para não ter problemas caso o usuário queira aumentar o tamanho da página.

 

Gostaria de saber como criar menus sem erros usando apenas css. Dicas , links interessantes, neste momento to lendo aqui um material.

 

Postarei o código aqui para vcs compreenderem , com certeza to fazendo algo errado mas n sei u q é. Ignorem o layout que criei .heeheh...é apenas para testes

 

*arquivo html

 

<html>

<head>
	<title>Teste</title>
	<link rel = "stylesheet" type = "text / css" href = "/home/daniman/Documents/web/style.css" />
</head>

<body>

	<div id = "boxe1">


	<div id = "boxe2"><ul>

		<li>menu1</li>
		<li>menu2</li>
		<li>menu3</li>	
		<li>menu3</li>	

	</ul></div>


	<div id = "boxe3"><p></p></div>


	</div>


</body>

</html>

 

*arquivo css

 



body{

background-color:#CCCCFF;

}


#boxe1{

position:relative;
margin:0 auto;

border-width:thin;
border-color:green;
border-style:groove;

margin-right:20px;		



}

#boxe2{

position:absolute;
top:40px;
left:30px;

width:120px;	
height:500px;

border-width:thick;
border-color:red;
border-style:dotted;

}

#boxe3{

position:absolute;
top:40px;
right:30px;

padding-top:20px;
padding-left:15px;
padding-right:10px;
padding-bottom:18px;

border-width:thin;
border-color:green;
border-style:ridge;

width:1010px;	
height:500px;

}

 

Aguardo alguma solução :D

 

abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

siga as dicas do post #2:

http://forum.imasters.com.br/topic/212439-como-criar-um-topico-para-o-seu-problema/page__view__findpost__p__1613498

 

como declarar DTD, css reset, validar..

Compartilhar este post

Link para o post
Compartilhar em outros sites

thunder_bauer    0

thunder_bauer
Postado

Isso acontece em todos os navegadores?

Abri no firefox aqui, e não vi o problema.

 

Eu uso Firefox 6 .

 

Mas no firefox abriu tudo certo? Com a borda verde da div principal? Pois aqui a única borda que aparece desta div é a superior.

 

Isso acontece em todos os navegadores?

Abri no firefox aqui, e não vi o problema.

 

Eu uso Firefox 6 .

 

Mas no firefox abriu tudo certo? Com a borda verde da div principal? Pois aqui a única borda que aparece desta div é a superior.

Compartilhar este post

Link para o post
Compartilhar em outros sites

thunder_bauer    0

thunder_bauer
Postado

Aqui apareceu assim:

264m5he.jpg

 

Esse não era o resultado esperado?

testei no firefox e no chrome e em ambos apareceram da mesma forma ^^

 

Não exatamente Guilherme. EU quero que #boxe1 tenha 4 bordas verdes porém só aparece a borda superior.

Compartilhar este post

Link para o post
Compartilhar em outros sites

crf_h0m3r    5

crf_h0m3r
Postado

O #boxe1 não tem nenhum conteúdo, por isso ele suprime todo espaço em branco. Tente colocar algo dentro da div, ou sete uma altura e largura para ela.

 

#boxe1{
position:relative;
margin:0 auto;
border-width:thin;
border-color:green;
border-style:groove;
margin-right:20px;   

height:120px;
width:500px;           
}

 

E sugiro você dá uma olhada nesses links (Aqui e aqui(clique no item #27)) para uma melhor otimização do seu código

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito