Tracking down hiding elements

Discussion in 'Web Design and Development' started by Mal, Jun 18, 2008.

  1. Mal macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #1
    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
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I downloaded that page and worked on the HTML and CSS to see if I could get a fix. Attached is what I came up with. I changed various things so you'll want to keep this separate from your current files. I made it so the navigation links wrap down, but are still able to be seen as the header grows. You can do it in a way for a scrollbar to show up, but that looked kind of ugly to me, but if you want to try it, for my code add "white-space: nowrap;" to the .navigation ul selector.

    The footer you had didn't quite work the way you wanted it to when the browser window was short so I made some changes there, though it doesn't stay at the bottom like you had. You can study the CSS and see where I made changes then decide what parts (if any) you want to keep or tweak. When I downloaded the page not all of the graphics saved (the ones referenced from the CSS) so I couldn't completely tell how it will look.

    Anyways, hope you find something useful here and if you have any questions let me know.
     

    Attached Files:

    • mal.zip
      File size:
      3.5 KB
      Views:
      20
  3. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #3
    Wow, that's awesome, thanks a bunch. I'll take a look through that and see how it works out.

    Thanks again!

    jW
     
  4. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #4
    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!
     
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    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.

    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
     
  6. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #6
    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).

    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
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    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).
     
  8. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #8
    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
     
  9. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #9
    Okay, I see.

    .sidenav li a {
    color: #777;
    display: block;
    font-size: 0.9em;
    padding: 3px 6px 3px 18px;
    text-decoration: none;
    }

    Along the lines of what Angelwatt said, you might want to set padding-right to 0px and add margin-right: 6px since you want 6px on the right of the list item. One final comment before I go. Some browsers generate indentation for UL tags so sometimes applying margin and padding settings to the UL globally might help, i.e. margin: 0px; padding:0px since you added padded into the LI which override default indentations anyway. Know what I mean?

    -jim
     
  10. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #10
    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
     

Share This Page