homepage Welcome to WebmasterWorld Guest from 54.243.17.133
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Setting social icons on the right
toplisek




msg:4477050
 8:53 am on Jul 19, 2012 (gmt 0)

I like to set icons on the right but have issue how why are icons not seen.

How to fix this? Need help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Utilities</title>
<link rel="stylesheet" href="css/utilities.css" type="text/css" />
</head>

<body class="body_main">
<div class="maincontent" align="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

<div id="utilitiesontheright">

<div class="utilities rss1"><a href=""></a></div>
<div class="utilities youtube1"><a ""></a></div>
<div class="utilities facebook1"><a href="" ></a></div>
<div class="utilities linkedin1"><a href="" ></a></div>

</div>

</div>

</body>


and CSS file:
#utilitiesontheright{
position: fixed;
z-index: 20;
background: url("../images/utilities_right1.png") no-repeat scroll 0 0 transparent;
top: 200px;
right: 0;
width: 37px;
height: 234px;
}
.utilities {
position: relative;
margin: 5px;
top: auto;
right: auto;
width: 32px;
height: 32px;
}
#utilitiesontheright .utilities a {
display: block;
width: 32px;
height: 32px;
}
#utilitiesontheright .rss1 {
background-position: 0 -235px;
}
#utilitiesontheright .youtube1 {
background-position: 0 -267px;
}
#utilitiesontheright .facebook1 {
background-position: 0 -299px;
}
#utilitiesontheright .linkedin1 {
background-position: 0 -331px;
}

 

Paul_o_b




msg:4477054
 9:44 am on Jul 19, 2012 (gmt 0)

Hi,

You need to apply the background-image to .utilities to start with as the background-positions you are modifying have no associated image to work with.

toplisek




msg:4477815
 2:24 pm on Jul 21, 2012 (gmt 0)

Images for icons are inside:
background: url("../images/utilities_right1.png") no-repeat scroll 0 0 transparent;

Paul_o_b




msg:4477996
 4:02 pm on Jul 22, 2012 (gmt 0)


Images for icons are inside:
background: url("../images/utilities_right1.png") no-repeat scroll 0 0 transparent;


Yes but that is the wrong element as I stated in my post above. You need to apply the background image to .utilities.

toplisek




msg:4478008
 5:43 pm on Jul 22, 2012 (gmt 0)

Can you post please all code to test?

Regards

matrix_jan




msg:4478009
 5:44 pm on Jul 22, 2012 (gmt 0)

@toplisek

You should place the socials relatively to the wrapper. The issue with your current code is that if the screen is narrow enough, the socials are gonna overlay your content. So use position: relative; for the wrapper, then position: absolute;right:-yoursocialwrapperwidth; for the "socials wrapper." Inside that just put a div with top:200 and position fixed... Et voila ;)

toplisek




msg:4478032
 7:46 pm on Jul 22, 2012 (gmt 0)

I have to test your suggestion and do not like to figure values.

Please post all code to test as there are some mistakes.

Paul_o_b




msg:4478059
 9:06 pm on Jul 22, 2012 (gmt 0)

Hi,

Here is the code. It was only only line changed.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Utilities</title>
<link rel="stylesheet" href="css/utilities.css" type="text/css" />
<style type="text/css">
#utilitiesontheright {
position: fixed;
z-index: 20;
top: 200px;
right: 0;
width: 37px;
height: 234px;
}
.utilities {
position: relative;
margin: 5px;
top: auto;
right: auto;
width: 32px;
height: 32px;
background: red url(../images/utilities_right1.png) no-repeat 0 0;
}
#utilitiesontheright .utilities a {
display: block;
width: 32px;
height: 32px;
}
#utilitiesontheright .rss1 { background-position: 0 -235px; }
#utilitiesontheright .youtube1 { background-position: 0 -267px; }
#utilitiesontheright .facebook1 { background-position: 0 -299px; }
#utilitiesontheright .linkedin1 { background-position: 0 -331px; }
</style>
</head>

<body class="body_main">
<div class="maincontent" align="left"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<div id="utilitiesontheright">
<div class="utilities rss1"><a href="#"></a></div>
<div class="utilities youtube1"><a href="#"></a></div>
<div class="utilities facebook1"><a href="#" ></a></div>
<div class="utilities linkedin1"><a href="#" ></a></div>
</div>
</div>
</body>
</html>


I used a red background so you could see it working but remove the red color when used for real.


@matrix_jan - Note that fixed position elements are always placed in relation to the viewport and are not placed in relation to any parent that has position:relative defined (unlike absolute elements).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved