Forums

poporacer

I am a newbie to CSS and have searched the internet for the solution. I am sure I am using the wrong terminology for what I need. Here is waht I want to do. I want to place a menu bar on the left side of the window. I have the image split into several sections. One section is a logo, the other section is a portion of the menu bar (to be repeated as many times as needed to complete the ribbon) and a few graphics for navigation buttons. Then a tilte on the top with an image in the middle of the page. Here is a sample...There are several buttons and I need to fill the bar from the top to the bottom of the page.
http://www.windyacresranch.net/drclaw/Test.jpg From what I have read, it looks like I need to use Div basically I need a table but a table leaves a small border around so the graphics don't line up like they should. Is there a tutorial or any help you can provide would be greatly appreciated. I am sure there are several examples but I have not found them....Thanks for your assistance!

Rick

TheDoc

If I understand correctly, you actually would only need one div.

The CSS would look like:

#nav {
    width: /* insert the width of your images there */px;
    background: url(location/of/your/repeating/bg.jpg) repeat-y #000;
}

Then the HTML for that div:

<div id=\"nav\">
<a href=\"link1.html\"><img alt=\"\" src=\"location/of/the/button/image.jpg\" /></a>
<a href=\"link2.html\"><img alt=\"\" src=\"location/of/the/button/image2.jpg\" /></a>
<a href=\"link3.html\"><img alt=\"\" src=\"location/of/the/button/image3.jpg\" /></a>
</div><!-- close nav-->

Of course there's much more to it when talking about an entire site in terms of positioning, padding, margins, etc, but that should get your started at a very basic level.

treehouse : what would you like to learn today?

Forums

CSS Table Image splicing