SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Some CSS Advice

    Well I finally got around to starting the design phase of my companies website. I've almost got the layout finished in photoshop, and decided to start working on the code end of things. Well ive already hit a small speed bump. Seems the way i want to do it is not going to be the easiest thing in the world to pull off.

    So im just looking for advice. Just links to some articles maybe, or just a bit of push in the right direction. Now before i start attempting to describe what i would like to pull off, let me show ya the design:

    http://random.m2edesigns.com/M2ESneak.jpg

    Well in the image above, you will notice 3 distinct parts to the design. The first is the top bar, which is the Client Control Panel, a custom control interface im going to start work on, that will be coded in PHP, that will give my clients a way to see the status of there project, and control payments, there account, etc.

    The top bar on the page will be a way to let clients visiting the site know about there current messages, and updates. I would like this bar to sit at the very top, and of course expand to fill there browsers width.

    The next section is the main content area. Here is where the actual site itself sits. This section i want to fill the width between the top bar and the footer(ill get to it in the next part of this description) and be the only part of the site that scrolls. The BG of the main content area, the Circles, will be fixed, and then the white section in the middle will scroll.

    If that description makes no sense, (trust me this is the 10th time ive written this, and it still barely makes sense in my own head) then here is an image i made. I took the photoshop design, and a screen shot of my browser, and put them together to try and show what im talking about.

    Photoshop Made Browser Image

    And finally the footer. I want it to sit at the bottom of the browser window, as you can see from the image above. I think thats fairly clear, i think XD

    If ya need any more in depth descriptions just let me know. As i said at first, just advice is all i'm asking for. Ive already started trying on my own, currently to no avail, as you can see here: http://m2edesigns.com/design.html

    So thanks in advance for even reading this :P And double thanks to anyone who has any advice. Someone might have seen this around other forums i visit, thats cause this is very important to me. I'm asking lots of places to get as much advice as i can. I'm reading 3 css books currently, and 2 php ones, trying to learn as much as i can, but still theres some things i cant find on my own, just need a nudge in the right direction

    Thanks,
    Corey

    EDIT: Ok looking around this site more, i found this: http://www.pmob.co.uk/temp/3colfixedtest_4.htm XD it just about solves all my problems. Im a dolt. Still any extra advice would rock. Most of the 3 column layouts I've found didn't help much, this one just about solved it....
    Last edited by M2EDesigns; Feb 27, 2007 at 07:05. Reason: Editing cause im an idiot...

  2. #2
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, well it i think it will solve my problem XD not working so far... hmm if im getting it right, i could use negative margins to make room for the header and footer... yet when i try that its not working. I tried it on the page wrapper, and the content area wrapper.

    Hmm looks like i still need advice after all :P If ya want to see my work, use the link above, http://m2edesigns.com/design.html to see it as i work on it.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Perhaps it would be better if you pick one specific issue that you need to get right first and then we can take it from there. At present it looks like you are asking for the code for the whole layout which is a little bit more than just helping out.

    Detail one problem and what you want to happen and you will more than likely get better replies.

    I should point out that it looks like you are after fixed positioning which ie6 won't do without hacks and even with hacks is a little unreliable in certain situations.

  4. #4
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea i figured my long explanation would lead to confusion XD

    I was just hoping for advice, or links to designs, that did kinda what i was after, which is a fixed header (which i guess is a dream that wont work well), a fluid content section, and a fixed footer.

    I thought i had found my answer with your 3 column layout, by using negative margins, but its not working.

    Im thinking then just having it fill the browser window as normal when there is not enough content to fill it, then let the whole page scroll when there is. I dont want to get into too many hacks, so i guess ill have to scale down what i wanted a bit.

    So i guess the one problem i have is really just getting it to fill the screen when theres not enough content. The rest i should be able to pull off.

    And thanks alot

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    So i guess the one problem i have is really just getting it to fill the screen when theres not enough content
    You can use a 100% high container (only once per page) to give you the full height and judicious use of background images.

    e.g.
    http://www.pmob.co.uk/temp/3col-centred-template6.htm

    If you look at the faq on 100% height and the section on putting a footer at the bottom of the page you should be able to work out the techniques needed.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    See also all4nerds reply in this post which uses the same techniques but with a slightly different approach.

    http://www.sitepoint.com/forums/showthread.php?t=463039


Bookmarks

Posting Permissions

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