I can't figure out why my nav bar is not going all the way across the top! I'm sure it's a super easy fix. This is for a full page slider. I only included the relevant html/css. hope that is enough!
HTML
<!DOCTYPE>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<head>
<title>Full Page Slider</title>
</head>
<nav>
<a id="home">Home</a>
<a id="">About</a>
<a id="">Contact</a>
<div class="sliderButtons"></div>
</nav>
<div id="full-slider-wrapper">
<div id="full-slider">
<div class="slide-panel active ">
Panel 1 content here
</div><div class="slide-panel">
Panel 2 content here
</div>
</div>
</div>
CSS
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
html {
min-width: 100%;
font-family: 'Lato', sans-serif;
}
nav {
text-align: left;
margin-left: 16%;
border-bottom-style:ridge;
background-color: FF7400;
}
nav a {
font-size:20px;
text-decoration:underline;
display: inline-block;
padding: 1em;
}
div.sliderButtons {
float: right;
margin-right: 20%;
}
#full-slider-wrapper {
overflow: hidden;
}
#full-slider {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
}
#full-slider .slide-panel {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
visibility: hidden;
}
#full-slider .slide-panel.active {
position: absolute;
visibility: visible;
}
#full-slider-nav {
position: relative;
top: 0;
right: 0;
}
#full-slider-nav-left, #full-slider-nav-right {
display: inline-block;
height: 0;
width: 0;
margin-left: 15px;
border: 20px solid transparent;
cursor: pointer;
}
Your nav element has margin-left: 16%;. Change or remove that rule.
jsFiddle example
You mean - why it does not take the full width? If so - look closely, your nav selector got a margin-left of 16%
remove margin-left: 16%; & change text-align: left; to text-align:center;
use Div forget about nav
hope it helps you. Enjoy.
Related
I'm trying to create a webpage that will have a fixed sidebar and scrollable content. It does work if I don't have a header div. If I scroll page I have some empty space that previously was a header (i marked it with red color). I'd like my sidebar to cover the empty space after I scroll through header div.
Here's my HTML Code - how can I fix this?
<!doctype html>
<head>
<link rel="stylesheet" href="style.css"type=" text/css"/>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</body>
CSS
#page
{
position:relative;
width:100%;
height:3000px;
background-color:yellow;
}
#header
{
background-color: blue;
width:100%;
height:150px;
}
#navigation
{
background-color: red;
width:10%;
height:3000px;
float:left;
}
#content
{
float:left;
background-color: green;
width:90%;
overflow: auto;
height:1000px;
}
body
{
margin: 0;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a
{
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
You have to place your navigation div in outermost part i.e. in body(not in any other div).
I have tested this and its now working fine.
Your new code should be
<html>
<head>
<link rel="stylesheet" href="style.css" type=" text/css" />
</head>
<body>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="page">
<div id="header">
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</div>
</body>
</html>
And your modified css:-
#page {
position: relative;
width: 100%;
height: 3000px;
background-color: yellow;
}
#header {
background-color: blue;
width: 100%;
height: 150px;
display: block;
}
#navigation
{
background-color: red;
width:10%;
height:100%;
float:left;
position: absolute;
z-index:1;
}
#content {
float: left;
background-color: green;
width: 90%;
overflow: auto;
height: 1000px;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
In css I have changed the navigation's height to 100% and its z-index to 1.
Also you didn't close the div tag with class "page".
Reference:- w3 css sidenav
Please try this:
#navigation {
background-color: red;
width: 10%;
height: 3000px;
float: left;
position: absolute;
z-index: 99999;
left: 0;
top: 0;
}
I want the footer of this page to stick to the bottom, below all content, but not fixed in the screen. The problem is that when the body has more than 100% of height, the footer stay in the middle of the screen, and not in the bottom.
I've seen a lot of tutorials on how to achieve this, using "position: absolute" + "bottom: 0" and stuff, but everything failed.
Check it out:
<html>
<head>
<meta charset="iso-8859-1" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'>
<title>Matheus's Page</title>
</head>
<body>
<div id="wrapper">
<header>
<div class="title-div">
<h1>Title</h1>
</div>
<nav>
<ul>
<li>
<h3>Home</h3>
</li>
<li>
<h3>Articles</h3>
</li>
<li>
<h3>Perfil</h3>
</li>
<li>
<h3>Settings</h3>
</li>
</ul>
</nav>
</header>
<div id="body">
<p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p>
</div>
<footer>
<p>Footer</p>
</footer>
<div>
</body>
</html>
CSS:
body {
font-family: 'Arvo', serif;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
}
header {
position: absolute;
float: top;
width: 100%;
height: 8%;
background-color: #424242;
color: #FFD740;
}
.title-div {
position: absolute;
height: 100%;
margin: auto 5%;
padding-right: 3%;
border-right: solid 2px #FFD740;
}
header nav {
position: absolute;
width: 75%;
left: 15%;
}
header ul {
list-style: none outside none;
}
header ul li {
display: inline-block;
margin: auto 2% auto 0;
}
#body {
padding: 10px;
padding-top: 8%;
padding-bottom: 15%; /* Height of the footer */
}
footer {
position: absolute;
width: 100%;
height: 15%;
right: 0;
bottom: 0;
left: 0;
color: #FFD740;
background-color: #424242;
clear: both;
}
Link to printscreen of the result:
The accepted answer might be a bit outdated since we have Flexbox now. Give the container a min-height: 100vh and the footer a margin-top: auto so you don't have to deal with absolute positioning and fixed heights.
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: #FFCCCC;
}
.content {
background-color: #CCFFCC;
}
.footer {
background-color: #CCCCFF;
margin-top: auto;
}
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
I think this might help you.
Just showing you the way how to achieve what you want.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
background: #ededed;
padding: 10px;
}
#content {
padding-bottom: 100px;
/* Height of the footer element */
}
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}
<div id="wrapper">
<div id="header">
</div>
<!-- #header -->
<div id="content">
</div>
<!-- #content -->
<div id="footer">
</div>
<!-- #footer -->
</div>
<!-- #wrapper -->
Make sure the value for 'padding-bottom' on #content is equal to or greater than the height of #footer.
Update:
JSFiddle Demo to play around.
I'm using Bootstrap 4 and this worked for me link.
I did this way in the CSS file (base.css):
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
footer{
padding: 3em;
margin-top: auto;
}
And I've linked the css file in the html (base.html):
<head>
<link rel="stylesheet" type="text/css" href="'<path to css>'"/>
</head>
This is what worked for me:
When I tried bottom 0 and right 0, there was some annoying bottom margin below the footer which would not go away.
I fixed it with top: 100% and position absolute:
body{
height: 100%;
width: 100%;
position: relative;
}
footer{
background-image: linear-gradient(to right, #c10f3f, #010168);
padding: 1em;
width: 100%;
top: 100%;
position: absolute;
}
You may try this styling;
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
header {
position: absolute;
float: top;
width: 100%;
height: 8%;
background-color: #424242;
color: #FFD740;
}
.title-div {
position: absolute;
height: 100%;
margin: auto 5%;
padding-right: 3%;
border-right: solid 2px #FFD740;
}
header nav {
position: absolute;
width: 75%;
left: 15%;
}
header ul {
list-style: none outside none;
}
header ul li{
display: inline-block;
margin: auto 2% auto 0;
}
footer {
height: 100px;
padding-top: 15px;
padding-left: 15px;
color: #FFD740;
background-color: #424242;
}
Here is a demo
the answer posted by #divy3993 works but sometimes making footer absolute keeps it stranded on the middle of the page. Atleast that's what had happened to me. So I made a small change, I'll post it below
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: relative; //make relative instead of absolute
bottom: 0;
left: 0;
}
Try this:
css:
#footer
{
position: relative;
background-size: cover;
background-position: 50% 50%;
background-color: #ffab62;
}
html:
<doctype HTML>
<HTML>
<head>
</head>
<body>
<div id = footer></div>
</body>
</HTML>
I'm using bootstrap 4 and mdboostrap and I had the same problem.
the inline style worked for me:
<footer class="page-footer lighten-5"
style="position: relative; bottom:0; width: 100% !important;" >
....
</footer>
Your first mistakes are just using absolute position on everything and min-height on many stuff you don't need.
For starter just remove all absolute stuff and put min-height only in div named "body" after that footer will be glued to the #body by default, after that your footer won't be flying around where ever it wants.
Best way to use absolute in divs is:
- when you already have existing div with relative position, and then you put another div with an absolute position inside of a div with a relative position.
Also, play only with pixel values if you start going with % you will get lost like you already did.
position: fixed
Use this to set position to Fixed.
my code is all jumbled up I believe. I have a ton of white space down at the bottom of my page and I don't know why. I've basically just been going with whatever works thus far but I also want my page to be responsive and it scales really weird atm. This is probably a really hard question to help with but if anyone can I would be super grateful. Any suggestions on what to do are extremely appreciated.
Heres the code:
http://jsbin.com/rugidepebe/1/edit?html,css,output
HTML
<!Doctype html>
<html>
<head>
<title>Application</title>
<link rel="stylesheet" type="text/css" href="standard.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="margin-right">
</div>
<div id="margin-left">
</div>
<div id="navbar">
</div>
<div id="contenthead">
<h1 id="AppHead">Application</h1>
</div>
<div id="appbike">
<h2>Walk/Bike</h2>
<img src="images/bike.png" id="bike"/>
</div>
<div id="appmotor">
<h2>Motor</h2>
<img src="images/car.png" id="car"/>
</div>
</body>
</html>
CSS
body {
margin: 0px;
}
#navbar {
position: fixed;
width: 100%;
height: 50px;
background-color: #0C4564;
z-index: 3;
}
#margin-right {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
right: 0;
z-index: 1;
}
#margin-left {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
z-index: 2;
}
#AppHead {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-size: 3.5em;
font-weight: 600;
color: #575757;
}
#contenthead {
display: inline-block;
width: 100%;
margin-top: 50px;
margin-bottom: 10px;
}
#appbike {
position: relative;
width: 15%;
height: 500px;
background-color: #53A78F;
text-align: center;
margin-left: 25%;
margin-top: 5%;
}
#bike {
width: 70%;
position: relative;
margin-top: 50%;
}
#appmotor {
position: relative;
bottom: 10;
float: right;
width: 15%;
height: 500px;
background-color: #53A78F;
bottom: 498px;
margin-right: 25%;
}
h2 {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 2 em;
}
#car {
width: 70%;
position: relative;
margin-top: 50%;
text-align: center;
margin-left: 15%;
}
You still have to treat the hmtl & body as wrappers sometimes, you're setting the height to 150%, of which it's parent height is auto so it is a bit confused. Just change your first rule to the following:
body, html {
margin: 0px;
padding:0;
height:100%;
}
Adding in height 100% should fix your issue, also added in padding:0; and the html doc to the css selector.
I'm trying to put together a page that has a Header, navigation tabs that float over the bottom of the header, body content and then a footer. This should be fairly easy, but I'm running into a strange result.
The menu has to float over the header image, as that image may be static, or it may be a slider... or it may be an embedded Google map.
I've mocked up the code below and essentially the CSS for it. The problem is that even though I have the footer set to the bottom, when I view the page and the body has enough content, the footer seems to be floating over the body content and the body content extends past the bottom of the footer.
Here is my code.
Would appreciate someone smarter than me looking at this and making any suggestions.
<style>
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
.mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
}
.mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
z-index: 100;
color: #fff;
margin-top: 310px;
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
.mynavigation li.is-active {
color: #474747;
background-color: #fff;
}
.mynavigation li a{
color: #fff;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
</style>
<div id="header">
<img src="/images/myimage" />
</div>
<div id="mynavigation">
<!-- css makes this a tab menu and it needs to position at the bottom of the image <div> -->
<!-- so it looks like a white tab that is merged wit the whit body to look as if they are whole/together -->
<ul>
<li>Home</li>
<li>Examples</li>
<li>Other</li>
<li>Last</li>
</ul>
</div>
<div id="bodycontent">
<!-- page content goes here and has a white background -->
</div>
<div id="footer">
<!-- footer content here -->
</div>
Working Fiddle http://jsfiddle.net/u2qL4j8a/2/ You had wrongly mentioned the CSS selector for navigation and footer as classes whereas in the HTML you have mentioned these as IDs.
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
#mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
position: fixed;
top: 0;
left: 0;
}
#mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
/*z-index: 100;
color: #fff;
margin-top: 310px;*/
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
Make your HTML structure like so:
<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="mynavigation"></div>
<div id="content">
<!-- CONTENT STUFF -->
</div>
<div id="footer"><!-- FOOTER STUFF --></div>
</body>
</html>
...And your CSS like so:
html{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#mynavigation{
position: absolute;
top: 350px;
height: 50px;
width: 100%;
}
#content{
position: absolute;
top: 350px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}
I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<div class="link">Home</div>
<div class="link">Wie is wie</div>
<div class="link">Foto's</div>
<div class="link">Repertoire</div>
<div class="link">Links</div>
<div class="link">Contact</div>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS:
/* PAGE LAYOUT */
html
{
padding: 0px;
margin: 0px;
}
body
{
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
}
.clear
{
clear: both;
}
/* HEADER */
#header
{
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
}
#logo
{
width: 283px;
height: 100px;
margin: auto;
}
#logotitel
{
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
}
/* NAV */
#nav
{
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
}
#links
{
width: 600px;
height: 50px;
margin: auto;
}
.link
{
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
.link:hover
{
color: #282828;
text-decoration: underline;
}
/* CONTENT */
#content
{
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
}
/* FOOTER */
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
}
#copy
{
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
}
Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.
Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/
Therefore, footer would become:
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
}
If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute
To have a footer at the bottom, centered horizontally, you can apply the following CSS:
footer{
width: 100%;
max-width: 600px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.
See this Fiddle for an example