Ir para conteúdo

POWERED BY:

Arquivado

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

SauronWar

Cabeçalho Responsivo - Youtube

Por , em Desenvolvimento frontend

Recommended Posts

SauronWar    0

SauronWar
Postado

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?

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mostra a sua tentativa.

Compartilhar este post

Link para o post
Compartilhar em outros sites

SauronWar    0

SauronWar
Postado

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">
	<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">
				<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">
				<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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Qual versão do IE ?

 

O IE não entende html5. Para ele vc precisa de um pollyfil, como o html5-shiv, por exemplo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

SauronWar    0

SauronWar
Postado

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

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