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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Nav bar is moving

    I have two nav bars on my site. First one I did with spry and it is the pink bar and seems to be working fine. (Keep in mind that this is still the demo of the site I am building and the links do not work). I tried to put a second nav bar in the black bar across the top. Tried doing it with CSS per lynda.com, tried doing it with AP divs/tables, now I tried doing it like you see in my file below. This is the best I have done so far except it STAYS STILL while the website is fluid with equal space left and right and moves with the window. Please help and let me know what I am doing wrong. Spent about SIX hours trying to solve this.

    Appreciate Massively.
    Barbara

    PS seems to be looking different in all browser. Big surprise

    http://www.pdtest.com/Perrie_Web_New/index.html
    Last edited by blskny; 11-21-2009 at 05:26 PM. Reason: Forgot to put the link!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello blskny,
    I found the url http://www.pdtest.com/Perrie_Web_New/index.html from your previous posts.

    If you move #toplinks down in your markup to be contained by #header you can make #header position:relative; and the menu will follow like you want.

    Like this:
    markup-
    Code:
    {if(img.className.indexOf('_wt')==-1)img.className+='_wt'}else img.className=img.className.replace(/_wt/,'')" title="Show all"><img class="a2a_i_darr" src="http://static.addtoany.com/menu/transparent.gif"></a></div><div class="a2apage_wide a2a_wide"><a href="http://www.addtoany.com/ext/mashable_owa/" id="a2apage_powered_by" class="a2a_menu_powered_by" target="_blank" title="Share &amp; Subscribe buttons" onmouseover="if(!window.opera)this.innerHTML=this.orig;this.style.textAlign='center'">Like AddToAny?</a></div></div></div>
    
    <div id="container">
      <div id="header">
    
    <div id="toplinks">
    	  
    	 <a class="toplink top" href="perrietest.htm"> LINK1</a>
    	  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    	  
    	   <a class="toplink top" href="perrietest.htm"> LINK2</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	    <a class="toplink top" href="perrietest.htm"> LINK3</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	     <a class="toplink top" href="perrietest.htm"> LINK4</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	      <a class="toplink top" href="perrietest.htm"> LINK5</a>
    </div>
    <!--end header--></div>
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a class="" href="#">MEET THE FAMILY</a>      </li>
          <li><a class="" tabindex="-1" href="#">JOIN THE FAN CLUB</a></li>
          <li><a class="" tabindex="-1" href="#">LINKS WE LUV</a>      </li>
          <li><a class="" tabindex="-1" href="#">TALK TO US</a></li>
          <li><a class="" tabindex="-1" href="#">ADVERTISE WITH US</a></li>
          <li><a tabindex="-1" class="MenuBarHorizontal">SHOPPING</a>      </li>
        </ul>
      </div>
      <div id="sidebar1">
        <div id="whoPerrie">
          <h3>Who is Perrie?</h3>
          <p><span class="boxText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris porta. Sed eget nisi. Fu
    add this bit to #header in your perrie.css -
    Code:
    .twoColFixRtHdr #header h1 {
    	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    }
    #header{
    	background-color:#30F;
    	margin: 0px;
    	padding: 0px;
    position: relative;
    }
    #navigation {
    	background: #F3C7D4;
    	margin: 0px 0px 10px;
    	padding: 0px;
    	height: 40px;
    }
    .twoColFixRtHdr #sidebar1 {
    And then you'll need to adjust the positioning of #toplinks to put it where you like.


    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi Thanks for the reply. I THINK I did what you are telling me. But now the container and header seem to have separated and everything is jumping. Same url.

    http://www.pdtest.com/Perrie_Web_New/index.html

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    No, you're still closing #header before in can wrap around your menu.
    This is what you have right now (the bold closing tag is the extra one)
    Code:
    <div id="container">
      <div id="header"></div>
      
      <div id="toplinks">
    	  
    	 <a class="toplink top" href="perrietest.htm"> LINK1</a>
    	  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    	  
    	   <a class="toplink top" href="perrietest.htm"> LINK2</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	    <a class="toplink top" href="perrietest.htm"> LINK3</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	     <a class="toplink top" href="perrietest.htm"> LINK4</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	      <a class="toplink top" href="perrietest.htm"> LINK5</a>
    </div>
    <!--end header--></div>
      <div id="navigation">
    And this is what you should have -
    Code:
    <div id="container">
      <div id="header">
      
      <div id="toplinks">
    	  
    	 <a class="toplink top" href="perrietest.htm"> LINK1</a>
    	  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    	  
    	   <a class="toplink top" href="perrietest.htm"> LINK2</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	    <a class="toplink top" href="perrietest.htm"> LINK3</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	     <a class="toplink top" href="perrietest.htm"> LINK4</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	      <a class="toplink top" href="perrietest.htm"> LINK5</a>
    </div>
    <!--end header--></div>
      <div id="navigation">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    OK will go back and try that - but in the meantime - I tried the nav bar built into DW and I got the links to look like they work. I am going to go back in and try your idea totally. Do you think it is best to do it as the toplinks way or use the DW nav thingy?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by blskny View Post
    OK will go back and try that - but in the meantime - I tried the nav bar built into DW and I got the links to look like they work. I am going to go back in and try your idea totally. Do you think it is best to do it as the toplinks way or use the DW nav thingy?
    I think it's best to code your own.
    I have not seen the code for the DW nav thingy but DW is notorious for throwing up bad code...

    I have several menu examples that you are welcome to use/copy if you like.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I cannot seem to get it to work - so frustrating. I think I undertook MUCH too complex a website for my first real one. Lucky it is for my company. Thanks for trying

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by blskny View Post
    I cannot seem to get it to work - so frustrating. I think I undertook MUCH too complex a website for my first real one. Lucky it is for my company. Thanks for trying
    It seems to be working fine now. On IE8 and FF3.5, both menus have hover affects, both seem to be positioned where you want them to be.
    Looks good.

    Now have a look at this - http://validator.w3.org/check?verbos...w%2Findex.html
    Some very easy fixes there.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    blskny (11-21-2009)

  • #9
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    OMG that is so much stuff. I know you will think I am nuts but this is the first website I have ever built. It is my own character/company. Seems that I have bitten off more than I can chew though because every turn seems to be another wall. I am doing lynda.com and The Missing Manual to guide me. Have tried ALL OVER to get a tutor - but no luck. I was told that I think like a designer and not a coder and that is my problem. But am trying. If you know ANYONE in the Orlando FL area who would be interested in meeting with me to give me some support in areas I am stuck (where books/videos leave off) I would be very appreciative.
    Thanks Again,
    Barbara

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You shouldn't be so hard on yourself, I think you're doing amazingly well for a first site! Thinking like a designer may not be such a bad thing, it's definitely something I'm lacking in and wish I wasn't.

    Can't help you with anyone in FL ... not anyone that knows anything about coding anyway.

    Really, you're already in the right place. There are a lot of very smart, and willing to help, people in this forum.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    THanks but am always hard on myself but it is amazing to have this help.
    Here is my new wall. Since I cannot put a blue click to square over the top left Perrie logo (so people click to go home) since I have the header as a background - I tried to leave the logo off and paste it as an image and then float it left with a z of 2 - i gave the nav bar a z of 1 - guessing the background has a z of 0.
    But all it does is move the nav bar down and screw everything up. Is there another way to put an image up there in the header without everything else bumping?
    Thanks
    Barbara
    Last edited by blskny; 11-21-2009 at 08:37 PM. Reason: not clear

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Try something like this -
    Code:
    <div id="container">
      <div id="header">
    <div id="back_btn"><a href="#">back</a></div>
        <table class="tableMove" border="0" cellpadding="0" cellspacing="0">
          <tbody><tr>
            <td><a href="javascript:;" target="_top"
    Code:
    #header{
    	background-color:#30F;
    	margin: 0px;
    	padding: 0px;
    }
    #back_btn {
    width: 50px;
    height: 20px;
    float: left;
    margin: 0 0 0 125px;
    line-height: 20px;
    text-align: center;
    background: #00f;
    }
    .tableMove {
    	float: left;
    	margin-top: 92px;
    	margin-left: 185px;
    }
    You could always use ap to put it over your #header. That would completely remove it from the normal flow of the document and not move your menu around.

    One more thing, z-index only works on absolute positioned elements. It will not affect a floated element, just as you cannot float an ap element.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Ok just tried the AP div thing and that link is up and does not work - going to try your code idea.

    http://www.pdtest.com/Perrie_Web_New/index.html

    I also tried the one with the code and it makes the black nav bar jump down which send the pink nav bar down
    Last edited by blskny; 11-22-2009 at 01:13 AM. Reason: additional comment

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hmm, I don't see the link you're trying to position.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    if you make your browser window larger you will see that the Perrie character at the top left stays with the edge of the browser window rather than follows the edge of the webiste.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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