CSS:
ul#menu-ediloc li
{
float:left;
padding-left:5px;
position:relative;
}
ul#menu-ediloc ul
{
z-index:500;
position:absolute;
}
I have a drop menu like this, but when it goes down the sub menu is hidden where it touches the next div with is a slideshow and it's outside the relative parent.
I tryed to put position:relative; to body but although it fixes the visibility problem it than messes up my menu.
Any ideas?
<div id="header">
<ul id="menu-ediloc">
<li>
<ul id="sub-menu">
<li>
</li>
</ul>
</li>
</ul>
</div>
<div id="slider">
</div>
I tryed to put the slider in the header and put relative on header, but its same as on body it messes up my sub-menu.
The only way my sub-menu works if i put the relative on the ul li tag.
add the following css
#header{
position: relative;
z-index: 999;
}
Related
I made a fixed navbar and then a header that I used relative position to place it below the fixed navbar. But when I scroll up the header shows over the navbar.
<section class="nav-bar">
<ul>
<li class="nav-left">LOGO</li>
<li class="nav-right">FACEBOOK</li>
<li class="nav-right">GITHUB</li>
<li class="nav-right">TREEHOUSE</li>
</ul>
</section>
<h1 class="head">THIS IS THE HEADER</h1>
h1 {
position: relative;
top:2em;
}
.nav-bar{
background-color: blue;
width:100%;
position:fixed;
margin-top:-1.25em;
margin-left:-.55em;
padding-bottom:1em;
}
Any advice on how to keep the header behind the navbar? I'm sure it has something to do with the fixed and relative positioning but haven't found anything on how to remedy this.
Hanif is right, adding z-index to .nav-bar achieves the effect you desire.
h1 {
position: relative;
top:2em;
}
.nav-bar{
background-color: blue;
width:100%;
position:fixed;
margin-top:-1.25em;
margin-left:-.55em;
padding-bottom:1em;
z-index: 99;
}
<section class="nav-bar">
<ul>
<li class="nav-left">LOGO</li>
<li class="nav-right">FACEBOOK</li>
<li class="nav-right">GITHUB</li>
<li class="nav-right">TREEHOUSE</li>
</ul>
</section>
<h1 class="head">THIS IS THE HEADER</h1>
Hello I'm currently working on a website where I want the logo of the business to overlap into the content.
Similar to this website: http://www.menzies.com.au/
I'm not really sure how to approach this problem, I tried using negative margin, and z-index, but it just felt like the wrong approach
Example Code of what i've tried
<div class="container">
<ul class="nav nav-pills">
<img src="logo.jpg" style="float: left; z-index: 3;">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Home</li>
</ul>
<img src="http://all4desktop.com/data_images/original/4172874-nordic-landscapes.jpg" style="z-index: -1; margin-top: -50px;">
</div>
What's occurring is that the second image is overlapping the logo image. It also just feels like a clunky way to approach the problem as I've never seen people advocate using negative margin unless absolutely necessary
Could anyone with experience in doing this point me in the right direction?
Basically what you need do is set the logo position to absolute, then it will be over the other elements. I did a example to you, look at this HTML:
<div id="menu">
<div class="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
The menu div has 75px of height, but his child can have more than this, and if they do, a overflow will occur, that is what you wanna. If it doesn't occur, as I said, you can try set the position to absolute. So, you set the logo div to something like 130px of height, and the nav to 100% height. I changed the height of logo to 130px, but it doesn't affect the other menu child. So, the nav height will be the menu height: 75px. Complete code:
#menu {
width:100%;
height:75px;
background-color:#333;
}
ul {
list-style:none;
}
ul li {
display:inline-block;
}
.logo {
width:150px;
height:130px;
background-image:url('http://placehold.it/150x130');
float:left;
position:absolute;
margin-left:25px;
}
nav {
color:#fff;
float:right;
font-size:1.3em;
line-height:75px;
margin-right:10px;
height:100%;
}
nav ul {
margin-top: 0px;
}
nav ul li {
margin-right:10px;
}
<div id="menu">
<div class="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
This problem is very relative, but with a simple CSS like this one, you can contour this.
How to align lists to top right ? How can i align a list to the top right of the div that contains it ? Will float work ?
Html
<div id="wall">
<ul>
<li>Login</li>
<li>Signup</li>
</ul>
</div>
CSS
#wall{
position:relative;
}
#wall ul li {
list-style:none;
margin-right:50px;
position:absolute;
top:0;
right:0;
}
apply position:relative to the parent div. After apply the following styles for the list.
.list{
position:absolute;
top:0;
right:0;
}
EDIT
Thanks to Manwal for adding the jsfiddle.
DEMO
Change the order of li then use float:right; - DEMO
HTML
<div id="wall">
<ul>
<li>Signup</li>
<li>Login</li>
</ul>
</div>
CSS
#wall{
position:relative;
}
#wall ul li {
list-style:none;
margin-right:50px;
position:relative;
float:right;
}
Yes, using float: right will work.
http://jsfiddle.net/k0r1dj10/1/ or http://jsfiddle.net/k0r1dj10/6/ with more than one drop down.
Additionally what might be better is to set the outer div to position: relative as well as the inner div to position: absolute and top: 0 as well as right: 0.
http://jsfiddle.net/k0r1dj10/3/
To use more than one div in the relative way, you have to use another parent div. This requires you know the width, tho. http://jsfiddle.net/k0r1dj10/5/
Try this:
DEMO
CSS:
#wall{
position:absolute;
top:0;
right:0;
}
HTML:
<div id="wall">
<ul>
<li>Login</li>
<li>Signup</li>
</ul>
</div>
.left_box1 {
width: 50px;
height: 50px;
padding-top: 10px;
text-align: right;
}
Is there any way to position an absolute element based on second relative parent?
<ul> <!-- This has position:relative; -->
<li> <!-- This has position:relative; -->
<ul> <!-- position:absolute this relative to the parent ul -->
<li></li>
</ul>
</li>
</ul>
CSS
ul{
position:relative;
}
ul > li {
position:relative; /* I need this because of pseudo :after */
}
ul > li ul{
position:absolute;
left:0; /* This is what i want to do. Left based on parent ul not parent li... */
}
That's not possible. An absolute element can only position itself based on the first relative parent.
I'd like to make a menubar, which is fixed on the top of the page while scrolling. Something like the top menu in Facebook.
Also, I want a div holding the logo float at the left of menubar, and a nav float at the right of the menubar.
This should get you started
<div class="menuBar">
<img class="logo" src="logo.jpg"/>
<div class="nav">
<ul>
<li>Menu1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</div>
body{
margin-top:50px;}
.menuBar{
width:100%;
height:50px;
display:block;
position:absolute;
top:0;
left:0;
}
.logo{
float:left;
}
.nav{
float:right;
margin-right:10px;}
.nav ul li{
list-style:none;
float:left;
}
#header {
top:0;
width:100%;
position:fixed;
background-color:#FFF;
}
#content {
position:static;
margin-top:100px;
}
to set a div at position fixed you can use
position:fixed
top:0;
left:0;
width:100%;
height:50px; /* change me */
The postition:absolute; tag positions the element relative to it's immediate parent.
I noticed that even in the examples, there isn't room for scrolling, and when i tried it out, it didn't work.
Therefore, to pull off the facebook floating menu, the position:fixed; tag should be used instead. It displaces/keeps the element at the given/specified location, and the rest of the page can scroll smoothly - even with the responsive ones.
Please see CSS postion attribute documentation when you can :)