SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Midwest
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi-column layout, rollover menu

    Disclaimer: I am an Internet hobbyist. I blog. I surf. I Google. I'm a recent Firefox convert. I'm certainly no geek. I have read countless coding books and websites and the information acquired manages to slip in one nostril and out the other...or something. I am new to CSS as relates to layout creation. I've incorporated CSS into my layouts before, but never have I attempted an entirely table-free layout. Now that I venture to undertake it, low and behold, I run into a snag, or shall we say more than a few.

    The broad scope of it is, I am going for a tri-column layout split vertically into two sections, a top (heavy) half, and a bottom for sub-content. At the top of the first half I am shooting for a menu, header, and three columns for main content, with the height of at least the center column if not all three columns expandable to accommodate content where needed. In the center of the bottom half I would like four columns for image display. a) I am curious as to how I can first split the layout vertically (if this is the correct approach), top half here, bottom half there, before building within these two sections, as I would base a tabled layout. b) How to create the four columns for image display is stumping me. c) Likewise, tips on menu placement/CSS rollovers are welcome. I made attempts at A List Apart's bulleted method, but somehow overlapped my buttons.

    Somewhere in my dense little brain, something hasn't clicked yet. Any assistance is greatly appreciated.



    The layout I am aiming for, as depicted in Photoshop (dimensions pretty near to scale):


  2. #2
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Midwest
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No suggestions?

  3. #3
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want working HTML and CSS?
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  4. #4
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Midwest
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tips as to how to come about that, yes. I have the idea, some [little] knowledge, but such matters as are addressed in the above text are slowing me down. For instance, the top and bottom sections, would one simply designate a "top" and "bot" div layer?

  5. #5
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to me it would be a series of floated divs. For instance, you could stack three left floated divs for the middle. The top would simply be a list that was customized to expand on the div below "identity". The bottom images again would be floated divs, probably left float, you would have to go...20,20,20,19% cause 20% would cause it to fall over to the next level.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  6. #6
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Midwest
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would anyone care to critique my progress (such as it is)?

    http://cravenlite.5u.com/layout.htm

    The fourth column overlaps at 25% yet falls short of the mark at 24%. Is there another method of expanding these columns evenly throughout the entire width of the container?

    Tips/chastisement welcome; and if I've utterly abased the name of CSS and should stop now, don't be afraid to say as much.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    The fourth column overlaps at 25% yet falls short of the mark at 24%. Is there another method of expanding these columns evenly throughout the entire width of the container?
    You can shorten all those coll styles to a quarter of the code and fix the rounding bug like this.
    Code:
    #col1,#col2,#col3,#col4 {
    background-color : #f7f7f7;
    height : 100px;
    float : left;
    width : 25%;
    }
    #col2,#col4 {background-color : #dddddd;}
    * html #col4 {margin-right:-1px}/* for ie rounding bug*/
    This replaces all your existing coll styles. (It reduces the code from 20 lines down to 7)

    Paul


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
  •