...

View Full Version : CTRL + SCROLL = makes my feeds move around...



OdyOwnage
10-27-2011, 02:42 AM
Can someone assist with this one:

http://ldthf.lounh.servertrust.com/

When you hit CTRL + scroll mouse down (to make website smaller) it moves my feeds.

How do I pin them down?

HTML is here:


<!-- #################### FEEDS -->

<div id="facebook_icon">
<a href="http://www.facebook.com/pages/Natural-Radiance-Korean-Skin-Care/148960928534008" target="_blank"><img alt="" src="/v/vspfiles/assets/images/facebook.jpg" align="" border="0px"></a>
<div id="twitter_icon">
<a href="http://twitter.com/#%21/FoodForTheSkin" target="_blank"><img alt="" src="/v/vspfiles/assets/images/twitter.jpg" align="" border="0px"></a>
<div id="blogger_icon">
<a href="http://foodfortheskin.blogspot.com/" target="_blank"><img alt="" src="/v/vspfiles/assets/images/blogger.jpg" align="" border="0px"></a>
<div id="youtube_icon">
<a href="http://www.youtube.com/user/NaturalRadianceLLC" target="_blank"><img alt="" src="/v/vspfiles/assets/images/youtube.jpg" align="" border="0px"></a>
</div>
</div>
</div>
</div>

CSS is here:



#facebook_icon{
height:31px;
position:absolute;
right:600px;
top:80px;
width:297px;
overflow: none;
}
#twitter_icon{
height:31px;
position:absolute;
right:-40px;
top:0px;
width:297px;
overflow: none;
}
#blogger_icon{
height:31px;
position:absolute;
right:-40px;
top:0px;
width:297px;
overflow: none;
}
#youtube_icon{
height:31px;
position:absolute;
right:-40px;
top:0px;
width:297px;
overflow: none;

Also, is there a cleaner way to write this down? Mine looks so messy!

teedoff
10-27-2011, 02:47 AM
Probably your use of positioning(absolute) is causing your issues.

Yuu should read up on the use of floats (http://css.maxdesign.com.au/floatutorial/) for elements and then margins for spacing those elements just where you need them.

Actually, looking back over your code again, a much cleaner and easier way to code those social icons would be put them in an unordered list. You dont need to wrap each one in a div. You can then float your <li> items and use margins to nudge them where you want too.

OdyOwnage
10-27-2011, 02:37 PM
Sorry, I am still a novice. Can you point me in the right direction for the part about making it cleaner?

teedoff
10-27-2011, 04:24 PM
What I meant was, you can do something like this:


<style type="text/css">
* {
margin: 0;
padding: 0;
border: none
}

li {
float: left;
list-style-type: none;
margin-right: 10px;
}
</style>
</head>

<body>
<ul>
<li><a href="http://www.facebook.com/pages/Natural-Radiance-Korean-Skin-Care/148960928534008" target="_blank"><img alt="" src="/v/vspfiles/assets/images/facebook.jpg"></a></li>
<li><a href="http://twitter.com/#%21/FoodForTheSkin" target="_blank"><img alt="" src="/v/vspfiles/assets/images/twitter.jpg"></a></li>
<li><a href="http://foodfortheskin.blogspot.com/" target="_blank"><img alt="" src="/v/vspfiles/assets/images/blogger.jpg" ></a></li>
<li><a href="http://www.youtube.com/user/NaturalRadianceLLC" target="_blank"><img alt="" src="/v/vspfiles/assets/images/youtube.jpg" ></a></li>
</ul>

And depending on how you nest that <ul> can get the same affect with a lot less code like above.

rendezor
10-27-2011, 05:09 PM
Hi OdyOwnage... I just wanted to give a discourse, maybe you can use the following ways:
Step 1 : Change your HTML code you write above become like this :

<!-- #################### FEEDS -->
<div id="social_icon">
<ul>
<li>
<a href="http://www.facebook.com/pages/Natural-Radiance-Korean-Skin-Care/148960928534008" target="_blank"><img alt="" src="./VolusionDemoStore_files/facebook.jpg" align="" border="0px"></a></li>
<li>
<a href="http://twitter.com/#%21/FoodForTheSkin" target="_blank"><img alt="" src="./VolusionDemoStore_files/twitter.jpg" align="" border="0px"></a></li>
<li>
<a href="http://foodfortheskin.blogspot.com/" target="_blank"><img alt="" src="./VolusionDemoStore_files/blogger.jpg" align="" border="0px"></a></li>
<li>
<a href="http://www.youtube.com/user/NaturalRadianceLLC" target="_blank"><img alt="" src="./VolusionDemoStore_files/youtube.jpg" align="" border="0px"></a></li>
</ul>
</div>And then Change your CSS code you write above, become like this :

#social_icon{position:relative;left:130px;
top:-35px;margin-top:-45px;height:35px;width:251px;display:block;}
#social_icon ul li{list-style-type:none;float:left;margin:0 4px;}If you want to reposition that feed section , You can change length of margin-top and top,

Hope this help

rendezor
10-27-2011, 05:15 PM
Hoho..iam sorry teedof has been providing solutions... I'd try it myself to OdyOwnage template, and when I push reply , apparently teedof already provide solutions...

OdyOwnage
10-27-2011, 05:53 PM
The more the merrier, I will try tonight! Thanks!

OdyOwnage
10-27-2011, 06:26 PM
Fantastic! It worked!

http://ldthf.lounh.servertrust.com/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum