Something is wrong with my code.
I don't understand why the scrollbar is visible?
Why do I need to add <br /> to content for the text will be show?
#main {
transition: margin-left .5s;
padding: 16px;
}
#header {
transition: margin-left .5s;
position: fixed;
right: 0;
left: 0;
top: 0;
background: #ededed;
font-weight: 700;
z-index: 10;
height: 70px;
}
#content {
margin-top: 70px;
}
#footer {
background: #ffab62;
width: 100%;
height: 20px;
position: fixed;
bottom: 0;
left: 0;
}
<div id="mySidenav" class="sidenav">
×
×
<div id="menu">
<ul id="myUL">
</ul>
</div>
<p>סה"כ: 50 ש"ח</p>
</div>
<div id="wrapper">
<div id="site">
<div id="header">
<ul>
<div id="referNav">
<li>
<div id="referLink1">הזמנה חדשה
</div>
</li>
<li>
<div id="referLink2">2
</div>
</li>
</div>
</ul>
</div>
</div>
<!-- #header -->
<div id="content">
<br />
<input type="text" id="myInput" placeholder="Title...">
<span onclick="newElement()" class="addBtn">Add</span>
</div>
</div>
<!-- #wrapper -->
Add overflow: hidden; to the <body> and the scrollbar should be hidden. I don't know the answer to your second question, but I think I've gave you the answer for the first question.
Related
I'm trying to create a footer class however it seems to be at the bottom of my .body-wrap class as opposed to the actual page.
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
I'm also using a bootstrap sidebar template. Found here: http://startbootstrap.com/template-overviews/simple-sidebar/
Help would be appreciated.
Please try to add this code:
.footer-wrap {
border: 1px black solid;
position: fixed;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
width: 100%;
bottom: 0;
left: 0;
}
Use position:fixed with bottom:0 it will remain stable at bottom of page
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: fixed;
bottom:0;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
You would need position: fixed and bottom: 0 on your footer-wrap. Check the update below!
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: fixed;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
bottom: 0;
left: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
width:100%;
border: 1px black solid;
position: absolute;
bottom:0px;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
Add width and height to your .body-wrap and width to footer too. Changes footer position as in below codes.
.body-wrap {
width:200px;
height: 200px;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
background:#111;
color:#fff;
}
.footer-wrap {
border: 1px black solid;
z-index: 9;
height: 3em;
text-align: center;
background:#f22;
bottom:0;
position:absolute;
width:100%;
}
Currently, I've made it so that the sidebar appears where the 'apply' page starts. I want the sidebar to then remain in that position as the user continues to scroll down. Another thing that confuses me is that when I set the position to 'absolute' for the bar, it just disappears completely. Why does this happen?
CSS:
#navbar {
background-color: black;
overflow: auto;
height: 100%;
width: 25%;
z-index: 1000;
float: right;
}
#navbar-links {
list-style-type: none;
display: block;
}
#apply {
background-color: red;
}
#about {
background-color: orange;
}
#sponsor {
background-color: green;
}
HTML:
<div id="pages">
<!-- apply page -->
<div id="apply" class="sections" tabindex='2'>
<!-- navigation bar -->
<div id="navbar">
<ul id="navbar-links">
<li>Apply</li>
<li>About</li>
<li>Sponsor</li>
</ul>
</div>
<div class="container">
</div>
</div>
<!-- about page -->
<div id="about" class="sections" tabindex='3'>
<div class="container">
</div>
</div>
<!-- sponsor page -->
<div id="sponsor" class="sections" tabindex='4'>
<div class="container">
</div>
</div>
</div>
You need to use position: fixed fix the position to the view.
You can then use: top right left and bottom to put the element where you want it to be. So right: 0; and top: 0; put the element 0px from the right and top.
The same is true for position absolute, if you didn't use any of those that may be why it disappeared.
See here for more details on css position property: http://www.w3schools.com/cssref/pr_class_position.asp
#navbar {
position: fixed;
right: 0;
top: 0;
background-color: black;
color: white;
overflow: auto;
height: 100%;
width: 25%;
z-index: 1000;
}
#navbar-links {
list-style-type: none;
display: block;
}
#apply {
background-color: red;
}
#about {
background-color: orange;
}
#sponsor {
background-color: green;
}
<div id="pages">
<!-- apply page -->
<div id="apply" class="sections" tabindex='2'>
<!-- navigation bar -->
<div id="navbar">
<ul id="navbar-links">
<li>Apply</li>
<li>About</li>
<li>Sponsor</li>
</ul>
</div>
<div class="container">
</div>
</div>
<!-- about page -->
<div id="about" class="sections" tabindex='3'>
<div class="container">
</div>
</div>
<!-- sponsor page -->
<div id="sponsor" class="sections" tabindex='4'>
<div class="container">
</div>
</div>
</div>
I'm really not sure that my title is correct english. Hehe. But fortunately I can explain my problem in pictures ;-)
My problem is this:
body {
font: calibri;
background-color: #2d2e29;
margin-left: 150px;
margin-right: 150px;
margin-bottom: 0px;
margin-top: 0px;
}
p {
margin: 0px;
}
nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #FFFFFF;
opacity: 0.75;
top: 0;
left: 0;
margin-left: 150px;
margin-right: 150px;
}
nav ul {
float: right;
list-style-type: none;
padding: 0;
margin-top: 30px;
margin-right: 30%;
}
nav li {
display: inline;
}
nav a {
margin: 5px;
color: black;
}
nav a:hover {
color: #99cccc;
}
#Forside {
background-color: #3f5c93;
height: 800px;
}
#Mig {
background-color: #ccc2a6;
height: 800px;
}
#Faerdigheder {
background-color: #3f5c93;
height: 800px;
}
#Projekter {
background-color: #ccc2a6;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Kontakt {
background-color: #3f5c93;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#logo {
height: 100%;
width: 200px;
background: url("Logo.png");
margin-top: 10px;
margin-left: 50px;
background-repeat: no-repeat;
position: absolute;
background-size: 200px;
}
<div id="all">
<nav>
<!-- navigations-element (menu) -->
<div id="logo"></div>
<ul>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Forside">
Forside
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Mig">
Mig
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Faerdigheder">
Færdigheder
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Projekter">
Projekter
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Kontakt">
Kontakt
</a>
</li>
</ul>
</nav>
<div id="Forside">
<br>
<br>
<br>
<br>
<br>Forside
</div>
<div id="Mig">
<br>
<br>
<br>
<br>
<br>
<div class="meleft">
<h1>Mig</h1>
<p class="textleft">Lots of words
</p>
</div>
<div class="meright">
<img src="sdp.png" alt="sdp" id="sdp1" />
</div>
</div>
<div id="Faerdigheder">
<br>
<br>
<br>
<br>
<br>
<div class="skillsleft">
<img src="Collage1.png" alt="Collage" id="Collage" />
</div>
<div class="skillsright">
<h1>Færdigheder</h1>
<p class="textright">Lots of words
</p>
</div>
</div>
</div>
I added my code to fiddle, so you can see the problem:
http://jsfiddle.net/9Lj6ck3L/
I hope you can understand the code even though some words is in Danish :-)
Given the HTML and CSS provided, set the width of the nav to calc(100% - 300px);
Demo Fiddle
Otherwise you are telling it to be the full viewport width, offset from the left by 150px which is why it seems to overspill to the right. Using calc you can say, "fine, stretch to the viewport width, but minus the margins"
Working fiddle - http://jsfiddle.net/9Lj6ck3L/11/
Changed width of your header bar.
nav {
position:fixed;
width:63.5%;
height:80px;
background-color:#FFFFFF;
opacity:0.75;
top:0;
left:0;
margin-left:150px;
margin-right:150px;
}
Hope this helps.
Your problem is position:fixed. This element does not inherit anything from it's parent in terms of width.
Your best bet would be to wrap the nav in another <div> and make that position fixed. Then give the <nav> inside it the width that you want.
Move the <nav> outside of the #all div and put your margins on #all instead of the body.
Then give your <nav> css of box-sizing: content-box or box-sizing: padding-box to solve the width issue.
I want the footer to stay at the bottom of the page. Right now, it's at the top... I've posted my html and all my css so you can see. I figured it might be easier to do it that way? I've tried to add containers that stretch the body to the bottom, but it messes with my other containers on the page and makes them fall off way into the top. I need a quick answer because this is due in a week!
* {
margin:0;
padding:0;
}
body {
font-family:Arial;
background:#fff url(images/bg1.png) repeat;
background-size: 700px;
height: 100%;
min-height: 100%;
}
.title {
width:548px;
height:119px;
position:absolute;
background:transparent url(title.png) no-repeat top left;
}
#content {
margin:0 auto;
}
#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block;
}
#stuff {
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #fff;
opacity: 0.6;
margin-left: -500px;
position: absolute;
top: -125px;
left: 50%;
width: 1000px;
height: 250px;
visibility: visible;
overflow: scroll;
padding: 10px;
border: 5px dotted #F3DECD;
text-align: center;
}
footer {
}
<body>
<div id="content">
<div class="title"></div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<h2>Home</h2>
<ul>
<li>About the Shop</li>
<li>About the Artist</li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>How-To's</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<h2>Portfolio</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
<li>Digital</li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<h2>Contact</h2>
<ul>
<li>Questions</li>
<li>Suggestions</li>
</ul>
</div>
</div>
</div>
<div id="horizon">
<div id="stuff">
<h2> Welcome! </h2><br>
<p>This is a page that I have created for all my jewelry. This will be updated with new information periodically.</p>
</div>
</div>
<footer>
<a href="">
<img height="32" width="32" alt="'s Deviantart" src="deviantart.png">
</a>
<a href="">
<img height="32" width="32" alt="'s Think Jewelry Page" src="facebook.png">
</a>
</footer>
you could simply set a div with a position of absolute. It would look something like this:
html:
<div id='footer'></div>
css:
#footer{
height:45px;
width:100%;
background-color:grey;
position:absolute;
bottom:0;
}
You can use a fixed footer:
HTML
<footer>
...
</footer>
CSS
footer {
position: fixed;
left: 0px;
bottom: 0px;
height: 150px;
width: 100%;
}
The footer will always be visible in the viewport at the bottom of your page, check out this codepen.
If you are looking for a sticky footer approach check this.
For a sticky footer that is always present at the end of main content, I’ve always found using a wrapper containing a negative push div (set as the same size as the required footer) is a simple, yet the most solid approach.
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
min-height: 100%;
margin: 0 auto -150px;
}
.push {
height: 150px;
}
footer {
height: 150px;
background-color: #900; /*red */
}
HTML
<html>
<head>
<!-- -->
</head>
<body>
<div class="wrapper">
<p>Main Content</p>
<!-- -->
<div class="push"></div>
</div>
<footer>
<p>Footer Content</p>
<!-- -->
</footer>
</body>
</html>
See codepen example here:
http://codepen.io/anon/pen/EaPRQb
Simply change the push div and footer heights to be the desired height (in my example 150px) and the wrapper's bottom margin to be a negative of that height (ie. -150px in my example)
You can try like this,
footer
{
position:fixed;
}
I currently have an absolute div that I use for the main content of the page, I need to create a space at the bottom of the div, to allow the footer to show. The footer is fixed, so the absolute div is treated as the last element I guess, thus meaning that there's no space at the bottom, the idea is to create a sort of scrollin effect like so:
First scroll in
This is on a larger screen, but the issue comes when it's rendered on a smaller screen, as there just seems to be no space at the bottom of the main content div.
Here's what I have currently:-
HTML:
<div id="container">
<div id="Navigation" class="transparent">
<div id="nav" class="transparent">
<div class="wrapper" class="transparent">
<div class="navigation" class="transparent">
<ul class="navigation-elements transparent" styles="cursor: pointer;margin-left: 10px;">
<li id="logo-li">
<a href="http://cms.manciniyoungphotography.com">
<img src="/img/logo.png" title="Mancini Young Photography" alt="Mancini Young Photography" id="icon"/>
</a>
</li>
<li style='cursor: pointer;' id='navigation-link' class='blog' onClick="navClick(this); autoScroll('blog');">
Blog
</li>
<li style='cursor: pointer;' id='navigation-link' class='contact' onClick="navClick(this); autoScroll('contact');">
Contact
</li>
<li style='cursor: pointer;' id='navigation-link' class='portfolio' onClick="navClick(this); autoScroll('portfolio');">
Portfolio
</li>
<li style='cursor: pointer;' id='navigation-link' class='about-us' onClick="navClick(this); autoScroll('about-us');">
About Us
</li>
<li style='cursor: pointer;' id='navigation-link' class='home selected' onClick="navClick(this); autoScroll('home')">
<!--<span class="glyphicon glyphicon-home" style="float: left;margin-left: 10%;"></span>-->
Home
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="main" style='background: #dadada url("/img/background_shapes.png") repeat-y scroll center top, url("/img/blue_bg.png") repeat-x scroll left top transparent;'>
<div class="shapes">
<div id="inner-main">
<div class="wrapper">
<div id='firstBlockContainer'>
<div id='FBL'>
<div id="canvas-one" ></div>
<div id="canvas-two" ></div>
<div id="canvas-three" ></div>
<div id="home" class="parallax-cont"></div>
<div id="about-us" class="parallax-cont">
<div id="about-content" class="generic">
<div class="title">This is the title</div>
Hello, this is where the content for Mancini Young Photography's about us section will go.
</div>
</div>
<div id="portfolio" class="parallax-cont"></div>
<div id="contact" class="parallax-cont">
<div id="contact-us-header">
<img src="/img/logo.png" />
</div>
<div id="contact-us-form">
<form name="contact-us" method="POST" action="">
<input class="form-control" type="text" placeholder="Name" class="contact-form" />
<input class="form-control" type="text" placeholder="Email" class="contact-form" />
<input class="form-control" type="text" placeholder="Company Name" class="contact-form" />
<input class="form-control" type="text" placeholder="Website" class="contact-form" />
<input class="form-control" type="text" placeholder="Telephone No." class="contact-form" />
<input class="form-control" type="textarea" placeholder="Message" class="contact-form" />
<input type="submit" class="form-control" />
</form>
</div>
</div>
<div id="blog" class="parallax-cont">
<div class="previous-button"></div>
<div id="blog_container">
<div id="postContainer"></div>
</div>
<div class="next-button"></div>
</div>
<div id="main-content"></div>
<script type="text/javascript" src="/js/blog-post-loader.js"></script>
</div>
</div>
</div>
</div>
</div>
<div id="footer" >
<div class="wrapper">
<div class="left leftFooter">
<ul class='selected' style='color: #fafafa'>
<a href='http://cms.manciniyoungphotography.com' >Home</a>
</ul>
<ul>
<a href='#portfolio' style='color: #fafafa;'>Portfolio</a>
</ul>
<ul>
<a href='#blog' style='color: #fafafa;'>Blog</a>
</ul>
<ul>
<a href='#about' style='color: #fafafa;'>About Us</a>
</ul>
<ul>
<a href='#contact' style='color: #fafafa;'>Contact</a>
</ul>
</div>
<div id="userFooterContents" ></div>
</div>
</br>
</div>
</div>
CSS:
#main-content {
z-index: 20;
position: absolute;
top: 90%;
width: 100vw;
background: #dadada;
border-top: #0c0c0c;
height: 100vh;
min-height: 800px;
vertical-align: top;
}
#footer {
position: fixed;
z-index: 0;
bottom: 0;
min-height: 10%;
background: #26262B;
box-shadow: -1px -2px 8px #0c0c0c;
padding: 20px;
width: 100%;
}
#copyright {
position: fixed;
z-index: 2;
bottom: 0;
float: left;
background: #0c0c0c;
color: #A69F88;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#main-content is the area where the main body of the content is, and the gap I need is to show #footer and #copyright
Here's the working example of the website:
http://cms.manciniyoungphotography.com/
if i understand this right you probably make things a bit too complicated, but that's just me. :)
try these changes:
#main-content {
top: 0;
z-index: 0;
}
#footer {
z-index: 1;
}
For what I understand, you're going for full screen. There are many approaches, but try this:
#main-content {
z-index: 20;
position: absolute;
top: 0;
bottom:0;
left:0;
right:0;
width: 100vw;
background: #dadada;
border-top: #0c0c0c;
height: 100%;
min-height: 800px;
vertical-align: top;
padding-bottom:10%;
z-index:-1;
}
#footer {
position: fixed;
z-index: 0;
bottom: 0;
min-height: 10%;
background: #26262B;
box-shadow: -1px -2px 8px #0c0c0c;
padding: 20px;
width: 100%;
z-index:2;
}
#copyright {
position: relative;
z-index: 2;
bottom: 0;
float: left;
background: #0c0c0c;
color: #A69F88;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}