Ir para conteúdo

POWERED BY:

Arquivado

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

mickj

Deixar o layout do site ajustado com qualquer browser

Por , em Desenvolvimento frontend

Recommended Posts

mickj    0

mickj
Postado

Bom dia pessoal.

 

Sou meio novato nesse assunto e estou apanhando muito em uma duvida.

 

eu queria deixa o cabeçalho e o rodapé do site 100% em todos os site. isso também para o background.

 

eu tentei usar a opção width:100% no cabeçalho, rodapé e container do meu codigo, mas acabou que desconfigurou todas a pagina.

 

como sou meio novato acho que to fazendo algum erro bem besta. se alguém poder me ajudar.

 

HTML

<!doctype html>
<html>
	<head>
        <meta charset="utf-8">
        <title>Indie Party</title>
 		<link rel="stylesheet" href="css.css" type="text/css">
        <script language="javascript" type="text/javascript" src="indiescript.js"></script>
    </head>

    <body>
	<div id="container">
		<!-- cabeçalho do site -->
        <!-- <div id="back" class="backg"></div> -->
    	<div id="cabecalho">
        	<div id="organizacao">
            <div id="logo" class="lg"><a href="#" class="llg">INDIE<br />PARTY</a></div>          
            <div id="calendario"><a href="#" onMouseOver="changecalendario()" onMouseOut="changecalendarioagain()"><img src="imagens/calendario.gif" name="imgcalendario" class="imgc"></a></div>
			<div id="setlist"><a href="#" onMouseOver="changeradio()" onMouseOut="changeradioagain()"><img src="imagens/radio2.gif" name="radio" class="imgr"></a></div>
            <div id="fotos"><a href="#" onMouseOver="changecamara()" onMouseOut="changefotosagain()"><img src="imagens/camara.gif" name="fotos" class="imgfts"></a></div>
            <div id="nomecontato"><a href="#" class="ln">INDIE PARTY</a> | <a href="#" class="ln">CONTATO</a></div>
			</div>
        </div>       
<!-- corpo do site -->          
    	<div id="corpo">
        
        </div>

<!-- rodape do site -->
        <div id="rodape">
          	<div id="website" class="mrw">
                <p class="mrp">WEBSITE</p>
                <ul>
                    <li	class="mrli"><a href="#" class="li">AGENDA</a></li>
                    <li	class="mrli"><a href="http://indieparty.tumblr.com/" class="li">TUMBLR</a></li>
                    <li	class="mrli"><a href="#" class="li">GALERIAS</a></li>
                </ul>
        	</div>
            <div id="redesociais" class="mrrs">
                    <p class="mrp">REDE SOCIAIS<br></p>
                    <ul>
                    	<li class="mrli"><a href="#" class="li">FACEBOOK</a></li>
                        <li class="mrli"><a href="http://www.facebook.com/events/440233052727865" class="li">EVENTO</a></li>
                        <li class="mrli"><a href="#" class="li">CONTATO</a></li>
                    </ul>
           	</div>
            <div id="direitos">INDIE PARTY © 2013 - TODOS OS DIREITOS RESERVADOS</div>
            <div id="imgfacebook"><a href="#" class="ic" onMouseOver="changeimg()" onMouseOut="changeimgagain()"><img src="imagens/facebookicone3.gif" name="imgfacebook" class="imgf"></a></div>
        </div>
    </div>
    </body>
</html>

 

CSS

@charset "utf-8";
/* CSS Document */

#container{
	position:absolute;
	top:0px;
	left:0px;
	width:1300px;
	height:1000px;
	/* border:solid #999 5px; */
	background-image:url(imagens/fungo.jpg);
	}

/*#organizacao{position:fixed}*/
/*.backg{
	position:absolute;
	top:0px;
	left:0px;
	width:1300px;
	height:150px;
	background:#CF6;
	opacity:0.4;
} */

/* cabeçalho */
#cabecalho{
	position:absolute;
	top:0px;
	left:0px;
	width:1300px;
	height:150px;
	/* border:solid #006 5px; */
	}

/* configurações do logo da festa */
.lg{position:absolute;
	top:15px;
	left:200px;
	font-family:Pozofour;
	font-size:50px;
	text-align:center;
	font-weight:bolder;
}

a.llg:link, a.llg:visited{
	text-decoration:none;
	color:#000;
}

a.llg:hover{
	font-size:60px;
}

a.llg:active{
	text-decoration:none;
}

/* nome e contato no canto superior do cabeçalho */
#nomecontato{
	position:absolute;
	top:20px;
	left:800px;
	color:#000;
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
}

a.ln:link, a.ln:visited{
	text-decoration:none;
	color:#000;
	font-weight:bolder;
	}

a.ln:hover{text-decoration:none;
	color:#333;
	font-weight:bolder;
	}

a.ln:active{text-decoration:none;
	font-weight:bolder;
	}

/* imagem calendário */
.imgc{position:absolute;
	top:20px;
	left:380px;
	width:90px;
	height:90px;
	border:0px;
	}

/* imagem radio */
.imgr{position:absolute;
	top:20px;
	left:520px;
	width:90px;
	height:90px;
	border:0px;
	}

/* imagem fotos */
.imgfts{position:absolute;
	top:20px;
	left:640px;
	width:90px;
	height:90px;
	border:0px;
	}

/* corpo */
#corpo{position:absolute;
	top:150px;
	left:140px;
	width:1000px;
	height:640px;
	/* border:solid #030 5px; */
	}

/* codigos do rodape */
#rodape{
	position:absolute;
	top:800px;
	left:0px;
	width:1300px;
	height:200px;
	/* border:solid #006 5px; */
	background-color:#FFF;
	}
	
/* configuração do website */
.mrw{
	position:absolute;
	top:50px;
	left:200px;
	/*border:1px solid #000033;*/
	width:150px;
	color:#C90;
	}
/* configuração da redesocial */
.mrrs{
	position:absolute;
	top:50px;
	left:350px;
	/*border:1px solid #000033;*/
	width:150px;
	color:#C90;
	}
	
.mrli{
	line-height:20px;
	font-size:12px;
	}

.mrp{
	margin-left:30px;
	font-size:14px;
}

a.li:link, a.li:visited{
	text-decoration:none;
	color:#C90;
	}

a.li:hover{text-decoration:none;
	color:#CC6;
	}

a.li:active{text-decoration:none;
	}

/* direitos das imagens e produto */
#direitos{
	position:absolute;
	top:10px;
	left:800px;
	color:#C90;
	font-family:"Times New Roman", Times, serif;
	font-size:12px;
}

/* icones rodapé */
.imgf{position:absolute;
	top:40px;
	left:980px;
	width:40px;
	height:40px;
	border:0px;
	}

a.ic:link, a.ic:visited{
	background-image:url(imagens/facebookicone3.png);
	}

a.ic:hover{
	background-image:url(imagens/facebookicone4.png);
	border:0px;
	}
	
a.ic:active{
	border:0px;
	}

 

Espero a ajuda de vocês.

Compartilhar este post

Link para o post
Compartilhar em outros sites

caio0220    1

caio0220
Postado

você está usando muito position.

 

Tente usar mais o float. Ele vai ficar bem fluido.

 

De uma estudada sobre isso. Como você está começando, não comece pelo errado. Comece a estudar sobre layouts fluidos com ajuda do parâmetro "float" do css e tudo mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

caio0220    1

caio0220
Postado

Cara, eu fiz curso pra isso a muito tempo atras, então sobre como aprender isso na web eu não tenho tanto conhecimento.

 

Eu estou estudando desenvolvimento de apps e games e encontro tudo no yotube cara. Tenta dar uma olhada por lá, na maioria das vezes nego explica muito mal, mas vale para ter uma base, depois você aprende com o tempo mesmo. Fazer sempre coisas novas é o melhor jeito de sempre estar aprendendo.

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