CSS help - GoFuckYourself.com

Mutt · 02-06-2012, 07:51 AM

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

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

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

02-06-2012, 07:51 AM	#1
Mutt Too lazy to set a custom title Industry Role: Join Date: Sep 2002 Posts: 34,431	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> __________________ I moved my sites to Vacares Hosting. I've saved money, my hair is thicker, lost some weight too! Thanks Sly!

02-06-2012, 08:08 AM	#6
redwhiteandblue Bollocks Industry Role: Join Date: Jun 2007 Location: Bollocks Posts: 2,793	Try li a img {display:inline;} __________________ Interserver unmanaged AMD Ryzen servers from $73.00

02-06-2012, 08:26 AM	#7
Mutt Too lazy to set a custom title Industry Role: Join Date: Sep 2002 Posts: 34,431	dumb me - the <li>'s had a width that was too small to fit the text in one line thanks for the CSS tips __________________ I moved my sites to Vacares Hosting. I've saved money, my hair is thicker, lost some weight too! Thanks Sly!

02-06-2012, 08:02 AM	#4
grumpy Too lazy to set a custom title Join Date: Jan 2002 Location: Holland Posts: 9,870	<li><NOBR><a href="#."><img src="images/facebook.png" alt="" /></a></li> or set in css white-space: nowrap; __________________ Don't let greediness blur your vision \| You gotta let some shit slide icq - 441-456-888