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>
Related
I am having an issue with the second level menu only in Safari. Top level and submenu work fine on mouse hover on chrome, firefox etc but when opened in Safari, only first menu is opening on hover. I have already tried other solutions available here and on other forums but it's still same.
.nav {
margin: 2% 10% 0 35%;
/*margin-bottom: 4px;
margin-top: 2%;
margin-left: 35%;
margin-right: 10%;*/
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family:"Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {
/*padding-left: 30px;*/
padding-left: 0px !important;
margin-left: 30px;
}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
margin-left: -200px;
margin-top: -50px;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
margin-left: 200px !important;
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css"/>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I have included the HTML and CSS code for the menu. I have also checked it on chrome using windows OS, and it works but the only issue is with safari browser.
There are a couple of suggestions I have that may help.
Firstly, I would not recommend using position: fixed; to position your submenus because fixed is a position relative to the browser window. You likely want the submenus to be positioned according to the parent, not the window.
Secondly, you have overflow: hidden; on .navbar-nav, which means anything that falls outside the borders of it should be invisible - which would include your submenus.
Here is a JSFiddle with a working example of your snippet with my suggestions, tested and working in Safari:
.nav {
margin: 2% 10% 0 35%;
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family: "Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: relative;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: absolute;
top: 0;
left: 100%;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/m59vk802/4/
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
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
what i have in the code:
wrapper div outemost which in css i made to width of auto so all the inner divs have to align
inside my container div which inside of wrapper container div contains both sidebars which should be same height. Instead they don't do this and Im not sure why. Instead of having two sidebars I would like to keep the right sidebar and strect the content from the left sidebar from the left to the right sidebar.
Another major problem is that the right sidebar keeps overflowing its text and when i tried overflow:hidden it just hid evrything outside of the sidebar div which isn't what I want
here is jsfiddle so you can better see it. I want to stop overflowing on the right sidebar
and when the left sidebar is width to touch the right sidebar then under the content of the leftsidebar is where i want the buttons becuase they go out the screen when I widen the width.
http://jsfiddle.net/b6bW4/
<!DOCTYPE html>
<html lang="en">
<html>
<title>Building Blocks to Html</title>
<head>
<SCRIPT language=JavaScript>
var updated = document.lastModified document.write("Last modified: " + updated)
</script>
<script src="start.js"></script>
<meta name="keywords" content="HTML, Hyper Text Markup Language, />
<meta name="description" content="HTML in easy steps. Introductory tutorial for beginners." / >
<meta name="author" content="Miguel Castaneda" />
<meta charset="UTF-8">
<meta name="robots" content="all, nofollow" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</head>
<body>
<div id="wrapper">
<!-- wrapper holds everything should be auto -->
<div id="mod"></div>
<!-- end of mod -->
<center>
<a name="top"></center>
<center>
Bottom
</center>
<div id="mainmenu">
<ul>
<li>
Home
</li>
<!-- 5 table spacing links//-->
<li>
HTML
</li>
<li>
Python
</li>
<li>
Widgets
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- end of mainmenu -->
<div id="container">
//container holds content and sidebar
<div id="sidebar">
<p>HELLLLLLLLLLLEEEwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwMwwwwwwwwwwwwwwwwwwwwwwwwwEwwwwwwawawakdjadjlkajdlk;asmdksm.a</p>
</div>
<!-- end of sidebar -->
<div id="content">
<p >
<!-- browser picks first one in array if not in cpu then goes to 2nd font //-->
<tt>
Programmer: Miguel Castaneda(iSten23)
<br>
</br>
Head First HTML5 Programming
<br>
</br>
THIS SITE IS FOR EXPERIMENTAL PURPOSES, IS NOT INTENDED FOR COMMERCIAL PURPOSES.
</p>
</tt>
</div>
<!-- end of content -->
</div>
<!-- end of containeer-->
<center>
Top
<div id="leftrightB" >
<UL id="ul-list">
<li>
<a id="rightB"href="basic5.html" class="addborder" >
<img src="arrow1.png" height="40" width="40" alt="Link to next page">
</a>
</li>
<li>
<a id="leftB"href="basic7.html" class="addborder">
<img src="arrow.png" height="40" width="40" alt="Link to next page">
</a>
</li>
</ul>
</div>
<!--end of leftrightB -->
<div id="footermenu">
<ul>
<li>
Home
</li>
<!-- 5 table spacing links//-->
<li>
HTML
</li>
<li>
Python
</li>
<li>
Widgets
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- END OF FOOTERMENU -->
<a name="bottom"></div>
<!-- END OF WRAPPER-->
</body>
<style>
#ul-list li {
}
a:hover {
color: #00f000;
text-shadow: 0px 2px green;
}
.addborder:hover {
border: 1px solid #000000;
}
#sidebar {
position: absolute;
right: 0;
margin-top: 2px;
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
font-size: 10px;
line-height: 1;
padding: 0px 5px 0px 5px;
width: 10%;
height: 480px;
background-image: radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
<!-- //white-space: nowrap;
//overflow: hidden;
//word-wrap: break-word -->
}
#wrapper {
width: auto;
}
#content {
position: absolute;
left: 0;
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
font-size: 10px;
line-height: 1;
padding: 0px 5px 0px 5px;
width: 10%;
height: 480px;
}
<!-- img {
border-width: 1px;
border-color: Black;
}
--> .table {
display: table;
<!-- Allow the centering to work */ --> margin: 0 auto;
}
ul#ul-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#ul-list li {
display: inline;
}
#mainmenu {
width: auto;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;
position: absolute;
top: 50px;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
#mainmenu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#mainmenu li {
display: inline;
padding: 20px;
}
#mainmenu a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#mainmenu a:hover {
color: #F90;
background-color: #FFF;
}
#footermenu {
width: auto;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #52D7E5;
//main color of the menu border-radius: 8px;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
#footermenu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#footermenu li {
display: inline;
padding: 20px;
}
#footermenu a {
text-decoration: none;
color: #00F;
// padding: 8px 8px 8px 8px;
}
#footermenu a:hover {
color: #F90;
background-color: #17861A;
//color of gover over iterm
}
rightleftB {
display: table-cell vertical-align: bottom;
}
#wrapper {
width: 100%;
}
</style>
</html>
I think you need this...
Result
body{
overflow: hidden;
}
I'm very new to all of this and am trying to build this website, but the main image on the page is not centering. I've tried all sorts of centering things but they don't work. Also, the width percentage is ignored too.
I've readjusted margin/padding to 0. don't know what it could be.
css for the picture:
#pictures img{
width:"70%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
}
and the html div that has to do with it:
<div id="pictures">
<img src="img/homepage.png" alt="HomePage"></div>
FULL HTML
<!DOCTTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jacobs Bookeeping</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style-no-grid.css" type="text/css" media="screen">
</head>
<body>
<div class="container clearfix">
<div id="main">
<div id="header">
<img src="img/logo.png" alt="Jacobs Bookkeeping Logo" width="248">
</div>
<div id="twitter">
<img src="img/twitter.jpg" alt="Twitter">
</div>
<div id="facebook">
<img src="img/facebook.jpg" alt="Facebook">
</div>
<ul class="nav">
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
<li class="last">Resources</li>
</ul>
<div id="pictures">
<img src="img/homepage.png" alt="HomePage">
</div>
</div>
</div>
<div id="copyright">
<p>K. RONI JACOBS, <em>KEEPER OF THE BOOKS</em> — EMAIL JACOBS BOOKKEEPING — CALL 206.861.5664 — © 2013 JACOBS BOOKEEPING    </p>
</div>
</body>
</html>
FULL CSS
html {
margin: 0px;
padding: 0px;
}
body {
font-family:'Futura', sans-serif;
color: #FFFFFF;
font-size: 13;
margin: 0px;
padding: 0px;
}
#main {
border-top: 10px solid #EAE1C9;
border-right: 10px solid #EAE1C9;
border-left: 10px solid #EAE1C9;
padding-bottom: 20px;
background: url('../img/bg-jacobs.jpg') repeat;
background-color:#96B9BF;
}
a {
color: #FFFFFF;
text-decoration: none;
}
#facebook img{
float: right;
padding: 45px 5px 10px 10px;
position: static;
}
#twitter img{
float: right;
padding: 45px 50px 20px 0px;
position: static;
}
#header img {
padding: 40px 0px 0px 40px;
float: left;
position: static;
}
ul.nav {
margin-top: 45px;
list-style: none;
text-transform: uppercase;
float: right;
position: relative;
}
ul.nav li {
margin: 0px 50px 0px 60px;
display: inline;
}
ul.nav li a {
color: #FFFFFF;
}
#pictures img{
width:"80%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
display: block;
text-align: center;
}
#copyright {
text-align: right;
background: #867131;
border-top: 10px solid #EAE1C9;
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
font-size: 10px;
letter-spacing: 2px;
color: white;
}
.container{
width: auto;
margin: 0 auto;
}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
Put display: block; on it. By default, images are inline.
To center inline —default for image— or inline-block elements, just center it as text. This means, you will need to use text-algin on the parent element:
div#pictures {
text-align: center;
}
The other solution is the one from #One Trick Pony, and display the image as a block element and just then apply the automatic margin.
#pictures img{
display:block;
}
Add this code then i will be centered
i know this is an old post, but wanted to share how i solved the same problem.
My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.
You have two options:
Remove img from #pictures and then put the image inside that div.
Add the #pictures to the image Tag in html (inline style).
You might remove the display tag in #pictures.
Good luck with that.