[Resolvido] Ao minimizar a pagina o background fica pela metade&#

[trigun 0]

Eaew galera!

 

Sou novo aqui e estou tendo problemas com algo que parece ser básico, mas estou apanhando pra kcete!

enfim...

 

meu site tem o background com widht em 100% junto o menu que também esta com widht em 100%, fica perfeito na tela maximizada mas quando se minimiza a tela o background fica menor e o menu passa 2 léguas pra fora do background e fica com o fundo branco como se o background tive-se 800px e o menu 1200px pra ter uma ideia.

bom vou mandar o código abaixo se houver alguém que possa me dar uma luz!

 

HTML -

<div id="background"></div>

CSS -

#background {
background:url(../Imagens/bg%201200x1600.jpg) repeat-x;
position:absolute;
top:0px;
left:0px;
width:100%;
height:1000px;
}

E esta é a faixa que esta por traz dos botoes*

HTML -

<div id="reader></>
#reader {
left:0px;
width:100%;
height:109px;
background-color:#000;
margin-top:100px;
position:absolute;

}

 

Agora vem o menu bem simples apenas com lista não ordenada*

 

HTML -

<div id="menu">
            <ul id="nav">
            <li class="bt01"><a href="Index.html">Home</a></li>
            <li class="bt02"><a href="News.html">News</a></li>
            <li class="bt03"><a href="Artigos.html">Artigos</a></li>
            <li class="bt04"><a href="Onde Beber.html">Onde Beber</a></li>
            </ul>
            </div>

CSS -

#menu ul {
margin-top:140px;
margin-left:240px;
position:absolute;
display:block;
width:100%;
}

#menu li {
list-style-type:none;
display:inline;
margin-left:0px;
text-align:center;
font-family: monotype corsiva;
font-size:28px;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;


}


#menu li a {
text-decoration:none;
margin-left:-10px;
color:#000;

}

 

Acho que nao ha necessidade de colocar a parte de a:hover

Bom é essa a duvida.

 

Parece que é normal isto que ocorre, percebi que aqui nesta pagina ocorre a mesma coisa se vocês minimizarem a pagina e diminuir ou pouco a caixa assim que aparecer a barra de rolagem aquela faixa azul do menu ira ficar com um tamanho fixo e os botoes iram passar a faixa como se o background estive-se cortado deem uma olhada.

[Diogo Rodrigues_79134 4]

kara, a estrutura do seu código HTML está muito confusa. Ao invés de você inserir os elementos lado a lado e ajustá-los com "position: absolute", sugiro inserí-los um dentro do outro. Segue o código:

<style type="text/css">
* {
padding: 0;
margin: 0;	
}

#background {
position: relative;
height:1000px;
background:url(http://i.istockimg.com/file_thumbview_approve/3855804/2/stock-photo-3855804-grunge-background.jpg) repeat-x top left;	
}

#header {
position: relative;
float: left;
width: 100%;
height: 109px;
background: #000;
margin-top: 100px;
}

#nav {
margin: 35px 0 0 240px;
}

#nav li {
display:inline;
margin-right: 25px;
list-style: none;	
font-family: monotype corsiva;
font-size:28px;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}

#nav li a {
text-decoration:none;
margin-left:-10px;
color:#000;
}
</style>

<div id="background">
   <div id="header">
   	<ul id="nav">
           <li class="bt01"><a href="Index.html">Home</a></li>
           <li class="bt02"><a href="News.html">News</a></li>
           <li class="bt03"><a href="Artigos.html">Artigos</a></li>
           <li class="bt04"><a href="Onde Beber.html">Onde Beber</a></li>
       </ul>    
   </div>
</div>

[trigun 0]

É verdade Diogo você tem razão esta confuso mesmo, todos objetos estão distintos talvez se eu colocar um dentro do outro melhore um pouco mas acho que não vai resolver o problema.

Enfim este problema que estou tendo parece ser comum na web pois vários sites que vi tem o mesmo erro.

[am designer 7]

Salve Trigun! beleza?

 

cara, seguinte...tente em primeiro lugar fechar a tag <div> da header, uma outra coisa que eu tentaria tbm era deixar como menu somente a lista <ul id='menu'>, retirando a div que a envolve, faça também mudanças de postion de absolute para relativo no menu e reader.

 

Qualquer novidade da um salve, tbm sou novo por aqui.

 

espero ter ajudado, até mais!

[Diogo Rodrigues_79134 4]

Então Trigun, tente seguir as sugestões do Am Designer. Senão der certo, analise o código que lhe enviei.

Eu o criei com base no seu código e ele já está corrigido, e funciona corretamente.

 

*Sobre esse erro que acontece em muitos sites, como você mesmo disse: é um erro. Portanto, analisar a estrutura e os estilos e solucionar os problemas encontrados faz tudo funcionar corretamente. ;D

 

Qualquer problema, continue postando para que possamos ajudá-lo.

[am designer 7]

Salve galera!

 

Pow nem tinha visto seu codigo Diogo. Trigun, já nem perca tempo olhando o resto, o codigo do Diogo ta rodando de boa cara!

 

 

Abraçoo

[trigun 0]

Aew galera tudo beleza?

 

Primeiro tenho que agradecer a ajuda de vocês! as dicas me deram uma luz =D,

Bom meu código estava bem bagunçado dei uma arrumada geral nele agora esta bacana!

mas a questão é que, isto que ocorre é um defeito no html por que se colocar um roda-pé ou alguma faixa com um width de 100% vai ficar apenas do tamanho da janela só usuário isso é inevitável.

 

A questao do bg era simples eu devia apenas linkar a imagem em body no css para preencher todo o fundo.

 

Vlw galera minha duvida esta sanada =p

Obrigado.

[am designer 7]

Por nada! Precisando só chamar, faremos o possivel para ajudar AND aprender. kkk

 

abraço