Css To Make Nav Bars And "floating" An Image

[kaseytraeger]

Hi everyone,

 

After working on this issue for the past three to four days, I've decided I need some fresh eyes to look at it for me.

 

The web page I'm having problems can be found here (www.kaseyscreations.com/villagepantry/index.htm).

I've got two major problems with this web page:

 

Problem #1: In the content located to the right of the left-hand navigation column, you'll see a the picture of the restaurant. The problem is that the picture is sitting on top of the text, and I can't get the text to flow around it. I've tried the "float" property on this image, but it doesn't seem to have any effect, so clearly there is something else that is coming in to play.

 

Problem #2: The navigation bar on the left hand side does not go the full length of the page. What has been requested by my client is that the nav bar extend the full height of the page and the background image (the lavendar colored plaid GIF) extend the full height of the page, as well. Currently, the plaid background only goes down a portion of the page, and then the rest of the page (whose content should remain to the right of the navigation column) ends up flowing underneath the navigation column, totally throwing off the page layout.

 

I need someone with more experienced eyes to look at this for me and tell me what I've one wrong. Also, feel free to download the page and all the graphical elements to play around with as you see fit.

 

I can do this page using tables (ugh!) but I'd really prefer to use CSS.

 

Thanks!

Kasey

[TCH-Bruce]

 

Kasey I think if you add the following to your image link it will work the way you want.

 

 

As for the nav menu not being the full height of the page, I've never been able to do that either and would like to hear a solution.

Edited February 18, 2004 by TCH-Bruce

[ThumpAZ]

as for the column thing, here is a decent read. Not sure how well it will work out with your plaid image there (it is pretty tall), but this may help in the future.

 

www.alistapart.com/articles/fauxcolumns/

 

EDIT: I have got it repeating when looking at it in a 1024 screen. The sizing of the main body, I think it the problem on smaller screens... you hav a min width of 755px.

 

the image you used for the menu background does not figure out properly and will end before the end of the page when repeating to a percentage, or will push the page longer when repeating a fixed count.

 

Take a look at the source here:

glenn.uselessfurball.com/inde.html

 

EDIT2: I have worked a little on the pic and text surrounding it and found that using the alignment texttop works better to force the image to stay in line with the text. However, it forces the menu to stop early and the text to be put in below it.

Lemme work a lil more

 

 

-GG

Edited February 18, 2004 by TCH-Glenn

[btrfld]

Hi Kasey.

It's late, and I know this will be an incomplete answer, but I'll give it a start.

 

You can get the menu to extend the length of the page by putting the Content div inside the Menu div. Basically you make the entire page be Menu div, and cover the right n% of it with the Content div. Give the Content div a Left Margin large enough to clear the Menu stuff. As long as neither div is floated or absolutely positioned, the Content div will force the Menu div to grow along with it.

 

<div id="menu">

Menu Stuff

<div id="content">

Content Stuff

</div>

</div>

 

I checked it quickly with your code, and it does the trick of getting the plaid to go all the way. I didn't delve into the css adjustments necessary to cover the plaid for the rest of the page, or contain the content to the right of the menu.

 

EDIT:

Good morning.

 

I had some more time to play with it this morning (with your kind permission), and I have something that works in IE6/WIN, Firefox and Opera7. I've not tested it in other browsers/OSs.

 

The basic scheme is:

- Make your outer div the Menu div

- Inside that,

-- Make a separate div for the actual Menu stuff, and Float it or Absolute Position it to take it out of the normal flow.

-- Nest your Content div, giving it a margin-left that clears the Menu stuff

-- Put the Border on the left of the Content div instead of on the right of the Menu div.

-- Inside the Content div,

--- Make a separate div to contain the actual Content stuff, so you can shape it as you want.

 

I have put up my altered version Here for you to see.

 

I do hope this helps. Thanks for the opportunity. I learned a lot by playing with it. Unfortunately I will be out until this evening, so if you have questions or ... I'll have to get them then.

 

Have a great day

Jim

[kaseytraeger]

First, I want to say thanks to TCH-Bruce, TCH-Glenn and btrfld for taking the time to look at my problem. I've had a busy time of it these past few days, so I'm just now getting around to looking at your responses.

 

From TCH-Glenn's links, I can see that I've got some reading to do. Also, thank you, btrfld, for posting your revised page for me to look at. However, when I click on the link, I get an error message from my browser telling me that it can't find the page. Is it still located at http://olifields/tchtester/ktvp/?

 

Thanks, everyone!

Kasey

[btrfld]

Well, Bummer! Doesn't work for me, either.

 

Try this one.

[kaseytraeger]

Jim,

 

I must say that I am thoroughly impressed with the way you handled this web page. I tried doing the same thing you did, but all I got was the nav column on top with the rest of the content positioned below the nav column. Also, when I did it, the plaid background took over the page instead of being situated behind the nav bar with solid pink everywhere else on the page.

 

I have a few questions about what your work. So here goes.

 

(1) You added some "voice-family" properties to the menu. I've not seen these before. Are they for web surfers who are blind and using a audible program to surf the web?

 

(2) You have a property that's coded like this:

html>body #menu { ... }

What does the greater-than sign do?

 

[bowing before the feet of Jim, the CSS master]

Thanks Jim!

Kasey

[kaseytraeger]

TCH-Glenn,

 

I read the article you posted by Dan Cederholm. I must say I was quite surprised at his seeming "simple" method for creating full-length columns.

 

In fact, before Jim provided his solution, I had worked Cederholm's method and actually got the layout correct. I was thrilled! I need to decide now which method to use on the web site I'm designing. Hmm, decisions, decisions ....

 

Now I've got two methods of accomplishing the same thing. This is good info to have because you always want more than one way to skin a cat, eh?!?

 

Kasey

[btrfld]

Hi Kasey.

 

CSS Master - NOT! I'm learning it too, but this scenario is one I've encountered before and used on a couple of my own sites.

 

Now - your questions.

 

Both the 'voice family' stuff and the 'html>body' are parts of what's called the "Box Model Hack", created to get around the fact that IE/WIN gets things wrong. Here's a link to the explanation by the creator of the hack (a Microsoft engineer, by the way).

 

Basically, the "voice-family" entry with all the quotes and braces tricks IE into thinking the rule is over, and it stops parsing. So you put a bogus width before it for IE, and a real width after it for (most) everybody else. The html>body thing is because Opera gets tricked by the hack too, but doesn't get the box model wrong. So the extra rule (which IE ignores because it doesn't understand it) gets Opera back on track. Confused? Not surprised. I'm only now beginning to get it, largely because of:

 

I've just finished reading Jeffrey Zeldman's book "Designing with Web Standards". Not only does he give a step-by-step explanation of how to make a site compliant with the standards, and accessible to all, but he also give a very clear beginner's guide to CSS, including a great explanation of the box model hack. And it's fun to read. Highly recommended.

 

Anyway. As I said before, thanks for the opportunity to play with your page; I learned a lot from it. Now I'm going to have to go and read the article that TCH-Glenn posted and see how someone else does it.

 

Cheers

Jim