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 :)
Related
I have a working navbar in the top center of my page. However, when I reduce my resolution, my navbar spreads itself into separate lines. How can I force it to stay in one line?
Here's my css:
#navbar {
display:inline-block;
width:100%;
position:absolute;
margin-left:25%;
margin-top:30px;
}
.navbar-li {
display:inline-block;
white-space:nowrap;
background-color:orange;
font-family:Arial;
margin-right:100px;
padding:20px 40px;
}
li {
font-size:20px;
}
HTML:
<div id="navbar">
<ul>
<li class="navbar-li">text1</li>
<li class="navbar-li">text2</li>
<li class="navbar-li">text3</li>
</ul>
</div>
Add white-space: nowrap; to your navbar
Set width: to the amount in pixels that you want your nav bar to always be, do not use a percent. This makes it stay the same size no matter what the screen resolution is.
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;
}
I've been playing with the margins of my but it doesnt budge. I set the z-index to be larger for the nav bar but it wont overlap on the image.
This should help you, adapt to your needs:
HTML
<html>
<body>
<div class="nav">
</div>
<img class="img-under">
</body>
</html>
Css
.nav {
position:absolute;
background-color:#000000;
width:100%;
height:30px;
}
.img-under {
background-color:#e3e3e3;
height:60px;
width:200px;
}
I am trying to add two images (ul,li) at the end of a DIV. I use position ABSOLUTE, RELATIVE and left:0, bottom:0, and it does it, but it doesnt remain on the div.
The images appear in the "MainDiv", and not in "container".
The css:
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
width:100%;
height:600px;
}
#container{
width:980px;
height:600px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
}
The Html:
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1">Example1</li>
<li id="image2">Example2</li>
</ul>
</div>
</div>
The absolutely positioned element is positioned with respect to the corresponding edges of it's parent... from the look of it your container doesn't have any height set...
When you add a height to container it does move your <ul> to the bottom of the div. In fact, it is always at the bottom of the div, but because the height of the div is 0 it doesn't look like it is at the bottom of it.
http://jsfiddle.net/s5aE3/
#container{
width:980px;
margin:0 auto;
position:relative;
height: 800px;
}
The list is correctly positioned at the bottom of the container div, but there is nothing that gives the container div any height. As the height of the container div becomes zero, the list is placed with the bottom where the container div is.
To put the list inside the container div, you need to give the container div a height. Either by specifying a height style, or putting something inside it that isn't absolutely positioned or floating.
Edit:
With your updated code that has a height for the container div, the list is placed at the bottom.
Try setting the vertical align to bottom.
<style>
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
}
#container{
width:980px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
vertical-align:bottom;
}
</style>
<body>
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1>Example1</li>
<li id="image2>Example2</li>
</ul>
</div>
</div>
I want position elements to flow under each other when resizing the window, I have a header that height increases as window get smaller.
have a submenu displayed when click on on element on the menu, the menu will appear under the main menu and it should stick to the bottom of the header when resizing the window.
I try to the problem by detecting screen size by js and change the top dynamically, but it suddenly while resizing the window, the top is different from what it should be and it becomes at the center of the window...
I make simple example here
http://jsfiddle.net/xv8hS/1/
the auto hight is not working on this version! I want the green bar to become under the items bar when resizing the window closer and larger.
This is not a positioning, but a floating issue. Use an empty <div> with clear:both in your header (demonstration):
<div id="container">
<div id="header">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<div class="clearfix"></div>
</div>
<div id="submenu"></div>
</div>
#container{
position:relative;
min-height:300px;
height:auto;
width:100%;
}
#header{
width:100%;
min-height:80px;
height:auto;
background-color:red;
posistion:absolute;
top:0;
right:0;
}
#header ul{
width:100%;
min-height:20px;
height:auto;
}
#header ul li{
min-height:50px;
height:auto;
display:inline-block;
float:left;
width:200px;
}
#submenu{
width:70%;
min-height:20px;
height:auto;
height:5%;
background-color:green;
posistion:absolute;
top:10%;
right:0;
}
.clearfix{clear:both;}
See also:
CSS 2.1: 9.5 Floats
All About Floats