Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Eae,
estou tentando fazer um cabeçalho responsivo igual ao do youtube, porém venho encontrando alguns problemas quanto ao design responsivo.
Eu consigo alinhar todos os itens utilizando div com a imagem para logo, um form para busca e ul's para os restantes itens... mas não consigo deixar de forma responsiva... no internet explorer então... sem comentários.
Alguém poderia criar um exemplo de como foi feito o cabeçalho deles?
Então, como eu estou dando os primeiros passos, deve estar horrível. Lá vai:
HMTL
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tentativa.css"/>
<title>Cabeçalho</title>
</head>
<header>
<a href="[http://pagina1.com.br](http://pagina1.com.br)">
<img class="logo_topo" src="logo_imagem.png" border="none" alt="Home"></a>
<nav id="topo_tools">
<ul id="campo_dir">
<li class="msg"><a href="[http://www.pagina1.com.br/usuario/mensagens](http://www.pagina1.com.br/usuario/mensagens)">
<img class="mensagem" src="mensagem_icon.png" border="none" alt="Mensagens"></a></li>
<li class="usuario">Entre ou Cadastre-se</li>
<li class="icon"><a href="[http://www.pagina1.com.br/opcoes_de_usuario](http://www.pagina1.com.br/opcoes_de_usuario)">
<img class="arrow_down" src="arrow_icon.png" border="none" alt="Menu"></a></li>
<li class="anuncie"><b>Compre Agora</b></li>
</ul>
<form id="barra_busca" method="post" action="#" enctype="multipart/form-data">
<input id="busca" type="text" value="" name="buscar"><input id="button" type="submit" value="" name="busca"></form>
</nav>
</header>
<body>
</body>
</html>CSS
header {
width:100%;
height:50px;
position:fixed;
margin:-9px 0px 0px -9px;
background-color:#FFF;
border:1px solid black;
min-width:960px;
}
.logo_topo {
margin: 5px 0px 5px 5px;
position:fixed;
float:left;
}
#topo_tools {
height:50px;
width:auto;
margin:0px 8px 0px 237px;
padding:0px 0px 0px 0px;
vertical-align:center;
}#topo_tools ul{
padding:0px;
list-style-type:none;
margin-top:11px;
float:right;
border:1px solid black;
position:relative;
}#topo_tools li{
display:inline-block;
padding:0px;
}
#barra_busca {
width:auto;
height:25px;
padding: 0% 5% 0% 5%;
margin-top: 11px;
border: 1px solid black;
margin-left:auto;
margin-right:400px;
}
#busca {
height:25px;
width:80%;
border:1px solid #CCC;
float:left;
}
#button {
height: 29px;
width: 35px;
border: 1px solid #CCC;
background-color:#F00;
background-image:url(lupa_icon.png);
background-repeat: no-repeat;
background-position:center;
cursor:pointer;
margin-right:0px;
;
padding:0px;
}
#campo_dir {
float:right;
}
.usuario {
font-size: 12px;
}
.msg {
margin-left:5px;
}
.arrow_down {
}
.anuncie {
height:28px;
width:180px;
box-shadow: 0px 0px 3px #CCC;
background-color:#F00;
color:#FFF;
text-align:center;
line-height:28px;
}Somente as ul's da direita ficam desalinhadas... e nada disso funciona no IE, fica tudo amontoado.
Qual versão do IE ?
O IE não entende html5. Para ele vc precisa de um pollyfil, como o html5-shiv, por exemplo.
o método que estou utilizando para criar o cabeçalho é o mais recomendado? vc poderia me dizer como resolver o alinhamento e como utilizar o pollyfil?
Ah... IE8
Ninguém sabe onde estou errando?
Mostra a sua tentativa.