1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS positioning

Discussion in 'CSS' started by robokoder, Nov 1, 2005.

  1. #1
    I'm having trouble positioning elements within a new template I am designing at http://fusionnx.com/style.
    SEMrush
    There are two issues: the first is the navigation bar at the top of each page. Although it looks fine when I view it in full screen on most screens, if you see it on a narrower screen, or resize your browser, the links get hiddden behind the logo. I reckon it is because of the position:absolute attribute, but I would like to know how I can solve this problem whilst still having the links in the top left. Can't the screen just scroll?

    The second problem is with the footer (the small links and validator images). I can't get it to display in the center of the screen, even with html attributes and a lot of CSS playing around. How can it be done? If you need the CSS source you can find it's location (there are three files) in the html source. The site uses php, but this shouldn't get in your way if you need to see any code.

    If you need any more info please ask- I really need this problem sorted out for a deadline.

    Thanks for any help in advance!
     
    robokoder, Nov 1, 2005 IP
    SEMrush
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This will center your footer:

    #footer {
    position: absolute;
    right: 20%;
    left: 20%;

    text-decoration: none;
    ...

    J.D.
     
    J.D., Nov 1, 2005 IP
  3. robokoder

    robokoder Peon

    Messages:
    146
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Nope, it centers the validate links in comparison to the text links above them, but it is still showing some way over to the left on my screen
     
    robokoder, Nov 1, 2005 IP
  4. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I checked and setting left and right will center your footer div. Add a border to #footer to see it for yourself:

    border: 1px solid red;

    If you don't see the border, then your old stylesheet is cached somewhere.

    J.D.
     
    J.D., Nov 1, 2005 IP
  5. robokoder

    robokoder Peon

    Messages:
    146
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    It really isn't centering the footer- I've done it and put it up online.

    I still see it over to the left.

    Please help!
     
    robokoder, Nov 2, 2005 IP
  6. mcfox

    mcfox Wind Maker

    Messages:
    7,527
    Likes Received:
    716
    Best Answers:
    0
    Trophy Points:
    360
    #6
    I see it centered.
     
    mcfox, Nov 2, 2005 IP
  7. robokoder

    robokoder Peon

    Messages:
    146
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    centered in the page? What resolution are you using?
     
    robokoder, Nov 2, 2005 IP
  8. wrmineo

    wrmineo Peon

    Messages:
    3,087
    Likes Received:
    379
    Best Answers:
    0
    Trophy Points:
    0
    #8
    wrmineo, Nov 2, 2005 IP
  9. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Ok, it is centered in FF and Opera, but shifted to the left in IE. Hang on, I will check what's wrong with IE.

    J.D.
     
    J.D., Nov 2, 2005 IP
  10. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #10
    IE doesn't expand the div to satisfy left and right constraints, which results in the box shifted to the left. It's as if MS folks never read the CSS spec! Setting width explicitly should do the trick:

    #footer {
    position: absolute;
    right: 20%;
    left: 20%;
    width: 60%;

    J.D.
     
    J.D., Nov 2, 2005 IP
  11. robokoder

    robokoder Peon

    Messages:
    146
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thanks- i'll get it done right now and report the results (I have to use IE at work on breaks)
     
    robokoder, Nov 3, 2005 IP