My Navbar slideshow is too high up the page. Ideally I want it to just sit below my navbar, so the drop down list will drop down over the slideshow and not keep moving the page. I have tried setting a fixed height to my pagecontent, margins etc, but nothing seems to work.

 

Page live at: http://formworkinlondon.co.uk

 

I had a lot of help with my last navbar and I'm trying to do this on my own so I get an understanding of css positioning.

 

Using NivoSlider for the slideshow which seems to be relatively positioned. Though it has these three parent tags assigned (Nivo) and my <div id="page content"> as a parent also:

<div id="wrapper">
		<div class="slider-wrapper theme-default">
			<div id="slider">

 

Slideshow: position: relative; (though when watching firebug basically everything changes and I can't make sense of any of it lol)

page content: position:

navbar: position: absolute;

 

When I have #navbar position:relative it places the menu above the slideshow as wanted. But the drop down list on hover then force the slideshow down when hovering.

Navbar position absolute takes it out the normal flow and places ontop of the slideshow, I'm starting to understand absolute now, but I thought I could just provide a height to the pagecontent to combat this.

 

Thanks for any guidance, sorry to post very similar problems; and apologies for ambiguity but I'm pretty slow at grasping this. I'm just a monkey with a hammer really .

 

if you haven't already put the slideshow inside a container such as a div. Then position that relative. give it a top value of equal to the navbar.

 

I am guessing your navbar sits right at the top of any of your content. Therefore it needs to reside outside of any block elements that have been assigned a position

 

- An absolutely positioned element will always position it'self relative to it's parent element, but only if the parent has been assigned a position itself. If no parents are found it defaults to the document body as the root parent.

 

So in this case there are no parents but the document body..

Now onto your navbar: give it absolute positioning with a top of 0 to get it to sit at the top of the document. if it's located before the slideshow in the code it's dropdown elements will need to be given a z-index for them to flow over the top of the slideshow.

 

I'll make you a codepen to demonstrate..

Hi Rob, many thanks for your input.

The navbar is placed after the img of my logo on the page:

 

HTML Order:

<div>
<img src="images/precise formwork logo.jpg" alt="Precise Formwork Ltd logo" style="width:100%;" />
</div>

<?php include 'structure/navbar.php'?>

<div class="spacer"></div> (css: clear:both;)

<div id="page content">
	<div id="wrapper">
		<div class="slider-wrapper theme-default">
			<div id="slider">
				<img src="images/basement/optimized/award winning basement.jpg" alt="Award winning concrete basement" />
				<a href="http://dev7studios.com"><img src="images/basement/optimized/6.jpg" alt="" title="#htmlcaption" /></a>
				<img src="images/basement/optimized/concrete basement.jpg" alt="" title="This is an example of a caption" />
			</div>
			<div id="htmlcaption" class="nivo-html-caption">
    		<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
			</div>
		</div>
	</div>
</div>

The navbar is currently absolute, if I put top:0 it puts it ontop of my logo right at the top (unwanted).

 

This is my css as it stands currently:

 

@charset "UTF-8";
/* CSS Document */

/*Page Resets*/
body {
margin: 0;
padding: 0;	
}

ul {
margin: 0;
padding: 0;	
}
/*Page Resets*/

/*Page General Formatting*/
.spacer {
clear: both;	
}

#page content {
height: 200px;
}

a {
text-decoration: none;	
}

h1, h2, h3, h4, h5, ul#navbar {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;	
}
/*Page General Formatting*/


/*Slider Formatting*/
#slider {
 position:relative;
 //See the "style-pack" below for image
 background:url(../nivo-slider/themes/default/loading.gif) no-repeat 50% 50%;
}

#slider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}

/*Slider Formatting*/

/*Navbar Formatting*/
/*First menu; home, about us, portfolio*/
#navbar {
width: 100%;	
z-index: 8000;
position: absolute;

}

ul#navbar li {
display: inline;
display: block;
position: relative;
float: left;
width: 33.3%;
text-align: center;
}

ul#navbar li a {
display: block;
color:#F96;	
font-size: 2em;

border: thin #666666;
}
/*First Menu*/

/*Sub Menu Portfolio*/
ul#navbar ul {
display: none;	
}

ul#navbar ul {
position: relative;
}

ul#navbar li:hover > ul {
display: block;	
}

ul#navbar li ul li {
width: 100%;
	
}
/*Sub Menu*/

/*Sub Sub Menu; Concrete Structures, Concrete Stairs*/
ul#navbar li:hover ul {
display: block;	
}

ul#navbar li ul li {
width: 100%;	
}
/*Sub Sub Menu*/
/*Navbar Formatting*/

Example pen;

http://codepen.io/anon/pen/ystBK

Thanks for that Rob, I have copied your technique:

.slideshow {
top: 40px
}

Applied it to my

wrapper {
top: 200px;
}

Nothing. I think the slideshow with all of it's javascript and three parent tags can be making it more awkward.

Sorry Rob, you're completely right. I put:

 

#wrapper {
position: relative;
top: 50px;
}

And it's perfect now. Many thanks.The wrapper was the ultimate parent of the slideshow and I imagine put there just for what we needed.

 

Massive thanks.

Is this difficult to grasp or am I just thick?

 

I've put in this cool 3d model using sketch fab, which uses

<iframe frameborder="0" height="450" width="100%" allowFullScreen webkitallowfullscreen="true" mozallowfullscreen="true" src="http://skfb.ly/mkjfe1c?autostart=0&transparent=0&autospin=1&controls=1"></iframe>

So I put my page content as:

#page-content {
position: relative;
display: block;
top: 100px;
}

Which results in screenshot 1.png; cutting the 3d model and overlapping into and behind the slideshow.

When I put:

#page-content {
position: relative;
}

The slideshow butts up nicely against the bottom of the model. But I'm then overlapping into my navbar. I've tried putting spacers inbetween but it's not behaving as expected.

 

So mysterious.

Got it:

#page-content {
margin-top: 70px;
}