Good evening all,
my name is Erika and I am working on a website.
I have a good understanding of html and css however I got stuck with this problem:
and for this reason I am writing on stackoverflow.
I want to make this tab system work, however I am struggling to understand how I can change the tab when the input radio is :checked.
Here you can find the code and a image of what I am trying of achieve.
I would really appreciate any help.
Thank you very much.
Best reagards
Erika
/* tabs input and label */
.tabs-wrapper {
margin-bottom: 35px;
overflow: hidden;
.tabs {
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
&.tab {
margin-right: 4px;
margin-bottom: 12px;
color: white;
text-align: center;
user-select: none;
&:hover {
cursor: pointer;
}
}
}
}
/* second separate div where the tab-content are */
.product-main-body-wrapper {
.product-body {
width: 100%;
.tab-content {
display: none;
}
}
}
/* make panel tab-content appear */
.tabs-wrapper
.tabs-nav
#tab-1:checked
~ .product-main-body-wrapper
.product-body
#Tab1,
.tabs-wrapper
.tabs-nav
#tab-2:checked
~ .product-main-body-wrapper
.product-body
#Tab2 {
display: block;
}
.radio {
display: none;
}
/* change color of tab label */
#tab-1:checked ~ .tabs #one-tab,
#tab-2:checked ~ .tabs #two-tab {
background: red;
color: white;
}
<div class="tabs-wrapper">
<nav class="tabs-nav">
<input type="radio" class="radio" id="tab-1" name="tab-control" checked>
<input type="radio" class="radio" id="tab-2" name="tab-control">
<div class="tabs">
<label for="tab-1" id="one-tab" class="tab btn-secondary">Tab one</label>
<label for="tab-2" id="two-tab" class="tab btn-secondary">Tab two</label>
</div>
</nav>
</div>
<div class="product-main-body-wrapper">
<div class="product-body">
<div id="Tab1" class="tab-content">
<article>
<p> panel one </p>
</article>
</div>
<div id="Tab2" class="tab-content">
<article> panel two</article>
</div>
</div>
</div>
Have a look at this page.
Code (c) copyright css tricks
<html><head>
<meta charset="UTF-8">
<title>CSS Tabs</title>
<style>
* { margin: 0; padding: 0; }
#page-wrap { width: 960px; margin: 100px auto; }
h1 { font: 36px Georgia, Serif; margin: 20px 0; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
p { margin: 0 0 10px 0; }
.tabs { list-style: none; }
.tabs li { display: inline; }
.tabs li a { color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; }
.tabs li a:hover { background: #ccc; }
/* Generic styles & example one */
.tabbed-area { margin: 0 0 120px 0; }
.box-wrap { position: relative; min-height: 250px; }
.tabbed-area div div { background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; }
.tabbed-area div div, .tabs li a { border: 1px solid #ccc; }
#box-one:target, #box-two:target, #box-three:target { z-index: 1; }
/* Stuff for example two */
.cur-nav-fix { margin-top: 60px; }
.cur-nav-fix .tabs { position: absolute; bottom: 100%; left: -1px; }
.cur-nav-fix .tabs li a { background: -moz-linear-gradient(top, white, #eee); }
#box-four { z-index: 1; }
#box-four:target .tabs,
#box-five:target .tabs,
#box-six:target .tabs { z-index: 3; }
#box-four:target, #box-five:target, #box-six:target { z-index: 2; }
.cur-nav-fix .tabs li.cur a { border-bottom: 1px solid white; background: white; }
/* Stuff for example three */
.cur-nav-fix-2 .tabs li a { background: -moz-linear-gradient(top, white, #eee); }
.cur-nav-fix-2 .tabs { z-index: 2; position: relative; }
#box-seven:target .box-seven,
#box-eight:target .box-eight,
#box-nine:target .box-nine { z-index: 1; }
#box-seven:target a[href="#box-seven"],
#box-eight:target a[href="#box-eight"],
#box-nine:target a[href="#box-nine"] { border-bottom: 1px solid white; background: white; }
/* Stuff for example four */
.active-test { padding-top: 40px; }
.active-test .single-tab em { background: white; width: 50px; font-style: normal; position: absolute; bottom: 100%; text-decoration: none; color: black; border: 1px solid #ccc; padding: 5px 10px; }
.active-test .single-tab span { position: absolute; top: -1px; left: 0; width: 100%; display: block; padding: 20px; border: 1px solid #ccc; min-height: 250px; background: white; }
.active-test .single-tab:active em { background: #ccc; }
.active-test .single-tab:active span, .active-test .single-tab:focus span { z-index: 1; }
.tab-ten em { left: 0; }
.tab-eleven em { left: 70px; }
.tab-twelve em { left: 140px; }
/* Stuff for example five */
.adjacent { position: relative; margin-top: 50px; min-height: 300px; }
.adjacent div { border: 1px solid #ccc; background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; }
.adjacent .tabs { position: absolute; bottom: 100%; left: 0; z-index: 2; }
.adjacent .tabs li a { background: -moz-linear-gradient(top, white, #eee); }
#box-thirteen:target,
#box-fourteen:target,
#box-fifteen:target { z-index: 1; }
#box-thirteen:target ~ .tabs a[href='#box-thirteen'],
#box-fourteen:target ~ .tabs a[href='#box-fourteen'],
#box-fifteen:target ~ .tabs a[href='#box-fifteen'] { background: white; border-bottom: 1px solid white; }
/* Stuff for example six */
.w3c { min-height: 250px; position: relative; width: 100%; }
.w3c > div { display: inline; }
.w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
.w3c > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); }
.w3c > div:target > a { background: white; }
.w3c > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }
.w3c > div:not(:target) > div { position: absolute }
.w3c > div:target > div { position: absolute; z-index: -1; }
/* Stuff for example seven - including conditionals below */
#ie-test { position: relative; width: 100%; }
#boxLinks { list-style: none; overflow: hidden; }
#boxLinks li { display: inline; }
#boxLinks li a { padding: 5px 10px; color: black; text-decoration: none; border: 1px solid #ccc; float: left; display: block; margin-left: -1px; position: relative; left: 1px; }
#boxLinks li a:hover { color: #fff; background: #000; }
#box { height: 250px; border: 1px solid #ccc; overflow: hidden; padding: 0px 30px 0px 30px; position: relative; top: -1px; }
.box { display: none; height: 250px; overflow: auto; display: block; position: relative; overflow-x: hidden; }
#box1:target, #box2:target, #box3:target { display: block; }
</style>
<!--[if IE]>
<style type="text/css">
.box { display: block; }
#box { overflow: hidden;position: relative; }
b { position: absolute; top: 0px; right: 0px; width:1px; height: 251px; overflow: hidden; text-indent: -9999px; }
</style>
<![endif]-->
</head>
<body>
<div id="demo-top-bar">
<div id="demo-bar-inside">
<h2 id="demo-bar-badge">
CSS-Tricks Example
</h2>
<div id="demo-bar-buttons">
<a class="header-button" href="/5841-css3-tabs/">← Back to Article</a> </div>
</div>
</div>
<div id="page-wrap">
<div style="width: 420px; float: left;">
<h1>Example One</h1>
<p>Grade: C</p>
<p>From an HTML perspective, this is the absolute cleanest. It just doesn't deal with current
navigation highlighting.</p>
<div class="tabbed-area">
<ul class="tabs group">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="box-wrap">
<div id="box-one">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div id="box-two">
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="box-three">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
<h1>Example Three</h1>
<p>Grade: B</p>
<p>This has current navigation highlighting. The only downside is that it requires as
many wrapping divs as there are panels.</p>
<div id="box-seven"><div id="box-eight"><div id="box-nine">
<div class="tabbed-area cur-nav-fix-2">
<ul class="tabs group">
<li>Tab 7</li>
<li>Tab 8</li>
<li>Tab 9</li>
</ul>
<div class="box-wrap">
<div class="box-seven">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div class="box-eight">
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="box-nine">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
</div></div></div>
<h1>Example Five</h1>
<p>Grade: B</p>
<p>This is handles current navigation highlighting, with pretty clean HTML. The only downside is
that the list for the tab navigation comes <em>after</em> the panels.</p>
<div class="tabbed-area adjacent">
<div id="box-thirteen">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div id="box-fourteen">
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="box-fifteen">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<ul class="tabs group">
<li>Tab 13</li>
<li>Tab 14</li>
<li>Tab 15</li>
</ul>
</div>
<h1>Example Seven</h1>
<p>Grade: Depends</p>
<p>This example is the only one that works in IE 7+, so that's big bonus points.</p>
<div id="ie-test">
<ul id="boxLinks" class="group">
<li>Tab 19</li>
<li>Tab 20</li>
<li>Tab 21</li>
</ul>
<div id="box">
<div id="box1" class="box">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<!--[if IE]><b>.</b><![endif]-->
</div>
<div id="box2" class="box">Another box! <!--[if IE]><b>.</b><![endif]--></div>
<div id="box3" class="box">Woot! <!--[if IE]><b>.</b><![endif]--></div>
</div>
</div>
</div>
<div style="width: 420px; float: right;">
<h1>Example Two</h1>
<p>Grade: D</p>
<p>This fixes the current navigation problem, but requires the menu to be repeated inside
of each panel, which is pretty unacceptable. The hash-links also jump to the panel themselves,
which cuts off the actual tabs if there is enough page scroll below the panels.</p>
<div class="tabbed-area cur-nav-fix">
<div class="box-wrap">
<div id="box-four">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ul class="tabs group">
<li class="cur">Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
</ul>
</div>
<div id="box-five">
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<ul class="tabs group">
<li>Tab 4</li>
<li class="cur">Tab 5</li>
<li>Tab 6</li>
</ul>
</div>
<div id="box-six">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<ul class="tabs group">
<li>Tab 4</li>
<li>Tab 5</li>
<li class="cur">Tab 6</li>
</ul>
</div>
</div>
</div>
<h1>Example Four</h1>
<p>Grade: F</p>
<p>This was an attempt at using the :active and :focus states instead of using :target.
This would have made it even IE 6 compatible. It works as you click, but I haven't been
able to get the link to keep it's focus or active state after the click. Plus, all the
content is inside the anchor link which is sketchy at best.</p>
<div class="tabbed-area active-test">
<div class="box-wrap">
<a class="single-tab tab-ten" href="#box-ten">
<em>Tab 10</em>
<span id="box-ten">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</span>
</a>
<a class="single-tab tab-eleven" href="#box-ten">
<em>Tab 11</em>
<span id="box-eleven">
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</span>
</a>
<a class="single-tab tab-twelve" href="#box-ten">
<em>Tab 12</em>
<span id="box-twelve">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</span>
</a>
</div>
</div>
<h1>Example Six</h1>
<p>Grade: A</p>
<p>This is the winner so far. It is infinitely expandable (no selectors specific to panels) and the markup is pretty clean.
Possible issues: cross-browser line height issues possibly not making perfect layout, links are placed right above each
div instead of a in central list at the top.</p>
<div class="w3c">
<div id="tab16">
Tab 16
<div>One might well argue, that...</div>
</div>
<div id="tab17">
Tab 17
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id="tab18">
Tab 18
<div>... that 2 should have been enough, but...</div>
</div>
</div>
</div>
</div>
<style type="text/css" style="display: none !important;">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
#demo-top-bar {
text-align: left;
background: #222;
position: relative;
zoom: 1;
width: 100% !important;
z-index: 6000;
padding: 20px 0 20px;
}
#demo-bar-inside {
width: 960px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#demo-bar-buttons {
padding-top: 10px;
float: right;
}
#demo-bar-buttons a {
font-size: 12px;
margin-left: 20px;
color: white;
margin: 2px 0;
text-decoration: none;
font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
text-decoration: underline;
}
#demo-bar-badge {
display: inline-block;
width: 302px;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
#demo-bar-badge a {
display: block;
width: 100%;
height: 38px;
border-radius: 0;
bottom: auto;
margin: 0;
background: url(/images/examples-logo.png) no-repeat;
background-size: 100%;
overflow: hidden;
text-indent: -9999px;
}
#demo-bar-badge:before, #demo-bar-badge:after {
display: none !important;
}
</style>
</body></html>
Related
https://codepen.io/leon-yum/pen/GxWqMe?editors=1100
Trying to re-create a problem we're having in one of our apps. The Sidebar in our app never stretches 100% to fit the content. In the example above the <div class="content-body"> also doesn't fit height 100%.
Markup:
<body>
<div id="app">
<section class="h100 w100">
<main>
<header>Header</header>
<section class="content">
<div class="sidebar">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>
<div class="content-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et urna vulputate, venenatis tellus eget, vehicula risus. Suspendisse potenti. Sed fermentum pulvinar diam eu suscipit. Etiam cursus arcu dapibus turpis pulvinar, at lobortis tortor dapibus. Morbi pellentesque fringilla sem at luctus. Sed sagittis leo ut ligula hendrerit, at sollicitudin massa efficitur. Phasellus volutpat nibh ante, nec fermentum ex hendrerit ultricies. Suspendisse tempus fringilla aliquam. Praesent eget varius lorem. Phasellus malesuada, purus nec venenatis feugiat, dui lectus porttitor dolor, sollicitudin semper dui libero quis orci. Sed vitae viverra ante, in rutrum massa. Aliquam mollis vel dui eu porta. In ac accumsan augue. Integer placerat egestas dui, quis aliquam libero bibendum non. Pellentesque scelerisque euismod dolor, ac gravida est mattis non. Suspendisse potenti.
</p>
</div>
</section>
</main>
</section>
</div>
</body>
CSS
body {
margin: 0;
font-family: Arial;
color: white;
}
.w100 { width: 100%; }
.h100 { width: 100%; }
header {
padding: 20px;
/* width: 100%; */
height: 20px;
color: brown;
background: cyan;
}
#app {
width: 100%;
height: 100%;
background: #212121;
}
.content {
display: flex;
flex: 1 1 auto;
height: 100%;
}
.content-body {
flex: 1 1 auto;
padding: 20px;
background: #333;
}
.sidebar {
background: #666;
}
I fixed this by adding height: 100vh; to a couple things (html, body, h100 class, and the "main" element. 100vh is better than 100% because it means 100% of the vertical height of the browser (100% height may change depending on a couple variables like parent containers).
html {
height: 100vh;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
font-family: Arial;
color: white;
height: 100vh;
}
.w100 { width: 100%; }
.h100 { height: 100vh; }
header {
padding: 20px;
/* width: 100%; */
height: 20px;
color: brown;
background: cyan;
}
#app {
width: 100%;
height: 100%;
background: #212121;
}
...
See my codepen here: https://codepen.io/anon/pen/oqZLJQ?editors=1100
I have a pure CSS CSS Expand/Collapse div which is based on someone else's code # here by default hidden text is collapsable but it would be better if the text expands after the click.
Anyone have suggestions on how to edit this code so that text is minimize before the click is minimized? It would be better if javascript is avoided and Wordpress compactible.
<main>
<h2>CSS Expand/Collapse Section</h2>
<input id="toggle" type="checkbox" checked>
<label for="toggle">Hidden Kitten</label>
<div id="expand">
<section>
<p>mew</p>
</section>
</div>
<section>
<h3>Other content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta non turpis faucibus lobortis. Curabitur non eros rutrum, gravida felis non, luctus velit. Ut commodo congue velit feugiat lobortis. Etiam nec dolor quis nulla bibendum blandit vitae nec enim. Maecenas id dignissim erat. Aenean ac mi nec ante venenatis interdum quis vel lacus.
</p>
<p>Aliquam ligula est, aliquet et semper vitae, elementum eget dolor. In ut dui id leo tristique iaculis eget a dui. Vestibulum cursus, dolor sit amet lacinia feugiat, turpis odio auctor nisi, quis pretium dui elit at est. Pellentesque lacus risus, vulputate sed gravida eleifend, accumsan ac ante. Donec accumsan, augue eu congue condimentum, erat magna luctus diam, adipiscing bibendum sem sem non elit.</p>
</section>
</main>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: "Open Sans", Arial;
background: #CCC;
}
main {
background: #EEE;
width: 600px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
h2 {
text-align: center;
}
p {
font-size: 13px;
}
input {
display: none;
visibility: hidden;
}
label {
display: block;
padding: 0.5em;
text-align: center;
border-bottom: 1px solid #CCC;
color: #666;
}
label:hover {
color: #000;
}
label::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background: url(http://placekitten.com/g/600/300);
color: #FFF;
}
section {
padding: 0 20px;
}
#toggle:checked ~ #expand {
height: 250px;
}
#toggle:checked ~ label::before {
content: "-";
}
I think you are looking to have the image start collapsed.
All you need to do is remove the checked attribute from the input checkbox to achieve this.
Change:
<input id="toggle" type="checkbox" checked>
To:
<input id="toggle" type="checkbox">
Here is you code in a runable snippet:
body {
font-family: "Open Sans", Arial;
background: #CCC;
}
main {
background: #EEE;
width: 600px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
h2 {
text-align: center;
}
p {
font-size: 13px;
}
input {
display: none;
visibility: hidden;
}
label {
display: block;
padding: 0.5em;
text-align: center;
border-bottom: 1px solid #CCC;
color: #666;
}
label:hover {
color: #000;
}
label::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background: url(http://placekitten.com/g/600/300);
color: #FFF;
}
section {
padding: 0 20px;
}
#toggle:checked~#expand {
height: 250px;
}
#toggle:checked~label::before {
content: "-";
}
<main>
<h2>CSS Expand/Collapse Section</h2>
<input id="toggle" type="checkbox">
<label for="toggle">Hidden Kitten</label>
<div id="expand">
<section>
<p>mew</p>
</section>
</div>
<section>
<h3>Other content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta non turpis faucibus lobortis. Curabitur non eros rutrum, gravida felis non, luctus velit. Ut commodo congue velit feugiat lobortis. Etiam nec dolor quis nulla bibendum blandit
vitae nec enim. Maecenas id dignissim erat. Aenean ac mi nec ante venenatis interdum quis vel lacus.
</p>
<p>Aliquam ligula est, aliquet et semper vitae, elementum eget dolor. In ut dui id leo tristique iaculis eget a dui. Vestibulum cursus, dolor sit amet lacinia feugiat, turpis odio auctor nisi, quis pretium dui elit at est. Pellentesque lacus risus, vulputate
sed gravida eleifend, accumsan ac ante. Donec accumsan, augue eu congue condimentum, erat magna luctus diam, adipiscing bibendum sem sem non elit.</p>
</section>
</main>
Just remove checked in your input and you're good to go.
It should look like this:
<input id="toggle" type="checkbox">
In a mobile menu I've been playing with, I ran across a problem with jQuery's slideToggle animation being jumpy despite setting explicit widths and heights for the element. I found another potential fix to that problem was to set overflow: hidden on the toggled div. That's when I ran into this problem, which I assume is at least contributing to my slideToggle problem:
I noticed that setting overflow-y: hidden on my navigation seems to cut things off when it shouldn't. Given a nav that renders as 240px tall normally, if I set that nav to height: 240px; overflow: hidden, I would expect that there would be no overflow to hide. What actually happens is that it cuts off at around 102px in Chrome, and in Firefox it simply doesn't show up at all.
I have tried setting the CSS in the stylesheet and also dynamically in the JS by calculating the height of the nav's contents. I have tried clearfixing the nav. I have tried wrapping it in a div. I have tried various methods of display. Nothing seems to work.
My question is simple: What's up with the nav's height? What am I not understanding?
As a note, setting min-height does work, but that apparently interferes with the slideToggle effect and also doesn't really answer my question about why just using height won't work.
See http://codepen.io/cjl750/pen/xRdoRW for code.
$('header span').click(function(){
$('nav').slideToggle(400);
});
html {
font-family: 'Raleway', sans-serif;
}
header {
background-color: mediumaquamarine;
padding: 5px 15px;
}
nav {
font-family: 'Oswald', sans-serif;
color: white;
overflow-y: hidden;
/* display: none; */
height: 240px;
}
#body {
width: 360px;
height: 616px;
overflow-y: scroll;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
main {
background-color: slategray;
display: flex;
flex-direction: column;
}
section, aside {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}
section {
background-color: powderblue;
}
aside {
background-color: cadetblue;
}
h1, h2, h3 {
font-weight: 400;
}
h2 {
font-size: 1.33em;
}
#slogan {
font-size: 2em;
font-weight: 900;
float: left;
}
header span {
float: right;
margin-top: 5px;
}
header span:hover {
cursor: pointer;
text-decoration: underline;
}
nav ul {
list-style-type: none;
font-size: 1.5rem;
margin: 0;
padding: 0;
}
nav ul li + ul {
display: none;
}
nav ul.topLvl li {
padding: 2.5px 0 2.5px 15px;
background-color: rgba(220,220,220,0.7);
border: 3px outset rgba(255,255,255,0.65);
border-top-style: inset;
border-right-style: inset;
border-right-width: 4.5px;
border-bottom-color: rgba(255,255,255,1);
border-left-width: 4.5px;
}
nav ul.topLvl li:first-of-type {
border-top-width: 4.5px;
}
nav ul.topLvl li:last-of-type {
border-bottom-width: 4.5px;
}
nav ul.topLvl li:hover {
background-color: rgba(220,220,220,0.80);
border-top-style: outset;
border-right-style: outset;
border-bottom-style: inset;
border-left-style: inset;
border-bottom-color: rgba(255,255,255,0.45);
border-top-color: rgba(255,255,255,0.45);
}
<div id="body">
<header>
<div id="slogan">Octavian</div>
<span>Menu</span>
</header>
<nav>
<ul class="topLvl">
<li>Giraffes</li>
<ul class="secondLvl">
<li>Tall</li>
<li>Spots</li>
<li>Weird horn things</li>
<li>Head-whacking battles</li>
</ul>
<li>Elephants</li>
<ul class="secondLvl">
<li>Real big</li>
<li>Eat lots of plants</li>
<li>Floppy ears</li>
<li>Get feet stuck in tires</li>
</ul>
<li>Cheetas</li>
<ul class="secondLvl">
<li>Spots</li>
<li>Real fast</li>
<li>Tire out quickly</li>
<li>Gazelle's arch nemesis</li>
</ul>
<li>Vultures</li>
<ul class="secondLvl">
<li>Ominous death circle</li>
<li>Super gnarley stoach acid</li>
<li>Flap, flap, flap</li>
<li>Big wingspan</li>
</ul>
<li>Zebras</li>
<ul class="secondLvl">
<li>Stripy horses</li>
<li>Black and white</li>
<li>Neeeeeiiiiiigh</li>
<li>Big herds</li>
</ul>
</ul>
</nav>
<main>
<section>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum iaculis scelerisque. Nulla ligula nibh, venenatis a leo vel, varius tincidunt magna. Nulla consequat justo at lacus sodales ornare. Aenean quis faucibus est.</p>
<p><em>Ut dapibus id justo tempor iaculis. Vestibulum elementum quis diam a consectetur. Nunc pellentesque purus sapien.</em></p>
<p>Phasellus volutpat felis id libero bibendum euismod. Donec urna eros, euismod quis nisl cursus, placerat ultricies nulla. Vivamus finibus neque sit amet vestibulum posuere. Sed euismod, justo nec varius lacinia, tellus eros suscipit velit, sit amet dignissim leo nisi aliquet augue.</p>
<h3>Fusce sagittis eleifend enim</h3>
<p>Egestas sollicitudin. Nam at dui vel risus bibendum fringilla.</p>
<p>Mauris tincidunt nunc lorem, vel mollis sapien sollicitudin id. Nunc aliquam nulla enim, sit amet porta quam euismod a. Sed varius vel ligula quis laoreet. Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium turpis elit, eu auctor velit suscipit non.</p>
</section>
<aside>
<h2>Dulce et decorum est</h2>
<p>Mauris sit amet eleifend tortor. Praesent vitae aliquam turpis. Quisque auctor maximus ante ac fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vel fermentum lacus.</p>
<ul>
<li>cras feugiat justo non lacus auctor</li>
<li>eget sollicitudin mi eleifend</li>
<li>quisque pulvinar pretium risus et accumsan</li>
<li>praesent lacus sapien</li>
</ul>
<p>Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>
</main>
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,900" rel="stylesheet">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Flex items do flex by default. You can prevent shrinking with
nav {
flex-shrink: 0;
}
You can also use the flex shorthand property like flex: none or flex: 0 0 240px.
$('header span').click(function(){
$('nav').slideToggle(400);
});
html {
font-family: 'Raleway', sans-serif;
}
header {
background-color: mediumaquamarine;
padding: 5px 15px;
}
nav {
font-family: 'Oswald', sans-serif;
color: white;
overflow-y: hidden;
/* display: none; */
height: 240px;
flex-shrink: 0;
}
#body {
width: 360px;
height: 616px;
overflow-y: scroll;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
main {
background-color: slategray;
display: flex;
flex-direction: column;
}
section, aside {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}
section {
background-color: powderblue;
}
aside {
background-color: cadetblue;
}
h1, h2, h3 {
font-weight: 400;
}
h2 {
font-size: 1.33em;
}
#slogan {
font-size: 2em;
font-weight: 900;
float: left;
}
header span {
float: right;
margin-top: 5px;
}
header span:hover {
cursor: pointer;
text-decoration: underline;
}
nav ul {
list-style-type: none;
font-size: 1.5rem;
margin: 0;
padding: 0;
}
nav ul li + ul {
display: none;
}
nav ul.topLvl li {
padding: 2.5px 0 2.5px 15px;
background-color: rgba(220,220,220,0.7);
border: 3px outset rgba(255,255,255,0.65);
border-top-style: inset;
border-right-style: inset;
border-right-width: 4.5px;
border-bottom-color: rgba(255,255,255,1);
border-left-width: 4.5px;
}
nav ul.topLvl li:first-of-type {
border-top-width: 4.5px;
}
nav ul.topLvl li:last-of-type {
border-bottom-width: 4.5px;
}
nav ul.topLvl li:hover {
background-color: rgba(220,220,220,0.80);
border-top-style: outset;
border-right-style: outset;
border-bottom-style: inset;
border-left-style: inset;
border-bottom-color: rgba(255,255,255,0.45);
border-top-color: rgba(255,255,255,0.45);
}
<div id="body">
<header>
<div id="slogan">Octavian</div>
<span>Menu</span>
</header>
<nav>
<ul class="topLvl">
<li>Giraffes</li>
<ul class="secondLvl">
<li>Tall</li>
<li>Spots</li>
<li>Weird horn things</li>
<li>Head-whacking battles</li>
</ul>
<li>Elephants</li>
<ul class="secondLvl">
<li>Real big</li>
<li>Eat lots of plants</li>
<li>Floppy ears</li>
<li>Get feet stuck in tires</li>
</ul>
<li>Cheetas</li>
<ul class="secondLvl">
<li>Spots</li>
<li>Real fast</li>
<li>Tire out quickly</li>
<li>Gazelle's arch nemesis</li>
</ul>
<li>Vultures</li>
<ul class="secondLvl">
<li>Ominous death circle</li>
<li>Super gnarley stoach acid</li>
<li>Flap, flap, flap</li>
<li>Big wingspan</li>
</ul>
<li>Zebras</li>
<ul class="secondLvl">
<li>Stripy horses</li>
<li>Black and white</li>
<li>Neeeeeiiiiiigh</li>
<li>Big herds</li>
</ul>
</ul>
</nav>
<main>
<section>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum iaculis scelerisque. Nulla ligula nibh, venenatis a leo vel, varius tincidunt magna. Nulla consequat justo at lacus sodales ornare. Aenean quis faucibus est.</p>
<p><em>Ut dapibus id justo tempor iaculis. Vestibulum elementum quis diam a consectetur. Nunc pellentesque purus sapien.</em></p>
<p>Phasellus volutpat felis id libero bibendum euismod. Donec urna eros, euismod quis nisl cursus, placerat ultricies nulla. Vivamus finibus neque sit amet vestibulum posuere. Sed euismod, justo nec varius lacinia, tellus eros suscipit velit, sit amet dignissim leo nisi aliquet augue.</p>
<h3>Fusce sagittis eleifend enim</h3>
<p>Egestas sollicitudin. Nam at dui vel risus bibendum fringilla.</p>
<p>Mauris tincidunt nunc lorem, vel mollis sapien sollicitudin id. Nunc aliquam nulla enim, sit amet porta quam euismod a. Sed varius vel ligula quis laoreet. Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium turpis elit, eu auctor velit suscipit non.</p>
</section>
<aside>
<h2>Dulce et decorum est</h2>
<p>Mauris sit amet eleifend tortor. Praesent vitae aliquam turpis. Quisque auctor maximus ante ac fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vel fermentum lacus.</p>
<ul>
<li>cras feugiat justo non lacus auctor</li>
<li>eget sollicitudin mi eleifend</li>
<li>quisque pulvinar pretium risus et accumsan</li>
<li>praesent lacus sapien</li>
</ul>
<p>Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>
</main>
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,900" rel="stylesheet">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Without overflow-y: hidden there was less shrinking due to Flexbox Implied Minimum Size.
Your problem seems to be the fact that you have flexbox on body.
This seems to be "confusing" the .slideToggle(), seeing as flexbox handles height in a very particular way (sort of dynamically adjusting height of flex-items to their respective rows).
Seeing as you're attempting to display a one-column layout, this is not necessary. You may just give alle direct children of body a width of 100%.
Here's a jsFiddle where it works: https://jsfiddle.net/1qrgg695/2/
I removed flex from body.
The header acted weird, so the header is now flex:
header {
display: flex;
justify-content:space-between;
}
The justify content makes sure the Title stays to the left and the Toggle to the right.
Dear more expert Pros!
What I'm unable to achieve - making the mcontent div stylized properly. Actually I have no idea why is not working this very simple css code. The lside and the content div are inside in the mcontent div. I'd like to have the mcontent div left and right border but I can't achieve that. If I take out the content and/or the lside formatting from the css file, the borders seemable. If I format the lside and the content div, the mcontent div even seems to me unvisible. (gave it background color and that is unvisible under these mentioned divs) I have no idea why. I've checked the html file for coding error - I did not discover any problem.
This is the HTML file:
<html>
<head>
<link rel="stylesheet" href="firstsite.css" type="text/css" />
<meta charset="utf-8" />
<title>Website</title>
</head>
<body>
<div id="main">
<div id="header">
<h1>Website</h1>
</div>
<div id="navi">
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Menu 2_1</li>
<li>Menu 2_2</li>
<li>Menu 2_3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Menu 3_1</li>
<li>Menu 3_2</li>
<li>Menu 3_3</li>
<li>Menu 3_4</li>
<li>Menu 3_5</li>
</ul>
</li>
<li>Menu 4</li>
</ul>
</div>
<div id="mcontent">
<div id="lside">
<div id="lside_1">DIV 1
</div>
<div id="lside_2">DIV 2
</div>
<div id="lside_3">DIV 3
</div>
</div>
<div id="content">
<h2 text-aling="center">1. menupoint - no submenu</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
<div id="footer">
<h2>PHP Website by FGB 2016</h2>
</div>
</div>
</body>
and this is the CSS file:
body {
margin: 0px;
padding: 0px;
}
#main {
margin: 0px auto;
padding: 20px;
width: 940px;
border: 1px solid red; /* just for seeing*/
}
#header {
margin: 0px auto;
background-color: #808080;
width: 900px;
border: 1px #808080 solid;
border-bottom: 2px #FA801D solid;
border-radius: 15px 15px 0px 0px;
}
#header h1 {
color: white;
text-align: center;
}
#mcontent {
margin: 0px auto;
width: 892px;
border-left: 5px solid #808080;
border-right: 5px solid #808080;
}
#lside {
margin-left: 10px;
float: left;
width: 200px;
height: auto;
border: 1px solid black;
}
#lside_1 {
border: 1px solid black;
}
#lside_2 {
border: 1px solid black;
}
#lside_3 {
border: 1px solid black;
}
#content {
float: right;
margin-right: 10px;
width: 600px;
padding: 0px 15px;
border: 1px solid;
}
#content h2 {
text-align: center;
}
#content p {
text-align: justify;
}
#footer {
clear: both;
margin: 0px auto;
background-color: #808080;
width: 900px;
height: 60px;
border-width: 0px 1px 1px 1px;
border-style: solid;
line-height: 60px;
border-radius: 0px 0px 15px 15px;
border-top: 10px #FA801D solid;
}
#footer h2 {
margin: 0px;
color: white;
text-align: center;
}
/*
* navi section
*/
.menu {
margin: 0px auto;
height: 40px;
width: 900px;
background: #808080;
padding: 0px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
border-bottom: 10px #FA801D solid;
}
.menu li {
position: relative;
text-align: center;
list-style: none;
width: 25%;
height: 40px;
float: left;
}
.menu li a {
text-align: center;
display: block;
line-height: 40px;
text-decoration: none;
font-family: Verdana, Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 1.2em;
color: white;
transition: .3s background-color;
}
.menu li:hover > a {
background-color: #FA801D;
}
.menu ul {
position: absolute;
padding: 0;
top: 50px;
background: #808080;
opacity: 0;
box-shadow: 3px 3px 3px #888888;
}
.menu li:hover > ul {
opacity:1;
}
.menu ul li {
height:0;
overflow: hidden;
padding: 0;
width: 100%;
border-top: 1px grey solid;
border-bottom: 1px grey solid;
}
.menu li:hover > ul li {
height: 40px;
overflow: visible;
}
/*
* end of navi section
*/
Thank you in advance for your help!
You are trying to style an empty div - no contents inside it but other div(s) - the style won't work until you add content or to give it a height
add min-height:200px; and display: table; to #mcontent to be like this
#mcontent {
margin: 0px auto;
width: 892px;
border-left: 5px solid #808080;
border-right: 5px solid #808080;
min-height:200px;
display: table;
}
here is a fiddle https://jsfiddle.net/majali/vzx80x97/6/
<div id="mcontent" >
<div id="lside">
<div id="lside_1">DIV 1
</div>
<div id="lside_2">DIV 2
</div>
<div id="lside_3">DIV 3
</div>
</div>
<div style="clear:both">
and style :
#mcontent {
margin: 0px auto;
display:inline-block;
border-left: 5px solid #808080;
border-right: 5px solid #808080;
}
Help, have been working for hours on this HTML Page. I've been viewing it in Chrome, but when I resize the page I notice that the sidebars I've added cover up everything.
Here is what I wanted to do:
Have a scroll bar when the page is resized (Keeping the page the same)
Have one side bar one side, and to be able to slide over the page to find the other scroll bar. (I dont want the. covering everything up like they are now..)
Here is the code:
#img1 {
width: 400px;
padding-bottom: 25px;
}
#container1 {
text-align: center;
}
#heading-contain {
background-color: LightSeaGreen;
width: 650px;
margin: auto;
border-radius: 7px;
font-family: "adam", arial;
color: white;
}
#heading2 {
border-top: 1px solid white;
}
#heading1 {
position: relative;
top: 15px;
}
#heading2 h3 {
position: relative;
bottom: 6px;
color: DarkSlateGrey;
}
#main-content {
width: 650px;
margin: auto;
margin-top: 30px;
background-color: LightSlateGrey;
border-radius: 8px;
}
#text1 {
padding-bottom: 30px;
padding-top: 20px;
font-family: arial;
color: white;
margin-left: 20px;
margin-right: 20px;
line-height: 200%;
}
#name {
color: DarkSeaGreen;
font-weight: bold;
font-family: "dragon is coming";
font-size: 300%;
}
body {
background-image: url("https://lh4.ggpht.com/X5kjAhye8_5IE9Ws3Z0e05aIAsP_jCSbsh1hja0nNdF8GczkNd0aZQEe7w1V5-2B-9k=h900");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#footer {
background-color: LightSeaGreen;
color: white;
border: 1px double white;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
height: 30px;
padding: 5px;
font-family: "adam";
font-weight: bold;
}
#footer p {
margin: 5px;
}
#name:hover {
color: LightCoral;
cursor: default;
}
#line1 {
text-align: center;
}
#paragraph {
text-indent: 50px;
display: inline-block;
}
#sidebar-left {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
display: block;
position: absolute;
left: 0px;
top: 0px;
position: fixed;
font-family: "adam";
color: white;
}
ul {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
ul li a {
background-color: LightSlateGrey;
color: white;
border-bottom: 1px solid white;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
li:hover {
background-color: DarkSeaGreen;
}
#sidebar-right {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
position: fixed;
font-family: "adam";
color: white;
}
#sidebar-right h4 {
width: 180px;
padding: 10px;
}
#sidebar-right img {
width: 160px;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
#sidebar-right p {
font-size: 13px;
padding-right: 6px;
padding-left: 6px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML WEBPAGE 2 | Brett Carwile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container1">
<!-- Container1 contains all the elements on the page !-->
<div id="heading-contain">
<!-- Heading-container contains everything in the header !-->
<div id="heading1">
<!-- Heading1 is the top of the header which includes the h1 !-->
<h1>HTML Webpage 2</h1>
</div>
<div id="heading2">
<!-- Heading2 is the bottom half of the header including the h3 !-->
<h3>By Brett Carwile</h3>
</div>
</div>
<div id="sidebar-right">
<h4>About the Author</h4>
<img src="DSC00071.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper gravida facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed dui diam. Nulla facilisi. Donec rhoncus dolor malesuada urna commodo lacinia. Sed vel nisi
venenatis, aliquet nibh at, lobortis lacus. Etiam enim lacus, venenatis a sagittis ac, rhoncus in velit. Pellentesque turpis massa, condimentum eget eleifend non, sit amet justo. Vivamus accumsan iaculis placerat. Quisque blandit diam ut risus
ultrices rutrum. Mauris pretium in augue ut lobortis. Vivamus tempor ac nisl at euismod. Maecenas laoreet a erat a varius. Curabitur consequat nunc vehicula tellus ornare, vitae aliquet sapien varius.
</P>
</div>
<div id="sidebar-left">
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
<li>Link 5
</li>
</ul>
<p>Check out the awesome links above!!</p>
</div>
<div id=main-content>
<!-- This div is the main area below the header (text, img ect...) !-->
<p id="text1">
<!-- This span is to seperate the first line from the rest of the text !-->
<span id="line1"> This is an HTML webpage by <span id="name">Brett Carwile</span>.</span>
<br>
<!-- This span is so that we can indent the text !-->
<span id="paragraph">This is a text sample. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id quam nulla. Nam sollicitudin porta ligula, sit amet pharetra elit tincidunt sit amet. Suspendisse rhoncus, elit at consectetur sagittis, nisi eros molestie urna, et cursus elit sapien quis ante. Sed sit amet pulvinar neque. Pellentesque eget lorem ac lorem sodales rutrum. Nulla erat nisl, consequat non ante vitae, porttitor convallis magna. Duis pulvinar ornare nisi nec varius. Mauris tempus nisi non viverra vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vestibulum viverra erat eu rhoncus.
Cras nec vulputate leo. Donec nunc mauris, varius id ligula eu, tincidunt euismod lorem. Praesent pharetra, ipsum et congue egestas, sapien augue feugiat lacus, ac tincidunt augue leo ut tortor. Mauris efficitur urna ut turpis ornare, eu consectetur lacus dapibus. Curabitur sit amet justo blandit est fermentum volutpat. Sed in gravida nunc. Integer sit amet risus in justo porttitor cursus. Mauris tortor purus, viverra a lacus et, suscipit molestie tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </span>
</p>
<img src="DSC00071.jpg" id="img1">
<div id="footer">
<p>Thank you for viewing!!! © Brett Carwile 2016</p>
</div>
</div>
</div>
</body>
</html>
You can try the HTML/CSS and resize the window to see what I mean.
Adding min-width to the body element and removing the position fixed for the sidebar-left and sidebar-right will make the trick. Please see below the modified css rules.
body {
min-width: 1200px; //Modify depending on your requirements
background-image: url("https://lh4.ggpht.com/X5kjAhye8_5IE9Ws3Z0e05aIAsP_jCSbsh1hja0nNdF8GczkNd0aZQEe7w1V5-2B-9k=h900");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#sidebar-left {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
display: block;
position: absolute;
left: 0px;
top: 0px;
font-family: "adam";
color: white;
}
#sidebar-right {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
font-family: "adam";
color: white;
}
I hope it helps.