SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: CSS Problems - Design to CSS
-
Sep 29, 2004, 13:59 #1
- Join Date
- Feb 2004
- Location
- New York
- Posts
- 474
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 29, 2004, 15:12 #2
- 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
-
Sep 29, 2004, 19:21 #3
- 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
-
Sep 30, 2004, 10:35 #4
- 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
-
Sep 30, 2004, 11:17 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 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