I tryed to create a simple dropdown menu, but i dont get it...
I looked at some tutorials now and the position of the submenu is crap. I want a "normal" dropdown menu nothing special. The problem is maybe the position absolute, but in the tutorial he used it too. The Dropdown menu is at the secound point (Produkte). Here is my Page: Page and the Code:
*{
padding: 0px;
margin: 0px;
font-family: Raleway;
line-height: 20px;
color: #003399;
}
body{
background-image: url(images/hintergrund.png);
}
section{
margin-top: 50px;
width: 1100px;
background: white;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: #fcb774;
}
article{
width: 100%;
}
article:after{
content: '';
display: block;
clear: both;
}
.bild{
height: 200px;
width: 200px;
float: left;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
overflow: hidden;
}
.bild:hover{
cursor:pointer;
}
.text{
float: right;
width: 860px;
word-wrap: break-word;
height: 200px;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
background-color: white;
}
hr{
margin-top: 50px;
margin-bottom: 50px;
border: 1px solid black;
}
nav{
width: 100%;
}
nav ul{
background-color: #fcb774;
margin: 0px;
padding: 0px;
text-align: center;
font-size: 0;
border-bottom: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
}
nav ul li{
display: inline-block;
font-size: 16px;
}
nav ul li a{
display: block;
padding: 10px 20px 10px 20px;
transition: all 0.5s;
text-decoration: none;
}
nav ul li a:hover{
background-color: white;
text-decoration: underline;
}
.dropdown{
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
nav ul li:hover .dropdown{
display: block;
}
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="index.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slide1').cycle({
fx: 'fade',
next: '.slide1',
timeout: 0
});
})
$(document).ready(function() {
$('.slide2').cycle({
fx: 'fade',
next: '.slide2',
timeout: 0
});
});
$(document).ready(function() {
$('.slide3').cycle({
fx: 'fade',
next: '.slide3',
timeout: 0
});
});
</script>
</head>
<body>
<nav>
<ul>
<li>Startseite</li>
<li>Produkte
<ul class="dropdown">
<li><a>T-Shirts</a></li>
<li><a>Ansteckbuttons</a></li>
<li><a>SexToys</a></li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
<section>
<article>
<div class="bild slide1">
<img src="images/tshirt1.png" width="200" height="200" />
<img src="images/tshirt2.png" width="200" height="200" />
</div>
<div class="text">
<h1>T-Shirts</h1>
</div>
</article>
<hr>
<article>
<div class="bild slide2">
<img src="images/tshirt3.png" width="200" height="200" />
<img src="images/tshirt4.png" width="200" height="200" />
</div>
<div class="text">
<h1>T-Shirts</h1>
</div>
</article>
<hr>
<article>
<div class="bild slide3">
<img src="images/tshirt3.png" width="200" height="200" />
<img src="images/tshirt4.png" width="200" height="200" />
</div>
<div class="text">
<h1>T-Shirts</h1>
</div>
</article>
</section>
</body>
</html>
Using position: absolute removes the element from the flow of the document and by nature becomes relative to the document. You need to contain the submenu in it's parent by using position: relative. Add that to your parent li like so:
nav ul li {
display: inline-block;
font-size: 16px;
position: relative; //add
}
FIDDLE
Related
I'm trying to re-create Google's home page to try and improve my very basic skills. I'm trying to apply word spacing to the links in the navbar (Gmail & Images) but I can't get it to work. Can anyone point out where I'm going wrong?
I've just realised list-style-type: none; hasn't altered anything either.
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border: 1px solid lightgray;
outline: none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166, 166, 166, 0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight: bold;
}
.divider {
width: 10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
list-style-type: none;
word-spacing: 30px;
}
<nav>
<div class="nav-wrapper">
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="googlemain.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
padding-left would work fine.
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border:1px solid lightgray;
outline:none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166,166,166,0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight:bold;
}
.divider {
width:10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrapper">
<ul>
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
</body>
</html>
Don't Required:
word spacing
<div class="dividerTwo"></div>.
Do only :
Apply some padding around .nav-wrapper a
.nav-wrapper a {
float: right;
list-style-type: none;
padding:0 .5em;
}
In this scenario you should use margin CSS property instead of word-spacing. The end CSS rule would look as follows:
.nav-wrapper a {
float: right;
list-style-type: none;
margin-left: 15px;
}
I want to create a homepage where you see an image at first with the actual navigation bar on the bottom of the browser. When you scroll down the navigation should stick to the top when it reaches the top of the browser.
I got 1 Logo on the left of the screen and the navigation on the right. The navigation should have a background as a bar across the screen and the logo should overlap this. When I scroll down i first want the logo (which is for example 250px high) to stick to the top and then when i further scroll down i want the navigation + background (about 100px) also to stick to the top. I don't know why the white space is generated either. Between the first and the second picture there should only be about 100px (the height of the grey bar(navigation bar). With this code everything except the background bar works..
#charset "utf-8";
*{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.top-container{
position: absolute;
width: 100%;
}
.stopleft{
padding-top: 34%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: left;
}
.stopright{
padding-top: 44.2%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: right;
}
.whiteBarSmall{
width: 100%;
padding-top: 5%;
background-color: #fff;
position: absolute;
}
.logo{
position: sticky;
top: 0;
width: 50%;
float: left;
}
.navigation{
margin: 0px 0px 0px 0px;
border: solid 0px #000;
position: sticky;
top: 0;
width: 50%;
float: right;
}
.navigation ul{
height: 100px;
}
.button{
list-style: none;
margin: 25px 20px 25px 20px;
float: right;
}
.navBackground{
border: solid 0px #000;
position: sticky;
top: 0;
width: 100%;
padding-top: 5%;
background-color: #a7a7a7;
float: right;
z-index: -1;
}
.whiteBarLarge{
width: 100%;
padding-top: 10%;
background-color: #fff;
}
.indexImage{
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
footer{
width: 100%;
padding-top: 2.5%;
background-color: #a7a7a7;
}
.navigation a:link {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:visited {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:focus {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:hover {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:active {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="description" content="…." />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="pics/favicon.ico" />
<link rel="stylesheet" href="styles/basics.css" type="text/css" />
<link rel="stylesheet" href="styles/index.css" type="text/css" />
<link rel="stylesheet" href="styles/links.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Volkhov" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="stopleft"></div>
<div class="stopright"></div>
<div class="logo"><img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" width="50%" /></div>
<div class="navigation">
<ul>
<li class="button">Über uns</li>
<li class="button">Kontakt</li>
<li class="button">Preise</li>
<li class="button">Blog</li>
<li class="button">Galerie</li>
</ul>
</div>
<div class="navBackground"></div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</body>
</html>
I am having a lot of trouble with this bar...
Hope someone can help me. Thanks!
Is that what you want?
#charset "utf-8";
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #808080;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
/* height: 1500px; */ /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="navbar">
<img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" class-="logo" height=50 width=50 style="float: left">
Galerie
Blog
Preise
Contact
Über uns
</div>
<div class="main">
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</div>
</body>
</html>
I just recently fixed, thanks to you guys, how to get my header to not overlap my content when the size of page changes. Now, I was told to group my nav bar, with my h1 header, so that they can be in a fixed position together, but when I do that, it messes everything up. So now I'm looking to get some help into making my nav bar stay right under my header in a fixed position without overlapping content. It can be seen when you view my website, in a full page, how I want it. You can also see how the nav bar gets messed up when you change the size of the webpage.
first of my webpage is hosted here: https://knox-enterprise-inc.herokuapp.com/About.html
second here is my code for this page:
<!DOCTYPE html>
<html lang="en-us">
<link rel="stylesheet" href="normalize.css">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js" type="text/javascript"></script>
<title> Knox Enterprises Inc.</title>
</head>
<body>
<header>
<h1>Knox Enterprises Inc.</h1>
<div class="nav">
Home
About
Contact
</div>
</header>
<div class="content">
<div class="home">
<div class="home-pictures">
<img src="http://i64.tinypic.com/14o91c1.jpg" width="300px" height="225px">
<img src="http://i63.tinypic.com/2rpzh3p.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="http://i68.tinypic.com/rswqoy.jpg" width="300px" height="225px">
<img src="http://i66.tinypic.com/2lm8bdg.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Riveredge, NJ</h5>
<h5>Date Completed: June 2014</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_5.jpg" width="300px" height="225px">
<img src="home_6.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_7.jpg" width="300px" height="225px">
<img src="home_8.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Teaneck, NJ</h5>
<h5>Date Completed: March 2015</h5>
</ul>
</div>
<div class="home">
<div class="home-pictures">
<img src="home_9.jpg" width="300px" height="225px">
<img src="home_10.jpg" width="300px" height="225px">
</div>
<div class="home-pictures2">
<img src="home_11.jpg" width="300px" height="225px">
<img src="home_12.jpg" width="300px" height="225px">
</div>
<div class="home-description">
<ul>
<h5>Tenafly, NJ</h5>
<h5>Date Completed: August 2016</h5>
</ul>
</div>
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
background-image:url("backround.jpg");
background-repeat: repeat-y;
}
header {
height: 220px;
}
#about-header{
height: 100px;
}
#contact-header{
height: 100px;
}
/*Knox Header*/
h1 {
position: fixed;
top: -40px;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url("header.jpg");
font-size: 60px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
z-index: 1;
}
/*Nav Menu/Home Page*/
.nav {
position: fixed;
top: 78px;
background-image:#606060;
overflow: hidden;
}
.nav a {
font-family: Helvetica;
background-color:black;
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 12px;
text-decoration: none;
font-size: 12px;
border-right: 2px solid orange;
border-bottom: 2px solid orange;
border-top: 2px solid orange;
letter-spacing: 2px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.home {
text-align:center;
padding-top: 10px;
padding-bottom: 10px;
}
.home-pictures, .home-pictures2{
height:auto;
width:auto;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.home img {
border: 1px solid white;
}
.home-description {
line-height: 0px;
color: white;
letter-spacing: 2px;
font-family: Helvetica;
font-size: 18px;
}
/*About Page*/
.about, .about-description {
text-align: center;
color: white;
font-family: helvetica;
letter-spacing: 2px;
}
.about-description {
padding-top:100px;
}
.about-description p {
font-family: helvetica;
letter-spacing: 2px;
margin:0 auto;
width: 40%;
color:white;
}
.about img {
position: relative;
top: 80px;
margin-left:0 auto;
margin-right:0 auto;
padding-top: 30px;
padding-bottom: 30px;
transform: rotate(90deg);
}
#last{
padding-bottom: 40px;
}
.contact {
text-align:center;
padding-top:125px;
color:white;
font-family: helvetica;
letter-spacing: 2px;
}
#phone-contact img{
border-radius:100%;
}
#email-contact img{
border-radius: 30%;
}
The main problem that your position: fixed is on your <h1> tag instead of your header itself. To rectify this, first shift all of your h1 styling to #about-header instead:
#about-header {
position: fixed;
top: -40px;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url("header.jpg");
font-size: 60px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
}
Next, remove the pre-existing heights of 100px and 220px in #about-header and header respectively. These are set on lines 10 and 7 of style.css respectively.
Also remove top: -40px, and lower the font-size to 0.9em (you may want a media query to modify that font at different sizes).
Finally, you need to make use of z-index so that your header appears on top of any content that it scrolls over:
#about-header {
z-index: 1;
}
Your final #about-header should end up as:
#about-header {
position: fixed;
width: 100%;
font-family: Georgia;
color: white;
text-shadow: 4px 4px black;
background-image: url(header.jpg);
font-size: 0.9em;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid orange;
border-top: 5px solid orange;
z-index: 1;
}
This will cause the sub-header to 'attach` to main header for both desktops and mobiles, and both headers will overlap all other content on all resolutions.
Hope this helps! :)
I have this page with a sidebar and I want the content in the sidebar to move down with the page but only if you scroll past it. So If you are at the top of the page it would be at the top of the sidebar but if you are at the bottom it would be at the top of the screen. How would you do that? I tried using position: fixedbut that just moves it with the screen no matter what and I only want it to move if the top reaches it.
Gif of Webpage with sidebar content that has the position fixed:
Here's the CSS of the content:
#content-list {position: fixed;}
#content-list ul {padding: 0px; list-style: none;}
#content-list li { padding-bottom: 25px; }
Here's the HTML of the content:
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<li>Quick Description</li>
<li>Help Menu</li>
</ul>
</nav>
</div>
EDIT
I would like to be able to do this using only CSS/HTML if possible (No javascript etc.)
Full demo:
/* imports a Google font */
#import url(https://fonts.googleapis.com/css?family=Oswald);
#import url(https://fonts.googleapis.com/css?family=Lora);
/* creates an 800px-wide space centered on the page, to constrain line width. it also specifies a default typeface and line height for the entire body of the document */
body {
background: #551A8B;
margin: 0;
color: white;
}
#body {
text-align: center;
display: table;
position: absolute;
height: 100%;
width: 100%;
font-size: 150%;
}
#main {
display: table-cell;
vertical-align: middle;
line-height: 150%;
font-family: Lora;
padding: 0px;
margin: 0px;
box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
}
.content {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: left;
}
.sidebar {
display: table-cell;
vertical-align: top;
width: 10%;
padding: 10px 10px 0px 20px;
font-family: Oswald;
font-size: 80%;
text-align: left;
background: #450A7B;
box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
}
#content-list {
position: fixed;
}
#content-list ul {
padding: 0px;
list-style: none;
}
#content-list li {
padding-bottom: 25px;
}
#title {
display: table-row;
vertical-align: top;
height: 10%;
padding: 0px;
font-family: Oswald;
background-color: #35006B;
font-size: 120%;
}
#footer {
display: table-row;
vertical-align: bottom;
background-color: #35006B;
overflow: hidden;
white-space: nowrap;
line-height: 20%;
height: 10%;
}
a:link {
color: #FFE303;
text-decoration: underline;
}
a:visited {
color: #E3701A;
text-decoration: underline;
}
a:hover {
color: blue;
text-decoration: underline;
}
h2 {
font-family: Oswald;
}
/* Setup the dropdown menu at the top of the screen */
.menu ul {
padding: 0px;
margin: 0px;
white-space: nowrap;
}
.menu li {
display: inline-block;
width: 25%;
background: #35006B
}
.menu li > ul {
display: none;
}
.menu li:hover {
background: #25005B
}
.menu li:hover > ul {
position: absolute;
display: inline;
box-shadow: 5px 5px 10px black;
-moz-box-shadow: 5px 5px 10px black;
-webkit-box-shadow: 5px 5px 10px black;
margin-top: 40px;
margin-left: -100px;
font-size: 80%;
width: 200px;
}
.menu li li {
display: block;
padding: 10% 75% 10% 10%;
margin: 0px;
}
.menu a {
text-decoration: none;
color: #FFE303;
}
/* Set images to a certain size */
.large-image {
width: 50%
}
.small-image {
width: 25%
}
#links {
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>NecroTheif: Maze Generator Project</title>
<link type="text/css" rel="stylesheet" href="../styles.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta charset="utf-8">
</head>
<body>
<div id="body">
<div id="title">
<h1>Maze Generator</h1>
<ul class="menu">
<a href="#">
<li>
Features
<ul>
<a href="about.html">
<li>About</li>
</a>
<a href="generation.html">
<li>Generating Mazes</li>
</a>
<a href="editing.html">
<li>Editing Mazes</li>
</a>
<a href="settings.html">
<li>Settings</li>
</a>
<a href="saveopen.html">
<li>Save/Open</li>
</a>
</ul>
</li>
</a>
<a href="MazeCreator.exe">
<li>Download</li>
</a>
<a href="api.html">
<li>API</li>
</a>
</ul>
</div>
<div>
<div class="sidebar">
</div>
<div id="main">
<h2 id="quick-description">Quick Description</h2>
<img class="large-image" src="https://i.gyazo.com/93f60cc74d13175ce5aee548cc020b10.png" alt="Picture of the maze creator program." />
<p class="content">The maze creator program is a program that allows you to create mazes of any size with ease. You can create mazes either by using an algorithm to generate them or building them yourself in the creator (You can even combine the two by generating
a maze and then editing it!). You then can save these files as .maz files to be loaded into games or to be edited later in the maze creator!</p>
<h2 id="help-menu">Help Menu</h2>
<img class="small-image" src="https://i.gyazo.com/55ec91a6523562ca82341510c7bdde43.png" alt="Picture of the top of the help menu." />
<img class="small-image" src="https://i.gyazo.com/d121313f333eba42faa37220aa599bb7.png" alt="Picture of the bottom of the help menu." />
<p class="content">This menu in the maze creator shows the basic controls of the creator. Open it by clicking Help or pressing Ctrl+H</p>
</div>
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<a href="#quick-description">
<li>Quick Description</li>
</a>
<a href="#help-menu">
<li>Help Menu</li>
</a>
</ul>
</nav>
</div>
</div>
<div id="footer">
<div id="links">
Main Page
</div>
<p>Developer: Andrew Wetmore (aka NecroTheif)</p>
<p>Last Updated: 11/03/15</p>
</div>
</div>
</body>
</html>
The term for this is 'Sticky sidebar', so you want it to always stick to the top of the page when the user scrolls.
There's millions of plugins for it, I'm particularly fond of this one:
DEMO: http://spoiledmilk.com/demos/sticky-sidebar/
This article explains in detail how to implement it and what it does exactly.
As #Manoj says in a comment this can be done using
position: sticky; position: -webkit-sticky;
Sadly this only works in Firefox and Safari (For now, see here for more info). I went with that and for browsers that don't support it I used this simple javascript (Which does not require JQuery and in my opinion creates a "cleaner" look than most complicated sticky sidebars) and anything I wanted to be sticky was of class "sticky"
// Try to give it sticky position first
function loadStickies(){
var sticky = document.getElementById("content-list");
sticky.style.position = "-webkit-sticky";
sticky.style.position = "sticky";
positionStickies();
}
// If giving it sticky position didn't work do it manually
function positionStickies() {
var sticky = document.getElementById("content-list");
if(sticky.style.position !== "sticky" && sticky.style.position !== "-webkit-sticky"){
if (document.documentElement.scrollTop > sticky.parentNode.offsetTop || document.body.scrollTop > sticky.parentNode.offsetTop)
sticky.style.position = "fixed";
else
sticky.style.position = "relative";
}
}
window.onload = loadStickies;
window.onresize = positionStickies;
window.onscroll = positionStickies;
window.onclick = click;
EDIT
To make the script work in IE and Firefox you must use document.documentElement as well as document.body.
Complete Demo:
// Try to give it sticky position first
function loadStickies(){
var sticky = document.getElementById("content-list");
sticky.style.position = "-webkit-sticky";
sticky.style.position = "sticky";
positionStickies();
}
// If giving it sticky position didn't work do it manually
function positionStickies() {
var sticky = document.getElementById("content-list");
if(sticky.style.position !== "sticky" && sticky.style.position !== "-webkit-sticky"){
if (document.documentElement.scrollTop > sticky.parentNode.offsetTop || document.body.scrollTop > sticky.parentNode.offsetTop)
sticky.style.position = "fixed";
else
sticky.style.position = "relative";
}
}
window.onload = loadStickies;
window.onresize = positionStickies;
window.onscroll = positionStickies;
window.onclick = click;
/* imports a Google font */
#import url(https://fonts.googleapis.com/css?family=Oswald);
#import url(https://fonts.googleapis.com/css?family=Lora);
/* creates an 800px-wide space centered on the page, to constrain line width. it also specifies a default typeface and line height for the entire body of the document */
body {
background: #551A8B;
margin: 0;
color: white;
}
#body {
text-align: center;
display: table;
position: absolute;
height: 100%;
width: 100%;
font-size: 150%;
}
#main {
display: table-cell;
vertical-align: middle;
line-height: 150%;
font-family: Lora;
padding: 0;
margin: 0px;
box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
}
.content {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: left;
}
.sidebar {
display: table-cell;
vertical-align: top;
width: 150px;
padding: 10px 10px 0px 20px;
font-family: Oswald;
font-size: 80%;
text-align: left;
background: #450A7B;
box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
}
#content-list {
top: 0; padding-top:10px;
}
#content-list ul {
padding: 0px;
list-style: none;
}
#content-list li {
padding-bottom: 25px;
}
#title {
display: table-row;
vertical-align: top;
height: 10%;
padding: 0px;
font-family: Oswald;
background-color: #35006B;
font-size: 120%;
}
#footer {
display: table-row;
vertical-align: bottom;
background-color: #35006B;
overflow: hidden;
white-space: nowrap;
line-height: 20%;
height: 10%;
}
a:link {
color: #FFE303;
text-decoration: underline;
}
a:visited {
color: #E3701A;
text-decoration: underline;
}
a:hover {
color: blue;
text-decoration: underline;
}
h2 {
font-family: Oswald;
}
/* Setup the dropdown menu at the top of the screen */
.menu ul {
padding: 0px;
margin: 0px;
white-space: nowrap;
}
.menu li {
display: inline-block;
width: 25%;
background: #35006B
}
.menu li > ul {
display: none;
}
.menu li:hover {
background: #25005B
}
.menu li:hover > ul {
position: absolute;
display: inline;
box-shadow: 5px 5px 10px black;
-moz-box-shadow: 5px 5px 10px black;
-webkit-box-shadow: 5px 5px 10px black;
margin-top: 40px;
margin-left: -100px;
font-size: 80%;
width: 200px;
}
.menu li li {
display: block;
padding: 10% 75% 10% 10%;
margin: 0px;
}
.menu a {
text-decoration: none;
color: #FFE303;
}
/* Set images to a certain size */
.large-image {
width: 50%
}
.small-image {
width: 25%
}
#links {
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>NecroTheif: Maze Generator Project</title>
<link type="text/css" rel="stylesheet" href="../styles.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta charset="utf-8">
</head>
<body>
<div id="body">
<div id="title">
<h1>Maze Generator</h1>
<ul class="menu">
<a href="#">
<li>
Features
<ul>
<a href="about.html">
<li>About</li>
</a>
<a href="generation.html">
<li>Generating Mazes</li>
</a>
<a href="editing.html">
<li>Editing Mazes</li>
</a>
<a href="settings.html">
<li>Settings</li>
</a>
<a href="saveopen.html">
<li>Save/Open</li>
</a>
</ul>
</li>
</a>
<a href="MazeCreator.exe">
<li>Download</li>
</a>
<a href="api.html">
<li>API</li>
</a>
</ul>
</div>
<div>
<div class="sidebar">
</div>
<div id="main">
<h2 id="quick-description">Quick Description</h2>
<img class="large-image" src="https://i.gyazo.com/93f60cc74d13175ce5aee548cc020b10.png" alt="Picture of the maze creator program." />
<p class="content">The maze creator program is a program that allows you to create mazes of any size with ease. You can create mazes either by using an algorithm to generate them or building them yourself in the creator (You can even combine the two by generating
a maze and then editing it!). You then can save these files as .maz files to be loaded into games or to be edited later in the maze creator!</p>
<h2 id="help-menu">Help Menu</h2>
<img class="small-image" src="https://i.gyazo.com/55ec91a6523562ca82341510c7bdde43.png" alt="Picture of the top of the help menu." />
<img class="small-image" src="https://i.gyazo.com/d121313f333eba42faa37220aa599bb7.png" alt="Picture of the bottom of the help menu." />
<p class="content">This menu in the maze creator shows the basic controls of the creator. Open it by clicking Help or pressing Ctrl+H</p>
</div>
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<a href="#quick-description">
<li>Quick Description</li>
</a>
<a href="#help-menu">
<li>Help Menu</li>
</a>
</ul>
</nav>
</div>
</div>
<div id="footer">
<div id="links">
Main Page
</div>
<p>Developer: Andrew Wetmore (aka NecroTheif)</p>
<p>Last Updated: 11/03/15</p>
</div>
</div>
</body>
</html>
I'm having issues with clearing floats (could be something else?). I want to make the #newsbar div cleared from the previous floats. So, it's width can expand 100% across the page/browser
I think I've done what I can, and am becoming real frustrated with this. This is what it looks like currently:
Current output:
http://postimg.org/image/l2rxf4603/
If someone can look over my HTML and CSS, I'd much appreciate it. Thanks!
HTML & CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rob's BBC</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" alt="bbclogo" height="28" />
</div> <!-- logodiv -->
<div id="signindiv">
<img src="images/signinlogo.png" alt="signinlogo" />
<p>Sign In</p>
</div> <!-- signindiv -->
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div> <!-- topmenudiv -->
<div id="searchdiv">
<input type="text" placeholder="search" />
</div> <!-- searchdiv -->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
</div>
</div> <!-- newsbar -->
</div> <!-- fixedwidth -->
</div> <!-- topbar -->
</div> <!-- container -->
</body>
</html>
JsFiddle: http://jsfiddle.net/1f030av9/
Ok, no floating problem, you just have to get the <div> outside of it's parent ( another <div> with classname "fixedwidth"). Also removed some paddings in order to make the search bar not go to the 2nd line.
Changed css:
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
Became:
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed line padding-right: 22px; from #searchdiv input
Here's a fiddle.
Your <div class="fixedwidth"> is set to a width of 1050px; and your div class="newsbar"> is a child of class="fixedwidth". You've set 'newsbar' to 100% but it cannot override the attributes of the parent div class="fixedwidth"
your fiddle
It works for me
It is stretching to 100%
with slight edits not relating to your issue though
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
clear:both;
}
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed padding-right too from #searchdiv input too