Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member Linkforever1's Avatar
    Join Date
    Nov 2012
    Posts
    4
    Member #
    33892
    I just added some code that was provided from a website in order to implement a featured slider into my page.

    Everything went well until I ran into the problem of positioning it on the page. I'm able to center it manually and it looks centered on my resolution...but for others it looks way off..

    The things that I need to center are the .fp-post and .fp-nav (based on tinkering around)
    I set the margins to 80% for one and the left padding to 30% for the other which works for my resolution but doesn't work at all for other resolutions...

    Here's the css for the featured posts:

    .featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
    .fp-slides{}
    .fp-post{padding-top:0px; margin: 0 0 0 80%;}
    .fp-thumbnail{border:0px solid #dddddd; width:710px;height:336px;margin-bottom:10px;overflow:hidden;}
    .fp-thumbnail:hover{border:0px solid #CAC9C9; width:710px;height:336px;margin-bottom:10px;overflow:hidden;}
    .fp-title{color:#787878;font:bold 14px Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
    .fp-title a{color:#000;text-decoration:none;}
    .fp-title a:hover{color:#0080fF;text-decoration:none;}
    .fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
    .fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
    .fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
    .fp-nav{width:590px;padding-bottom:80px;padding-left:30%;height:14px;}
    .fp-pager a{background-image:url(http://4.bp.blogspot.com/-Bc53drZbsO...ter;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;f loat:left;overflow:hidden;text-indent:-999px;background-position:0 0;}
    .fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
    .fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;backg round:url(http://2.bp.blogspot.com/-xrvnRlI02a...tured-prev.png) top left no-repeat;}
    .fp-prev:hover{opacity:1;}
    .fp-prev:active{opacity:0.7;}
    .fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(http://1.bp.blogspot.com/-UzsUMLmRXT...ured-next.png;) top left no-repeat}
    .fp-next:hover{opacity:1;}
    .fp-next:active{opacity:0.7;}

  2.  

  3. #2
    Junior Member
    Join Date
    Nov 2012
    Posts
    9
    Member #
    33943
    Liked
    1 times
    I'm actually having the same exact problem for centering text and my navigation area within certain images that are only in place for a specific resolution. Setting margins makes no difference in the issue. I think centering it manually is the real problem. Going to have to figure out a way to center it while maintaining the margins that you have set. I'll let you know if I figure something more out.

  4. #3
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    You should be using margin:0 auto; which will set the top and bottom margin to 0 and allow the browser to automatically calculate the left and right margin (which will adjust for any resolution or window size).
    Freelance Web Developer

  5. #4
    Junior Member
    Join Date
    Nov 2012
    Posts
    9
    Member #
    33943
    Liked
    1 times
    Is it a similar issue with the text in this site that I'm having? http://studioarctesting.com/
    Drag the page to a different size and you'll see. If that's the case, don't give the id to the image that it is going to be sitting on top of, but give the id to the list tag or div that they are both placed within and you should get the correct effect. I hope this helps. I got my solution thanks to TheGAME1264.

    *I have since fixed the stationary text issue I was having similar to the stationary featured content you were having, but still, give the fix a shot. I hope it works. I can always change it back real fast so you can see what happened if it helps.
    AlphaMare likes this.

  6. #5
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Psyxx, post: 244473
    Is it a similar issue with the text in this site that I'm having? http://studioarctesting.com/
    Drag the page to a different size and you'll see. If that's the case, don't give the id to the image that it is going to be sitting on top of, but give the id to the list tag or div that they are both placed within and you should get the correct effect. I hope this helps. I got my solution thanks to TheGAME1264.
    Nice to see credit given! You rock.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com