everyone!
I'm more or less designing a kind of prototype website. Just like other websites, I'm trying to have a menu-bar that is fixed in position, but doesn't overlap everything else I put on the screen. So, in essence, I'd like to have a 100% wide box (menu-bar) on top of another box (body of the webpage), which rests on the footer.
My code looks like this:
<header>
<nav>
<ul>
<li>Name</li>
...More list elements...
</ul>
</nav>
</header>
header{
background-color:white;
width:100%;
padding:15px;
border-bottom:1px solid black;
position:fixed;
margin-top:-25px;
nav ul li{
list-style-type:none;
display:inline-block;
padding:10px;
margin-right:100px;
font-family:Script MT, /*To make sure the font is displayable for you*/ Arial;
font-size:20px;
Whenever I have anything in the rest of the document (I've put the menu-bar in the tags and tags), the menubar overlaps it, so it's not visible.
So the question is:
How in the world do I get my menu-bar to stay fixed but not overlap everything else?
You need to offset the content by the height of your header, which means you need to give it a fixed height:
HTML:
<header>
...
</header>
<div class="content">
</div>
CSS:
header{
...
height:50px;
}
.content{
margin-top:50px
}
Try to use z-index and set it to ex. 9999:
header {
background-color:white;
width:100%;
padding:15px;
border-bottom:1px solid black;
position:fixed;
margin-top:-25px;
z-index: 9999;
}
This will put the header in front of all other elements, unless they have a higher z-index number.
If I understand what you are asking, put padding-top on the body tag that is equal to the height of the menu bar. That way when you are at the top of the page, the floating menu is not overlapping anything.
Related
I am trying to create a simple navigation menu that is fixed to the top of the screen, and will take up 10% of any screen's height. I also would like the navigation bar to be functional on all devices regardless of screen height and width; what I currently have gets messed up quite horribly if you should resize your screen or have a resolution that is naturally low. Also, I would like to have the text for each tab to be centered vertically, a task I am struggling to fix, having tried many methods, such as changing the padding, vertical-align, margins, and so on. I have searched and searched and tried many different approaches, such as using JavaScript to accomplish this, all without luck.
My current css:
#nav {
height:10%;
background-color:rgb(52, 152, 219);
position:fixed;
top:0;
left:0;
width:100%;
color:white;
font-family: Calibri;
font-size:24pt;
text-align:center;
}
#nav a {
display:inline-block;
height:100%;
padding-left:15px;
padding-right:15px;
}
#nav a:hover {
background-color:rgb(41, 128, 185);
}
And my HTML:
<div id="main">
<div id="nav">
<a>Home</a>
<a>Page2</a>
<a>Page3</a>
<a>Page4</a>
<a>Page5</a>
</div>
</div>
Thanks!
I fixed a couple things in your css and wrapped the links in div's.
#nav {
height:10%;
background-color:rgb(52, 152, 219);
position:fixed;
top:0;
left:0;
width:100%;
color:white;
font-family: Calibri;
font-size:24pt;
text-align:center;
}
#nav div {
display:inline-block;
padding:15px;
}
#nav div:hover {
background-color:rgb(41, 128, 185);
cursor:pointer;
}
And the HTML
<div id="main">
<div id="nav">
<div><a>Home</a></div>
<div><a>Page2</a></div>
<div><a>Page3</a></div>
<div><a>Page4</a></div>
<div><a>Page5</a></div>
</div>
</div>
Looked ok on browser resize, let me know if that's still an issue.
You can add to your nav css "z-index: -1;" to set it behind the rest of the content. You may need to add "z-index: -2; to you body css to keep your background image behind the nav bar. That should fix it to the top of your screen at least and have it remain there while the rest of the content scrolls
As for having the sizing go crazy, it's because you have a set font size. I think setting your font size to 2em will keep it at 24 for common size screens, but will allow it to adjust to smaller windows.
The content boxes on each of my pages uses the same CSS, however on one page there is a scroll bar in the content box, and the footer does not sit properly.
This is because I use overflow:auto, but when I remove overflow:auto, the content box disappears completely. (The content itself still remains)
I'm not sure what the problem is, since they all use the same CSS and the other pages work fine.
This is the CSS for my content box
#contentProducts {
background:rgba(255,255,255,0.6);
width:80%;
min-height:100%;
overflow:auto;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
border-radius:20px;
box-shadow: 4px 4px 10px black;
}
the content on the page is just 4 boxes with pictures, the css for those is
#clothingProduct {
padding-top:40px;
position:relative;
background-position:center;
background-size:cover;
text-align:center;
float:right;
width:300px;
height:140px;
margin-right:12%;
margin-top:60px;
margin-bottom:30px;
}
and this is the CSS for my footer
#footer {
float:left;
bottom:0;
position:static;
background:rgba(255,255,255,0.6);
width:100%;
height:20px;
color:black;
margin:auto;
overflow: hidden;
}
Basically, it should look like this (and does on other pages)
but on the product page, it looks like this
I have a workaround fix that involves just setting the height of the box in pixels, but that still doesn't fix the footer sitting in the wrong place.
If you need any more info just let me know, any help would be greatly appreciated.
Normally when I have a problem along these lines it has to do with a typo/mistake in the HTML. Not closing a tag properly or something along those lines, but it is hard to tell without the relevant HTML.
I try to use the
position:fixed;
width:10in;
but when resize the browser, the contents go out of boundary(there's no way to reach those elements).
i need an alternative because i want the nav bar to be at top at all times.
edit: i also want the contents to be inline which is not served by using
width:100%;
display:inline or inline-block
check here - http://jsfiddle.net/dF4Bx/1/
In simple language -
I need that the browser should provide a horizontal bar if the width is not fullfilled by the resized window.
Making your top bar sticky with CSS
#header{
position:fixed;
left:0px;
top:0px;
height:30px;
width:100%;
background:#999;
}
I see what's your problem.
Use this HTML instead of yours:
<div class="back">
<div id="header" class="front">
<ul>
<li>Home</li>
<li style="float: right;">Login</li>
<li style="float: right;">Register</li>
<li style="float: right;">Search: <input type="text" class="textbox" name="sr"></li>
</ul>
</div>
</div>
And put this rule into your CSS:
#header ul li {
margin-right: 7px;
}
And too, change this width 8in to 95%:
div.back div.front {
background-color: #0072C6 !important;
margin: auto;
width: 95%;
}
Note that i removed the inline style padding of search element.
Try with below CSS,
position:fixed;
top:0;
width:100%;
z-index:99;
8In is such a big value and moreover it is fixed width that's why it keeps going beyond browser. Use % values for responsive designs.
So change width like this
div.back div.front {
width:100%;
}
then about keeping the elements inline,
Use something like margin-left:20% instead of 24In in padding:24px 20px 24px 2in!important;.
Even it will break the line when it reaches a limited browser window. You can reduce this range by avoiding larger fixed values of padding and width in your code.
Check Fiddle: FIddle
to arrive to your purpose you can try this code :
.divClass{
position:fixed;
top: 0px;
z-index: 99;
width: 80% /*for responsible width*/
}
I'm trying to implement a div, that looks like a tall and narrow page, like a notebook paper.
I have my content in <div id='centerframe'/> and I thought that a good solution was to use an absolute positioned div for the "paper".
So I wrote the css rules as follows:
div#center_background
{
z-index:-1;
position:absolute;
top:0;
left:130px;
width:900px;
height:100%;
background:rgba(255,255,255,0.9);
}
However, when I add a background image to body, it disappears under the background. I tried setting a positive z-index, than it renders on top of everything in the page, like centerframe, topbar etc. See the picture:
A solution could be setting z-index for all the elements, which I really don't want to do, since I want to use position:absolute;'s as little as possible.
So how can I define this kind of background div without changing other elements' positions and z-indices?
I made a fiddle, but it runs as expected. The strange thing in my real code is, when I load the page, the center_background div appears on top of background of body for a glance, then it disappears.
I don't change anything with JavaScript.
I came across this in my own code a few days back, and setting containing elements to position: relative solved the issue.
When i see your picture, i think that absolute positioning is unnecessary.
You could use fixed for the header, and let main content slides under it :
http://jsfiddle.net/jgYXr/
body {
background:url(http://lorempixel.com/100/100/abstract/10);
}
nav {
position:fixed;
top:0;
left:0;
right:0;
line-height:3em;
background:tomato;
box-shadow:0 0 1em 0.5em;
text-align:right;
}
a {
display:inline-block;
margin:0 0.5em;
padding:0 0.25em;
}
main {
width:80%;
background:rgba(255, 255, 255, 0.75);
box-shadow:0 0 1em 0.3em;
margin:2em auto;
min-height:800px;
}
<nav>
Nav link
Nav link
Nav link
</nav>
<main>
</main>
Search for position: fixed and how to size an element in absolute or fixed via coordinates. See as well to set height of 1 element that has only 1 line of text.
put the z-index value in high range
div#center_background
{
z-index:100;
position:absolute;
top:0;
left:130px;
width:900px;
height:100%;
}
I have been looking for an answer to this question all over the interwebs, but I just can't find the answer.. I have a transparent header filled with a background image that is the same as my background, and I want my main div to scroll underneath it so the text is hidden. Here is the HTML:
<body>
<div class="wrapper">
<div class="top">
<!-- This is my header -->
</div>
<div class="main">
[.....]
</div>
And here is the CSS:
.top {
background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
margin-top:0px;
height:100px;
width:1000px;
margin-left:auto;
margin-right:auto;
vertical-align:central;
padding-left:0px;
padding-right:opx;
}
.main {
position:absolute;
top:100px;
bottom:20px;
left:0;
right:0;
width:990px;
margin:0 auto;
padding-top:10px;
padding-left:5px;
padding-right:5px;
z-index:-1;
}
I have made a jsFiddle which can be found here: http://jsfiddle.net/qcaJJ/. Can you please help me out on how to get this working? Thanks in advance!
ps. Please don't mind the footer, I've used the footer from another page of mine, I don't want this one on this page :p
pps. If anyone knows a way to let the nav stay on it's place and the main2 div scroll, you're my hero! Kinda new to HTML and CSS..
In addition to using fixed position for the header, as the other answers pointed out, you're also using a background image with transparency, so when the main section scrolls underneath, you still see it. You need to add a background color like so, to make sure that the header div covers over what's scrolling underneath:
.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
See my JSFiddle here: http://jsfiddle.net/qcaJJ/3/
You need a fixed position for your header rather than an absolute positioning for all the rest of your page.
.header{
position:fixed;
top:0;
left:0;
width:100%;
height:100px;
background:red;
}
.content{
margin-top:100px;
font-size:180%;
}
The top must be position:fixed for that to work. This ensures that it is always stuck at the top of the screen.
You may also want to set the z-index to something like 1000 so that it always stays on top of everything else.