[AJUDA] Posicionamento de imagens no Footer

[Wesley Rodrigues]

Olá pessoal, estou com dificuldades em posicionar duas imagens no meu footer, vou explicar o que preciso, espero que a dúvida esteja clara...

Tenho duas imagens que preciso posicionar no footer que estou usando no meu tamplate, só que estou tendo dificuldades em como fazer, vou colocar os códigos abaixo para entender melhor:

HTML: no meu código esta da seguinte forma:

<div id="footer_all"><!-- Início da div Footer All-->
<div id="footer"><!-- Início da div Footer-->
<ul>
< li><a href="#">últimas notícias</a></li>
< li><a href="#">artigos verdes</a></li>
< li><a href="#">destaque</a></li>
< li><a href="#">entrevista</a></li>
< /ul>

< div id="footer_txt"><!-- Início da div Footer TXT-->
<a href="index.php"><img src="images/imagem_186x176.png" class="imagem_186x176" alt=" " border="0" /></a>

< a href="index.php"><img src="images/imagem_177x76.png" class="imagem_177x76" alt=" " border="0" /></a>
< /div> <!-- Fechamento da div Footer TXT -->

< /div> <!-- Fechamento da div Footer -->

CSS: no meu código esta da seguinte forma:

/*FOOTER*/
#clear{clear:both;}
#footer_all{height:136px; background:url(images/footer_all_bg.jpg) repeat-x #FFF;}
#footer{width:980px; margin:0 auto; padding:15px 10px;}
#footer ul{float:right; list-style:none;}
#footer ul li{display:inline; margin:10px; font:19px "Trebuchet MS", Arial, Helvetica, sans-serif; float:left;}
#footer ul li a{text-decoration:none; color:#666666;}
#footer ul li a:hover{color:#FF3300;}
#footer_txt{float:left;}
#footer_txt . imagem_186x176{margin:0 ; padding:0; float:left;}
#footer_txt . imagem_177x76{float:right; margin:0 ; padding:0;}

O meu footer_all_bg.jpg que estou sando como principal tem o tamanho de 2x136 que sera o fundo do meu bg, e o que preciso é colocar as duas imagnes em cima dele na posição igual a da imagem aqui (http://i52.tinypic.com/2n7l7c.jpg), uma do lado esquerdo e a outra do lado direito que esta abaixo no menu.

Alguém pode me ajudar com isso? Preciso acabar o projeto e empaquei nisso...

 

Wesley Rodrigues
Web Developer
Email: wesle...@gmail.com
Site: www.bitmaisbit.com.br
Tel: (11) 8748-3369

[vinicius gomes]

Bom dia,

Utilize camadas para alocar as posições corretamente, não é dificil.

Defina uma camada para a imagem 186x174 e uma camada a direita, ambas com float left (e com um break antes porque dependendo do seu tema o footer pode parar no topo :D);

   

na camada a direita vc vai definir o css das 2 camadas(a de cima  e a camada foote_all_bg), a largura e altura do footer (ou 'auto' nos elementos) 

   

a imagem 177x76 receberá atributo float right;

 

http://oi54.tinypic.com/2s85pax.jpg

Espero ter ajudado.

Abraços!

--
Você recebeu esta mensagem por estar inscrito na lista de debates "WordPress Brasil" através do sistema Google Groups.
 
Para enviar uma mensagem: wordpres...@googlegroups.com
Para cancelar sua inscrição: wordpress-bras...@googlegroups.com
Para visitar o grupo: http://groups.google.com.br/group/wordpress-brasil?hl=pt-BR
 
Temas: http://wordpress.org/extend/themes/
Plugins: http://wordpress.org/extend/plugins/
Projeto WordPress: http://br.wordpress.org/

[Leo Baiano]

OF TOPIC.

--
Amplexos,

Leo Baiano
http://www.leobaiano.com
http://www.blog.ljunior.com
http://www.mcelebridades.com
http://www.twitter.com/leobaiano

[wesle...@gmail.com]

Ola Vinicius, obrigado pela ajuda, voce poderia me informar como isso ficaria no código?

Att,

Wesley

Enviado do meu BlackBerry® da TIM

---

From: vinicius gomes <vinigom...@gmail.com>

Sender: wordpres...@googlegroups.com

Date: Sun, 21 Aug 2011 00:58:22 -0300

To: <wordpres...@googlegroups.com>

ReplyTo: wordpres...@googlegroups.com

Subject: Re: [wordpress-brasil] [AJUDA] Posicionamento de imagens no Footer

[vinicius gomes]

Wesley,

Fazer seu codigo ficaria dificil pra mim no momento, inclusive seria bom você exercitar porque sua duvida é comum de nos depararmos no desenvolvimento de temas, vou explicar como funcionaria:

<br clear=both>

<div=>largura=186,float=left>aqui fica a imagem 186x174

<div=>largura=>(100%-186),float=left>

<div=>largura=100%>ultimas noticias

<div=>largura=100% "foote_all_bg"><imagem largura=177,altura=>76,float=right> (talvez precise definir a altura da div)

Nos temas que desenvolvo sempre funcionam, seria bom testar no ie em conjunto com outros navegadores, sempre vejo diferenças absurdas no ie com relação aos elementos dos sites.

Qualquer duvida posta ai.

abs!

[wesle...@gmail.com]

Ola Vinicius, cara não entendi muito o que vc colocou ai, eu estava pensando em colocar essas imagens em divs diferentes, isso resolveria? Chegando em casa eu vou testar essa possibilidade, mas se alguem aqui tiver uma solucao pra me passar, so preciso disso pra terminar meu template e comecar a trabalhar no wordpress :( .

Wesley

Enviado do meu BlackBerry® da TIM

---

From: vinicius gomes <vinigom...@gmail.com>

Sender: wordpres...@googlegroups.com

Date: Mon, 22 Aug 2011 05:51:07 -0300

To: <wordpres...@googlegroups.com>

ReplyTo: wordpres...@googlegroups.com

Subject: Re: Re: [wordpress-brasil] [AJUDA] Posicionamento de imagens no Footer

[vinicius gomes]

Acho que entenderá o raciocinio :(espaços para o email não ser formatado)
 
<  div id=footer_all ><!-- Início da div Footer All-->
    <  div id=footer ><!-- Início da div Footer-->
        <br clear=both >
        <  div style=width:186px float:left >< img src=0.png ><  /div>
        <  div style=width:794px float:left height:auto >
            <  div style=width:794px><ul>
                    < li>< a href=#>últimas notícias<  /a><  /li>
                    < li>< a href=#>artigos verdes<  /a><  /li>
                    < li>< a href=#>destaque<  /a><  /li>

                    < li>< a href=#>entrevista<  /a><  /li>
                <  /ul>

            <  /div>
            <  div style=width:794px float:left><img src=1.png style=width:177px height:76px float:right ><  /div>
        <  /div>
    <  /div>
<  /div>
Te aconselho a estudar mais HTML e CSS para desenvolver o layout do tema com mais segurança:
site de referencia:       http://www.maujor.com
Abraços!

[wesle...@gmail.com]

Ola vinicius, ainda estou comecando com desenvolvimento de themes para wordpress, a sua dica é válida obrigado, eu leio muita coisa no site do maujor, o cara é bom demais, aprendi muita coisa la.

Para resolver o meu problema decidi criar mais uma div para a segunda imagem e consegui, mas agradeço pela força.

Wesley

Enviado do meu BlackBerry® da TIM

---

From: vinicius gomes <vinigom...@gmail.com>

Sender: wordpres...@googlegroups.com

Date: Mon, 22 Aug 2011 20:10:51 -0300

To: <wordpres...@googlegroups.com>

ReplyTo: wordpres...@googlegroups.com

Subject: Re: Re: Re: [wordpress-brasil] [AJUDA] Posicionamento de imagens no Footer

[Alex Almeida]

Vinicius, 

O Maujor é O CARA do CSS ! :-)

Ele consegue ser mais antigo que eu na internet ! kkkkkkkkkk

Não seria melhor fazer essa formatação por fora do html, usando ID´s e posicionando a imagem dentro da DIV?

ex. 

HTML

<  div id="imagem" >< img src=0.png ><  /div>

CSS

#imagem {

width:186px;

}

#imagem img {

float:left;

}

Eu gosto de declarar no html(usando style) só o CSS que realmente necessite de algo diferente do declarado no arquivo CSS com ID´s e CLASSes.

Assim o código fica mais limpo e eventuais mudanças e manutenções futuras ficam bem mais rápidas e fáceis de fazer.

Abrax

Alex

[wesle...@gmail.com]

Ola Alex,

No html eu estou chamando as imagens por class e toda customização do posicionamento eu estou fazendo no css.

Wesley

Enviado do meu BlackBerry® da TIM

---

From: Alex Almeida <spid...@gmail.com>

Sender: wordpres...@googlegroups.com

Date: Wed, 24 Aug 2011 00:24:21 -0300

To: <wordpres...@googlegroups.com>

ReplyTo: wordpres...@googlegroups.com

Subject: Re: Re: Re: [wordpress-brasil] [AJUDA] Posicionamento de imagens no Footer

[Alex Almeida]

Pergunta: Sabes quando usar Id e qdo usar class?

Essa é uma semântica interessante de saber. :-)

Alex

[Filipe Nogueira de Souza]

id vc usa quando é algo único q vc não vai usar em lugar nenhum só ali já a class vc usa quando irá usar mas de uma vez...

no css para construir é

class é ".elemento"

div é " #elemento"

Grande Abraço

Filipe Nogueira de Souza

GTALK:  nog....@gmail.com

MSN: nog.li...@hotmail.com

SKYPE: nog_lipe

FaceBook: noglipe2

Celular (32) 9998 - 8341

[Alex Almeida]

Isso mesmo ! :-)

Importante pro mr. Google "gostar" mais de vc ter essa semãntica.

Aprendí no Maujor !

Aliás, meu aniversário é só em janeiro, mas quem quiser me dar o livro de HTML5 do Maujor.....; kkkkkkkkkkkkkkkkk

Abrax

Alex

[vinicius gomes]

Se definirem os tamanhos das camadas não terão problemas em colocar a imagem em uma div com float right, mas seria bom colocar a imagem em uma div separada, nesse caso aconselho a definir bem a largura de todos os elementos para não ter problemas com o danado do ie.

Abraços!

[Wesley Rodrigues]

Eu usei essa regra pra colocar as imagens no meu footer.

 

Wesley Rodrigues
Web Developer
Email: wesle...@gmail.com
Site: www.bitmaisbit.com.br
Tel: (11) 8748-3369

2011/8/24 Alex Almeida <spid...@gmail.com>