Welcome to WebmasterWorld Guest from 54.163.25.166

Forum Moderators: not2easy

Message Too Old, No Replies

Setting social icons on the right

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 994
votes: 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;
}
9:44 am on July 19, 2012 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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 July 21, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 994
votes: 0


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

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4



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 July 22, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 994
votes: 0


Can you post please all code to test?

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

Preferred Member

5+ Year Member

joined:Mar 27, 2010
posts:423
votes: 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 ;)
7:46 pm on July 22, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 994
votes: 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.
9:06 pm on July 22, 2012 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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