Welcome to WebmasterWorld Guest from 174.129.135.89

Forum Moderators: not2easy

Message Too Old, No Replies

Setting social icons on the right

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

WebmasterWorld Senior Member 5+ Year Member



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;
}
9:44 am on Jul 19, 2012 (gmt 0)

10+ Year Member



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.
2:24 pm on Jul 21, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Images for icons are inside:
background: url("../images/utilities_right1.png") no-repeat scroll 0 0 transparent;
4:02 pm on Jul 22, 2012 (gmt 0)

10+ Year Member




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.
5:43 pm on Jul 22, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Can you post please all code to test?

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

5+ Year Member



@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 ;)
7:46 pm on Jul 22, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

Please post all code to test as there are some mistakes.
9:06 pm on Jul 22, 2012 (gmt 0)

10+ Year Member



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).