Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    navBar and Content overlap

    Been searching and working on this for 3 days and aqm absolutely stumped.
    I am using the standard 2colleft_nav.css. We had a small graphic in the navbar and the content was set at width 75%. This worked fine for resizing unless you got the window below 200pixels wide which we figured wouldn't happen. Now we'd like to put a larger graphic 210px wide in the navbar. I need the content to be able to resize without overlapping the navbar and bumping it down on the page.
    I set the navbar fixed at 210px, content with a left margin of 220px, or content with 0 margin and padding of 220px left. When I set a px value in the content, it bumps the navbar down no matter how wide the window is. If I use a %, it works but bumps the navbar down when the window gets below 800px wide which is entirely possible.
    I have used all types of positioning for the navbar. The only way I can get it next to the content while a px margin is set is to use absolute positioning. This then overlaps the siteinfo at the bottom.
    Basically I can not get the darn navbar to be next to the content with a fixed margin set for the content unless I overwrite the siteinfo bar at the bottom.

    This worked fine with a small graphic
    #masthead{
    border-bottom: 3px solid #000000;
    width: 100%;
    background-image: url(images/90thbar2.jpg);
    }

    #navBar{
    margin: 0 79% 0 0;
    background-color: #339966;
    }

    #content{
    float:right;
    width: 75%;
    padding: 1% 3% 0 0;
    }

    This puts the navbar and content next to each other, resizes well, etc but overwrites the siteinfo at bottom
    #masthead{
    width: 100%;
    background-image: url(90thbar3.jpg);
    max-height: 151px;
    min-height: 151px;
    }

    #navBar{
    background-color: #666666;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    width: 210px;
    top: 151px;
    position: absolute;
    border-right-width: 10px;
    border-right-style: solid;
    border-right-color: #000000;
    border-bottom-width: 15px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
    }

    #content{
    float:right;
    width: 75%;
    padding-top: 0;
    padding-right: 3%;
    padding-bottom: 0;
    padding-left: 230px;
    }

    This leaves plenty of room on the layout, but still moves the navbar to just below the content

    #masthead{
    width: 100%;
    background-image: url(images/90thbar.jpg);
    max-height: 151px;
    min-height: 151px;
    }

    #navBar{
    background-color: #666666;
    width: 210px;
    border-right-width: 10px;
    border-right-style: solid;
    border-right-color: #000000;
    border-bottom-width: 15px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
    margin: 0;
    }

    #content{
    float: right;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
    margin-left: 220px;
    }


    Thanks much. Any help will be GREATLY appeciated.
    Drew

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Sighs another person who thinks we can magically see their html some how. Post your html, better yet post a link to your site. We aren't psychic.

    CSS is useless without the html.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sorry. I didn't want my first post to be obnoxiously large. I also figured the html could be text or pictures of naked goats, the css settings are what I'm screwing up.

    Here's the link:
    http://www.90thidpg.us/Paperwork/index.html

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    #navBar{
    	background-color: #666666;
    	margin-top: 0;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    	width: 210px;
    	top: 151px;
    	position: absolute;
            left:0;
    	border-right-width: 10px;
    	border-right-style: solid;
    	border-right-color: #000000;
    }
    
    #content{
    	margin-left:220px;
    	padding: 1% 3% 0 0;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the fast reply.
    Absolute was the only way that I could get navbar and content to line up, but using absolute also causes navbar to overlap the horizontal siteinfo bar at the bottom.
    I'd be glad to do whatever would work. I was only shying away from absolute because it overlaps the siteinfo bar.

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, forgot to mention, I'm checking my results using IE7, IE6 and Firefox 2.
    I'm using Dreamweaver 9

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Then get rid of position:absolute, float the navbar to the left and move it before your content.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again. That was one option I was ignoring. I wondered if moving navbar before content in the html would do it. I just didn't try it as we have upwards of 100 html pages that I'd have to edit.
    I'm not at all adverse to a little work, I'll have to edit the htmls each by hand as the links on each page are relative so no quick find & replace.
    I was just hoping I was doing something wrong being new to CSS.
    I was really just hoping someone with much more CSS experience than I would say float this margin that and it would be done.

    Thanks for your help.

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    ^ Have you considered using server side includes for such things as navigation? There are a number of options including php and HTML has it's own. Just means that in large sites you only need to edit one page and the changes are done across every page with that include in it
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    and have you looked into CVS to store backups of all the information.
    I've been done before by not storing things properly.
    PHP / CSS / Perl / XML / XHTML

    For cheap ipod touch go to protella.com

  • #11
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks much for the replies.

    No I haven't looked into SSI. I'm just getting into CSS and there's still so much out there I don't know what to do next.

    No haven't looked into CVS. Does look like the smart thing to do. Just haven't bothered as I have multiple renamed copies of my code on the laptop. I'm rolling out the successful changes to the web as I tweek them and I have a master backup of the original site on the desktop. All of which are themselves backed up. So I haven't looked into version backups yet.

  • #12
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I moved the code in my html to put the navbar above the content. It partially worked. The navbar is composed of sectionlinks, relatedlinks, headlines. The sectionlinks showed up next to my content. The other 2 were pushed down below.
    I figured I'd try an easier tack. I used absolute positioning for the navbar, it's right where I want it and never moves. The navbar overlaps the horizontal siteinfo bar at the bottom. I've tried various margins and padding. If I can get the siteinfo bar to move down when it runs into any other element, that would solve my problems.Is there a way I can make the siteinfo never overlap? Or have I made things more difficult using absolute? Can't set the siteinfo bar absolutely as the navbar does change.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •