SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to tackle this layout?

    hey guys,

    im working on a new site, layout here: http://img508.imageshack.us/img508/379/layoutyj7.jpg

    i'm having some trouble deciding how i should tackle this.
    the main problem is those top 3 boxes under the navigation. they have rounded corners and a soft pinkish glow. id like them to be %-based in width and all the same height. i've tried to use a few different javascripts to achieve this (niftycorners, ruzee) but i end up making a mess of things. can this be done using css/background images only?

    another question i had was regarding <select> lists... is there a way to restyle that dropdown box completely or am i looking at a bit of javascript for a custom one?

    thanks for any insight!

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can style the drop down box, but I seriously wouldn't recommend it.

    It is physically impossible to make a form element look exactly the same in all browsers. My advice would be to keep form styling to an absolute minimum. Search around Google for more on this.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, ill probably still play around with styling it, but only to see just how bad it is haha. thanks for letting me know!

    does anyone have any ideas on the 3 boxes?

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have, for example, h1 or h2 or h3 tags at the top of each block you could set these tags to a class and apply this:

    Code:
    h1.classname {
    display: block;
    background: url(LOCATION OF TOP PART OF ROUNDED SQUARE) no-repeat;
    }
    And then for the actual DIV apply the the bottom part:

    Code:
    #divname {
    background: url(LOCATION OF BOTTOM PART) no-repeat left bottom;
    }
    That should work... - but it will only work if you have the required h1, h2 or h3 tag at the top (or any other tag) ---


    PLUS you could always just make a DIV inside a div and then do the same... but i think that is unnecessary markup...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks that pretty much worked for me!


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
  •