SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member Elysa's Avatar
    Join Date
    Nov 2005
    Location
    Dallas, TX
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool wrapping my brain around CSS

    I am a print designer trying to break into web and I am not sure exactly how to see my grid in terms of CSS. If someone could give me a quick idea of how I should do this layout I would appreciate it. Thanks

    Attached Images Attached Images

  2. #2
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    You just have to know the elements of html
    in terms of block-level or inline [-their default
    behavior in the normal cascade, or 'flow' of a page], then use css to
    change that positioning if needed. [In addition
    to any needed appearance style rules.]

    Code for Firefox; Tweak for IE.

    Have you learned any basics of CSS, or just
    wanting to have someone code this for you?
    [Plenty of willing hands, I'm sure ;-)]
    Try looking at tutorial sites, and or reading
    Paul's excellent posts, here in the CSS Forums...

    El
    F-Fox 2.0 :: WIN :: el design :: US

  3. #3
    SitePoint Member Elysa's Avatar
    Join Date
    Nov 2005
    Location
    Dallas, TX
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do know the basics of CSS the issue I am having is that my layout appears to be 2 column but I think it may need to be 3 column since my left column isn't all the way to the left - if that makes sense.

    The classes that I have currently are:
    header
    logo
    topnavbar
    leftcolumn
    right column
    footer
    bottomnavbar

    I want the logo and left column (which is really just a picture) to overlap the backgrounds behind them.

    And the other issue is the little grid structure on the right with the small pictures and text do I do anther nested left & right?

  4. #4
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Elysa,

    I'd say your layout is still only a 2-column layout. Although, you'd need a 'container' or 'wrapper' div for your left and right columns to achive that design.
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  5. #5
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    If you want more concise advice, please post
    the code you've done - online link or text ;-)
    F-Fox 2.0 :: WIN :: el design :: US

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give me some time and I'll see what I can work up for you.

    I have a 3 day weekend, so I have plenty of time to help people.

  7. #7
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    3 day weekend? Lucky for some, I'm just coming to the close of a 6 day week!

    I'm beginning to see why you got 'Member of the Month'.
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I just spent the last two weeks busting my butt off for a new client--even worked weekends.

    So I deserve this.


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
  •