Boxes

sgtmac66 · #1 (**permalink**) 07-05-2009, 11:15 AM

I have my site pretty well designed so far,...background, header, basic template layout, nav bars etc.

Next up is the content area between the left and right columns...I am trying to learn the ins and outs of the .box styles, which it seems is like using tables. From just a quick look, it seems as if one can nest one box inside of another?

I was also curious, as I see some sites that have a vertical bar that separates the container...like a column, but the line doesn't go all the way up or down. Does anyone know of what I speak or how this is accomplished?

Thanks

lisa · #2 (**permalink**) 07-05-2009, 02:54 PM

One way to accomplish the vertical line in a column is to give the column (or div ID) a left border or to use a background for that DIV and repeat it vertically using CSS. That's what I'm using on my blog. The gray line is just this small image http://blog.2createawebsite.com/wp-c...es/dot-ddd.gif repeated vertically down the page. That's one way of doing it.

And yes, you can nest boxes inside one another just like tables. You would just nest the < div > tags like you would a table tag and give each < div > its own properties/attributes.

sgtmac66 · #3 (**permalink**) 07-05-2009, 06:20 PM

Quote:

Originally Posted by lisa

One way to accomplish the vertical line in a column is to give the column (or div ID) a left border or to use a background for that DIV and repeat it vertically using CSS. That's what I'm using on my blog. The gray line is just this small image http://blog.2createawebsite.com/wp-c...es/dot-ddd.gif repeated vertically down the page. That's one way of doing it.

And yes, you can nest boxes inside one another just like tables. You would just nest the < div > tags like you would a table tag and give each < div > its own properties/attributes.

Tanks...or is that Thanks..lol....a bit of military humor....I'll give it a shot, as that is my next goal...

sgtmac66 · #4 (**permalink**) 07-05-2009, 07:44 PM

Quote:

Originally Posted by lisa

One way to accomplish the vertical line in a column is to give the column (or div ID) a left border or to use a background for that DIV and repeat it vertically using CSS. That's what I'm using on my blog. The gray line is just this small image http://blog.2createawebsite.com/wp-c...es/dot-ddd.gif repeated vertically down the page. That's one way of doing it.

And yes, you can nest boxes inside one another just like tables. You would just nest the < div > tags like you would a table tag and give each < div > its own properties/attributes.

Tanks...or is that Thanks..lol....a bit of military humor....I'll give it a shot, as that is my next goal...

sgtmac66 · #5 (**permalink**) 07-06-2009, 12:20 PM

Lisa...the gif link doesn't work, can you repost it?

Thanks

lisa · #6 (**permalink**) 07-06-2009, 04:26 PM

It works alright. LOL It's just veeeeeeery small.

When you click the link look at the top left of your screen and you'll see a small, gray dot. That gray dot is the image that makes the border. It's just repeated to make the line. The power of CSS.

WB Sponsors