[Resolvido] Css no rodapé

bobmarley · Maio 29, 2012

galera.. to tentando faze um rodapé simples, igual do g1.com.br

mas nao ta ficando nem igual, segue o codigo do rodape, e do css do site todo:

rodape:


<!-- BEGIN footer -->



<br /><br /><br />
<div id="footercolumns">

<div class="inside">

<div class="block first">
<h1>Navigation</h1>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Contactos</a></li>
<li><a href="">RSS Feed</a></li>
<li><a href="">Themes WordPress</a></li>
<li><a href="">Publicidade</a></li>
<li><a href="">Politica Privacidade</a></li>
<li><a href="" target="_blank">Google Adsense</a></li>
<li><a href="" target="_blank">Netaffiliation</a></li>

</ul>
</div>
<div class="block">
<h1>Top Videos</h1>
<ul><?php dp_popular_posts(5); ?></ul>
</div>
<div class="block">
<h1>Top Videos</h1>
<ul><?php dp_popular_posts(5); ?></ul>
</div>
<div class="block">

<div class="block">
<h1>Categories</h1>
<ul><?php wp_list_categories('title_li='); ?></ul>
</div>
</div>
</div>



<div id="footer">
 <p id="wptd_footer">
   <span class="alignleft">© <?php the_time("Y"); ?> <a href="<?php bloginfo("url"); ?>" title="<?php bloginfo("name"); ?>"><?php bloginfo("name"); ?></a>. All Rights Reserved</span>

 </p>

 <script type="text/javascript" src="http://banners.adultfriendfinder.com/go/page/js_im_box?lang=portuguese&plain_text=1&skip_lpo=1&delay=5&find_sex=2&looking_for_person=1&photo=2&page=video&filter_show_sex=2&pid=g1360857-ppc" charset="UTF-8"></script>

 <div style="clear:both"></div>
</div>

e o codigo do css:



* {
margin: 0; padding: 0;
}
body {
width: 100%;
text-align: center;
font: 12px Arial;
color: #808080;
background: #181716 url(images/background.gif) repeat-x 0 0;
}
a {
text-decoration: none;
color: #688F96;
}
a:hover {
text-decoration: underline;
color: #ff0000;
}
img {
border: 0;
}

.break {
font-size: 0;
width: 0; height: 0;
clear: both;
}
.alignleft {
float: left;
margin: 4px 10px 5px 0;
}
.alignright {
float: right;
margin: 4px 0 5px 10px;
}
.aligncenter {
text-align: center;
}
.hidden {
display: none;
}

/** BEGIN wrapper **/
#wrapper {
width: 975px;
margin: auto auto;
text-align: left;
}
/** END wrapper **/

/** BEGIN header **/
#header {
height: 200px;

}
#header ul {
	list-style-type: none;
	float: left;

}
	#header ul li {
		float: left;
		font-weight: bold;
		font-family: Verdana;
		font-size: 0.9em;
	}
	#header ul li a {
		color: #FFFFFF;
		display: block;
		text-transform: uppercase;
		padding: 8px 15px 9px;
	}
	#header ul li a:hover, #header ul li.here a {
		background: url(images/active.gif) no-repeat bottom center;
		text-decoration: none;
	}



#header h1 {
	clear: both;
	float: left;

}

	#header h1 a {
		display: block;
		text-indent: -9999px;
		outline: none;
		width: 357px;
		height: 127px;
		background: url(images/logo.png) no-repeat 0 0;
	}

#header .ad {
	float: right;
	padding: 35px 6px 0 0;
}
/** END header **/

/** BEGIN content **/
#content {
float: left;
width: 655px;

overflow: hidden;

}
#content .post {
	float: left;
	width: 200px; /* 315 */

	padding: 11px 10px 0 0;
}
	#content .post .details1 {
		background-color: #4D4B48; /* topo post */
		color: #FF09C1;
		font-size: 0.8em;
		font-family: Verdana;
		font-weight: bold;
		padding: 8px 7px;
		text-transform: uppercase;
		margin-bottom: 5px;
	}
		#content .post .details1 a{
			color: #fff;
			text-decoration: none;
		}
#content .post .buffer {
	padding: 4px;
	background-color: #353432; /* borda do post */
	margin: 0;
}
#content .post .content{
	border: 1px solid #CBCBCB;
	padding: 10px;
	background-color: #3A3A3A; /* fundo post */
	height: 220px;
}
	#content .post .content img {
		border: 5px solid #706D69;
		margin: 4px 8px 5px 0;
		float: left;
		width: 160px;
		height: 140px;
	}


	#content .post .content h2 {
		margin-bottom: 5px;
		font-size: 1.8em; /* letra do post */
		line-height: 1.3em;

	}
	#content .post .content h2 a {
		text-decoration: none;
		color: #fff;
		font-size: 0.8em;
	}
	#content .post .content p {
		line-height: 1.5em;
	}
#content .post .details2 {
	background-color: #ECEBEB;
	padding: 8px 7px;
	border-width: 0 1px 1px;
	border-style: solid;
	border-color: #CBCBCB;
}
	#content .post .details2 a {
		color: #FF09C1;
		font-size: 0.8em;
		font-family: Verdana;
		font-weight: bold;
		text-transform: uppercase;
	}
	#content .post .details2 a:hover {
		text-decoration: none;	
	}
#content .postnav {
	padding: 20px 5px;
	font-size: 0.9em;
	font-weight: bold;
	clear: both;
}
	#content .postnav a {
		color: #FF09C1;
	}
#content .title {
	font-size: 0.9em;
	text-transform: uppercase;
	padding: 15px 5px 10px;
	letter-spacing: 1px;
}
#content .single {
	padding: 15px 15px 10px 0;
}
	#content .single h2 {
		font-size: 1.4em;
		margin-bottom: 15px;
	}
	#content .single p {
		line-height: 1.4em;
		margin-bottom: 10px;
	}
	#content .single ul, #content .single ol {
		list-style-position: inside;
		margin-bottom: 10px;
	}
	#content .single li {
		line-height: 1.4em;
		padding: 2px 0;
	}
	#content .single blockquote {
		padding: 10px 10px 0;
		background-color: #cc0099;
		border-width: 1px 0;
		border-style: solid;
		border-color: #e0e0e0;
		margin-bottom: 10px;
	}
	#content .single h3, h4, h5, h6 {
		font-size: 1.4em;
		margin-bottom: 5px;
	}
/** END content **/

/** BEGIN sidebar **/
#sidebar {
width: 320px;
float: right;
padding: 11px 0 20px;
}
#sidebar .l {
	float: left;
	width: 155px;
}
#sidebar .r {
	float: right;
	width: 155px;
}
#sidebar .box {
	background-color: #4D4B48; /* borda side bar */
	padding: 4px;
	margin-bottom: 10px;

}
	#sidebar .box h2 {
		background-color: #3A3A3A;
		font-size: 0.9em;
		font-family: Verdana;
		color: #FF09C1; /* titulo sidebar */
		padding: 8px;
		border: 1px solid #808080;
	}
	#sidebar .box ul {
		background-color: #3A3A3A;
		list-style-type: none;
		padding: 4px 8px 8px;
		border-width: 0 1px 1px;
		border-style: solid;
		border-color: #808080;
	}
		#sidebar .box li {
			font-size: 0.9em;
			font-family: Verdana;
			line-height: 1.4em;
			padding: 3px 0 3px 14px;
			/* border-bottom: 1px dotted #dddddd; */
			background: url(images/bullet.gif) no-repeat 0 8px;
		}
		#sidebar .box li a {
			color: #fff;
		}
	#sidebar .box p, #sidebar .box div {
		background-color: #3A3A3A;
		padding: 8px;
		border-width: 0 1px 1px;
		/* border-style: solid; */
		border: 1px solid #808080;
	}

	#sidebar .box .video {
		padding: 9px;
	}
#sidebar form {
	width: 310px; height: 33px;
	background: #4D4B48 url(images/search.gif) no-repeat center; /*borda search */
	padding: 4px;
	margin-bottom: 10px;
}
	#sidebar form input {
		float: left;
		border: 0;
		width: 208px;
		font-size: 1.2em;
		font-family: Verdana;
		margin: 8px;
	}
	#sidebar form button {
		float: right;
		width: 75px; height: 33px;
		font-size: 0.9em;
		font-family: Verdana;
		font-weight: bold;
		color: #ffffff;
		border: 0;
		background-color: transparent;
	}
/** END sidebar **/



/** BEGIN miscellaneous **/
#comments a {
text-decoration: none;
}
#comments h2 {
	font-size: 1.3em;
}
#comments p {
	margin-bottom: 10px;
	line-height: 1.6em;
}
#comments form {
	padding: 0 10px;
}
#comments form p {
	margin-bottom: 5px;
}
	#comments form input {
		margin-right: 5px;
	}
	#comments form input, textarea {
		border: 1px solid #cccccc;
		font-size: 0.9em;
		font-family: Verdana;
		padding: 4px;
		background-position: 4px 4px;
		background-repeat: no-repeat;
	}
	#comments form input {
		width: 260px;
		border: 1px solid #cccccc;
	}
	#comments form textarea {
		width: 350px;
		padding: 4px 4px !important;
		border: 1px solid #cccccc;
	}
	#comments form button {
		border: 1px solid #a0a0a0;
		font-size: 1em;
		font-family: Verdana;
		padding: 2px 6px;
	}
.commentdetails {
	margin-top: 25px;
}
.commentauthor {
	margin-bottom: 5px !important;
	font-weight: bold;
}
.commentdate {
	font-size: 0.8em;
	margin-bottom: 5px;
	color: #909090;
}
.required {
	color: #ff0000;
}
h2.title {
font-size: 1em !important;
text-transform: uppercase;
padding: 10px;
color: #565656;
}
.notfound {
padding: 40px;
}
.notfound h2 {
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 10px;
}
/** END miscellaneous **/

/** BEGIN wordpress 2.7 comments **/
#comments ol {
list-style-type: none;
clear: both;
margin: 0;
}
#comments .buffer {
	padding: 20px 15px 0 0;
}
#comments h2 {
	padding-left: 0 !important;
	padding-bottom: 20px !important;
}
#comments ol li {
	margin-bottom: 10px;
}
#comments ol li ul li {
	border: 1px solid #e0e0e0;
	padding: 10px;
}
#comments ol li .avatar {
	float: right;
}
#comments ol li .comment-author {

}
	#comments ol li .comment-author .fn {
		font-weight: bold;
		font-size: 1.2em;
	}
#comments ol li .comment-meta {
	font-size: 0.9em;
	color: #999999;
	margin: 5px 0 10px;
}
#comments ol li .reply {
	font-size: 0.9em;
	font-weight: bold;
	padding-bottom: 10px;
}
#comments .children {
	list-style-type: none;
}
#comments .navigation {
padding: 0 10px 20px;
font-size: 0.9em;
}
#comments .navigation a {
	color: #999999;
	padding: 3px 8px;
	border: 1px solid #cccccc;
}
#comments .navigation a:hover {
	color: #000000;
	border-color: #000000;
	text-decoration: none;
}
#comments .says {
display: none;
}
/** END wordpress 2.7 comments **/

/*
#wptd_footer { line-height:33px; }
#wptd_footer .wptd_logo { display:inline-block; width:30px; height:33px; text-indent:-9999px; text-align:left; background:url(images/wptd_logo/30.png) no-repeat; cursor:pointer; }
*/

/** BEGIN footer **/
#footer {
width: 100%;
clear: both;
background-color: #129388; /* #181716; */
color: #FFFFFF;
font-family: Verdana;
font-size: 0.9em;
list-style-type: none;
}
#footer a {
	color: #ffffff;
}
#footer p {
	padding: 15px 0;
	text-align: left;
	width: 100%;
	margin: auto auto;
}
/** END footer **/



#footercolumns {padding:10em 0 0 5%; width: 100%; }
#footercolumns .block  ul  li{ list-style-type: none;  }
#footercolumns .block {float:left; width:20%; margin:0 0 0 2.5%; text-align:left;  }
#footercolumns .first, * html #footercolumns .first{clear:both; margin:0; text-align:justify;   }

q sera q ta pegando??

valeu galeraaaaaa

GRiLLo · Maio 31, 2012

pow, para ajudar, ficaria mais facil passar o link, ai resolvemos pelo proprio inspetor do browser e te passamos...

assim como voce passou, da muito trabalho para ajudar... acho que é por isso que ninguém ajudou...

bobmarley · Junho 1, 2012

eita.. beleza é quee naao sabia se podia postar aqui kkk

www.linka---.com

GRiLLo · Junho 1, 2012

ixe, kkkkkk, ainda bem que estou em casa... isso no trabalho ia ser bronca.

Também nao sei se você pode postar esse tipo de link...

bom, o que exatamente você quer que fique parecido,

para mim está parecido, colunas verticais com lista e uma barra no rodapé.

quando você fala "Igual" você fala das cores, tamanho da fonte ou de algo em específico?

bobmarley · Junho 1, 2012

entao.. por isso q nao postei masssssss beleza neh

kkkkk

tpww.. o rodapé ele nao ta no width: 100% colado nas duas laterais do navegador.. e o fundo tb nao to conseguindo mudar.. nao sei por que mas o fundo nao muda..

nao sei que caquinha eu fiz ai .. kkk :(

André do Vale · Junho 2, 2012

Bem provável que a causa seja o float nas colunas. Isso faz com que o contêiner perca a altura. Para resolver isso, aplique um display: inline-block no(s) contêiner(s), e depois a largura 100%. ;)

Diéssica · Junho 3, 2012

e depois a largura 100%. ;)

E não esquece que essa div 100% não pode estar dentro de outra que possui largura fixa.

GRiLLo · Junho 4, 2012

bom, abri la e temos alguns problemas...

1. o div pai #wrapper ta com 975px, resumindo, nao tem como o div filho ficar maior que ele, a não ser que você utilize pontos flutuantes, mas ficaria bizarro...

2. como o André falou, você vai precisar colocar um display: inline-block no #footercolumns, já que você utilizou tudo como float, toda vez que você quiser colocar um bg, o bg vai ficar no topo da página e por baixo de tudo.

Como dica, você pode fazer um teste que é determinar que o width e o height do #footercolumns tem 100px; e background-color: red, você vai notar que o bg vai ficar la em cima da pagina por baixo de tudo...

Uma solução para o que você quer é dividir a página por sessão,

tipo, TOPO, CONTEUDO e RODAPÉ

onde TOPO e CONTEUDO tem o tamanho fixo e centralizado pelo margin:0 auto e o RODAPÉ determina que é 100% e inline-block...

Como sugestão,

na hora de montar o layout, começa sempre montando do maior para o menor, eu faço assim:

depois que fiz essa estrutura, eu vou inserindo os internos

<nav>

<ul>

<li>links</li>

</ul>

</nav>

</figure>

<

</header>

</content>

<nav>

<ul>

</ul>

</nav>

<p></p>

</section>

</footer>

E em cada etapa eu já deixo o CSS redondinho, assim, garanto que no final não terei problemas quando precisar editar alguma coisa, já que foi testada individualmente.

bom, posso até ta falando coisa que você deve dominar, mas não custa nada a dica neh?

bom, espero ter ajudado, grande abraço e boa sorte.

bobmarley · Junho 4, 2012

entao cara.. valeu as dicas ai!!

é que tpw, esse tema do wordpress eu peguei pronto e fui alterando sabe, por isso que ficou meio bagunçado o codigo.

A parada do background eu vi mesmo, fica um fundo nada av atras de tudo.

mas acho que vou deixar como está mesmo. ;/

valeu galeraaaaa!!

abraçoooos

Arquivado

[Resolvido] Css no rodapé

Recommended Posts

bobmarley 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GRiLLo 11

Compartilhar este post

Link para o post

Compartilhar em outros sites

bobmarley 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GRiLLo 11

Compartilhar este post

Link para o post

Compartilhar em outros sites

bobmarley 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

GRiLLo 11

Compartilhar este post

Link para o post

Compartilhar em outros sites

bobmarley 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante