SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post CSS Problems - Design to CSS

    Hey,

    I am having some troubling turning a concept I have from Photoshop into a working CSS layout. The layout is below, the problem I am really having is with the fading background on the sides and I am am also having problems with the tabs. I want to make them expandable with the layout, so it doesn't break if you increase the size of the font a few times.

    Here is the layout, can someone please help me:

    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  2. #2
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Germany
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi gordon,

    maybe i can be a little helpful.
    assuming you are using a fixed width layout: for your background i would define a background image in css, with the image spreading over the whole width of your layout and a height of about 3px, containing your fading borders - like this:

    body
    {
    background-image: url(fadingborders.jpg);
    background-repeat: repeat-y;
    }

    for your tabs i recommend reading this article on zeldmans alistapart.

    maybe the technique introduced in the article can also be used with your borders problem.

    let me know, if my information was of any use for you,

    operon

  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)
    I'll take a look.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  4. #4
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anyone have some ideas that are implementable without serious code hacks, I want the CSS to be as plain and straightforward as possible.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi Ian,

    As operon said its quite simple to repeat a background image for the borders of your page and I used them in this little demo.

    http://www.pmob.co.uk/temp/1colcentred.htm

    If you want expanding tabs then the sliding doors tabs that was also mentioned above are pretty straight forward and will expand as required.

    However if you want something really simple then all you need do is make 2 little circle gifs and place them in the corners of your tab. If your tab is sized in ems then it will grow and the gifs can be absolutely placed in the corners.

    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
  •