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;
}
Related
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 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 was just wondering how I can better optimize my website (its just a project, not real) for Snap mode in Windows. Whenever I go into that mode, it screws up the entire webpage (see attached photo).
Thanks Jacob
http://i.stack.imgur.com/V4yF2.jpg
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel ="stylesheet">
<meta charset="UTF-8">
<title> JP's Webservices</title>
</head>
<body>
<div id ="body">
<div class = "nav">
<ul>
<li>
About Me
</li>
<li>
Contact Me
</li>
<li>
Pricing
</li>
</ul>
</div>
<div class ="jumbotron">
<div class ='container'>
<div id ='h1'>
<h1> Need a website? </h1>
<p> Look no further </p>
</div>
</div>
</div>
<div id ="white">
<h1> Qualities </h1>
<h3> What makes me unique? </h3>
</div>
<div id ="gray">
</div>
<div class ="des" >
<div class ="row">
<div class= "col-md-4">
<h2> Knowledge. </h2>
<p> Straight 'outta Compton 1231231231231231231231231231231231231231231231231231231231 </p>
<hr>
</div>
<div class="col-md-4">
<h2> Commitment. </h2>
<p> To excellence and to serve as a value resource 123123123123123123123123123123123123 </p>
<hr>
</div>
<div class="col-md-4">
<h2> Perspective. </h2>
<p> New outlook on your web designs 12312312312311111111111111111111111111111111111111111 </p>
<br>
</div>
</div>
</div>
</body>
<footer>
<div id ='footer'>
</div>
<div id ='footer1'>
<p> Copyright #2014-2015 Jacob Platin </p>
<div id ='foot1'>
<a href="https://twitter.com/TheJakeoShark" target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png" width="72" height="46" border="0" /></a>
</div>
<div id ='facebook'>
<a href ='https://facebook.com/jacob.platin' target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a>
</div>
</div>
</footer>
</html>
CSS
.des {
position: absolute;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
text-align: center;
}
.nav li {
list-style-type: none;
text-align: center;
float: left;
width: 33.3%;
position: relative;
z-index: 10;
color: black;
padding-top: 17px;
font-weight: 700;
font-size: 18px;
}
.nav {
background-color: #660000;
height: 85px;
z-index: 1;
box-shadow: 1px 1px 5px black;
}
.nav a {
text-decoration: none;
color: black;
font-weight: 700;
color: white;
}
.jumbotron {
position:relative;
background-image: url(http://www.welivesecurity.com/wp-content/uploads/2013/01/012838004-printed-internet-html-code-tec.jpg);
width: 100%;
height: 530px;
}
#h1 > h1 {
color:#660000;
text-align:left ;
padding-top: 34px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px black;
}
#h1 > p {
color:white;
text-align:left ;
padding-left: 5px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px black;
font-weight: 300;
}
#master_wrapper{overflow:hidden!important;}
#footer {
width: 1902px;
height: 170px;
background-color: black;
box-shadow: 1px 1px 12px 4px black;
position: absolute;
top: 1300px;
}
#footer1 {
height: 85px;
width: 1902px;
background-color: #660000;
position: absolute;
margin-top: 0px;
box-shadow: -4px -2px 9px black;
top: 1300px;
}
#footer1 > p {
text-align: center;
font-family: 'Georgia', sans-serif;
color: white;
font-size: 18px;
padding-top: 24px;
}
#foot1 {
padding-top: 42px;
text-align: center;
padding-left: 205px;
}
#facebook {
margin-left: 820px;
position: absolute;
bottom: 3px;
top: 95px;
}
.des > h2 {
padding-top: 80px;
color: #660000
}
#photo1 {
background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
width: 240px;
height: 200px;
position:relative;
}
.des > img {
margin-top: 40px;
box-shadow: 01px 01px 01px 5px black;
}
#h1 {
box-shadow: -1px -1px -32px black;
}
#gray {
width: 100%;
height: 300px;
background-color: #f7f7f7;
position: absolute;
z-index: -11;
margin-top: 0px;
}
#white > h1 {
z-index: 1;
padding-bottom: 100px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
color:#660000;
text-align: center;
}
#white > h3 {
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
color:#660000;
position: absolute;
bottom: 230px;
text-align:center;
z-index: 0;
margin-left: 43.3%;
}
.row {
padding-left: 56px;
z-index:-1;
}
Are you referring to resizing the site via snapping (taking up 50%) of the screen width? If you want your site to work whatever the the screen width you need to use fluid containers and media queries, which make up the concept of responsive web design.
From the looks of things your site uses fixed widths which limit the ability for the content to re-size fluidly with the browser when you snap.
Responsive webdesign needs to be integrated form the get go, it can be annoying to update an existing site (but still possible). I'd recommend taking a look at this tutorial/overview: http://www.w3schools.com/html/html_responsive.asp
In short to fix your site you will need to get rid of the fixed widths you have set in pixels and uses percentages as they will adapt depending on the available width.
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
I am working on my website, the thing is that I want to set an icon made purely by css as the background of te div "pagewrap", I can't seem to know to do it by myself so I would like you to help me out with this. I will post the link for a clearer view : http://i60.tinypic.com/312bc0p.png
Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/media-queries.css" rel="stylesheet" type="text/css">
<title>Insert title here</title>
</head>
<body>
<!-- ### Page Wrap ### -->
<div id="pagewrap">
<!-- ### Logo Bar ### -->
<div id="logoBar">
<div class="helper">
<div class="logo"></div>
</div>
</div>
<div style="clear:both;"></div>
<!-- ### Home Icon ### -->
<div class="icon">
<div class="home"></div>
<div class="chimney"></div>
</div>
<!-- ### Side Bar ### -->
<div id="sidebar">
<div class="widget">
<ul>
<li style="border-top:0 !important;">Acceuil</li>
<li>Identification</li>
<li>Mon Parcours</li>
<li>Ma Formation</li>
<li>Mes Projets</li>
<li>Dossier de Veille</li>
<li>Contact Me</li>
</ul>
</div>
</div>
<!-- ### Content ### -->
<div class="contenu">
<div class="post clearfix">
<h1 class="post-title">Acceuil</h1>
<br/><p>Ici vous trouverez toutes les informations conçernant moi, mes études, mes projets et ma formation.</p>
</div>
</div>
</div>
</body>
</html>
Here's the css:
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 1000px;
margin: 0 auto;
background:#3c3c3c;
height:100vh;
min-height:610px;
/*SHADOW*/
-webkit-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
}
/* Home */
div.icon div.home {
height: 0px;
width: 0px;
border-width: 16px;
border-style: solid;
border-color: transparent transparent #333 transparent;
position: absolute;
bottom: 16px;
left: 0;
}
div.icon div.home:after {
content: '';
width: 5px;
height: 16px;
background-color: transparent;
position: absolute;
top: 16px;
right: -11px;
border-left: 8px solid #333;
border-right: 8px solid #333;
}
div.icon div.home:before {
content: '';
width: 9px;
height: 6px;
background-color: #333;
position: absolute;
top: 16px;
right: -5px;
}
div.icon div.chimney {
width: 4px;
height: 10px;
background: #333;
position: absolute;
right: 6px;
top: 3px;
}
/************************************************************************************
MENU
*************************************************************************************/
/**Side Bar**/
#sidebar {
width: 250px;
margin: 10px 30px 0 24px;
}
.widget {
background: #f5f5f5;
margin: 0 0 30px;
padding: 10px 20px;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 12px 0;
list-style: none;
clear: both;
border-top: solid 1px black;
}
.widget ul li a{
font-family:stainy;
font-size:21pt;
color:#303438;
}
.widget ul li a:hover{
text-decoration: none;
outline: none;
color:#30c9e0;
font-size:22pt;
}
.widgettitle{
font-family:stainy;
font-size:20pt;
}
What's the hard part? just add background-image for your #pagewrap and tweek the positioning and repeating should be enough.
#pagewrap {
background-image: url('YOUR_ICON');
...
}
Also check this document: https://developer.mozilla.org/en-US/docs/Web/CSS/background