[Resolvido] Problemas com rodapé

[manoaj 12]

galera to quebrando a cabeça pra resolver um problema aqui mas não to consseguindo, é o seguinte,

eu to criando layout aqui e cheguei na parte do footer só que tem um problema quando o conteudo do site aumenta o footer nao desce ele fica fixo no meio da pagina eu queria que o footer fosse empurrado ou seja descece quando o conteudo do site aumentasse .

 

 

meu css ta assim olha.

@charset "utf-8";
.corpo {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14px;
background-color: #C5C5C5;
}
#conteudo {
position:absolute;
width: 980px;
height: auto;
z-index: 1;
left: 494px;
top: 175px;
overflow: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
-moz-box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
border: 1px solid #bebebe;
background-color: #ECECEC;
}
#logo {
position: absolute;
width: 370px;
height: 99px;
z-index: 1000;
left: 27px;
top: 23px;
}
#tudo {
width: 760px;
margin:0 auto;
text-align:left; /* "remédio" para o hack do IE */
}

#menu {
position: absolute;
width: 924px;
height: 23px;
z-index: 999;
left: 502px;
top: 336px;
}
/********************************************/
/*** Common Footer ***/
/********************************************/
#footer{
margin: 20px auto;
width:980px;
overflow: hidden;
position:relative;
clear: both;
border: 1px solid #4a4a4a;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
zoom: 1;
}
#footer a{
text-decoration: none;
}
/*** Breadcrumb ***/
#footer .breadcrumb{
padding: 0 0 0 20px;
line-height: 42px;
border-bottom: 1px solid #4a4a4a;
background:url(../images/breadcrumb-bg.png) repeat-x #2a2a2a;
}
#footer .breadcrumb a{
color:#ababab; text-decoration:none;}
#footer .breadcrumb a:hover{
color:#0aeeff;}
#footer .breadcrumb .current{
color:#fff;}
#footer .breadcrumb a,
#footer .breadcrumb span{
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #aaa9a9;
}
#footer .breadcrumb a:first-child,
#footer .breadcrumb span:first-child{
margin-left: 0;
padding-left: 0;
border-left: 0 none;
}
/*** Site Links ***/
#footer .site-links{
padding: 13px 0 16px;
overflow: hidden;
border-bottom: 1px solid #4a4a4a;
background: #404040;
}
#footer .site-links .block{
margin-left:90px;
width:215px;
float:left;
}
#footer .site-links h3{
margin: 0 0 7px;
padding:0;
font: 19px IntervalSansProRegular, Arial, Helvetica, sans-serif;
color: #0AEEFF
}
#footer .site-links ul{
list-style:none;
padding:0;
margin:0;
}
#footer .site-links ul li{
border-top:1px solid #5c5c5c;
}
#footer .site-links ul li:first-child{
border-top: 0 none;
}
#footer .site-links ul li a{
padding: 6px 0;
display: block; color:#ffffff;
}
#footer .site-links ul li a:hover {
color:#0AEEFF;
}
/*** Copyright ***/
#footer .copyright{padding: 12px 20px;overflow: hidden;color:#ABABAB;background:url(../images/copyright-bg.png) repeat-x #414141;}
#footer .copyright p{margin: 0;padding: 0;}

#footerpart {
position:absolute;
bottom: 0;
width: 200px;
height: 115px;
z-index: 2;
left: 494px;
top: 1285px;
}

[Sérgio Haubman 2]

Olá amigo, seu problema está no "position: absolute;", não utilize para construção da estrutura ao menos que seja mesmo necessário.

 

Conforme seu código abaixo o #conteudo setado como "position: absolute" o retira da ordem de empilhamento dos conteúdos desse modo flutuará na tela. E o #footer esta com "position: relative" o que lhe da liberdade para manipular suas margens sem alterar os demais elementos, mas o mantem seus espaço no documento diferente do "position: absolute".

#conteudo {
position:absolute;
width: 980px;
...
}

#footer{
margin: 20px auto;
width:980px;
overflow: hidden;
position:relative;
...}

 

Recomendo você retirar todos os position:absolute e centralizar o site com "margin : 0 auto" desse modo manterá a ordem de empilhamento do conteúdo e empurrando o rodapé conforme o aumento do site.

#conteudo {
width: 980px;
margin: auto;
...
}

 

Espero ter ajudado.

 

Abs.

 

Sérgio Martins

[manoaj 12]

maninho fiz o que você falo tirei os position e coloquei os margin: 0 auto; tipo deu certo o rodapé desceu conforme o conteudo aumento só que tem um problema fico tudo uma bagunça e não da pra alinhar o menu foi pro final da pagina a logo foi parar na lateral o rodapé foi pro lado direito o que que eu faço, não da par alinhar tento mexer no top no height e nao mud anada os obgetos nao se mexem bagunçou geral,

 

meu html é esse talvez ajude!

 

 

<body class="corpo"><div id="tudo">
<div id="conteudo">
<img src="images/logo.png" width="374" height="94" alt="logo" longdesc="index.html" /></div><!-- Fim logo -->
</div><!-- Fim Conteudo -->

<div id="menu">
<ul id="navbar" class="sf-menu">
	<li><a href="home.html">Home</a></li>
			<li><a href="equipe.html">Equipe</a></li>
			<li><a href="#">Galeria</a>
					<ul class="submenu">
					<li><a href="#" >Imagens</a></li>
					<li><a href="videos.html">Videos</a></li>
				</ul>
	</li>
                       <li><a href="planos.html">Planos</a></li>
					 <li><a href="#">Baixar</a></li>
                  <li><a href="contato.html">Contato</a></li>
                         <li><a href="users.html">Usuarios</a></li>
					   <li><a href="#">Projetos</a>
					   					<ul class="submenu">
					<li><a href="#" >L2JFPS</a></li>
					<li><a href="#">L2OFF FPS</a></li>
					<li><a href="#">Painel Controler</a></li>
					<li class="last-link"><a href="#">Consoles L2J C++</a></li>
				</ul>
				</li>
					   <li><a href="brdevs.html">BrDevs</a></li>
  </ul><!-- End Menu --></div>      
     </div><!-- Fim Menu -->

 <div id="master"></div><!-- Fim barra menu -->

<div id="sliderpanel">
<div id="content-slider-wrapper" class="slider-wrapper carbon">
		<div>

			<h3>Filter Protocol Security</h3>

                 <p><em>Cadastre o seu servidor em um dos melhores anti hacker’s  L2J - L2OFF já desenvolvidos totalmente grátis faça parte você também , Damos a proteção contra todos os hacker’s existentes. <br>
             Atualizações constantes e hacker’s novos sendo fixados logo que reportados.</em><br><h4><p>Selecione abaixo:</p></h4></p>
<a class="fixed-yellow-button" href="planos.html"><span>Planos</span></a> <a class="fixed-blue-button" href="equipe.html">Equipe</a>

			<img src="images/slide_4_picture.png" alt="picture" class="slide-picture"/>

		</div><!-- End First Slide -->

		<div>

		  <h3>Sistema Bake Ice FPS</h3>
			<p><em>O Sistema BAKE ICE FPS ao contrario do original não tem falhas em hacker’s , todo sistema é feito com autenticação ao Filter protocol security  é todos sem exceção são hospedados conosco em ótimas maquinas em um dos maiores data centers do Mundo. <h4><p>Selecione abaixo:</p></h4></em></p>

		  <a class="fixed-yellow-button" href="contato.html"><span>Contato</span></a> <a class="fixed-blue-button" href="brdevs.html">BrDevs</a>

			<img src="images/slide_4_picture.png" alt="picture" class="slide-picture"/>

		</div><!-- End Second Slide -->

		<div>
			<h3>Excelente Equipe de Suporte</h3>

			<p><em>Temos profissionais dando suporte aos bugs e possíveis falhas do sistema , fixamos novos hacker’s em <br /> 24 horas úteis , e garantimos a proteção dos servidores cadastrados ao nosso sistema de proteção.<br /><h4><p>Selecione abaixo:</p></h4></p>


			<a class="fixed-yellow-button" href="contato.html"><span>Report Bugs</span></a> <a class="fixed-blue-button" href="contato.html">Contato</a>

			<img src="images/slide_4_picture.png" alt="picture" class="slide-picture"/>
		</div><!-- End Third Slide -->

	</div><!-- End Content Slider Wrapper -->

		<ul id="slider-navigation" class="slider-wrapper">
			<li><a href="#">Filter Protocol Security</a></li>
			<li><a href="#">Sistema Bake Ice FPS</a></li>
			<li><a href="#">Suporte</a></li>
		</ul>
 </div><!-- End Content Slider -->
 </div><!-- Fim slide -->

<div id="footerpart">
<div id="footer">
   <div class="breadcrumb">

            

   </div><!-- .breadcrumb -->
   <div class="site-links">
       <div class="block ncsoft">
           <h3>NCsoft</h3>
           <ul>
               <li><a href="http://www.ncsoft.net/global/">NCsoft Global Corporate Site</a></li>
               <li><a href="corporate/index.html">Corporate Info</a></li>
               <li><a href="jobs/index.html">Jobs</a></li>
               <li><a href="events/index.html">Events</a></li>
               <li><a href="news/press-releases/index-2.html" class="last">Press Releases</a></li>
           </ul>
       </div>

       <div class="block legal">
           <h3>Legal</h3>
           <ul>

               <li><a href="legal/copyright-notices.html">Copyright Notices</a></li>
               <li><a href="legal/privacy-policy.html">Privacy Policy</a></li>
               <li><a href="legal/dmca-policy.html">DMCA Policy</a></li>
               <li><a href="legal/user-agreements/index.html" class="last">User Agreements</a></li>
           </ul>
       </div>

       <div class="block games">
           <h3>Games</h3>
           <ul>
               <li><a href="aion/index.html">Aion</a></li>
               <li><a href="city-of-heroes/index.html">City of Heroes</a></li>
               <li><a href="guild-wars/index.html">Guild Wars</a></li>
               <li><a href="http://www.guildwars2.com/en/" target="_blank">Guild Wars 2</a></li>
               <li><a href="lineage-2/index.html">Lineage II</a></li>
               <li><a href="http://www.wildstar-online.com/en/" target="_blank">WildStar</a></li>
           </ul>
       </div>

   </div><!-- .site-links -->
   <div class="copyright">
   	<p>© 2012 Gafree, Inc. All rights reserved, L2JUnit-Unit Store Network Solutions .</p>
   </div><!-- .copyright -->
</div><!-- #footer -->
</div><!-- fim footer  -->

</div><!-- fim div tudo -->
</body>
</html>

 

[André do Vale 76]

@manoaj

 

Como está a sua marcação HTML?

 

-- Edit:

 

Agora vi o código após a sua edição. Bom, quando postar um código no fórum coloque entre "code" (bbcode).

 

Bem, o #conteudo é filho de #tudo, mas possui uma largura maior que o pai. Reveja esses tamanhos que você aplicou no CSS (lembrando que uma DIV sem declaração de width e display sempre irá ocupar toda a largura disponível com o display block.) :thumbsup:

[Sérgio Haubman 2]

Meu velho, conforme o André falou você terá que rever os tamanhos das Divs e utilizar float, margin, padding para organizar o conteudo, também você pode retirar os left, top e z-index do css que como você por enquanto não vai usar nenhum position naum será necessário utiliza-los.

 

Abs.

 

Sérgio Martins

Front-end Developer

[manoaj 12]

ae eu já tinha arrumado o tamnaho da div tudo, ela só serve pra manter alinhado o site, antes dava certo quando não tinha tirado os position agora depois que tirei o footer funciono, mas ele ta do lado direito e o menu ta junto com ele não intendi o pq disso e não da pra alinhar parece que os codigos num servem de nada! sabe como faser-los voltarem ao lugar sem usar o posicionamento absoluto

[André do Vale 76]

O ideal seria utilizar o margin: 0 auto no #tudo. Você possui um link do que está fazendo para que possamos ajudar melhor? O código postado ficou um tanto quanto confuso, e quando analisarmos pelo inspetor conseguimos ajudar mais rápido...

[manoaj 12]

conssgui aqui galera refiz todo o codigo é vi onde estava o erro na hora de alinhar , tinha umas divs que não estavam no lugar corrento e estavam empurrando os elementos eu refiz denovo tudo e agora ta certinho , e alinhei como me falaram sem o position so usando margin float e panding deu certo :)