Ir para conteúdo

POWERED BY:

Arquivado

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

Freisleben

Utilizar DIVs ou Lista ul e li para criar um Menu

Por , em Desenvolvimento frontend

Recommended Posts

Freisleben    0

Freisleben
Postado

Ola Amigos,

 

Gostaria de saber se seria possivel criar esse header com o menu somente com CSS.

 

Se sim, como seria melhor fazer?

Os menus com DIV ou com Lista(utilizando o css para formatar)? não consigo fazer esse formatação do menu com css.

 

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

com lista cara.. define padding para cada li, float, line-height..

 

e ai setando uma classe para cada li, você consegue deixar essas imagenzinhas como background deles.

o espaçamento entre um e outro, um simples margin-right.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Freisleben    0

Freisleben
Postado

Vou tentar fazer. E colocar o resultado aqui para todos do forum.

 

Ola Willian,

 

Obrigado pela as dicas.

 

Consegui fazer um exemplo, ficou bem parecido. Mais não sei se eu fiz da forma mais correta de fazer o CSS.

 

Segue abaixo para você analisar

 

HTML

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>Cadastro</title>
</head>
<body>
<div id="wrapper">
	<div id="header">
	   <div id="logo">
		TITULO - LOGO
	   </div>
	</div>
	
	<div id="menu">
		<ul>
	        	<li class="um">Inicio</li>
			<li class="dois">Projeto</li>
			<li class="treis">Cadastro</li>
		</ul>
	</div>
</div>
</body>
</html>

CSS

 

* {
font-family:"Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
}

#wrapper{
}

#header{
	height: 75px;
	background: #005EAA;
}

#logo{
	margin: 10px 0 0 25px;
	color: #fff;
	font: 20px bold;
}

#menu {
	background: #005EAA;
	height: 30px;
}

#menu li{
display: block;
float: left;
padding: 5px 12px 5px 12px;
}

.um{
background: #fff;
margin: 0 5px 0 5px;
}

.dois{
background: #fff;
margin-right: 5px;
}

.treis{
background: #fff;
margin-right: 5px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Freisleben    0

Freisleben
Postado

Ola Amigo,

 

Não entendi sua resposta. Não estou aqui para alguem fazer para mim, estou querendo aprender e estou tentando fazer. Estou com uma duvida que você não respondeu.

 

Espero que alguem consiga tirar minha duvida.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

você poderia substituir:

 

<div id="menu">
   <ul>

 

por

 

<ul id="menu">

 

e algumas modificações no css:

#menu {
	background: #005EAA;
	height: 30px;
}

#menu li{
/* display: block; --> Desnecessário, LI's já são elementos de bloco */
float: left;
/* padding: 5px 12px 5px 12px; */
padding: 5px 12px;
}

.um{
background: #fff;
/* margin: 0 5px 0 5px; */
margin: 0 5px;
}

.dois{
background: #fff;
margin-right: 5px;
}

.treis{
background: #fff;
margin-right: 5px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

Ola Amigo,

 

Não entendi sua resposta. Não estou aqui para alguem fazer para mim, estou querendo aprender e estou tentando fazer. Estou com uma duvida que você não respondeu.

 

Espero que alguem consiga tirar minha duvida.

 

Bom dia,

 

Eu não disse nada disso amigo,você esta me interpretando errado.

Eu apenas fiz um modelo por conta e postei aqui para você ver o resultado final.

Em momento algum questionei sua capacidade !

E apenas um exemplo meramente ilustrativo, ok?

 

E como todos também estou aqui para aprender, exatamente por isso fiz o modelo, porque achei interessante sua dúvida e queria praticar.

 

Por fim a gente acaba tentando ajudar e é recebido com 4 pedras nas mãos.

 

Fico sem entender certas coisas.

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