I'm new to web development and in this example I'm working on: http://codepen.io/wabibito/pen/RawGPo
<head>
<title>Tiago Dias Ferreira</title>
<style>
ul {
list-style-type: none;
margin: auto auto;
overflow: hidden;
background-color: #333;
position: static;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top topnav">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<a name="home"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
<a name="about"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
<a name="portfolio"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
<a name="contact"></a>
<h1 class="text-primary text-center">Tiago Dias Ferreira</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus aliquam velit eget luctus. Proin suscipit lorem ex, ut porta nulla dignissim eu. Praesent at tristique risus, sit amet lacinia urna. Quisque vitae congue mauris, et facilisis nulla. Sed quam dolor, blandit ac velit in, luctus vehicula felis. Donec fringilla urna dolor, ac semper quam congue non. Praesent vel nunc eleifend, mattis ipsum eget, vestibulum eros. Nunc et semper massa.
</p>
<p>
In tortor dui, cursus a velit ac, convallis hendrerit ligula. Nunc ultricies efficitur nisl. Suspendisse condimentum porttitor maximus. Morbi purus nunc, posuere id gravida ac, suscipit at urna. Phasellus non diam vitae mauris aliquet porttitor tincidunt id nibh. Nullam imperdiet nisl eu est imperdiet, porttitor vehicula metus iaculis. Donec rutrum eget tortor a consequat. Maecenas ac arcu erat. Fusce rhoncus nisl eget elementum pharetra. Proin a enim ac mauris mattis ultricies quis a dolor.
</p>
<p>
Nullam ornare non nibh sed cursus. Phasellus volutpat nisi eu nunc dignissim semper. Vivamus nec neque mi. Suspendisse potenti. Aliquam vehicula augue tristique bibendum faucibus. Nam in imperdiet orci, in molestie ante. Pellentesque maximus ex a risus gravida, eget rhoncus neque venenatis.
</p>
<p>
In nec imperdiet diam, at malesuada justo. Donec venenatis in nulla sed consequat. Nunc hendrerit, turpis ut viverra dapibus, tortor lorem consequat sem, ut dapibus massa nisl sit amet arcu. Proin tempor tincidunt ipsum et molestie. Pellentesque vulputate velit sit amet tellus iaculis, eget viverra nibh malesuada. Proin tristique nunc vitae magna cursus, at blandit dolor faucibus. Aenean dignissim sit amet arcu eget vestibulum.
</p>
<p>
Vivamus nec diam non urna pellentesque varius at non tellus. Pellentesque interdum faucibus maximus. Phasellus diam sapien, tincidunt quis cursus at, accumsan eget diam. Integer ullamcorper nulla nec justo consectetur, porta faucibus mauris gravida. Maecenas sagittis sodales velit, et tempor libero efficitur et. Suspendisse pulvinar at nisi quis interdum. In in vestibulum turpis, eget suscipit massa. Nullam faucibus sodales ornare. Mauris at ultricies ex, sit amet convallis lorem.
</p>
</body>
The navigation bar keeps hiding content under it. Initially i fixed it by putting a margin to the first title. But when I click on links on the same page, they get hidden under the navigation bar.
How can I fix it?
I also accept others suggestions, tips and hints to improve. :D
Cheers,
Tiago
The fixed nav bar is the problem. When you set something as fixed, it removes it from the DOM and subsequently all other content will be rendered as if it's not there. Meaning it will display content at the top of the page and then put hte navbar on top. You need to add padding to the body to bring it down. For example, if the nav bar height is 50px, add body {padding-top:50px} to your css.
Also - just looking at your code, if you are using the nav to target sections on the page via the href, you will need to add that as an id to the a link in the page - currently you have only listed a name for each link in the body. And they should be semantically listed as "section" as well (enclosing the heading and <p> elements of that section)- currently you have numerous h1 elements, but you should only have one per page with other headings being h2, h3 etc (it is fine to have a h1 for each section if using the section nomenclature because it infers that each section is semantically different from the others and therefore can have a new h1). hope this helps gavgrif
Related
I have a strange problem with css pseudo elements. I tried to design an initial for my paragraph elements. I did this with the :first-of-type pseudo elment. It all woeked well. Then I wanted to add an info box to the right of the text. I used the pseudo element :before for it. When I did this, the initial changed it's height to the height of the before elment.
I set up an fiddle to show my code:
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
}
div.project_content:before {
content: "";
float: right;
height: 200px;
width: 0;
}
<div class="project-vorsch">
<div class="project_content">
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum
semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>
The problem is that the height in div.project_content:before affects both #facts and p.
If you want to offset the right-hand box and leave a gap in the text above it, instead use margin-top: 200px on #facts:
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
margin-top: 200px;
}
<div class="project-vorsch">
<div class="project_content">
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum
semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>
If instead you want the text to wrap around the #facts element, I'd recommend simply moving the #facts <div> to sit in the HTML structure where you want it to appear:
div.project-vorsch p:first-of-type:first-letter {
font-size: 500%;
line-height: 1;
float: left;
padding-right: 8px;
font-weight: 700;
}
#facts {
clear: both;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.87);
line-height: 1.61111;
float: right;
width: 32%;
padding: 10px;
}
<div class="project-vorsch">
<div class="project_content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales. Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque
accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit
quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt leo vel tellus efficitur luctus. Ut elementum semper sodales.
<div id="facts">
<strong>Format:</strong>
<br>
<strong>Dauer:</strong>
</div>
Vivamus dictum pellentesque tortor a pellentesque. Aliquam venenatis quam sed sagittis ultricies. Pellentesque accumsan ipsum sapien, in tincidunt lacus finibus eget. Phasellus pellentesque lectus eget quam pulvinar pharetra. Vestibulum
varius ante at tellus tincidunt rutrum. Morbi a euismod erat. Aliquam hendrerit diam quis felis fermentum, egestas suscipit quam dictum. Vivamus efficitur, odio porta tincidunt vestibulum, sapien nunc aliquam ligula, at imperdiet felis ex sit amet
tortor. Quisque quis erat nibh. Morbi enim est, rutrum eu tempor sodales, vulputate at dui. Praesent consequat tortor pharetra tellus pharetra, vel pulvinar mi lobortis. Cras ac ante feugiat, ornare eros in, ornare erat. Phasellus arcu nisl, vulputate
ac fringilla in, vehicula in mi. Nam feugiat ex non dui tincidunt, nec faucibus ante tincidunt. Mauris nunc leo, varius eget consectetur at, egestas ut nunc. Proin rhoncus orci sed rutrum placerat. Vivamus nibh risus, accumsan vitae nulla eget,
hendrerit consectetur justo. Pellentesque posuere, neque nec rhoncus finibus, leo augue mattis est, vitae elementum dolor dolor non risus. Nam mollis luctus ligula sit amet viverra. Donec accumsan, tortor vehicula dignissim convallis, elit arcu
tincidunt orci, ut condimentum lorem neque sit amet lacus. Nullam ornare, arcu non tempor elementum, nibh urna tristique ex, rutrum dignissim ipsum nibh sit amet mi. Duis auctor eleifend neque quis eleifend. Aliquam augue ipsum, sodales quis consequat
et, lacinia eget dolor. Mauris tempor, diam eu pretium tincidunt, diam lorem auctor sapien, et pretium orci quam vel ex. Donec lobortis ipsum at ante elementum, vitae accumsan nunc mattis. Curabitur non volutpat velit. Etiam rhoncus ut justo non
feugiat. Aenean mollis, nibh at interdum placerat, sapien augue viverra massa, sed rhoncus nisl ligula non ante. In eu ipsum mauris. Duis interdum nec turpis a vulputate. Mauris mattis arcu ac augue pharetra vestibulum. Curabitur nisl ante, lobortis
fermentum ex vitae, luctus placerat enim. Sed et sem justo. Proin orci lectus, gravida et neque eget, bibendum commodo quam. Curabitur ut lobortis lacus, non dignissim tortor. In ut elit ex. Sed imperdiet faucibus neque, nec facilisis nulla interdum
non. Nam tempus arcu ex, ac varius libero iaculis et. Quisque non diam nec leo maximus condimentum. Curabitur lacinia neque eu egestas dapibus. Phasellus luctus ipsum odio, ac placerat tortor dictum pharetra. </p>
</div>
</div>
Hope this helps! :)
I'm making a "semantic" html5 model for all the articles in a website. This is what could be great :
<article>
<header>
<h2 id="title">MAIN TITLE</h2>
<h3 id="sub-title">SECOND TITLE</h3>
<img src="img.jpg" alt="article image"/>
</header>
<section id="main"><!-- use of section tag is optional here -->
<p>ARTICLE TEXT</p>
</section>
<footer>
<time datetime="2012-02-02">2 février 2012</time>
<span class="tags-label">Mots-clef :</span>
<h4 id="tag1">TAG 1</h4>
<h4 id="tag2">TAG 2</h4>
</footer>
</article>
But I want <header> and <section id="main"> to be ONE scrollable block at the top of the page while footer will be fixed at the bottom. I use a custom scrollbar (sly.js) which needs some extra wrapper divs. So I must have something like that :
<article>
<div id="first-scrollbar-wrapper"><div id="second-scrollbar-wrapper">
<header>
<h2 id="title">MAIN TITLE</h2>
<h3 id="sub-title">SECOND TITLE</h3>
<img src="img.jpg" alt="article image"/>
</header>
<section id="main">
<p>ARTICLE TEXT</p>
</section>
</div></div>
<footer>
<time datetime="2012-02-02">2 février 2012</time>
<span class="tags-label">Mots-clef :</span>
<h4 id="tag1">TAG 1</h4>
<h4 id="tag2">TAG 2</h4>
</footer>
</article>
QUESTION : Is it acceptable? Don't you think the extra wrapper divs are "breaking" the semantic flow?
But I want <header> and <section id="main"> to be ONE scrollable block at the top of the page while footer will be fixed at the bottom
You can declare
position: fixed;
for the <footer>.
This will obviate the need to surround <header> and <section id="main"> (or <main>) with a container <div>.
Edit:
I've just realised this doesn't work.
You'd be entirely forgiven for imagining that position:fixed works in exactly the same way as position:absolute.
ie. If an element with position:fixed has a parent with position:relative, the contained element will be fixed relative to its container.
But it isn't - and apparently, this is a perennial frustration.
So... here's a javascript to fix the problem and to enable
position:fixed-relative-to-parent
Example:
function fixFooter(article) {
var footer = article.getElementsByTagName('footer')[0];
var articleScrollTop = article.scrollTop;
var articleHeight = parseInt(window.getComputedStyle(article).getPropertyValue('height'));
var footerHeight = parseInt(window.getComputedStyle(footer).getPropertyValue('height'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('padding-top'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('padding-bottom'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('border-top-width'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('border-bottom-width'));
var footerTopPosition = articleScrollTop + articleHeight - footerHeight;
var footerTop = footerTopPosition + 'px';
footer.style.top = footerTop;
}
function initialiseArticlesFunction(i) {
return function(){
var article = document.getElementsByTagName('article')[i];
article.addEventListener('scroll',function(){fixFooter(article);},false);
}
}
function initialiseArticles() {
var initialiseArticles = [];
var articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
var footer = articles[i].getElementsByTagName('footer')[0];
if (window.getComputedStyle(footer).getPropertyValue('position') === 'fixed') {
footer.classList.add('fixed-relative-to-parent');
fixFooter(articles[i]);
}
initialiseArticles[i] = initialiseArticlesFunction(i);
initialiseArticles[i]();
}
}
window.addEventListener('load',initialiseArticles,false);
article {
position:relative;
display:inline-block;
margin: 0 60px 0 0;
padding:0;
border: 2px solid rgb(127,127,127);
width: 220px;
height: 400px;
overflow-y: scroll;
}
article footer {
display:block;
position: fixed;
width: 191px;
height: 120px;
padding:6px;
background-color: rgb(227,227,0);
}
.fixed-relative-to-parent {
position: absolute;
left: 0;
}
<article>
<header>
<h2 id="title">MAIN TITLE</h2>
<h3 id="sub-title">SECOND TITLE</h3>
<img src="img.jpg" alt="article image"/>
</header>
<section id="main"><!-- use of section tag is optional here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>p>
<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>
<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>
<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>
<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>
</section>
<footer>
<time datetime="2012-02-02">2 février 2012</time>
<span class="tags-label">Mots-clef :</span>
<h4 id="tag1">TAG 1</h4>
<h4 id="tag2">TAG 2</h4>
</footer>
</article>
<article>
<header>
<h2 id="title">MAIN TITLE 2</h2>
<h3 id="sub-title">SECOND TITLE 2</h3>
<img src="img.jpg" alt="article image 2"/>
</header>
<section id="main"><!-- use of section tag is optional here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>p>
<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>
<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>
<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>
<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>
</section>
<footer>
<time datetime="2012-02-02">2 février 2012</time>
<span class="tags-label">Mots-clef :</span>
<h4 id="tag1">TAG 1</h4>
<h4 id="tag2">TAG 2</h4>
</footer>
</article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>
<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>
<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>
<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>
<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>
<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>
<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>
<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>
<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>
<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>
<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>
<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>
<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>
Here is the design I'm trying to do.
So I decided to put three part.
top_bg
content
footer_bg
I have given absoulte position to bgs to fix at top and bottom. But the thing is the footer_bg image is not sitting at bottom instead coming at top even though I have given bottom 0.
CODE
MARKUP
<div id="top_bg">
<img src="https://images.unsplash.com/photo-1438368915865-a852ef86fc42?q=80&fm=jpg&s=15e4744077e36852ba57f46f4660dc7a" />
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper, massa quis aliquet rhoncus, diam lorem euismod ante, sed vulputate nulla magna id dui. Sed sit amet libero mi. Fusce suscipit, lorem at dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor at ante. Nam a sollicitudin massa, sit amet pretium nisl. Morbi at velit maximus, commodo ligula vel, pharetra dui. Vivamus mollis mi eget nunc accumsan scelerisque. Fusce non mauris sit amet nibh malesuada faucibus.</p>
<p>Donec feugiat, tortor eget interdum rhoncus, nunc felis dictum mauris, at convallis elit turpis quis sem. Donec enim augue, tempus ac scelerisque euismod, congue sed nisi. Vestibulum sed fermentum nisi, nec lacinia mi. Duis ut consectetur sem. Pellentesque lacinia ipsum eu sapien iaculis, ut varius libero hendrerit. Phasellus non turpis augue. Nam ut felis dapibus, viverra arcu et, tincidunt neque. In at convallis tellus. Nunc sit amet eleifend mauris. Sed diam elit, placerat a laoreet eu, facilisis gravida erat. Praesent eget ultricies nisl. Quisque vehicula cursus aliquet. Curabitur at diam volutpat, tempor ante eu, cursus dolor. Integer laoreet, est sed lacinia ultricies, quam massa cursus est, vitae pulvinar nibh lectus sed elit.</p>
<p>Aenean cursus porttitor eleifend. Morbi ultrices eleifend eros, ac posuere tellus lobortis vestibulum. Aenean eu dolor nec elit ultrices cursus at sed magna. Donec quis porta nulla, in dictum arcu. Pellentesque porttitor dui vitae euismod consectetur. Pellentesque id tellus viverra, vulputate nisi sit amet, ultricies nibh. In hac habitasse platea dictumst. Praesent pharetra ex a dictum consectetur. Fusce finibus sapien vel iaculis mollis. Nunc vel luctus enim.</p>
<p>Aliquam lacinia vestibulum tempor. Etiam pellentesque, felis nec commodo cursus, sem mi feugiat dolor, sed dignissim ipsum lectus vel risus. Cras a dui eget lacus mattis volutpat in sed tortor. Aliquam lobortis sapien sit amet pharetra varius. Donec eget aliquam nisi. Morbi quis mattis quam. Nullam porta suscipit dignissim. In hac habitasse platea dictumst. Praesent in dui id dui porta lacinia. Nam odio tortor, volutpat non auctor id, placerat nec augue. Suspendisse quis pretium ligula, quis accumsan tortor. Cras eu est vitae orci egestas rhoncus eu non dolor. Integer vehicula suscipit magna ut varius. Maecenas sagittis leo id nisl sagittis viverra.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sed consectetur neque, a pellentesque turpis. Sed quis orci diam. Aenean vel ultricies ipsum, id accumsan mi. Sed hendrerit sollicitudin nisi bibendum hendrerit. Duis nec hendrerit ipsum. Suspendisse congue mauris ut viverra dapibus. Fusce ut blandit nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus sapien et felis dictum aliquet. Pellentesque a pretium leo. Duis rhoncus bibendum fermentum. Proin ac massa euismod, pretium odio vel, vehicula risus. Aenean posuere eros non orci maximus, tristique varius felis elementum. Etiam eget maximus massa, in facilisis ipsum. Integer eleifend auctor diam scelerisque tempor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper, massa quis aliquet rhoncus, diam lorem euismod ante, sed vulputate nulla magna id dui. Sed sit amet libero mi. Fusce suscipit, lorem at dignissim rutrum, urna est scelerisque nisl, nec interdum orci tortor at ante. Nam a sollicitudin massa, sit amet pretium nisl. Morbi at velit maximus, commodo ligula vel, pharetra dui. Vivamus mollis mi eget nunc accumsan scelerisque. Fusce non mauris sit amet nibh malesuada faucibus.</p>
<p>Donec feugiat, tortor eget interdum rhoncus, nunc felis dictum mauris, at convallis elit turpis quis sem. Donec enim augue, tempus ac scelerisque euismod, congue sed nisi. Vestibulum sed fermentum nisi, nec lacinia mi. Duis ut consectetur sem. Pellentesque lacinia ipsum eu sapien iaculis, ut varius libero hendrerit. Phasellus non turpis augue. Nam ut felis dapibus, viverra arcu et, tincidunt neque. In at convallis tellus. Nunc sit amet eleifend mauris. Sed diam elit, placerat a laoreet eu, facilisis gravida erat. Praesent eget ultricies nisl. Quisque vehicula cursus aliquet. Curabitur at diam volutpat, tempor ante eu, cursus dolor. Integer laoreet, est sed lacinia ultricies, quam massa cursus est, vitae pulvinar nibh lectus sed elit.</p>
<p>Aenean cursus porttitor eleifend. Morbi ultrices eleifend eros, ac posuere tellus lobortis vestibulum. Aenean eu dolor nec elit ultrices cursus at sed magna. Donec quis porta nulla, in dictum arcu. Pellentesque porttitor dui vitae euismod consectetur. Pellentesque id tellus viverra, vulputate nisi sit amet, ultricies nibh. In hac habitasse platea dictumst. Praesent pharetra ex a dictum consectetur. Fusce finibus sapien vel iaculis mollis. Nunc vel luctus enim.</p>
<p>Aliquam lacinia vestibulum tempor. Etiam pellentesque, felis nec commodo cursus, sem mi feugiat dolor, sed dignissim ipsum lectus vel risus. Cras a dui eget lacus mattis volutpat in sed tortor. Aliquam lobortis sapien sit amet pharetra varius. Donec eget aliquam nisi. Morbi quis mattis quam. Nullam porta suscipit dignissim. In hac habitasse platea dictumst. Praesent in dui id dui porta lacinia. Nam odio tortor, volutpat non auctor id, placerat nec augue. Suspendisse quis pretium ligula, quis accumsan tortor. Cras eu est vitae orci egestas rhoncus eu non dolor. Integer vehicula suscipit magna ut varius. Maecenas sagittis leo id nisl sagittis viverra.</p>
</div>
<div id="footer_bg">
<img src="https://images.unsplash.com/photo-1438480478735-3234e63615bb?q=80&fm=jpg&s=8fddc1c4c240e145cf6b65a21ae92087">
</div>
STYLE
#top_bg,#footer_bg{
position:absolute;
z-index:-99999;
}
#top_bg,#footer_bg img{
width:100%;
}
#top_bg{
top:0;
}
#footer_bg{
bottom:0;
}
#content{
background-color:white;
margin:40px;
margin-top:100px;
padding:10px;
}
JSFIDDLE
Why is this happening? There is no float used here. What is the problem?
To my thinking footer_bg parent is body and I have given bottom 0 so it should fit at the bottom of the page. I don't know why it is not happening.
How to have the footer_bg image at the bottom of page?
update your css with
body {
position:relative;
}
and yes you can update z-index to -1
Here check this, As said Body should be relative.
Check here : [FIDDLE][1]
[1]: http://jsfiddle.net/vinayak5192/jtm0wr4L/4/
I have a h2 tag within a P and a div tag and somehow it is making the styles of my paragraphs not work correctly. In below example, the first paragraph, without the h2 tag behaves as expected. But as soon as I put an h2 tag in the rest of the paragraphs, it breaks my styles.
.column-4-layout .left-column P h2 {
display: inline-block;
padding: 0;
margin: 0;
color: yellow;
}
.column-4-layout .left-column P {
width: 470px;
margin-top: 50px;
color: red;
}
.column-4-layout .left-column P img {
width: 227px;
padding-right: 15px;
padding-bottom: 5px;
float: left;
}
.column-4-layout .right-column P {
width: 470px;
margin-top: 50px;
}
.column-4-layout .right-column P img {
width: 227px;
padding-right: 15px;
padding-bottom: 5px;
float: left;
}
<div class="column-4-layout">
<div class="left-column">
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id erat ultrices metus ornare elementum vel vitae odio. Vivamus feugiat eros sit amet aliquet efficitur. Vestibulum massa ligula, ullamcorper vitae malesuada et, viverra nec metus. Integer
at felis non odio interdum finibus sed ac purus. Vestibulum gravida lorem a augue faucibus, eget auctor lorem porta. Fusce vitae nibh laoreet, ultrices orci cursus, suscipit diam. Praesent vestibulum tellus ornare, gravida diam vel, sodales elit.
Sed lacus augue, pulvinar vel ornare vel, molestie nec diam. Sed vestibulum sed odio in vulputate. Suspendisse ut lacus sit amet dui porttitor convallis. Vestibulum mattis laoreet nulla luctus facilisis. Nunc efficitur ligula sagittis lectus commodo
molestie. Maecenas fringilla ipsum at est venenatis suscipit. Suspendisse quis pellentesque ligula. Sed quis ante nulla.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam euismod bibendum eleifend. Aliquam pulvinar rhoncus elit et ullamcorper. Proin vel nisl ligula. Quisque pellentesque, ipsum sollicitudin finibus faucibus, massa orci luctus purus, sed interdum odio leo ut dui. Phasellus a mi non tellus faucibus
mattis. Morbi iaculis ac lorem lobortis elementum. Nunc sagittis libero et orci consequat iaculis. Duis magna arcu, consequat vel mollis non, elementum nec lacus. Etiam commodo in arcu sit amet ultrices. Sed massa magna, luctus in lacinia vel, congue
a elit. Integer lacinia ornare ligula, ut ultricies metus elementum ut. Quisque placerat arcu id metus congue egestas. Curabitur mollis sem vel tortor convallis consectetur.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Curabitur rhoncus tellus a pulvinar consequat. In sagittis gravida erat, id finibus est molestie non. Mauris dignissim pretium elementum. Sed a arcu vel lectus facilisis viverra. Vestibulum faucibus risus nec lorem scelerisque eleifend. Donec et
consectetur tellus. Vestibulum in dictum ligula, ut commodo quam. In in justo a nisl pretium faucibus non sit amet lacus. Morbi pharetra vestibulum tristique. Sed sem lorem, egestas a pharetra quis, aliquam quis sem. Integer fermentum est nisl,
eu finibus tellus gravida nec. Etiam egestas tincidunt justo, et auctor tellus interdum sed. Sed in orci id metus sollicitudin accumsan at ut neque. Ut lacinia ultrices justo, ac dictum sapien luctus non. Etiam blandit congue accumsan.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam nulla ante, eleifend at lectus id, ultrices vehicula lorem. Pellentesque vel tempor massa. Praesent pulvinar sem ultricies nibh tincidunt tincidunt. Vestibulum sapien mauris, porta in semper sit amet, fermentum vel elit. Nullam sapien magna,
faucibus eu elit eu, congue suscipit est. Sed vitae gravida turpis, pretium finibus ex. Suspendisse lacinia condimentum erat, id condimentum erat molestie et. In rutrum luctus condimentum. Sed lacinia congue neque eget suscipit. Integer sed massa
luctus, efficitur ante et, sagittis est. Cras efficitur neque sed libero euismod cursus. Phasellus ac tincidunt metus. Fusce et turpis nisl. Ut in mattis ipsum. Donec ornare pharetra neque.</P>
</div>
<div class="right-column">
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id erat ultrices metus ornare elementum vel vitae odio. Vivamus feugiat eros sit amet aliquet efficitur. Vestibulum massa ligula, ullamcorper vitae malesuada et, viverra nec metus. Integer
at felis non odio interdum finibus sed ac purus. Vestibulum gravida lorem a augue faucibus, eget auctor lorem porta. Fusce vitae nibh laoreet, ultrices orci cursus, suscipit diam. Praesent vestibulum tellus ornare, gravida diam vel, sodales elit.
Sed lacus augue, pulvinar vel ornare vel, molestie nec diam. Sed vestibulum sed odio in vulputate. Suspendisse ut lacus sit amet dui porttitor convallis. Vestibulum mattis laoreet nulla luctus facilisis. Nunc efficitur ligula sagittis lectus commodo
molestie. Maecenas fringilla ipsum at est venenatis suscipit. Suspendisse quis pellentesque ligula. Sed quis ante nulla.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam euismod bibendum eleifend. Aliquam pulvinar rhoncus elit et ullamcorper. Proin vel nisl ligula. Quisque pellentesque, ipsum sollicitudin finibus faucibus, massa orci luctus purus, sed interdum odio leo ut dui. Phasellus a mi non tellus faucibus
mattis. Morbi iaculis ac lorem lobortis elementum. Nunc sagittis libero et orci consequat iaculis. Duis magna arcu, consequat vel mollis non, elementum nec lacus. Etiam commodo in arcu sit amet ultrices. Sed massa magna, luctus in lacinia vel, congue
a elit. Integer lacinia ornare ligula, ut ultricies metus elementum ut. Quisque placerat arcu id metus congue egestas. Curabitur mollis sem vel tortor convallis consectetur.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Curabitur rhoncus tellus a pulvinar consequat. In sagittis gravida erat, id finibus est molestie non. Mauris dignissim pretium elementum. Sed a arcu vel lectus facilisis viverra. Vestibulum faucibus risus nec lorem scelerisque eleifend. Donec et
consectetur tellus. Vestibulum in dictum ligula, ut commodo quam. In in justo a nisl pretium faucibus non sit amet lacus. Morbi pharetra vestibulum tristique. Sed sem lorem, egestas a pharetra quis, aliquam quis sem. Integer fermentum est nisl,
eu finibus tellus gravida nec. Etiam egestas tincidunt justo, et auctor tellus interdum sed. Sed in orci id metus sollicitudin accumsan at ut neque. Ut lacinia ultrices justo, ac dictum sapien luctus non. Etiam blandit congue accumsan.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam nulla ante, eleifend at lectus id, ultrices vehicula lorem. Pellentesque vel tempor massa. Praesent pulvinar sem ultricies nibh tincidunt tincidunt. Vestibulum sapien mauris, porta in semper sit amet, fermentum vel elit. Nullam sapien magna,
faucibus eu elit eu, congue suscipit est. Sed vitae gravida turpis, pretium finibus ex. Suspendisse lacinia condimentum erat, id condimentum erat molestie et. In rutrum luctus condimentum. Sed lacinia congue neque eget suscipit. Integer sed massa
luctus, efficitur ante et, sagittis est. Cras efficitur neque sed libero euismod cursus. Phasellus ac tincidunt metus. Fusce et turpis nisl. Ut in mattis ipsum. Donec ornare pharetra neque.</P>
</div>
p elements can contain phrasing content only.
If you look at the console log for this Snippet, you'll see "This is a" only:
console.log(document.querySelector('p').innerHTML);
<p>This is a <h2>test</h2>.</p>
If you read this article https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p you see that an h2 tag isn't allowed inside a p tag.
In fact if you inspect the HTML with a browser you can see that the p tag is closed just before the h2 element.
Try changing the paragraphs with DIVs
You're misusing the header tags. Actually, according to the W3C, the P element can only contain other elements as listed here: Phrasing Elements.
This is something that search engines (especially Google) frown upon. It wouldn't be the most blatant black hat technique, but the feeling is that nothing should be subversive on your page, e.g. a header should be a header, not part of your paragraph.
I wasn't quite sure what to call this question so hopefully that title is correct.
I'm going to be working on this website for a new client and they said that they wanted something similar to what this website is doing (http://www.buzzardfilm.com).
You'll see right on the index page if you scroll down it has this kind of 'smooth animation' and the new block starts to slide up into the background image?
This is what I'm talking about:
http://gyazo.com/8cafbab233930bd478723b48c5912263
My question is, how is this usually achieved? Is this just an image with some text on top or is this maybe a background image? What kind of rules would I need in place to get this?
You can do it with css see this example
body{
margin:0;
padding:0;
}
.one{
background-image:url('https://placekitten.com/g/1200/800');
height:500px;
background-size:cover;
background-position:static;
position: static;
background-position: inherit;
background-attachment: fixed;
}
.two{
height:500px;
}
<div class="one"></div>
<div class="two">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula sem mi, at faucibus ex consequat eu. Suspendisse bibendum nulla id nisl pulvinar, a lacinia nisi imperdiet. Nam eget mi congue, lacinia augue dictum, ullamcorper ex. Donec condimentum dolor nisl, eu tincidunt lacus congue et. Duis eu libero id nunc facilisis viverra a id velit. Suspendisse potenti. Fusce in nisi eu est consectetur fringilla vitae non nunc. Cras neque elit, pharetra at ipsum at, semper laoreet eros. Nunc eu dolor blandit, varius felis vel, congue turpis. Vestibulum ullamcorper leo odio, in mattis ante pretium nec. Ut sagittis luctus lacinia. Donec vehicula ullamcorper lectus, eget pretium nisi laoreet id. Cras id laoreet nunc, ac molestie lectus. Phasellus suscipit, risus eget fringilla posuere, urna eros venenatis ante, vel finibus lorem arcu a massa. Etiam at ante massa.
</p>
<p>
Ut tempor fermentum dui sed placerat. In commodo velit at augue luctus bibendum. Aliquam ullamcorper tincidunt posuere. Sed congue sagittis est ac viverra. Cras eget lobortis leo. Donec rutrum elit purus, et sollicitudin lacus pulvinar eu. Maecenas sit amet metus nisi. Proin porta diam et rhoncus mollis. Quisque arcu leo, sagittis a iaculis gravida, pulvinar ac risus. Etiam lacinia urna nunc, eu tincidunt massa finibus id. Aliquam posuere, est at mollis rhoncus, libero neque varius dui, vel facilisis odio dolor non ante. Nullam tempor ligula non pellentesque aliquet. Donec rutrum est ac nisi tempus dapibus. Sed vel est eget nisi bibendum dapibus. In consectetur leo volutpat, pharetra dui in, consequat magna.
</p>
<p>
Ut luctus vel dolor vel laoreet. Nullam sit amet eleifend dui. Suspendisse potenti. Fusce eleifend, erat sit amet rutrum convallis, diam purus accumsan neque, vel dignissim ante erat ut neque. Cras sed nunc vitae libero fermentum porta. Pellentesque sodales odio et mi pharetra, non hendrerit eros auctor. Morbi quis erat et enim tempus tempus eget mattis nibh.
<p>
Morbi sed risus egestas, facilisis lectus sit amet, ullamcorper lectus. Duis pellentesque dictum lobortis. Morbi ullamcorper et ipsum id vehicula. In consequat mi eu faucibus hendrerit. Cras finibus dapibus elit, vel venenatis mauris convallis eleifend. Aliquam pellentesque ante in sapien bibendum suscipit. Praesent et felis eu tellus mollis ullamcorper non vitae quam.
</p>
<p>
Quisque dui felis, placerat quis blandit in, rutrum vel neque. Maecenas molestie semper rhoncus. Sed vel aliquam odio. Aenean vulputate nisi id vehicula ultrices. Nam tellus sem, faucibus sed libero ut, vehicula auctor eros. Nulla aliquam mauris sit amet lacinia vehicula. Quisque ac sem sed ante accumsan auctor. Suspendisse vitae dolor felis. Nullam in libero vel velit mollis molestie venenatis et libero. Cras vulputate, ante et tempus interdum, dui augue dapibus felis, sit amet porta tortor libero ut purus. Cras augue dolor, efficitur commodo tristique ut, gravida id augue. Praesent interdum nisl eu ultrices euismod. Aenean vulputate accumsan sem, eget eleifend elit eleifend auctor. Mauris egestas rhoncus quam, egestas accumsan neque ullamcorper a.
</p>
<p>
Praesent pharetra risus felis, non mollis lectus lobortis non. Praesent porttitor ultrices auctor. Suspendisse maximus est a sem mollis, ut vestibulum lacus scelerisque. Phasellus pretium non tortor quis malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin metus sapien, molestie at sollicitudin vitae, pulvinar at quam. Aliquam ultricies nisl ligula, sit amet finibus metus finibus sed. Etiam porta ultricies arcu tempus dignissim. Cras lobortis, ante non tristique vulputate, augue dui convallis tellus, eu feugiat justo nisi eget elit. Integer iaculis egestas lectus, vitae venenatis est imperdiet in.
<p>
Praesent mollis tempus imperdiet. Nunc iaculis enim lacus, sit amet eleifend velit porta vel. Etiam condimentum gravida dui vulputate dignissim. Nam ut dui vitae massa scelerisque pellentesque. Mauris vitae venenatis enim. Sed sagittis mi eget lacus congue, a bibendum nibh elementum. Aenean posuere pharetra purus, sit amet aliquet dui tempor nec. Fusce ut orci pulvinar, sollicitudin sapien eu, cursus augue.
</p>
<p>
Sed lacinia rutrum sem et convallis. Integer vel pretium mauris, eget porttitor nibh. Duis sed tellus massa. Fusce massa felis, laoreet vitae velit id, efficitur ornare nunc. Nam nec lectus non risus luctus vehicula et nec erat. Pellentesque tempor tincidunt odio pretium sagittis. Nullam id vestibulum nisl. Sed a odio leo. Proin in mi nisl. Aliquam ut bibendum arcu. Aliquam porta molestie nisl quis fringilla. In iaculis, ex in consectetur commodo, ante nulla rutrum orci, ac varius nibh nisi at ante.
</p>
<p>
Nullam ultricies sit amet massa nec placerat. Sed id sapien mi. Fusce maximus et libero quis fermentum. Nulla mattis ornare orci quis tempus. Integer id enim in ligula tincidunt lacinia. Nullam elit nulla, facilisis ultricies purus vitae, interdum malesuada massa. Nam tincidunt lacus erat. Fusce sagittis porttitor libero. Proin mi nibh, posuere sit amet dolor non, porttitor vulputate sapien. Sed faucibus a mi in molestie. Curabitur a bibendum neque.
</p>
<p>
Donec pretium mollis dui. Morbi quis tincidunt enim. Nunc venenatis leo a nunc lacinia, ac sodales odio lacinia. Fusce eget cursus massa. Curabitur ac luctus nulla, eu dignissim augue. Ut scelerisque ligula ut nulla tempus consectetur. Mauris eget odio velit. Donec faucibus imperdiet volutpat. Praesent ante odio, congue a quam ut, facilisis fringilla velit. Donec eget est risus. Integer lobortis neque sit amet massa vulputate, ac ultricies velit dignissim. Vivamus lectus turpis, varius at augue in, facilisis finibus justo. Pellentesque laoreet libero sed sapien maximus, sed feugiat leo gravida. Pellentesque at velit a purus condimentum hendrerit faucibus non leo.
</p>
</div>
To keep a background image in place you will want to use the 'background-attachment' property like so:
selector {
background-image: url(image.extension);
background-attachment: fixed;
}
You can place any content on top of the background image and as you scroll, the background will remain fixed in place while the content moves.