SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict JamieJelly's Avatar
    Join Date
    Jan 2004
    Location
    London
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    an inspiring design but in CSS?

    Hi,
    I came across a really neatly designed site http://www.blueidea.com/download/product/2003/627.asp and I really like the layout of information in the site (although being in another language means nothing to me).

    I was interested in playing around with laying out some sample designs in a similar structure to this but how could such a complicated design be achieved using CSS?

    It is does not appear a straight forward two column design because of the horizontal bars that span the entire width of the container.

    Any ideas?
    International calls from the UK
    Cheap International Calls

  2. #2
    The MacGyver of Design bronze trophy Johan Dahlström's Avatar
    Join Date
    Oct 2004
    Location
    Uppsala, Sweden
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're familliar with some more "advanced" CSS, this would'nt be much of a problem. But it's sure gonna need some heavy adjustments since the current page is table based. I can't give you any direct tips or solutions since it's quite an advanced layout that needs some time to understand. But try nesting elements and take advantage of the divs 100% spanning along with the floating property.

    Play around and see what happens, I'm sure you'll work it out .

  3. #3
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I myself am still learning layouts with css. But, I imagine this would be much easier to make with css than it would be with tables (also easier to maintain and read).

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    That's a pretty easy one to do with CSS. For something slightly similar, you might want to take a look at http://sken.be/ (use your own code/images though).

  5. #5
    SitePoint Addict JamieJelly's Avatar
    Join Date
    Jan 2004
    Location
    London
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Vinnie, I was getting in to a right pickle on this one. Do you think you could explain the purpose of the inner div and the <br class=clear /> for me please?
    International calls from the UK
    Cheap International Calls

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JamieJelly
    thanks Vinnie, I was getting in to a right pickle on this one. Do you think you could explain the purpose of the inner div and the <br class=clear /> for me please?
    The <br class="clear" /> allows for anything under content that is floated into place to fall underneath it.

  7. #7
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    The <br class="clear" /> allows for anything under content that is floated into place to fall underneath it.
    Is it an already defined class? Or do we need to specify something using css?

    Code:
    .clear {
            something: something;
    }

  8. #8
    SitePoint Addict JamieJelly's Avatar
    Join Date
    Jan 2004
    Location
    London
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the style sheet has the following entry:

    .clear {
    clear: both;
    }

    thanks Vinnie
    International calls from the UK
    Cheap International Calls

  9. #9
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JamieJelly
    the style sheet has the following entry:

    .clear {
    clear: both;
    }

    thanks Vinnie
    Thanks! I should have seen that coming


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
  •