Barra superior igual a do Facebook ou do Imasters

[Otávio Peixoto 0]

Eu quero saber como fazer uma barra igual aquela azul do facebook ou que nem a aqui do IMasters, que quando reduzimos o zoom da pagina ou aumentamos, ela continua em tela cheia, ela reduz e almenta com a pagina.

 

Alguem sabe como fazer?

[Joao Felix_147210 4]

Carinha, acho que sua dúvida se encaixa na parte de CSS, mas enfim rs.

 

Pelo que eu entendi, você quer colocar uma barra que preenche toda a tela certo?

 

Uma opção é você declarar uma div com a propriedade width: 100%; isso vai fazer com que ela pegue a tela inteira.

 

 

ex.:

 

<div class="teste" style="width: 100%;">

<!-- Conteúdo -->

</div>

 

Ou

 

no arquivo html

 

<div class="teste">

<!-- Conteúdo -->

</div>

 

no arquivo css

 

.teste

{

width: 100%;

}

 

Espero ter ajudado, boa sorte!

[Gabriel Heming 766]

Área correta é CSS.

 

mas como eu já tenho o código pronto...

 

HTML:

<div id="menu-superior">
</div>

CSS:

#menu-superior {
   background: #5A97C0; /** não é o mesmo azul do facebook, mas é azul **/
   clear: both; /** define que não permitirá nenhum elemento em suas laterais e ocupará a largura total da tela **/
   height: 40px; /** a altura desejada **/
   overflow: hidden; /** evita problemas com elementos que usem float **/
}

Pode ser feito com width 100%. Mas você terá problemas se quiser utilizar algum padding/margin. Por isso eu prefiro clear, ele se adapta melhor com outros elementos.

[Otávio Peixoto 0]

 

Área correta é CSS.

 

mas como eu já tenho o código pronto...

 

HTML:

<div id="menu-superior">
</div>

CSS:

#menu-superior {
   background: #5A97C0; /** não é o mesmo azul do facebook, mas é azul **/
   clear: both; /** define que não permitirá nenhum elemento em suas laterais e ocupará a largura total da tela **/
   height: 40px; /** a altura desejada **/
   overflow: hidden; /** evita problemas com elementos que usem float **/
}

Pode ser feito com width 100%. Mas você terá problemas se quiser utilizar algum padding/margin. Por isso eu prefiro clear, ele se adapta melhor com outros elementos.

 

Cara, so uma coisa, como eu removo aquele espaço em branco entre as bordas, da Div e as da pagina, eub quero que as bordas da div encostem nas bordas da pagina

[Gabriel Heming 766]

html , body {
   margin: 0;
}

 

Normalmente se utiliza um arquivo de "reset":

* {
   margin: 0;
   padding: 0;
}

http://blog.thiagobelem.net/css-reset-o-que-e-e-como-usar/

[Otávio Peixoto 0]

Resolvi...

MAs estou co outro probleminha aqui.

eu criei um menu Drop Dawn usando css e coloquei ele dentro da div, mas na pare, o que fazemoquetem sub menu

não aparece nada do sub menu, pq a div n deixa ele sair

 

olha como ta

http://internauteiro.zz.mu/template.php

[Gabriel Heming 766]

Sugiro a leitura de alguns tutorais do dinossauro das CSS

 

http://maujor.com/tutorial/ddownmenu.php

http://maujor.com/tutorial/ddownmenu-a.php

 

Também saber sobre os tipos de posicionamento (estático, fixo, relativo e absoluto) é essencial para a criação e estruturação de qualquer bloco HTML.

 

http://maujor.com/tutorial/absrel.php