For some reason my footer is floating in the middle of the page. Driving my mad. I hope its just a quick fix. Ive looked online and all the answers seem to point to having a fixed footer and i dont want that as it displays horribly in smaller resolutions.
<!DOCTYPE html>
<html>
<head>
<title>MM Web Design</title>
<meta name="viewport" content="width=500, initial-scale=1">
<link rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<img class="logo" src="img/logo.png">
<div class id="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Work</li>
<li>Home</li>
</ul>
<br>
</div>
<div class="wrapper">
<h1>Welcome to my Portfolio</h1>
<p>
yada yada yada
</p>
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<img src="img/body-metrix.png">
<img src="img/body-metrix-logo.png">
<img src="img/market.png">
</div>
</div>
<div class="footer-wrap">
<div class="footer">
<ul>
<li>Contact</li>
<li>About</li>
<li>Work</li>
<li>Home</li>
</ul>
</div>
</div>
</body>
</html>
CSS
.footer-wrap{
height:50px;
width:100%;
background:#333333;
margin: 0em;
}
.footer ul {
font-size: 18px;
font-weight: lighter;
list-style-type: none;
margin: 100px;
padding: 0;
text-decoration: none;
}
.footer ul li {
float: right;
display: block;
padding-left: 20px;
font-size: 0.75em;
}
Most likely, it's just displaying below the other divs.
Try sticky footer?
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
and css
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}
The divs are behaving exactly as they should be? And they are correctly ordered.
As soon as you fill content into the preceding div the footer will move down
If you want it to stay at the bottom of the window then it needs to be sticky as has already been suggested.
Related
I have a responsive website I am working on. When it switches to the mobile layout, the topbar scrolls down a bit before it sticks to the top of the screen where it should be, misaligning everything. This works fine on the desktop layout.
#topbar {
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
height: 15%;
box-shadow: 0 5px 10px rgba(124, 124, 124, 0.3);
}
#media (min-width: 35em) {
#topbar {
height: 60px;
}
}
<html>
<head>
<link href='stylesheet.css' rel='stylesheet' />
<script defer src='main.js'></script>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</head>
<body>
<section id='topbar'>
<nav>
<h1 id='logo'>Logo</h1>
<ul id='links'>
<li>
<a href='#home'>
<h1>Home</h1>
</a>
</li>
<li>
<a href='#about'>
<h1>About</h1>
</a>
</li>
<li>
<a href='#products'>
<h1>Products</h1>
</a>
</li>
<li>
<a href='#jobs'>
<h1>Jobs</h1>
</a>
</li>
</ul>
<div id='menu-button'>
<div id='line1'></div>
<div id='line2'></div>
<div></div>
</div>
</nav>
</section>
</body>
</html>
You might have to change the structure.
The reason for changing the structure is that you need to have the top header (Logo section) fixed on the top and your nav should start after that section.
If the Logo section takes the entire width, the nav section automatically stays below the logo section.
So, the changes I provided are:
Separate out the logo section and nav section in different divs and make them sibling so that nav section appears below the logo section.
Added top: 0 on the fixed logo section to keep it on top always.
Added margin-top of the height of the logo section to the nav section to make nav section visible .
<html>
<head>
<style>
#topbar {
top: 0;
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
margin-bottom: 49px;
height: 60px;
box-shadow: 0 5px 10px rgb(124 124 124 / 30%);
}
#links {
margin-top: 60px;
}
body {
margin: 0;
}
#media (min-width: 35em) {
#topbar {
height: 60px;
}
}
</style>
<script defer src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="topbar">
<h1 id="logo">Logo</h1>
</div>
<nav>
<ul id="links">
<li>
<h1>Home</h1>
</li>
<li>
<h1>About</h1>
</li>
<li>
<h1>Products</h1>
</li>
<li>
<h1>Jobs</h1>
</li>
</ul>
<div id="menu-button">
<div id="line1"></div>
<div id="line2"></div>
<div></div>
</div>
</nav>
</body>
</html>
I think that's because of not using
top
left properties
Whenever you use position property you must use these 2 properties
Added Those two properties to #Topbar
#topbar{
top: 0;
left: 0;
}
<!DOCTYPE HTML>
<html lang ="en">
<meta charset = "utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id = "container">
<header>
<div id = "static_nav">
<nav>
Home
About Us
Contact US
Gallery
Member Log-in
</nav>
</div>
</header>
<div id = "block_two">
<p></p>
</div>
<div id = "block_three">
<p> Block Three </p>
</div>
<div id ="block_four">
<p> Block Four </p>
</div>
</body>
<div id = "end_block">
<footer>
<p> This is where the footer would go </p>
</footer>
</div>
</div>
</html>
Here is the CSS
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
margin: 0;
}
Here is the #static_nav nothing happens when I do that. I'm not quite sure how to remedy this. I've been able to modify the other divs but I'm not to sure why I can't in this case.
div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 5vh;
background-color: #000000;
position:fixed;
opacity: .75;
color:;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
Also, "text-align: right" pushes the text to the right side border. How would I add a little space between the border and text so that its not directly on the border. I tried padding and margin but it didn't move it.
Thank you for the help.
To color the links in #static_navbar, you have to style them directly. Otherwise the browsers default link color will be used:
div#static_nav a {
color: white;
}
To vertically align the links, one possibility is to use the padding of the #static_navbar on top and bottom, e.g.:
padding: 10px 0;
Also make sure, that your markup is valid. Your closing body take hast to be set directly before the closing html tag.
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
margin: 0;
}
div#static_nav {
font-family: Verdana, sans-serif;
padding: 10px 0;
text-align: right;
width: 100%;
background-color: #000000;
position: fixed;
opacity: .75;
}
div#static_nav a {
color: white;
}
div#container {
margin-top: 10px height: 10vh width: 100%;
background-color: #16BA81;
}
<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav>
Home
About Us
Contact US
Gallery
Member Log-in
</nav>
</div>
</header>
<div id="block_two">
<p></p>
</div>
<div id="block_three">
<p>Block Three</p>
</div>
<div id="block_four">
<p>Block Four</p>
</div>
<div id="end_block">
<footer>
<p>This is where the footer would go</p>
</footer>
</div>
</div>
</body>
</html>
I am new to CSS and am trying to set up a page so that there is always a fixed margin / space between the page's main content (sidebar / sections) and the footer (e.g. 120px) which should work cross-browser.
Also, in case there is very little content on a page the footer should always appear at least at the bottom of the (visible) screen.
I made multiple attempts by applying a class footer, including the following, but the margin is always ignored.
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom
}
.footer:before {
clear: both;
display: block;
height: 120px;
min-height: 120px;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
</html>
Can someone help me with this?
Also, if anything should be changed regarding my HTML please let me know as well.
This should help:
html, body {
height: 100%;
}
body {
margin:0px;
padding: 0px;
}
.wrap {
height: auto;
margin: 0 auto -80px; /* footer height + space */
min-height: 100%;
padding: 0 0 80px; /* footer height + space */
box-sizing: border-box;
overflow: auto;
}
.footer {
background-color: #111111;
color: #eeeeee;
border-top: 1px solid red;
height: 60px; /* footer height */
padding-top: 20px;
display: block;
margin-top: 20px; /* space between content and footer */
box-sizing: border-box;
position: relative;
width: 100%;
}
<body>
<div class="wrap">
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
</div>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
To add a margin between the body and footer, just add this to the style of the footer section:
padding:20px 0px 0px 0px;
Keeping the footer at the bottom is more complicated. Try something like this for css:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper{ /*create a div around whole html body
min-height:100%;
position:relative;
}
#main{
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
color: #333;
}
Why you use ":before"?
Your css should look like this:
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
Try this example (works fine for me).
If it not works - make sure you use css reset.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav style="background:grey;height:100px;">
<!-- ... -->
</nav>
<section id="sidebar" style="background:green;height:100px;">
<!-- ... -->
</section>
<section id="main" style="background:red;height:100px;">
<!-- ... -->
</section>
<footer class="footer" style="background:blue;">
<div>Some text</div>
</footer>
</body>
</html>
<style>
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
</style>
just give styling to body with margin 0px.
body{
margin: 0px;
}
I know I'm a little late to the party, but you could also just guesstimate with some set units for vh. Hacky, but it works in a pinch.
.wrap {
min-height: 70vh;
}
<div class="wrap">
<section id="chapterone">
<p>Lorem ipsum...</p>
...
</div>
<footer class="footer">
Home
...
</footer>
Solved!
In my case, I added id to the previous div (like "body") to the div above the footer div, as follows:
<div id="body" class="container">
...
</div>
<div class="row footer-row-bg">
...
</div>
Then, in my CSS file, I added padding-bottom:20px; for that id as follows:
#body{
padding-bottom:20px;
}
I have a questions about a horizontal navigation bar. I want to create a page with an image as header (height:100px), a horizontal navigation bar and finally the content area ( height:768px). I wonder why the navigation bar taks place in the content area (that means that the content area gets smaller than 768px). How can I avoid this behaviour? Instead, I'd like to shift the content area downwards about the size of the navigation bar.
This is my css code:
* {
margin:0;
padding:0;
}
body {
background:#FFFFFF;
}
#frame {
margin: auto;
width: 1024px;
height: 768px;
}
#header {
width:100%;
height:100px;
background-image:url(image.jpg);
}
#navigation {
width: 100%;
float: left;
list-style: none;
background: #f2f2f2;
}
#navigation li {
list-style: none;
display: inline;
float: left;
}
#navigation a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#navigation a:hover {
color: #c00;
background-color: #fff;
}
#content {
background: #EBF7FF;
width: 1024px;
height:768px;
text-align: justify;
}
and this is the html code:
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="frame">
<div id="header">
</div>
<ul id="navigation">
<li>text1</li>
<li>text2
<li>text3</li>
<li>text4</li>
</ul>
<div id="content">
<font size="+3">Title</font>
<br>
<br>
Content...
<br>
<br>
</div>
</div>
</body>
</html>
If you want #navigation to display as float, you may add clear:both to your #content.
#content {
background: #EBF7FF;
width: 1024px;
height:768px;
text-align: justify;
clear:both;
}
But to my mind better solution would be displaying it as block and li as inline-block or display it as table and li as table-cell
You specify a width of 100% for #navigation which is contained in a container #frame holding the content. So the #navigation takes the width of its container, thus the same width as the rest of the content inside that container because the container takes exactly the width required by the content inside.
You place that navigation inside the content container, so obviously it has to take room in there. If you want to avoid that simply put the navigation above the content container:
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="header">
<ul id="navigation">
<li>text1</li>
<li>text2
<li>text3</li>
<li>text4</li>
</ul>
</div>
<div id="frame">
<div id="content">
<font size="+3">Title</font>
<br>
Content...
</div>
</div>
</body>
</html>
Compare that fiddler.
you'r navigation must occupy whole the with available and has height set to a value.set display:table for your navigation so it's height grows to it's content like this:
#navigation{
display:table;
}
check DEMO
That's because #navigation it's floating above #content.
Try adding this to force #content to render below the navigation:
#content {
clear:both;
}
When you do this, you don't have to bother what is coming after your navigation.
#navigation:after {
clear:both;
}
I am trying to build a two columned layout with a sidebar that always stays on the left side of the page with a main content area that is centered, and when the window is resized, the centered content will eventually bump up against the nav bar, but never move any further left than where it is when they touch (which would be left: 150px).
Can someone help me out?
Here is the CSS:
#charset "UTF-8";
/* CSS Document */
body,td,th {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #000;
}
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
width: 150px;
height: 10000px;
background-color: #D61D21;
text-align: right;
}
#nav a:link {
color: #FFF;
text-decoration: none;
}
#nav a:visited {
color: #FFF;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
text-decoration: underline;
}
#main {
width: 810px;
height: 810px;
margin: 0px auto;
}
and here is the html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="main">
ENTER CONTENT HERE
</div>
</body>
</html>
Any help is greatly appreciated!
Do this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="wrapper">
<div id="main">
ENTER CONTENT HERE
</div>
</div>
</body>
</html>
CSS:
#wrapper{
margin-left: 150px;
}
What you do is create a wrapper div around your main div and make that wrapper div have a left-margin of 150px so that it's side by side with the nav bar. Now all your resizes inside the main div should be limited to within the wrapper.
A neat little trick I just learned is making your #content position: relative; and then make all child elements inside it position: absolute; that way all child elements are absolute to your content area and the content will resize to any resolution. Saves me so loads of time and i can't believe how much time I used to waste laying dynamic sites out.
Hope this does something for you.