Hi, I am trying to position my header over the white banner I created and I would also like to position my drop down nav bar over the banner as well. I am also trying to split my nav bar so three menu items fall to the left of my header and three fall to the right of my header. have tried a bunch of things but not working. please help!

thanks

http://melanieandrushko.smugmug.com/

So first I would suggest you give both portions of your nav bar a name. So instead of having just <div align="center"> you call it <div id="leftNav"> and make another one for right nav. Then you can set the position of each div.

http://www.w3schools.com/cssref/pr_class_position.asp

Also it looks like you have an open div in your header. So you will need to add a closing </div> to the end of it

Originally Posted by Smug Eric So first I would suggest you give both portions of your nav bar a name. So instead of having just <div align="center"> you call it <div id="leftNav"> and make another one for right nav. Then you can set the position of each div. http://www.w3schools.com/cssref/pr_class_position.asp Also it looks like you have an open div in your header. So you will need to add a closing </div> to the end of it

I'm sorry but I'm a little lost as my skills in this department are small....so I did what you said and changed the nav bar names. i'm not sure where to place the new positions in html or what exactly to write...sorry. also not sure where the open </div> is located? please humor me?

First replace the entirety of your Custom Header box with this:

<div id="my_header"> </div> 
<div id="customNavContainer"> </div>



<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->

<div id="leftNav">
<div class="menu"> 
<ul>
	<li><a href="/" title="">Home</a></li>
	<li><a class="drop" href="http://melanieandrushko.smugmug.com/" title="">Portfolio   <!-- no </a></li> on drop lines -->
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        	<li><a href="http://melanieandrushko.smugmug.com/Portfolio/Children/24596882_r3xCFq#!i=2009942865&k=VMV59SH" title="">Just arrived</a></li>
        	<li><a href="http://melanieandrushko.smugmug.com/Portfolio/Moments/25038566_9kT4sp" title="">Moments</a></li> 
        	<li><a href="http://melanieandrushko.smugmug.com/Portfolio/together/24800047_LnL45x#!i=2029812855&k=RnJ5hhD" title="">Together</a></li>
    	</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="http://melanieandrushko.smugmug.com/Clients">Clients</a></li>
</ul>
</div>  <!-- closes menu -->
</div>
<div style="clear: both;"></div>
<!-- End Navbar Code -->

                

<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->

<div id="rightNav">
<div class="menu"> 
<ul>
	<li><a href="http://melanieandrushko.smugmug.com/Other/About-me/24843419_MfvCjw">About me</a></li>
	<li><a class="drop" href="http://melanieandrushko.smugmug.com/" title="">Info   <!-- no </a></li> on drop lines -->
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        	<li><a href="http://melanieandrushko.smugmug.com/Info/Info/24910028_FWWgpJ" title="">Session Info</a></li>
        	<li><a href="http://melanieandrushko.smugmug.com/Info/Rates/24910241_GWrHrz" title="">Investment</a></li> 
        </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="http://melanieandrushko.smugmug.com/Other/Contact-me/24864696_GZwwDR">Contact me</a></li>
</ul>
</div>  <!-- closes menu -->
</div>
<div style="clear: both;"></div>
<!-- End Navbar Code -->

Then in your CSS you have this:

.menu {
   margin: -60px 0 0; /* top right/left bottom */
   z-index:99;
   position: relative;    /* Make the container moveable */
   margin: 30 auto 30px;  /* top R/L bottom */
   width:550px;          /* Main bar total width, minimize to not wrap to two lines*/   
}

Replace it with this:

      /* style the outer div to give it width */
#leftNav {
   margin: -60px auto 30px; /* top right/left bottom */
   z-index:99;
   position: relative;    /* Make the container moveable */
   width:550px;          /* Main bar total width, minimize to not wrap to two lines*/   
}

#rightNav {
   margin: 60px auto 30px; /* top right/left bottom */
   z-index:99;
   position: relative;    /* Make the container moveable */
   width:550px;          /* Main bar total width, minimize to not wrap to two lines*/   
}

Originally Posted by Smug Eric First replace the entirety of your Custom Header box with this: <div id="my_header"> </div> <div id="customNavContainer"> </div> <!-- Original code by Stu Nicholls of --> <!-- http://www.cssplay.co.uk/ --> <!-- Edited for content, formatting, and some elements --> <!-- Please help support CSSPlay at: --> <!-- http://www.cssplay.co.uk/support.html --> <div id="leftNav"> <div class="menu"> <ul> <li><a href="/" title="">Home</a></li> <li><a class="drop" href="http://melanieandrushko.smugmug.com/" title="">Portfolio <!-- no </a></li> on drop lines --> <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://melanieandrushko.smugmug.com/Portfolio/Children/24596882_r3xCFq#!i=2009942865&k=VMV59SH" title="">Just arrived</a></li> <li><a href="http://melanieandrushko.smugmug.com/Portfolio/Moments/25038566_9kT4sp" title="">Moments</a></li> <li><a href="http://melanieandrushko.smugmug.com/Portfolio/together/24800047_LnL45x#!i=2029812855&k=RnJ5hhD" title="">Together</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://melanieandrushko.smugmug.com/Clients">Clients</a></li> </ul> </div> <!-- closes menu --> </div> <div style="clear: both;"></div> <!-- End Navbar Code --> <!-- Original code by Stu Nicholls of --> <!-- http://www.cssplay.co.uk/ --> <!-- Edited for content, formatting, and some elements --> <!-- Please help support CSSPlay at: --> <!-- http://www.cssplay.co.uk/support.html --> <div id="rightNav"> <div class="menu"> <ul> <li><a href="http://melanieandrushko.smugmug.com/Other/About-me/24843419_MfvCjw">About me</a></li> <li><a class="drop" href="http://melanieandrushko.smugmug.com/" title="">Info <!-- no </a></li> on drop lines --> <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://melanieandrushko.smugmug.com/Info/Info/24910028_FWWgpJ" title="">Session Info</a></li> <li><a href="http://melanieandrushko.smugmug.com/Info/Rates/24910241_GWrHrz" title="">Investment</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://melanieandrushko.smugmug.com/Other/Contact-me/24864696_GZwwDR">Contact me</a></li> </ul> </div> <!-- closes menu --> </div> <div style="clear: both;"></div> <!-- End Navbar Code --> Then in your CSS you have this: .menu { margin: -60px 0 0; /* top right/left bottom */ z-index:99; position: relative; /* Make the container moveable */ margin: 30 auto 30px; /* top R/L bottom */ width:550px; /* Main bar total width, minimize to not wrap to two lines*/ } Replace it with this: /* style the outer div to give it width */ #leftNav { margin: -60px auto 30px; /* top right/left bottom */ z-index:99; position: relative; /* Make the container moveable */ width:550px; /* Main bar total width, minimize to not wrap to two lines*/ } #rightNav { margin: 60px auto 30px; /* top right/left bottom */ z-index:99; position: relative; /* Make the container moveable */ width:550px; /* Main bar total width, minimize to not wrap to two lines*/ }

Hi Allen,

thanks for your feekback, I'm still having a little trouble with the nav bar location....now they are both in the centre...yikes!

www.melanieandrushko.smugmug.com

Nix the code I gave you for left and right nav. Use this instead:

#leftNav {
    float: left;
    position: relative;
    width: 280px;
    z-index: 99;
}

#rightNav {
    bottom: 30px;
    float: right;
    position: relative;
    width: 310px;
    z-index: 99;
}

Also remove this line from your custom header:

<div id="my_banner"> </div>

Originally Posted by Smug Eric Nix the code I gave you for left and right nav. Use this instead: #leftNav { float: left; position: relative; width: 280px; z-index: 99; } #rightNav { bottom: 30px; float: right; position: relative; width: 310px; z-index: 99; } Also remove this line from your custom header: <div id="my_banner"> </div>

Oh thank - you...been trying to figure this out...it worked great. now the only thing is I want to have the navbar come up right beside the header and have a white banner extend the full width of the screen that the header and nav bar will be on top of.

Originally Posted by melly Oh thank - you...been trying to figure this out...it worked great. now the only thing is I want to have the navbar come up right beside the header and have a white banner extend the full width of the screen that the header and nav bar will be on top of.

sorry that was actually a question.

Originally Posted by melly sorry that was actually a question.

ok so I managed to create my full width banner but now my header is below it...I would like it on top. also i would like each side of my nav bar to be completely to the left and completely to the right. any suggestions?

Originally Posted by melly ok so I managed to create my full width banner but now my header is below it...I would like it on top. also i would like each side of my nav bar to be completely to the left and completely to the right. any suggestions?

Gota run but just noticed you have two unclosed div's in your header.

<div id="myHeader"> 
   <div id="navcontainer"> 
     ...
        <div id="leftNav">
             <div class="menu"> 
                 ...
             </div>  <!-- closes menu -->
        </div>
        <div style="clear: both;"></div>
           ...
        <div id="rightNav">
             <div class="menu">
                 ...
             </div>  <!-- closes menu -->
        </div>
        <div style="clear: both;"></div>
<!-- End Navbar Code -->

BTW, you can combine these two.
example:

<div id="rightNav">
<div class="menu">
like this
<div id="rightNav" class="menu">

Originally Posted by Allen Gota run but just noticed you have two unclosed div's in your header. <div id="myHeader"> <div id="navcontainer"> ... <div id="leftNav"> <div class="menu"> ... </div> <!-- closes menu --> </div> <div style="clear: both;"></div> ... <div id="rightNav"> <div class="menu"> ... </div> <!-- closes menu --> </div> <div style="clear: both;"></div> <!-- End Navbar Code --> BTW, you can combine these two. example: <div id="rightNav"> <div class="menu"> like this <div id="rightNav" class="menu">

I am so close....have everything lined up but I have an extra banner at the top of the page...any idea how to remove it??? thanks a bunch

www.melanieandrushko.smugmug.com

Originally Posted by melly I am so close....have everything lined up but I have an extra banner at the top of the page...any idea how to remove it??? thanks a bunch www.melanieandrushko.smugmug.com

In your header add the red "my"

<div id="mycustomHeaderContainer">
<div id="myHeader"> </div>
<div id="navcontainer"> 
...

Add the red "my" to this in your CSS.

#mycustomHeaderContainer {
    height: 138px;
    background: #ffffff repeat-x;
    padding:0;
}

Originally Posted by Allen In your header add the red "my" <div id="mycustomHeaderContainer"> <div id="myHeader"> </div> <div id="navcontainer"> ... Add the red "my" to this in your CSS. #mycustomHeaderContainer { height: 138px; background: #ffffff repeat-x; padding:0; }

ahhhhhhhh...that worked!!! wonderful, thank you!

hello,

I am having similar issues with the position of my navbar...

after re-arranging some parts of my website (slideshow, etc.) I somehow moved my navbar to a place where it is completely wrong

at www.hansjuergenstrecker.com I created a banner: transparent grey with a white logo
the banner has a small white border at the bottom.

I will try to change the logo and to center it within the transparent grey area and would like to have the navbar (consisting of links to my galleries) under the small white boarder of the banner?

each gallery name should be distributed equaly space and should be separated by a ⎪

does this somehow works with my current setup? I think I have a lot of rubbish in my CSS, HTML, javascript fields

thanks!!!!
br
HJS

additionally to my previous post:

- now my navbar disappeared completely on the entry page?

- I even cannot click my logo anymore?

- looks like there is something is lying over my site?

thanks and br
HJS

Originally Posted by jdwl additionally to my previous post: - now my navbar disappeared completely on the entry page? - I even cannot click my logo anymore? - looks like there is something is lying over my site? thanks and br HJS

This is the problem. Also remove the "

.homepage #navcontainer {
bottom: 10px;
position: fixed;
}"

Maybe use this?

.homepage #navcontainer {
top: 10px;
left: 400px;
position: fixed;
}

Originally Posted by Allen This is the problem. Also remove the " .homepage #navcontainer { bottom: 10px; position: fixed; }" Maybe use this? .homepage #navcontainer { top: 10px; left: 400px; position: fixed; }

thanks, now its back
those little details...

is it possible to put the navbar under the whit line of my grey/transparent banner?
will the slideshow autmatically start below? what do you think?
as described above I would like to separate the items in the navbar by a ⎪
possible?

Originally Posted by jdwl thanks, now its back those little details... is it possible to put the navbar under the whit line of my grey/transparent banner? will the slideshow autmatically start below? what do you think? as described above I would like to separate the items in the navbar by a ⎪ possible?

Quick CSS scan: Remove this from your CSS and put i in your bottom javascript.

filmstripMove = 0;

Rule in red makes no sense with the next rule which overrides it.

#homepage {width: 1000px;}

/* make homepage stretchy so slideshow can be larger */
#homepage {width: auto; margin-left: 15px; margin-right: 15px;}

Originally Posted by jdwl thanks, now its back those little details... is it possible to put the navbar under the whit line of my grey/transparent banner? will the slideshow autmatically start below? what do you think? as described above I would like to separate the items in the navbar by a ⎪ possible?

See if this works for you.

Replace your header with this.

<div id="my_header">

<div id="navcontainer">
<ul>
<li><a href="/Other/Animals-TEST/25271723_ddJ6MV">animals</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Other/Landscape-TEST/25271730_2hFM7Z">landscapes</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Other/Nature-TEST/25271683_XNNssc">nature</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Other/Portraits-TEST/25271747_Nc5WhL">portraits</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Other/Stills-Products-TEST/25271762_mHZrtK">stills &amp; products</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Other/Travel-Sights-TEST/25271768_xKSgxP">travel  &amp; sights</a></li>
</ul>
</div>

<div id="my_headerIMG">
<a href="http://www.hansjuergenstrecker.com/"><img src="/img/spacer.gif"></a>
</div>

</div>    <!-- closes my_header -->

<div style="clear: both;"></div>

Change/add these parts of your CSS like this.

#my_header {
   margin-bottom: 20px;
}

#my_headerIMG {
   position: relative;
   top: -10px; left: 20px;
   background: url(http://www.hansjuergenstrecker.com/photos/i-ZbpCp2w/0/O/i-ZbpCp2w-L.png) no-repeat;
   height: 65px;
   width: 280px;
}

#navcontainer {
   position: relative;
   top: 80px;
   left:120px;
   color:white;
}

#navcontainer ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: center;
}

#navcontainer ul li { 
   display: inline; 
}

#navcontainer ul li a {
   text-decoration: none;
   padding: .2em 1em;
   color: #FFFFFF;
   background-color: none;
   font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
   font-size: 10pt;
}

#navcontainer ul li a:hover {
   color: white;
   background-color: none;
   text-decoration: underline !important;
}

Originally Posted by Allen See if this works for you. Replace your header with this. <div id="my_header"> <div id="navcontainer"> <ul> <li><a href="/Other/Animals-TEST/25271723_ddJ6MV">animals</a></li> <li>&nbsp;|&nbsp;</li> <li><a href="/Other/Landscape-TEST/25271730_2hFM7Z">landscapes</a></li> <li>&nbsp;|&nbsp;</li> <li><a href="/Other/Nature-TEST/25271683_XNNssc">nature</a></li> <li>&nbsp;|&nbsp;</li> <li><a href="/Other/Portraits-TEST/25271747_Nc5WhL">portraits</a></li> <li>&nbsp;|&nbsp;</li> <li><a href="/Other/Stills-Products-TEST/25271762_mHZrtK">stills &amp; products</a></li> <li>&nbsp;|&nbsp;</li> <li><a href="/Other/Travel-Sights-TEST/25271768_xKSgxP">travel &amp; sights</a></li> </ul> </div> <div id="my_headerIMG"> <a href="http://www.hansjuergenstrecker.com/"><img src="/img/spacer.gif"></a> </div> </div> <!-- closes my_header --> <div style="clear: both;"></div> Change/add these parts of your CSS like this. #my_header { margin-bottom: 20px; } #my_headerIMG { position: relative; top: -10px; left: 20px; background: url(http://www.hansjuergenstrecker.com/photos/i-ZbpCp2w/0/O/i-ZbpCp2w-L.png) no-repeat; height: 65px; width: 280px; } #navcontainer { position: relative; top: 80px; left:120px; color:white; } #navcontainer ul { margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: inline; } #navcontainer ul li a { text-decoration: none; padding: .2em 1em; color: #FFFFFF; background-color: none; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 10pt; } #navcontainer ul li a:hover { color: white; background-color: none; text-decoration: underline !important; }

yehaa, we are getting closer and closer
the navbar is now below the line and has these gorgeous separators..

somehow the size of the homepage changed - I am having a scroll bar at the bottom and the navbar looks to be centered to the wider homepage...do I have to set a size for the homepage?

and I again cannot click on the logo to get back to the homepage?