SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbee needs help with Layout

    I have a framed page that I want to convert to a page using divs so that it is one whole page. I have been using CSS for a while but am having a hard time grasping the DIV tag and how to go about using it in places where I used to use tables for layout. The page that I am trying to convert is www.boathousetimes.com

    What I am thinking I should do is recut the image in Photoshop so
    1. The top image is contained in one div across the top (divHeader)
    2. Then I will place another div under it, align it left, make it 130px wide and place the vertical image in that div (divLeftNav)
    3. Then using css INLINE place the third div (divTopNav) next to divLeftNav
    4. Then place a 4th div under divTopNav and call it divContent.


    My plan then is to use the "Set Text To layer" to simulate the same action that I was achieving with the frames. That is the page does not completely reload, only the divContent.

    Thoughts would be greatly appreciated.

    Cheers

  2. #2
    SitePoint Wizard mcsolas's Avatar
    Join Date
    Jul 2004
    Location
    Hermosa Costa Rica
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like you know what you need to do .. I would suggest looking into template css layouts such as this:

    http://www.thenoodleincident.com/tut...son/boxes.html
    Taking into account the structure of your content, I might suggest this one

    There may be some newer css layout sites but that one is good to just get a feel for the landscape as its well put together visually.

    As for trying to mimic a frame set ? You can if you want, I have never had such incinations to even act like I use frames

    Also, a great site to just draw inspiration > www.csszengarden.com
    Good source code there .. take a look. Div tags galore.

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should probably use SSI or PHP includes.

    Reloading the page doesn't take long if most of the files needed for the page are already cached on the user's computer.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    I just wanted to mention Option C, which is to try
    and let go of the table-based layout mentality altogether!
    You can get similar to this - probably even exact, but
    if you're ready to jump into CSS, it might be worth your
    while to really get wet!

    Take a look at some sites that look similar to your current
    one but use divs, paragraphs, background images, etc. to
    get the effects without the coding overload of tables...

    If you try too hard to make a perfect replica, I think you'll
    be getting some headaches down the road! [And beware
    of thinking that absolute positioning is something to be used
    liberally for control - eek.]

    Good luck,
    El
    F-Fox 2.0 :: WIN :: el design :: US


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
  •