The navigation bar of my website does not extend to the full height of my webpage. I would like to extend it so it fits the page perfectly. Here is my code.
Html:
<div id="Nav">
<div id="NavContent">
<h1>Header</h1>
</div>
CSS:
#Nav {
width:100%;
background-color:#f26522;
}
#NavContent {
margin:0 auto;
width:9999px;
}
How can I fix this issue? Thanks.
you need to remove the natural padding and margin from the document and the h1 (which has default values)
body{
margin: 0;
padding: 0;
}
h1{
margin: 0;
padding: 0;
}
Try:
#Nav {
position:absolute;
top:0px;
left:0px;
width:100%;
background-color:#f26522;
}
#NavContent {
margin:0 auto;
width:100%;
}
Fiddle : http://jsfiddle.net/7vLPb/
Fiddle(fullscreen) : http://jsfiddle.net/7vLPb/show/
Go and search 'css reset' and copy the code.
Basically a browser has margin,padding etc. already in place and this can get in the way. So many people use a css reset. Put the css reset at the top of your css document. This should remove the padding and margins that are in your way.
Also make sure you set the width of your navbar to 100%. Good luck!
Related
My html and body elements are not filling 100% of the viewport, which is leaving me with approx 200px of blank space below my footer. I have played with the inspector to try and resolve this problem but nothing is working perfectly.
It is worth noting that I have 3x sidebars that are activated from the top menu (Artists, About, History) and these need to be 100% height too, I feel that this probably has something to do with the issue.
Any help much appreciated, I haven't included any markup here as the problem is quite broad.
Thanks
http://workshop.oakdesignstudio.com/dwl/
The easiest is to give your body position: relative;
So
html{
height: 100%;
}
body{
height 100%;
position: relative;
}
you forgot to give position value to your footer tag.
add this code on line no. 475
footer {
position:absolute;
}
The page structure is really important especially for cross-browser compatibilty. This will help with your sidebars as well;
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
and
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Original source http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/
Try it yourself and you'll be thankful for that layout structure!
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*/
}
Introduction
There are many good and well tested recipes for a footer that is always as the bottom of a page but is not fixed (or overlap content). Here is one that works for me: http://ryanfait.com/sticky-footer/
In short it works like follows:
HTML:
<html><body>
<div id="wrapper>SOME CONTENT</div><footer></footer>
</body></html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -4em;
}
footer {
height: 4em;
}
The trick is that #wrapper is forced to use 100% of available height, but is margin bottom leaves some space for a footer (negative margin is exactly the size of the footer).
Problem description
While building a Single Page Application, some javascripts frameworks like Ember.js adds additional divs to our document structure (for example to handle events). This creates an addtional wrapper around our original document which may look like this:
<html><body>
<div class="framework-container">
<div id="wrapper>SOME CONTENT</div><footer></footer>
</div>
</body></html>
This additional div breaks our CSS setup. To improve the situation we want to say that framework-container should behave exactly as body, so we may try to add:
.framework-container {
position: relative;
height: 100%;
min-height: 100%;
}
And it almost work: if the content is smaller than the page height. Otherwise there is a noticeable distance between the footer and bottom of the page - which we cannot accept.
Does anyone know a pure CSS solution to this problem?
I'm not sure if you said the wrapper worked or not, but you can tell Ember to insert the application into a particular element, and it won't insert any elements outside(above) that element.
Set the root Element
App = Em.Application.create({
rootElement: '#body'
});
HTML
<div id="container">
<div id="header">I'm a header</div>
<div id="body"></div>
<div id="footer">I'm a footer</div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://emberjs.jsbin.com/OPaguRU/1/edit
I totally jacked some of this from: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I'm trying to make a simple, fluid, responsive two column layout (just for the sake of learning CSS), consisting of a sidebar and a main section.
I was able to create the sidebar with 100% height, position the main content at its side, but when I put a H1 inside my main section... tada! Its margin created a margin for the sidebar as well.
Here's a minimum code that presents the problem:
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#sidebar {
display:block;
position:absolute;
width:25%;
min-height:100%;
border-right:1px solid #222;
background-color: #E0E0E0;
}
#main {
margin-left:25%;
display:block;
}
h1 {
padding:2%;
/* margin:0; */
/* defining the margin as zero aligns
* everything at the top */
}
</style>
</head>
<body>
<header id="sidebar">
Let's reach for the stars!
</header>
<section id="main">
<h1>Nope!</h1>
</section>
</body>
</html>
I've tested it in Chrome and Firefox, happened in both.
I've created this JSFiddle, and thanks to a comment from cimmanon, the behavior is the same.
Well, I'm lost. Am I missing something really simple?
Is this approach a good way to make a two column layout? I inspired myself reading the CSS from the Svbtle blogs.
Generally speaking, absolute positioning should be avoided unless you really do want the element removed from the document's flow. If you have a page where #main ends up having shorter content than #sidebar and the user's display isn't tall enough to display all of #sidebar's contents, you're going to have your content clipped off.
My favored way of achieving equal height columns is to use the display: table CSS properties.
http://jsfiddle.net/PmkCQ/3/
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
body { display: table }
#sidebar {
width:25%;
border-right:1px solid #222;
background-color: #E0E0E0;
}
#sidebar, #main {
display:table-cell;
vertical-align: top; /* optional */
}
h1 {
padding:2%;
margin-top: 0;
/* margin:0; */
/* defining the margin as zero aligns
* everything at the top */
}
There's other ways, of course, but this one is less brittle than floats or absolute positioning. The only down side is that IE7 doesn't support these properties, so they'll continue using the element's previously defined (or default) display setting (for div, it will be block).
Add display: inline-block to the h1 and it won't influence the side bar. Then you can set any margin you want.
The reason it seemed fine in JSFiddle is probably the styles applied from their styles (inspect the h1 and you'll see it has margin:0).
I have 2 DIVs, one containing a map, this one is above the other one. It should take all space available, except for the footer, which is 25px high.
Currently I give the map 95% of the height, and the footer 25px. Problem is when the windows gets really big, the footer becomes enormousness, and when the windows becomes really small, scroll bars kick in.
However, this is not what I want, I want:
#map { height: <window_height - footer_height> }
#footer { height: 25px }
How could I achieve this using only CSS and HTML?
PS. I know there probably are some simple javascript solutions, but for educations sake, I want to know how to do this without javascript.
Have a look at this:
keeping footers at the bottom of the page
All the code is there.
Basically you do this in your HTML:
<html><body>
<div id="container">
<div id="map"></div>
<div id="footer"></div>
</div>
</body></html>
And then in your CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#map {
padding:10px;
padding-bottom:25px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:25px; /* Height of the footer */
}
There are other ways to achieve this and similar effects.
Let know if this is what you wanted.
Hope this helps.