Help with CSS problem

  • jinsan

    (@jinsan)


    20 years ago

    https://reviews.sekhu.net/

    Hey it’s me again, you know love me.

    Anyway, I’ve been doing my head in trying to get the site to work for me the way I want. I’ts CSS valid, it’s XHTML valid. But it’s not design valid.

    In FF (and IE, I dunno) note the bar below the header image and above the navbar.

    What I am trying to do is get the footer closer in, so that page is static and doesn’t scroll. Right now it has a 2-3px scrolling which is driving me round the bend.

    I think this is where the problem is…

    #masthead {<br />
    position: relative;<br />
    top: 5px;<br />
    background: #99CC66 url('images/masthead.jpg') no-repeat;<br />
    width: 513px;<br />
    height: 250px;<br />
    margin-left: 0px;<br />
    margin-top: -6px;<br />
    }

    #navbar {<br />
    background: url('images/navbar.jpg') no-repeat;<br />
    position: relative;<br />
    left: 0px;<br />
    top: 0px;<br />
    width: 513px;<br />
    height: 46px;<br />
    margin-bottom: 15px;<br />
    padding: 0px;<br />
    text-align: center;<br />
    }

    I’ve tried to add a margin-top: -5px to the navbar – but it “borks” the page and everything shifts including the background. I do a margin-bottom: -5px and it does the same. Changing the min-height also does the same thing.

    I’ve been trying to get the footer closer to the top and it worked increments and then after which it starts messing up.

    Can someone help? Thanks in advance

Viewing 8 replies - 1 through 8 (of 8 total)

  • ” so that page is static and doesn’t scroll.”

    Not sure what you mean .. I have a 1024*768 screen size – should I be seeing a scroll ?

    Thread Starter jinsan

    (@jinsan)

    er…..

    Hmmm….

    There shouldn’t be a scroll bar on the right. Ok let me clear that bit. I know user will need to scroll to view the content depending on the length of the content, as of now the page doesn’t have a lot of content so the page shouldn’t have that extra 2-3px vertical scroll on the scroll bar. Which it does – if I can fix the bar at the top then I think it will fix the page. Basically ignore the scroll ramble ??

    Any ideas on what to do to fix the flaw in the gap between header and navbar?

    https://www.tamba2.org.uk/downloads/jinsan.jpg

    By flaw, do you mean that horizontal bar just above the nav links ?

    (It’s your design … you know what you mean, but I don’t -if you see what I mean). the scroll is there too.

    If it is that bar, play with the values in #masthead

    (Btw, I really like your design !)

    lawtai

    (@lawtai)

    ideally, you should be able to achieve what you’re trying to do without -px’s. Don’t forget that you need to take into account extra pixels that are created by any borders you add, so you could be a few pixels off here and there with the more borders you have.

    simdesigns

    (@simdesigns)

    From what I can see, your page doesn’t need positioning to achieve the look it has now. It’s postioning that usually messes up a perfectly good CSS layout. Try stacking the divs one on top of the other, don’t use height attributes unless neccesary, and to get the box with a box look, use a or a <div> within a div with padding set to whatever values you want, and text-align for the outer container set to center.

    Your space problem is probably a direct result of some margin or padding you set before, coupled with the positioning thing.

    See if that helps.

    Root

    (@root)

    Well I am not surprised. As I read the markup #masthead opens and closes with nothing in it. The CSS will have no effect.

    Thread Starter jinsan

    (@jinsan)

    @simdesigns – I’m having to use the height attribute for both the masthead and the navbar, otherwise it disappears. Though I’m interested in hear about your div within a div idea, an example would be?

    @root could you elaborate?

    @podz – that’s the bugger I’m trying to fix. However, what I found was playing with the masthead values and vnavabr to align almost worked. The only time the page messes up is when the gap is removed – so there’s some extra pixels I think, but I can’t figure out where.

    I did the theme for my blog site here: https://sekhu.net/wp/ where it does work – but with this I reduced the min-height (remoing it borked the page) and reduced the size of the masthead image and some other changes.

    Think I might just scrap it and leave it be, I don’t think it’s a theme that could really be used by anyone other than someone who visits mcdonalds or owns a farm, or knows a man named mcdonald who owns a farm….ah well

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Help with CSS problem’ is closed to new replies.