[SOLVED] Facebook icon (solution found here didn'work for me)

Tamara-IT · #1 Oct 9, 2011, 01:45 PM

Hello!
Can you please help? I did'n found where I did wrong.
I want to put a clickable FB icon in logo area, on the right. this is what I have in configuration:

Code:

%image %pages %logo 
<div id="facebook">
<a href="https://www.facebook.com/pages/HOTEL-POST/297445000270909" style="float:left;">
<img src="http://hotelpostbergamo.it/wp-content/themes/atahualpa/images/facebook.png" />
</a>
<span style="font-size:10px;">Seguici su Facebook per scoprire sconti e promozioni</span>
</div> %bar2

This is my custom CSS:
#facebook {
position: relative;
left: 740px;
width: 140px;
height: 0px;
}
And the result is:

lmilesw · #2 Oct 9, 2011, 06:41 PM

Without access to the site it's difficult to troubleshoot. Have you tried adding !important to the CSS?

Tamara-IT · #3 Oct 11, 2011, 03:28 AM

Hello,
!important brings it all on the left and on a single line. Tried a high z-index bit it has no effect.
I'd like to have it in the logo area on the right, now it is above.

http://hotelpostbergamo.it
I have to comment the code for the logo area from time to time because the client wante the site to be visible (I put FB icon in a txt widget now) but I want to learn how to solve the problem.

juggledad · #4 Oct 11, 2011, 06:22 AM

try this

HTML Code:

#facebook {
    height: 0;
    position: fixed;
    top: 28px;
    width: 140px;
}

you will want to play with the top number and might want to add 'right: nnpx;' and play with those numbers too.

lmilesw · #5 Oct 11, 2011, 07:02 AM

This may be a browser thing Juggledad but those numbers didn't work for me. I had to use the following if I wanted to keep the transparent area where the FB icon currently is.

HTML Code:

#facebook {
    bottom: 70px;
    height: 0;
    position: relative;
}

And if I wanted to get rid of that transparent area I used this.

HTML Code:

#logoarea {
    margin-bottom: -50px !important;
}
#facebook {
    bottom: 20px;
    height: 0;
    position: relative;
}

Again may have to play with the numbers.

Tamara-IT · #6 Oct 11, 2011, 10:02 AM

Thanks!
Both ways work, this is my final code:
Header area

Code:

%image %pages %logo 
<div id="facebook">
<a href="https://www.facebook.com/pages/HOTEL-POST/297445000270909" style="float:left;padding;6px;">
<img src="http://hotelpostbergamo.it/wp-content/themes/atahualpa/images/facebook.png" />
</a>
<span style="font-size:10px;">Seguici su Facebook per scoprire sconti e promozioni</span>
</div> %bar2

CSS

Code:

#logoarea {
    margin-bottom: -50px !important;
}
#facebook {
	left:750px;
    	bottom: 20px;
    	height: 0;
	width: 140px;
    	position: relative;
}

The result is here: http://hotelpostbergamo.it
Hope it helps some one else

Thanks again!