GoFuckYourself.com - Adult Webmaster Forum

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - CSS help (https://gfy.com/showthread.php?t=1056438)

Mutt	02-06-2012 07:51 AM

CSS help

fuck CSS, all i'm trying to do is add some link text to the right of these icons and no matter what I try the link text ends up going under the icons on a new line.

how can i get the text to the right of the icons?

Code:

 <ul>

                    <li><a href="#."><img src="images/facebook.png" alt="" /></a></li>

                     <li><a href="#."><img src="images/linkedin.png" alt="" /></a></li>

                      <li><a href="#."><img src="images/twitter.png" alt="" /></a></li>

                    </ul>

fris	02-06-2012 07:58 AM

i would do it a different way.

example

Code:

html example



<div id="footer">

    <ul>

                <li><a href="http://www.gfy.com/feed/" class="feed" title="Subscribe to the GFY feed">Feed</a></li>        

    </ul>

</div>



css for this



#footer ul li a {

    display: block;

    float: left;

    padding: 3px 15px 3px 12px;

    color: #999;

    text-decoration: none;

}



#footer ul li a.feed {

    background: url(images/icon_feed.gif) 0 60% no-repeat;

}



#footer ul li a:hover {

    color: #4E677A;

    text-decoration: underline;

}

of course you would have to take into consideration the size of your icon.

Mutt	02-06-2012 08:02 AM

Quote:

Originally Posted by fris (Post 18737696)

i would do it a different way.

example

Code:

html example



<div id="footer">

    <ul>

                <li><a href="http://www.gfy.com/feed/" class="feed" title="Subscribe to the GFY feed">Feed</a></li>        

    </ul>

</div>



css for this



#footer ul li a {

    display: block;

    float: left;

    padding: 3px 15px 3px 12px;

    color: #999;

    text-decoration: none;

}



#footer ul li a.feed {

    background: url(images/icon_feed.gif) 0 60% no-repeat;

}



#footer ul li a:hover {

    color: #4E677A;

    text-decoration: underline;

}

of course you would have to take into consideration the size of your icon.

thanks, gonna add the float left

grumpy

02-06-2012 08:02 AM

<li><NOBR><a href="#."><img src="images/facebook.png" alt="" /></a></li>

or set in css white-space: nowrap;

fris	02-06-2012 08:03 AM

Quote:

Originally Posted by Mutt (Post 18737706)

thanks, gonna add the float left

http://jsfiddle.net/r2HY3/

here is a live example of this.

redwhiteandblue

02-06-2012 08:08 AM

Try

li a img {display:inline;}

Mutt	02-06-2012 08:26 AM

dumb me - the <li>'s had a width that was too small to fit the text in one line

thanks for the CSS tips

All times are GMT -7. The time now is 03:56 AM.