Jump to content


CSS Tutorial to make a box...


5 replies to this topic

#1 Radical Rob

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 04 August 2006 - 01:21 AM

Ok so I've stayed away from strictly CSS layouts for one reason.... FEAR!

Afraid that I will not be able to code it how I see it, you see I'm more of a WYSIWYG kinda designer.... so with that in mind, I tried using PS to help me make a content box. Here is what I did so far....

1) Created a box in PS with a small header and content area the way I like it.

2) Switched to Image Ready, cut it into 9 pieces (top left, top, top right, left, middle, right, bot left, bot, bot right)

Now using tables I can take the left and right section and create a 1 pixel fade as my bg and it will resize accordingly, and my center is a straight white.

3) I exported the slices and included the CSS box so it would spit it out as CSS. Everything worked perfectly.

4) I open up the html file in Dreamweaver, and it's all there in it's glory. 9 well put together pieces forming my delicious looking box.

Now here is where I get stuck... how would I re-create the left and right side background without a table there?


I know this may be elementary for some, but I've tried reading several articles, books and the like and I haven't quite gotten it yet.....

#2 joe

    Young Padawan

  • Members
  • Pip
  • 115 posts
  • Location:stuck in the middle of cyber space

Posted 04 August 2006 - 12:48 PM

i'm sorry,,, why don't you try to post this in general web design section.

#3 Radical Rob

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 04 August 2006 - 04:16 PM

View Postjoe, on Aug 4 2006, 12:48 PM, said:

i'm sorry,,, why don't you try to post this in general web design section.

I'm sorry, why dont you just ignore it if it bothers you that much to the point where you cant contribute constructively to the request. :P :D :D

This seems to be a common thing on the different forums where someone who has absolutely nothing to contribute has to add his .02 of nothing rather then PM a moderator and tell them this is in the wrong section.

:wacko:

I ain't trying to start something I just wish people would stop doing this.

#4 seraph!m

    Pixels 4 Life!

  • Members
  • Pip
  • 172 posts
  • Location:"In heavenly places..."

Posted 04 August 2006 - 10:03 PM

Would be a LOT easier to see a picture or the actual code...

:P

#5 Jacorre

    P2L Jedi

  • Members
  • PipPipPip
  • 824 posts
  • Gender:Male
  • Location:USA
  • Interests:Computers, Technology, Internet, Graphic/Web Design, Music, Soccer

Posted 04 August 2006 - 10:15 PM

Instead of looking at the content box as 9 different pieces, do it using 3 pieces. A top piece, a repeating middle piece, and a bottom piece.

#6 Radical Rob

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 05 August 2006 - 02:07 AM

View PostJacorre, on Aug 4 2006, 10:15 PM, said:

Instead of looking at the content box as 9 different pieces, do it using 3 pieces. A top piece, a repeating middle piece, and a bottom piece.

I guess I always thought I was supposed to break it into 9's.... you have a really nice site btw.
www.wayoutwestenterprises.com is my site.

Nobodys answered my question though, how to build this using only CSS....





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users