...

View Full Version : Nav bar is moving



blskny
11-21-2009, 05:14 PM
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

Excavator
11-21-2009, 05:27 PM
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-
{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 -

.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.


...

blskny
11-21-2009, 05:45 PM
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

Excavator
11-21-2009, 06:11 PM
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)

<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 -

<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">

blskny
11-21-2009, 06:23 PM
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?

Excavator
11-21-2009, 06:37 PM
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 (http://nopeople.com/design/CSS%20tips/index.html)that you are welcome to use/copy if you like.

blskny
11-21-2009, 06:54 PM
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

Excavator
11-21-2009, 07:05 PM
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?verbose=1&uri=http%3A%2F%2Fwww.pdtest.com%2FPerrie_Web_New%2Findex.html
Some very easy fixes there.

blskny
11-21-2009, 07:47 PM
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

Excavator
11-21-2009, 08:04 PM
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.

blskny
11-21-2009, 08:36 PM
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

Excavator
11-21-2009, 09:25 PM
Try something like this -

<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"

#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.

blskny
11-22-2009, 12:56 AM
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

Excavator
11-22-2009, 01:13 AM
Hmm, I don't see the link you're trying to position.

blskny
11-22-2009, 01:23 AM
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.

Excavator
11-22-2009, 01:43 AM
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.

Ok, well...I saw that but it's not a link, I thought that was just broke from trying to position your link.

I'm sure I mentioned this before but, to make an ap element follow your website, you need to make it's container position:relative;
Right now your Perrrie character is positioning itself relative to the top left corner of body. To make it follow relative to #header, which is where you want it to stay, add this bit in red -

#header{
background-color:#30F;
margin: 0px;
padding: 0px;
position: relative;
}

blskny
11-22-2009, 04:50 PM
Excavator if you are out there - can you tell me how to get the AP div of the logo in the top left corner to stay over the white space on the banner and not stay left as the window widens. It does not seem to stay in position. Read thru the book and did a few lynda.com but I still seem to be screwing it up.
THANKS in advance

blskny
11-22-2009, 04:53 PM
OH!!! I just saw your reply - SORRY - it was not in my browser window for some reason. IT WORKS!!! You are my Alaskan Angel.

Excavator
11-22-2009, 05:05 PM
Alaskan Angel - haha, :D that's funny.
I'm glad you got it working.

blskny
07-06-2010, 09:53 PM
Hi my Alaskan Angel - I'm back.
Did this website for my design company. I am really happy with it except I cannot figure out one stupid little thing. On the home and inside pages:

http://pdtest.com/PD_New_web/index.html

the logo in the upper right hand corner (the circle with project design) needs to link to index.html. But I cannot get it to link. First I tried to put a graphic in there but it kept shooting down to the next line and flushing left. So I put the logo as a background. But I am unable to figure out how to give it a link.

This is up on my test web. The final url for it will be different = if that impacts it at all. Let me know if you need any more info.

Got any ideas?
Thanks
Barbara

abduraooft
07-07-2010, 01:02 PM
<div id="logo"></div> Cure the divitis (http://csscreator.com/divitis) in you! A logo is considered as part of the document and not supposed to be placed in the document to give some style to it. Thus you need to place it as an img tag and not as a background image.

<a href="index.html"><img src="http://pdtest.com/PD_New_web/images/logo_HP.jpg" alt="some good text here"> </a>
(In that way, your document would become semantic (http://boagworld.com/technology/semantic-code-what-why-how)!)

blskny
07-07-2010, 02:52 PM
Thanks so much Supreme Master Coder.
For the life of me I have NO IDEA why in that DIV I was not able to paste a logo in there. But DUH - typical DW beginner I did not think of pasting it into the code. I kept trying to get it into the layout and when I couldn't I thought of doing it as a background.
Really appreciate your solution for me,
Barbara



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum