Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CTRL + SCROLL = makes my feeds move around...

    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:

    Code:
    <!-- #################### 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:

    Code:
    #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!

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Probably your use of positioning(absolute) is causing your issues.

    Yuu should read up on the use of floats 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.
    Last edited by teedoff; 10-27-2011 at 02:52 AM.
    Teed

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry, I am still a novice. Can you point me in the right direction for the part about making it cleaner?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    What I meant was, you can do something like this:

    Code:
    <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.
    Teed

  • Users who have thanked teedoff for this post:

    OdyOwnage (10-27-2011)

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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 :
    Code:
    <!-- #################### 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 :
    Code:
    #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

  • #6
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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...

  • Users who have thanked rendezor for this post:

    OdyOwnage (10-27-2011)

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    The more the merrier, I will try tonight! Thanks!

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Fantastic! It worked!

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •