Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.codegreen.org/images/faq_admin_articles.jpg&key=2d9b0b79b101168ae30ad01e470e204babe840df45cfd4cfb90c5d1c22b6fa4c" alt="Imagem Postada" />
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">](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>* {
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;
}Boa noite,
Não vou dizer que é facil e muito menos rápido de se fazer mas com um pouco de paciencia e tempo fica bem legal.
Da uma olhada no que montei aqui.
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.
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;
}
.dois{
background: #fff;
margin-right: 5px;
}
.treis{
background: #fff;
margin-right: 5px;
}>
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.
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.