Tracking down hiding elements

OK, I'm confusing myself trying to fix this and don't want to risk messing something up in the process, so here goes. I'm creating a website with a title and navigation bar that are essentially level, and all is fine as long as the window is wide enough. If you shrink the window to less than the width required to show everything, instead of adding a scroll bar at the bottom, the rightmost item simply disappears from the screen. I believe it's actually wrapping down below the content div, but I can't seem to figure out what I have to do to stop it from doing so. I'm a self-taught amateur, and while I consider myself somewhat well-versed, CSS is still somewhat new to me, so this is probably very simple.

Here's the page:

http://www.japancpi.com/cp/index.php

And the CSS:

http://www.japancpi.com/cp/default.css

BTW, this is all based off of the Indigo template, which I can't recall where I found it but it's linked in the footer. Any other suggestions on how to improve the design or implementation are welcome. Also note that only the front page and classes page are up so far, I wanted to get this working before I go to the work of putting in the rest of the content.

jW

Wow, that's awesome, thanks a bunch. I'll take a look through that and see how it works out.

Thanks again!

jW

BTW, works wonderfully. Thanks for the help! I did keep the nowrap, I didn't like the effect produced when it wrapped to the next line (broke up the gradient that you probably couldn't see when you were working on it), and it looks great. Thanks again!

jW

EDIT: One more (unrelated) problem I need help with: The side navigation down the right wraps when the edge of the window is still a good 50-60px out, which is really annoying. I can't find any margins or padding that should be creating that effect. The same code as before is mostly still in effect, and that part didn't change with the new modifications. Thanks for any help available!

SrWebDeveloper said:

Please be informed, respectfully, your HTML does not validate by W3C standards. You have an icon there that it does, and this is misleading. I ran the URL through http://validator.w3c.org and it failed, returning:

"Conflict between Mime Type and Document Type" with details on location and how to fix.

Click to expand...

Yes, I'm aware of this, and have the icon there simply for my own convenience (this site is not yet public, and it will validate before I upload it to the final destination).

As to second issue you raised, I follow you that the content on the right wraps as the browser window width decreases, but in your case it makes it very readable when it does and this is common behavior in a well planned liquid layout.

However, if you wish to prevent wrap anyway, here's a solution for that:

First wrap a div around the content on the right, i.e.

HTML:

<h1>Scheduling</h1>
            
            <div id="content_right">
            <ul>
                <li><a href="index.html">Schedule an On-Site Visit</a></li>
                <li><a href="index.html">Schedule Corporate Service</a></li>
                <li><a href="index.html">Schedule a Training Session</a></li>
            </ul>
            </div>

Notice I used the ID of "content_right", then in your CSS stylesheet:

HTML:

div#content_right li {
    white-space: nowrap;
}

Get the idea? You can place the div where you want, this is just a suggestion plus the CSS specifically targets the list items in this case just to demonstrate the power of CSS affecting specific content. I'll leave the rest up to you, but the key is the "white-space: nowrap" of course.

-jim

Click to expand...

Thanks, but that's not what I'm trying to do. I do want it to wrap, but it wraps well before the window edge approaches the text there. I want it to wrap when the browser window is within the margins of the page, but it's wrapping when the window is still about 50-60px out, as I said.

jW

angelwatt said:

Glad you liked some of my ideas and they worked for you. I did wonder about that gradient possibly being an issue if the nav wrapped. At least the nowrap solution works for you.

As per the new problem. Look at your CSS in the .main and .sidenav selectors. You can adjust the .main padding for the right side, and you can tweak the width for the .sidenav to take up more space. If you play with these you should be able to get the desired effect. Just watch out for how IE displays it as it'll be a little different from any other browser (of course).

Click to expand...

Thanks, I'll try that. I'm actually not real worried about IE, as long as it's useable, as we're a Mac-only shop and don't really want to encourage PC users to give us a call.

jW

Thanks again for that, and I fixed the validation errors too so it's all correct. Time to ramp it up and actually put some content into the site! Thanks all!

jW