I used this footer on my homepage and it worked fine, but copy and pasting it over to another webpage completely destroyed all the styling it had, which is weird, because the header (which I also copied from the same page) is completely fine and unchanged. Any thoughts? Here's a fiddle with all the code:
Okay, so I just put it into the fiddle and it worked fine, but it still doesn't work like it should when I open it in Chrome through Sublime Text.
Here's all the code:
HTML
<body>
<div class="header">
<div class="navbar">
<p class="navwords nonactive">Home</p>
<p class="navwords active">Our Team</p>
<p class="navwords nonactive">Weddings</p>
<p class="navwords nonactive">Events</p>
<p class="navwords nonactive">Contact</p>
</div>
<div class="headerlogo">
<a src="#"><img id="background" src="assets/BlurryFlowers.png"></a>
<img id="logo" src="assets/Logo.png">
</div>
</div>
<div class="ourteam">
<div class="employee" id="brax">
<h2>Brax</h2>
<img src="assets/Braxpic.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae arcu quis risus elementum auctor in eu erat. Nullam sodales pulvinar eros, semper euismod elit pretium sit amet. Vestibulum vestibulum libero id ipsum viverra, condimentum vulputate urna volutpat. In lobortis sit amet risus id vehicula. Praesent in risus at urna mollis eleifend vel et arcu. Quisque urna leo, porta non turpis sit amet, gravida sagittis erat. Curabitur eu convallis purus. Vestibulum feugiat purus ac urna aliquet rutrum.</p>
</div>
<div class="employee" id="ryan">
<h2>Ryan</h2>
<img src="assets/Ryanpic.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae arcu quis risus elementum auctor in eu erat. Nullam sodales pulvinar eros, semper euismod elit pretium sit amet. Vestibulum vestibulum libero id ipsum viverra, condimentum vulputate urna volutpat. In lobortis sit amet risus id vehicula. Praesent in risus at urna mollis eleifend vel et arcu. Quisque urna leo, porta non turpis sit amet, gravida sagittis erat. Curabitur eu convallis purus. Vestibulum feugiat purus ac urna aliquet rutrum.</p>
</div>
</div>
<div class="footer">
<div class="favicon">
<img id="favicon" src="assets/favicon.png">
</div>
<div class="footernav">
<p>Home</p>
<p>Our Team</p>
<p>Weddings</p>
<p>Events</p>
<p>Contact</p>
</div>
<div class="socialmedia">
<img class="social" src="assets/facebook.png">
<a class="socialText" href="https://www.facebook.com/yourstorybookmemory/"><p>Storybook Memories</p></a><br/>
<img class="social" src="assets/instagram.png">
<a class="socialText" href="https://www.instagram.com/yourstorybookmemory/"><p>yourstorybookmemory</p></a><br/>
<img class="social" src="assets/twitter.png">
<a class="socialText" href="https://twitter.com/sbvideography"><p>#sbvideography</p></a><br/>
<img class="social" src="assets/youtube.png">
<a class="socialText" href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><p>Storybook Memories</p></a><br/>
<img class="social" src="assets/mail.png">
<a class="socialText" href="mailto:inquiries#yourstorybookmemory.com"><p>inquiries#yourstorybookmemory.com</p></a><br/>
</div>
</div>
</body>
CSS
/* PAGE SETUP */
*{
font-weight: 100;
}
body {
font-family: 'Lato', 'sans-serif';
width: 100%;
margin: 0px;
}
/* HEADER FOR ALL PAGES */
.header {
width: 100%;
}
.headerlogo {
top: 0;
left: 0;
position: relative;
}
#background {
width: 100%;
z-index: 2;
}
#logo {
z-index: 1;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navbar {
width: 100%;
background-color: rgba(96,150,38,0.4);
text-align: right;
position: absolute;
height: 55px;
top: 0;
left: 0;
z-index: 3;
}
.nonactive {
color: white;
}
.active {
color: black;
cursor: ;
}
.navwords {
display: inline-block;
margin: 15px;
vertical-align: middle;
font-size: 1em;
transition: .3s color;
font-weight: 300;
cursor: pointer;
}
.navwords:hover {
color: black;
}
/* OUR TEAM SECION */
/* FOOTER SECTION */
.footer {
background-color: #5c0e13;
color: white;
display: inline-block;
width: 100%;
}
.favicon, .footernav, .socialmedia {
float: left;
}
.favicon {
margin-left: 1%;
margin-top: 1%;
margin-right: 1%;
}
.footernav a {
text-decoration: none;
color: white;
transition: .3s color;
}
.footernav a:hover {
color: #db1421;
}
.socialmedia {
margin-left: 50%;
position: relative;
transform: translateY(10%);
}
.socialmedia p {
margin: 6px;
padding: 0;
}
.social {
width: 20px;
margin-right: 10px;
vertical-align: middle;
}
.socialmedia a {
text-decoration: none;
color: white;
transition: .3s color;
vertical-align: middle;
}
.socialmedia a:hover {
color: #db1421;
}
.socialText{
display:inline-block;
}
EDIT: Here is a screenshot of what it's doing right now:
And here is a fiddle with an example of it working (sort of, that maroon background means it's working, because that's not working on the screenshot).
https://jsfiddle.net/f26w8boe/
Related
What I am trying to achieve is all images the same level, all headers and paragraphs level no matter what length they are and a button after which as all in the same level... I am also trying to make a 9x9 grid, but as soon as I add more columns they start going next to each other not by the underneath...
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container .box {
width: 50%;
margin: 10px;
text-align: center;
}
.container {
padding-top: 30px;
height: 300px;
text-align: center;
min-width: 280px;
height: 100%;
margin-left: 100px;
margin-right: 100px;
display: flex;
justify-content: space-between;
}
.box h2 {
text-align: center;
font-family: "Slabo 27px", serif;
font-size: 24px;
font-weight: 700;
text-align: center;
padding-left: 25px;
padding-right: 25px;
}
.box p {
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 19px;
text-align: center;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.column {
text-align: center;
float: left;
width: 50%;
}
}
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.3s;
/* Safari */
transition-duration: 0.3s;
cursor: pointer;
}
.button {
background-color: white;
color: black;
border: 2px solid #008CBA;
text-align: center;
padding-bottom: 20px;
width: 50%;
margin: auto;
align-self: flex-end;
}
.button:hover {
background-color: #008CBA;
color: white;
}
<div class="container">
<div class="flex-container">
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2>Example Header</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. </p>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2>Longer example of a header blah </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper.</p>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2>another short example </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper. Proin est ipsum, rutrum ac est ut, mollis mollis elit. Curabitur eget dolor gravida, rhoncus arcu eget,
rhoncus ante. Nulla rhoncus in mauris et consequat. </p>
<div>
Learn more
</div>
</div>
</div>
This is currently the best I have, I've got all images and header and text to be the same level but as soon as I have the buttons in level the headers or paragraphs wont be level... Any help on this would be amazing!
If you are ok to set some heights and some overflow: hidden; you could do this:
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container .box {
width: 50%;
margin: 10px;
text-align: center;
}
.container {
padding-top: 30px;
height: 300px;
text-align: center;
min-width: 280px;
height: 100%;
margin-left: 100px;
margin-right: 100px;
display: flex;
justify-content: space-between;
}
.box h2 {
text-align: center;
font-family: "Slabo 27px", serif;
font-size: 24px;
font-weight: 700;
text-align: center;
padding-left: 25px;
padding-right: 25px;
/* ! */
overflow: hidden;
height: 3.6em;
}
.box p {
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 19px;
text-align: center;
padding-left: 25px;
padding-right: 25px;
margin-bottom: 40px;
/* ! */
overflow: hidden;
height: 12.6em;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.column {
text-align: center;
float: left;
width: 50%;
}
}
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.3s;
/* Safari */
transition-duration: 0.3s;
cursor: pointer;
}
.button {
background-color: white;
color: black;
border: 2px solid #008CBA;
text-align: center;
padding-bottom: 20px;
width: 50%;
margin: auto;
align-self: flex-end;
}
.button:hover {
background-color: #008CBA;
color: white;
}
/* ! */
.fade {
position: relative;
height: 3.6em;
}
/* ! */
.fade:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: 1.2em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
<div class="container">
<div class="flex-container">
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<div>
<h2 class="fade">Example Header</h2>
<p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. </p>
</div>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2 class="fade">Longer example of a header blah blah blah </h2>
<p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper.</p>
<div>
Learn more
</div>
</div>
<div class="box">
<a href="#">
<img src="http://via.placeholder.com/600x600" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
</a>
<h2 class="fade">another short example </h2>
<p class="fade"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eget mi at cursus. Nam aliquet dolor eros, in varius diam tincidunt et. Curabitur porta nunc arcu, sed mattis felis interdum ut. Curabitur consequat non nunc et tempus. Mauris
porta orci augue, in sagittis eros semper rutrum. Nam in elit mattis, auctor enim a, tempus arcu. In interdum eu lorem sit amet ullamcorper. Proin est ipsum, rutrum ac est ut, mollis mollis elit. Curabitur eget dolor gravida, rhoncus arcu eget,
rhoncus ante. Nulla rhoncus in mauris et consequat. </p>
<div>
Learn more
</div>
</div>
</div>
Flow fade thing is from here where you can also find some other approaches to your problem. Hope this helps.
I'm trying to set a background color for a h3 which is at the bottom of a paragraph however the color is covering both the heading and the paragraph text when I just want it to cover the h3. Not sure why its oversizing like that rather than just wrapping around the h3.
This is how I've done it -
section.council {
height: 350px;
max-width: 100%;
position: relative;
background-color: #F0F0F0;
}
.council h2 {
text-align: left;
margin-top: 30px;
line-height: 5px;
font-size: 20px;
color: #000000;
}
.council p {
font-size: 10px;
color: black;
float: left;
margin-top: 20px;
margin-right: 50px;
}
.readmore h3 {
color: #FFFFFF;
font-size: 15px;
text-align: center;
background-color: #00BFFF;
}
<div class="row">
<h4>LATEST CASE STUDY</h4>
<div class="six columns">
<h2>Wakefield Council</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci.
<br> Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi.
</p>
<div class="readmore">
<h3>READ MORE</h3>
</div>
</div>
</div>
Is your problem just the fact that h3 as a block element by default goes over the whole width …?
Well then just make it inline or inline-block, and move text-align to the parent element to center it:
section.council {
height: 350px;
max-width: 100%;
position: relative;
background-color: #F0F0F0;
}
.council h2 {
text-align: left;
margin-top: 30px;
line-height: 5px;
font-size: 20px;
color: #000000;
}
.council p {
font-size: 10px;
color: black;
float: left;
margin-top: 20px;
margin-right: 50px;
}
.readmore {
text-align:center;
}
.readmore h3 {
display: inline-block;
color: #FFFFFF;
font-size: 15px;
background-color: #00BFFF;
}
<div class="row">
<h4>LATEST CASE STUDY</h4>
<div class="six columns">
<h2>Wakefield Council</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci.
<br> Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi.
</p>
<div class="readmore">
<h3>READ MORE</h3>
</div>
</div>
</div>
If you want it to look more button-y, then add a bit of padding as well.
I have a section on a site where the parent ID styling rules are conflicting with how I need a particular area of the section to look. This is how it should look -
And this is the coded version so far -
The rules set for the text above are conflicting with how the h2 / p text should show for the 'CASE STUDY' which I need to push to the left and the image to remain on the right, aligned with the text. I need to overcome the parent rules but I've tried a few different things and nothing. Also, I'm not sure why the background color is not stretching across the page. Here's the code so far -
/* CASE STUDY */
section#casestudy {
height: 750px;
max-width: 100%;
}
section#casestudy div.row {
height: 250px;
max-width: 100%;
text-align: center;
position: relative;
}
section#casestudy .four {
position: relative;
max-width: 100%;
display: inline-block;
margin: 0 auto;
}
#casestudy h4 {
color: #000000;
font-size: 20px;
padding-top: 50px;
line-height: 5px;
}
section#casestudy p {
font-size: 10px;
color: #bdc3c7;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
#council div.row {
display: block;
background-color: #d3d3d3;
width: 960px;
}
#council img {
float: right;
}
#council h2 {
font-size: 20px;
text-align: left;
color: #000000;
}
#council div.row p {
font-size: 10px;
text-align: left;
width: 50%;
}
.four h3 {
position: absolute;
color: #FFF;
font-size: 20px;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
section#casestudy img {
display: block;
margin-left: 20px;
padding: 10px;
}
<section id="casestudy">
<div class="container">
<div class="twelve columns">
<div class="row" id="meettheteam">
<h3>WHAT IS 2D ANIMATION?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar.</p>
</div>
</div>
<div id="council">
<div class="twelve columns">
<div class="row">
<h4>LATEST CASE STUDY</h4>
<h2>Wakefield Council</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci.
<br>
Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi.
</p>
<img src="images/VIDEO.jpg" alt="Video" style="width: 300px; , height: 100px;" >
</div>
</div>
</div>
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div>
</div>
</section>
Any assistance/guidance appreciated.
I have a baseline line-height which i dont want to amend for this part of the site, but as you can see on the examples below, there are spaces between each element.
What i want to achieve?
I want the line that is aligned vertically
p {
margin: 0;
padding: 0;
}
.view-timeline-block {
padding: 0 5em;
line-height: 28px;
}
.view-timeline-block .ml-container {
padding-left: 25px;
}
.view-timeline-block .line {
position: relative;
}
.view-timeline-block .line:after {
content: '';
position: absolute;
left: -19px;
top: 0;
width: 5px;
height: 100%;
background: black;
}
.view-timeline-block .active {
position: relative;
}
.view-timeline-block .active:after {
content: '';
position: absolute;
left: -25px;
top: 5px;
width: 7px;
height: 7px;
border-radius: 50%;
background: transparent;
border: 5px solid black;
}
.view-timeline-block .active-small {
position: relative;
}
.view-timeline-block .active-small:after {
content: '';
position: absolute;
left: -22px;
top: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
}
<div class="view-timeline-block">
<div class="main-listing">
<div class="title active">Testing name</div>
<div class="content line">
<p>testing name content</p>
</div>
<div class="sub_name active-small">asdasdasdasd</div>
<div class="sub_content line">
<p>testing sub name content</p>
</div>
</div>
<div class="main-listing">
<div class="title active">Timeline 2 name</div>
<div class="content line">
<p>timeline 2 content</p>
</div>
<div class="sub_name active-small">Timeline 2 sub name</div>
<div class="sub_content ">
<p>timeline 2 sub content</p>
</div>
</div>
</div>
needs to meet. Would anyone know how to accomplish this?
Did some slight modifications - maybe you can give it a try.
I changed the lines positions. To avoid them overlapping the circles, I added a background to those circles and gave them a higher z-index.
Last but not least, I changed the circles / dots size to make them more centered.
p {
margin: 0;
padding: 0;
}
.view-timeline-block {
padding: 0 5em;
line-height: 28px;
}
.view-timeline-block .ml-container {
padding-left: 25px;
}
.view-timeline-block .line {
position: relative;
}
.view-timeline-block .line:after {
background: black none repeat scroll 0 0;
content: "";
height: -webkit-calc(100% + 25px);
height: -moz-calc(100% + 25px);
height: -o-calc(100% + 25px);
left: -19px;
position: absolute;
top: -15px;
width: 5px;
}
.view-timeline-block .active {
position: relative;
}
.view-timeline-block .active:after {
background-color: white;
border: 5px solid black;
border-radius: 50%;
content: "";
height: 8px;
left: -25px;
position: absolute;
top: 6px;
width: 8px;
z-index: 100;
}
.view-timeline-block .active-small {
position: relative;
}
.view-timeline-block .active-small:after {
background: black none repeat scroll 0 0;
border-radius: 50%;
content: "";
height: 12px;
left: -23px;
position: absolute;
top: 9px;
width: 12px;
z-index: 150;
}
<div class="view-timeline-block">
<div class="main-listing">
<div class="title active">Testing name</div>
<div class="content line">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu quam facilisis, sagittis diam sit amet, consectetur est. Donec ac dolor augue. Vestibulum efficitur ante at tempor ultricies. Nullam pharetra vel arcu condimentum posuere. Cras auctor
pulvinar mattis. Quisque pulvinar eget risus non sagittis. Duis lorem sapien, rhoncus sed turpis dictum, accumsan scelerisque justo. Nullam nec turpis sit amet magna mattis gravida ut ut magna. Sed pharetra lacus eros, ac vulputate tellus rutrum
facilisis. Fusce nec justo dictum, lobortis ipsum ultricies, dapibus tellus. Vestibulum nulla nibh, pretium in semper ut, luctus molestie mi.</p>
</div>
<div class="sub_name active-small">asdasdasdasd</div>
<div class="sub_content line">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu quam facilisis, sagittis diam sit amet, consectetur est. Donec ac dolor augue. Vestibulum efficitur ante at tempor ultricies. Nullam pharetra vel arcu condimentum posuere. Cras auctor
pulvinar mattis. Quisque pulvinar eget risus non sagittis. Duis lorem sapien, rhoncus sed turpis dictum, accumsan scelerisque justo. Nullam nec turpis sit amet magna mattis gravida ut ut magna. Sed pharetra lacus eros, ac vulputate tellus rutrum
facilisis. Fusce nec justo dictum, lobortis ipsum ultricies, dapibus tellus. Vestibulum nulla nibh, pretium in semper ut, luctus molestie mi.
</p>
</div>
</div>
<div class="main-listing">
<div class="title active">Timeline 2 name</div>
<div class="content line">
<p>timeline 2 content</p>
</div>
<div class="sub_name active-small">Timeline 2 sub name</div>
<div class="sub_content ">
<p>timeline 2 sub content</p>
</div>
</div>
</div>
Update: I replaced the height: 200% by height:-webkit-calc(100% + 25px); and some other browser-specific height-calculations. Should work in all modern browsers.
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.