| thalo |
Aug 27, 2010 11:07 PM |
[SOLVED] invisible floating buttons in %logo area
I am working on placing my own icons to link to other sites. I have looked around to find the easiest way to do this and decided to try using the tutorial HOWTO: float a button over the header and have it change when hovering.
I was successful with putting in one of my buttons and moving it into place. i did move it from the header area to the %logo area. i figured if i duplicated the codes, changing the necessary names and files, i should be able to do this more than once to place multiples side by side. when i finished it all the space holders were there, but they were not side by side, and they were blank.
here is the site: http://colbystott.com . if you mouse over an area just to the left of the rss icon you will find one (the first) icon. the other two are on the left side, just above the home button and stacked vertically.
here is the code in the ATO>Style and edit HEADER AREA>Configure Header Area:
Code:
%image %logo
<div id="my_linkedin">
<a id="my_linkedin_image" href="http://www.linkedin.com/pub/colby-stott/6/222/592"><img src="./wp-content/themes/atahualpa/images/linkedin_blank.gif" alt="LinkedIn"></a>
</div>
<div id="my_facebook">
<a id="my_facebook_image" href="http://www.facebook.com/?ref=home#!/profile.php?id=631895698"><img src="./wp-content/themes/atahualpa/images/facebook_blank.gif" alt="facebook"></a>
</div>
<div id="my_flickr">
<a id="my_flickr_image" href="http://www.flickr.com/photos/47141901@N04/"><img src="./wp-content/themes/atahualpa/images/flickr_blank.gif" alt="flickr"></a>
</div>
%pages %cats
and that added into the CSS Inserts area:
Code:
/*-----------------------------------------------------------*/
/*---------------- MY link button CSS - START --------------*/
/*-----------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*-- This positions the block that holds the buttons --*/
/*-- change the margin-right/left %'s for horizontal position --*/
/*-- change the margin-top to control the vertical position --*/
/*---------------------------------------------------------------*/
div#my_linkedin {z-index: 4; position: relative; float: left; width: auto; margin-right: 10%; margin-left: 90%;
margin-top: -68px;
div#my_facebook {z-index: 4; position: relative; float: left; width: auto; margin-right: 20%; margin-left: 80%;
margin-top: -68px;
div#my_flickr {z-index: 4; position: relative; float: left; width: auto; margin-right: 30%; margin-left: 70%;
margin-top: -68px;
}
/*--------------------------------------------*/
/*-- This defines the space for the buttons --*/
/*--------------------------------------------*/
a#my_linkedin_image img {
height: 16px; width: 16px; border-width: 0; z-index:999;}
a#my_facebook_image img {
height: 16px; width: 16px; border-width: 0; z-index:999;}
a#my_flickr_image img {
height: 16px; width: 16px; border-width: 0; z-index:999;}
/*--------------------------------------*/
/*-- This is the normal buttons image --*/
/*--------------------------------------*/
a#my_linkedin_image img {
background: url(./wp-content/themes/atahualpa/images/linkedinLinkIcon16px.png) top left no-repeat;}
a#my_facebook_image img {
background: url(./wp-content/themes/atahualpa/images/facebookLinkIcon16px.png) top left no-repeat;}
a#my_flickr_image img {
background: url(./wp-content/themes/atahualpa/images/flickrLinkIcon16px.png) top left no-repeat;}
/*-------------------------------------*/
/*-- This is the hover buttons image --*/
/*-------------------------------------*/
a#my_linkedin_image:hover img {
background: url(./wp-content/themes/atahualpa/images/linkedinLinkIcon16px_hover.png) top left no-repeat;}
a#my_facebook_image:hover img {
background: url(./wp-content/themes/atahualpa/images/facebookLinkIcon16px_hover.png) top left no-repeat;}
a#my_flickr_image:hover img {
background: url(./wp-content/themes/atahualpa/images/flickrLinkIcon16px_hover.png) top left no-repeat;}
/*------------------------------------------------------------*/
/*---------------- MY login button CSS - END ----------------*/
/*------------------------------------------------------------*/
can someone please advise how to make my icons show up, and position them side by side.
cheers
colby |
