I am trying to build a responsive Website. With quite an effort (and help from the community) I managed to mount a fixed background image. But now I am encountering two issues:
With small screens, the content of the elements in front of the image is cut off at the bottom, scrolling is not possible.
The footer is overlapping the other elements.
html/ css:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Homepage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html {
box-sizing: border-box;
font-size: 62.5%;
}
Body {
font-size: 1.6px;
font-size: 1.6rem;
line-height: 1.5;
font-family: "Courier New", Courier, sans-serif;
color: black;
display: flex;
flex-direction:column;
}
#backgroundImage {
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
#backgroundImage::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url('ImageLake.bmp');
background-size: cover;
opacity: 0.1;
}
#Page {
position: fixed;
top: 0;
width: 95%;
background-color: rgba(0, 0, 0, 0.2);
margin: 0.3em auto;
border: 0.3em solid #00ccff;
border-radius: 5em;
}
#Logo {
font-size: 3.5rem;
font-weight: 650;
text-transform: uppercase;
text-align: center;
margin: 0 auto;
padding: 0.5em;
letter-spacing: 0.2em;
}
#Center {
height: auto;
}
footer {
position: absolute;
bottom: 0;
}
/* -- STYLES FOR NAVIGATION-MENU -- */
ul#navMain {
list-style-type: none;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
}
li.menu-eintrag a:hover {
font-weight: bold;
}
.terminvereinbarung a:link,
.terminvereinbarung a:visited,
.terminvereinbarung a:focus,
.terminvereinbarung a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,204,255,0.4);
border-radius: 5em;
white-space: nowrap;
}
.terminvereinbarung a:hover {
border: 0.5em dotted rgba(50,204,255,1);
border-radius: 5em;
}
.menu-eintrag a:link,
.menu-eintrag a:visited,
.menu-eintrag a:focus,
.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,0,0,0);
border-radius: 5em;
white-space: nowrap;
}
.menu-eintrag a:hover {
border: 0.5em solid rgba(255,255,255,0.4);
border-radius: 5em;
}
#media screen and (min-width: 40em) {
#nav {
display: table;
margin: 0 auto;
}
#nav li {
font-size: 80%;
width: auto;
display: inline;
white-space: nowrap;
}
#Center {
display: inline-block;
padding: 0 1em;
}
#begruessung {
text-align: center;
}
#ColumnRight {
padding: 1em;
}
}
#media screen and (min-width: 64em){
header {
padding-top: 0em;
}
#Content {
display: flex;
}
#nav,
#ColumnRight {
width: 20%;
float: left;
}
#nav li {
display: block;
font-size: 100%;
width: 100%;
float: none;
padding: 1em;
}
#Center {
float: left;
padding: 0em 3em;
width: 50%;
}
#begruessung {
text-align: left;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
}
#ColumnRight a:link,
#ColumnRight a:visited,
#ColumnRight a:hover,
#ColumnRight a:focus,
#ColumnRight a:active {
}
}
</style>
</head>
<body>
<div id="backgroundImage">
<div id="Page">
<header>
<div id="Logo">
Header of the Page
</div>
</header>
<div id ="Content">
<nav id="nav">
<ul id="navMain">
<li class="terminvereinbarung">Alpha
<li class="menu-eintrag">Beta
<li class="menu-eintrag">Gamma
<li class="menu-eintrag">Delta
<li class="menu-eintrag">Epsilon
</ul>
</nav>
<div id="Center">
<h1 id="begruessung">
Welcome at our place! </h1>
<h2>
We are opening soon.
</h2>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
</div>
<aside id="ColumnRight">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis gestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
</aside>
</div>
</div>
</div>
<footer>
<ul id="footerList" >
<li class="footer-menu-eintrag">© 2021 Mister Me
<li class="footer-menu-eintrag">Contact
<li class="footer-menu-eintrag">Alpha
<li class="footer-menu-eintrag">Beta
</ul>
</footer>
</body>
</html>
How can I make the content of the elements in the foreground scrollable?
How can I move the footer to the bottom without it overlapping the other elements?
to avoid cut off of content at the bottom change #page position fixed to relative.
#page{
position: relative;
}
then a scrollbar will appear.
2. to avoid overlapping of footer use:
footer{
position:relative;
bottom:0;
}
and to be honest your styling practice is not good. You should use class to style elements instead of ids.
There were actually quite a few tweaks that I think should be made to get you what you wanted.
Firstly, the background. I would go with position: fixed; rather than position: absolute; to make sure the background is completely independent of the content.
Secondly, the footer does not need the position attribute set, rather you could make it part of the flexbox layout, setting the flex attribute on your #backgroundImage element (and removing the position attribute from backgroundImage).
Lastly, make sure the html and body tags have a full height set in the CSS so everything will scale on larger screens.
You end up with something like:
html {
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
}
body {
height: 100%;
font-size: 1.6px;
font-size: 1.6rem;
line-height: 1.5;
font-family: "Courier New", Courier, sans-serif;
color: black;
display: flex;
flex-direction: column;
}
#backgroundImage {
height: auto;
align-items: center;
justify-content: center;
flex: 1 0 auto;
}
#backgroundImage::before {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg');
background-size: cover;
opacity: 0.1;
}
#Page {
width: 95%;
background-color: rgba(0, 0, 0, 0.2);
margin: 0.3em auto;
border: 0.3em solid #00ccff;
border-radius: 5em;
}
#Logo {
font-size: 3.5rem;
font-weight: 650;
text-transform: uppercase;
text-align: center;
margin: 0 auto;
padding: 0.5em;
letter-spacing: 0.2em;
}
#Center {
height: auto;
}
footer {
flex-shrink: 0;
}
/* -- STYLES FOR NAVIGATION-MENU -- */
ul#navMain {
list-style-type: none;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
}
li.menu-eintrag a:hover {
font-weight: bold;
}
.terminvereinbarung a:link,
.terminvereinbarung a:visited,
.terminvereinbarung a:focus,
.terminvereinbarung a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,204,255,0.4);
border-radius: 5em;
white-space: nowrap;
}
.terminvereinbarung a:hover {
border: 0.5em dotted rgba(50,204,255,1);
border-radius: 5em;
}
.menu-eintrag a:link,
.menu-eintrag a:visited,
.menu-eintrag a:focus,
.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,0,0,0);
border-radius: 5em;
white-space: nowrap;
}
.menu-eintrag a:hover {
border: 0.5em solid rgba(255,255,255,0.4);
border-radius: 5em;
}
#media screen and (min-width: 40em) {
#nav {
display: table;
margin: 0 auto;
}
#nav li {
font-size: 80%;
width: auto;
display: inline;
white-space: nowrap;
}
#Center {
display: inline-block;
padding: 0 1em;
}
#begruessung {
text-align: center;
}
#ColumnRight {
padding: 1em;
}
}
#media screen and (min-width: 64em){
header {
padding-top: 0em;
}
#Content {
display: flex;
}
#nav,
#ColumnRight {
width: 20%;
float: left;
}
#nav li {
display: block;
font-size: 100%;
width: 100%;
float: none;
padding: 1em;
}
#Center {
float: left;
padding: 0em 3em;
width: 50%;
}
#begruessung {
text-align: left;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
}
#ColumnRight a:link,
#ColumnRight a:visited,
#ColumnRight a:hover,
#ColumnRight a:focus,
#ColumnRight a:active {
}
}
<div id="backgroundImage">
<div id="Page">
<header>
<div id="Logo">
Header of the Page
</div>
</header>
<div id ="Content">
<nav id="nav">
<ul id="navMain">
<li class="terminvereinbarung">Alpha
<li class="menu-eintrag">Beta
<li class="menu-eintrag">Gamma
<li class="menu-eintrag">Delta
<li class="menu-eintrag">Epsilon
</ul>
</nav>
<div id="Center">
<h1 id="begruessung">
Welcome at our place! </h1>
<h2>
We are opening soon.
</h2>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
</div>
<aside id="ColumnRight">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis gestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
</aside>
</div>
</div>
</div>
<footer>
<ul id="footerList" >
<li class="footer-menu-eintrag">© 2021 Mister Me
<li class="footer-menu-eintrag">Contact
<li class="footer-menu-eintrag">Alpha
<li class="footer-menu-eintrag">Beta
</ul>
</footer>
Related
I'm struggling with this CSS card, I want it over the background image, but I don't know how, I already tried positioning
I accidentally placed the background image in the header, but I changed it to a div but it still doesn't work
Can someone help?
* {
margin: 0;
padding: 0;
font-family: 'Century Gothic';
}
img {
width: 100%;
}
.header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/foto_beginpagina.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: white;
padding: 5px 20px;
border: 1px solid white;
transition: 0.6s ease;
}
ul li.huidig a {
background-color: white;
color: black;
}
ul li a:hover {
background-color: white;
color: black;
}
.head {
margin-right: 25px;
}
.titel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.titel h1 {
color: white;
font-size: 70px;
}
div.ondertitel h3 {
color: white;
padding-top: 20px;
max-width: 600px;
left: 50%;
}
.card {
position: absolute;
margin: 30px;
padding: 10px;
background: rgb(139, 119, 167);
background: radial-gradient(circle, rgba(139, 119, 167, 1) 0%, rgba(139, 122, 140, 1) 100%);
min-width: 400px;
max-width: 400px;
border: 2px solid black;
}
.card-title {
padding: 30px;
}
.card-image img {
border-radius: 20%;
}
<html>
<body>
<div class="header">
<div class="head">
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li class="huidig">Randapparatuur</li>
<li>Opbouw van de computer</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/randapparatuur.jpg" alt="Randapparatuur">
</div>
<h1 class="card-title">Randapparatuur</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed
leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam.
Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc
eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</body>
</html>
ignore:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
Class .card having position: absolute which cause the issue.
Added .main-content div with background image cover.
Example: https://codepen.io/cursorrux/pen/LYRjQqG
May be this helps you:
* {
margin: 0;
padding: 0;
font-family: 'Century Gothic';
}
img {
width: 100%;
}
.header {
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('images/foto_beginpagina.jpg');
height: 50vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li {
display: inline-flex;
}
ul li a {
text-decoration: none;
color: white;
padding: 5px 20px;
border: 1px solid white;
transition: 0.6s ease;
}
ul li.huidig a {
background-color: white;
color: black;
}
ul li a:hover {
background-color: white;
color: black;
}
.head {
margin-right: 25px;
}
.titel{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.titel h1{
color: white;
font-size: 70px;
}
div.ondertitel h3{
color: white;
padding-top: 20px;
max-width: 600px;
left: 50%;
}
/* div having background image */
.main-content {
background-image: url('https://murraysinteriors.com.au/wp-content/uploads/2018/09/dummy-banner.jpg');
padding: 5px;
background-size: cover;
}
.card{
margin: 30px;
padding: 10px;
background: rgb(139,119,167);
background: radial-gradient(circle, rgba(139,119,167,1) 0%, rgba(139,122,140,1) 100%);
min-width: 400px;
max-width: 400px;
border: 2px solid black;
}
.card-title {
padding: 30px;
}
.card-image img {
border-radius: 20%;
}
<div class="header">
<div class="head">
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li class="huidig">Randapparatuur</li>
<li>Opbouw van de computer</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="card">
<div class="card-image">
<img src="https://pixselo.com/wp-content/uploads/2018/03/dummy-placeholder-image-400x400.jpg" alt="Randapparatuur">
</div>
<h1 class="card-title">Randapparatuur</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
I am creating a footer for my site and I wanted the footer to be fixed at the bottom. But when I scroll down, this won't go along with the document. It stays at the bottom of the page always. I have initialized the footer to position: absolute, and also added bottom: 0 of my CSS code. But it still stuck in the middle of the page. How can I resolve this everyone?
.footer {
background-color: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: white;
.upper-footer,
.lower-footer {
padding: 10px 0 33px 0;
margin: 0;
width: 100%;
}
.upper-footer {
background: #252525;
.upper-footer-links {
float: left;
position: relative;
margin: 3px -3px;
a {
text-decoration: none;
color: #ffffff;
}
.span {
position: inherit;
right: -1px;
color: #7b7b7b;
}
}
}
.lower-footer {
background: #3c3c3c;
height: 74px;
.footer-information {
float: left;
width: 458px;
p {
line-height: 23px;
margin: 15px 0;
color: #9b9b9b;
}
}
.footer-sns-links {
float: right;
padding: 28px 0;
ul {
list-style: none;
display: inline;
li {
display: inline-block;
border: 1px solid #686868;
padding: 8px;
&:hover {
background-color: #373737;
}
}
}
}
}
}
<div class="footer">
<div class="upper-footer">
<div class="wrapper">
<div class="upper-footer-links">
개인정보처리방침 <span>|</span>
이메일무단수집거부 <span>|</span>
사이트맵 <span>|</span>
찾아오시는 길
</div>
</div>
</div>
<div class="lower-footer">
<div class="wrapper">
<div class="footer-information">
<p class="footer-info">02841 서울특별시 성북구 안암로 145 크림슨창업지원단 | TEL : 02.3290.4810 | E-MAIL : startup#korea.ac.kr<br>COPYRIGHT(C)2018 KOREA UNIVERSITY. ALL RIGHTS RESERVED.</p>
</div>
<div class="footer-sns-links">
<ul>
<li><img href="#" src="images/icon/icon_ss_02.png"></li>
<li><img href="#" src="images/icon/icon_ss_03.png"></li>
<li><img href="#" src="images/icon/icon_ss_01.png"></li>
<li><img href="#" src="images/icon/icon_ss_04.png"></li>
<li><img href="#" src="images/icon/icon_ss_05.png"></li>
</ul>
</div>
</div>
</div>
</div>
By the way, my footer has two different footers, the upper footer and the lower footer and both footers are inside a div called ".footer"
You need to add a position: relative; on a parent div or to the body tag wich I did. This will then position it to the bottom of the page becuase the body tag spans the entire document.
body {
position: relative;
}
.lorem {
line-height: 100px;
}
.footer {
background-color: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: white;
.upper-footer, .lower-footer {
padding: 10px 0 33px 0;
margin: 0;
width: 100%;
}
.upper-footer {
background: #252525;
.upper-footer-links {
float: left;
position: relative;
margin: 3px -3px;
a {
text-decoration: none;
color: #ffffff;
}
.span {
position: inherit;
right: -1px;
color: #7b7b7b;
}
}
}
.lower-footer {
background: #3c3c3c;
height: 74px;
.footer-information {
float: left;
width: 458px;
p {
line-height: 23px;
margin: 15px 0;
color: #9b9b9b;
}
}
.footer-sns-links {
float: right;
padding: 28px 0;
ul {
list-style: none;
display: inline;
li {
display: inline-block;
border: 1px solid #686868;
padding: 8px;
&:hover {
background-color: #373737;
}
}
}
}
}
}
<body>
<div class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Risus nec feugiat in fermentum posuere urna nec tincidunt. Eleifend mi in nulla posuere sollicitudin. Netus et malesuada fames ac turpis egestas maecenas pharetra convallis. Eget nunc scelerisque viverra mauris. Pretium aenean pharetra magna ac placerat vestibulum. Amet justo donec enim diam vulputate ut pharetra. Nisl tincidunt eget nullam non nisi est sit amet. Nunc lobortis mattis aliquam faucibus purus. Quisque egestas diam in arcu cursus euismod. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Vestibulum mattis ullamcorper velit sed.
Diam vel quam elementum pulvinar etiam. In metus vulputate eu scelerisque felis imperdiet. Mi eget mauris pharetra et ultrices. Pretium lectus quam id leo in. Diam phasellus vestibulum lorem sed risus ultricies tristique. Maecenas volutpat blandit aliquam etiam erat. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Arcu cursus vitae congue mauris rhoncus. Malesuada nunc vel risus commodo. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Dignissim convallis aenean et tortor at. Faucibus in ornare quam viverra orci sagittis.
Vitae congue eu consequat ac. Id diam maecenas ultricies mi. Diam sollicitudin tempor id eu nisl nunc. In egestas erat imperdiet sed. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Dis parturient montes nascetur ridiculus mus mauris vitae. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. A iaculis at erat pellentesque adipiscing commodo elit at. Egestas fringilla phasellus faucibus scelerisque eleifend. Quam adipiscing vitae proin sagittis. Urna porttitor rhoncus dolor purus. Quis blandit turpis cursus in hac habitasse platea. Curabitur gravida arcu ac tortor dignissim convallis aenean. Iaculis nunc sed augue lacus viverra.
Quis eleifend quam adipiscing vitae proin sagittis. Nibh tortor id aliquet lectus proin nibh. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Aliquam faucibus purus in massa tempor nec feugiat. Magna ac placerat vestibulum lectus. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Viverra maecenas accumsan lacus vel facilisis volutpat est. Ultrices vitae auctor eu augue ut lectus arcu bibendum. Sollicitudin tempor id eu nisl. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Id diam vel quam elementum pulvinar etiam non quam. Ultrices eros in cursus turpis. Pretium lectus quam id leo. Malesuada fames ac turpis egestas maecenas. Odio facilisis mauris sit amet massa vitae tortor. Amet porttitor eget dolor morbi non arcu risus.</div>
<div class="footer">
<div class="upper-footer">
<div class="wrapper">
<div class="upper-footer-links">
개인정보처리방침 <span>|</span>
이메일무단수집거부 <span>|</span>
사이트맵 <span>|</span>
찾아오시는 길
</div>
</div>
</div>
<div class="lower-footer">
<div class="wrapper">
<div class="footer-information">
<p class="footer-info">02841 서울특별시 성북구 안암로 145 크림슨창업지원단 | TEL : 02.3290.4810 | E-MAIL : startup#korea.ac.kr<br>COPYRIGHT(C)2018 KOREA UNIVERSITY. ALL RIGHTS RESERVED.</p>
</div>
<div class="footer-sns-links">
<ul>
<li><img href="#" src="images/icon/icon_ss_02.png"></li>
<li><img href="#" src="images/icon/icon_ss_03.png"></li>
<li><img href="#" src="images/icon/icon_ss_01.png"></li>
<li><img href="#" src="images/icon/icon_ss_04.png"></li>
<li><img href="#" src="images/icon/icon_ss_05.png"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
I think you set the footer property
position : fixed
left: 0;
bottom: 0;
width: 100%;
and maybe your problem will be solved.
If you want full-width footer at bottom of page try this
{
position : absolute
left: 0;
right : 0;
bottom: 0;
}
And you want the full-width footer to slide along the page
{
position : fixed
left: 0;
right : 0;
bottom: 0;
}
Happy coding
This is a preview of the website I'm currently working on: http://jsfiddle.net/X4Yc8/
It has a fixed (full height) sidebar with a scrolling main content section.
When the width of the window is reduced (see screenshot below) the main content overlaps the sidebar. How do I ensure that this doesn't happen?
http://imgur.com/sGY5KeN
Ideally I would like the main content to appear below the sidebar when the screen is a certain width e.g. when viewed on a mobile-sized screen
Thanks for your help in advance!
My code is:
CSS
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
html, body {
height:100%;
margin: 0px;
padding: 0px;
color: #FFF;
background-color: #06C;
}
#sidebar {
width: 250px;
height: 100%;
left: 0;
float:left;
background-color: #006;
padding-top: 25px;
position: fixed;
clear: right;
}
section#settings {
width:auto;
float:left;
margin-left:250px;
padding-top: 60px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
position: absolute;
}
#sidebar #menubar li, #sidebar #menubar li:link, #sidebar #menubar li:visited {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
}
#sidebar #menubar li a, #sidebar #menubar li a:link, #sidebar #menubar li a:visited {
font-family: 'Open Sans', sans-serif; font-size: 80%;
color: #FFF;
text-decoration: none;
}
#logo {
height: 90px;
width: 200px;
margin-top: 0px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}
#sidebar #menubar li:hover {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #06C;
}
#sidebar #menubar li a:hover {
font-family: 'Open Sans', sans-serif; font-size: 80%;
color: #FFF;
text-decoration: none;
}
#sidebar #menubar li#active{
font-family: 'Open Sans', sans-serif;
color: #FFF;
text-decoration: none;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #0066CC;
}
#sidebar #menubar {
padding: 0px;
margin: 0px;
list-style-type: none;
}
h1 {
font-family: 'Open Sans', sans-serif; font-size: 150%;
color: #FFF;
text-decoration: none;
}
h2 {
font-family: 'Open Sans', sans-serif; font-size: 150%;
color: #FFF;
text-decoration: none;
}
h3 {
font-family: 'Open Sans', sans-serif; font-size: 125%;
color: #FFF;
text-decoration: none;
}
p {
font-family: 'Open Sans', sans-serif; font-size: 100%;
text-decoration: none;
color: #FFF;
line-height: 125%;
}
HTML
<body>
<section id="sidebar">
<div id="logo"><img src="LOGO" width="200" height="89" alt="LOGO" /></div>
<ul id="menubar">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</section>
<section id="settings">
<h1>Heading 1</h1>
<p>Sed ultricies ut massa a vehicula. Nullam consequat lectus ut mauris venenatis, quis tincidunt urna malesuada. Donec pellentesque, lectus a eleifend tempus, dui ante porta tellus, nec lacinia tellus quam sed sem. Integer lorem nibh, pulvinar nec est ac, consectetur tincidunt dolor. Etiam fermentum aliquam sapien, nec eleifend arcuus dui, et vehicula tellus viverra ut. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis semper tellus eget est faucibus, et euismod quam viverra. Sed dapibus felis a mi mattis, eu ultrices tortor ultricies. Nulla facilisi. Duis blandit leo sed volutpat condimentum. Nullam molestie dictum est, quis volutpat augue faucibus eu. Pellentesque turpis ante, hendrerit id felis sit amet, semper elementum erat. Maecenas vitae justo ullamcorper, ultrices felis at, volutpat erat. Proin diam enim, ultricies ut erat sed, eleifend sagittis dui. Pellentesque diam magna, mattis non nulla nec, varius commodo tortor.
</p><p>
Curabitur mollis nunc eu adipiscing interdum. Nunc nec eleifend enim. Morbi congue metus justo, nec facilisis mauris vulputate id. Sed id laoreet arcu. Aliquam sed nunc ligula. Vivamus bibendum dictum nisi, in placerat lacus convallis vitae. Quisque placerat orci non quam fringilla, ac dictum ligula imperdiet. Proin vel nibh tellus. Sed pellentesque feugiat augue sed convallis. Nunc lobortis sem odio, eget tempor urna suscipit at. Vivamus accumsan, enim id cursus elementum, quam velit cursus sapien, in semper nulla ligula nec mi. Proin pretium nunc vel leo ultricies placerat.
</p><p>
Integer sed leo auctor, lobortis dui ut, sodales nunc. Aliquam mi risus, rutrum sit amet ultrices faucibus, tincidunt eget sapien. Nam vel purus eu dolor rutrum dapibus. Phasellus euismod erat ac gravida adipiscing. Sed ligula quam, ultricies id mollis vitae, consequat eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam velit, feugiat in facilisis vitae, gravida ac enim. Nunc venenatis enim eu aliquam ultrices. Curabitur et lorem non leo pretium vulputate in at ligula. Quisque dignissim pretium erat non suscipit. Phasellus aliquet dolor at sapien egestas sollicitudin. Fusce eget est sed tellus mollis eleifend laoreet a lectus.
</p>
</section>
<div style='clear:both;'></div>
</body>
</html>
Use css #media to change styles based on window width, eg:
#media (max-width: 600px){
#sidebar{
position:relative;
height:auto;
width:100%;
float:left;
}
#menubar li{
display:inline;
}
http://jsfiddle.net/X4Yc8/2/
http://jsfiddle.net/X4Yc8/12/
for mobile friendliness
Try this and then add Jquery Swipe or touch to open the menu instead of always showing it
http://api.jquerymobile.com/swipe/
#media only screen and (max-width: 500px) {
this line of code targets screen sizes
I'm making a website that is using ajax calls to load a content pane. Just mocking this up quick with some data, (on my website the ajax is working fine, so no need for that here) I cannot get the content pane to scroll when it overflows - the entire page scrolls instead.
There are a TON of questions similar to this but every one I've come across they have not used the overflow tag and it fixed their problem. I've tried that but had no success.
I'm not sure how to get the div to recognize that it is being overflowed. The only way so far that I've managed to get it to scroll, is fixing the height, however I feel like that's poor to do, because depending on the screen size I want it to scroll like one would expect.
Here's the html:
<body>
<div id="content-container">
<img src="http://i.imgur.com/69BtzId.png" alt="logo">
<div class="navbar">
<nav>
<ul>
<li class="homeLink"> HOME
</li>
<li id="activePortfolioLink"> PORTFOLIO
</li>
<li class="aboutLink"> ABOUT
</li>
</ul>
</nav>
</div>
<div id="portfolioUnderline"></div>
</div>
<div id="left">
<ul class="verticalNavBar">
<li id="webDesignLink"> <a>WEB DESIGN</a>
</li>
<li id="uiLink"> <a>USER INTERACTION DESIGN</a>
</li>
<li id="graphicDesignLink"> <a>GRAPHIC/ TYPOGRAPHY DESIGN</a>
</li>
</ul>
</div>
<div id="verticalLine"></div>
<div id="rightContent">
<div class="portfolioImages">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut massa in tortor ullamcorper iaculis. Ut placerat imperdiet metus sed pellentesque. Proin iaculis erat eget fringilla lobortis. Pellentesque sit amet urna condimentum, tristique erat et, egestas ante. Duis eu pulvinar leo, fringilla posuere ligula. Nunc commodo tellus at lorem interdum feugiat. Cras varius consequat diam vitae scelerisque. Mauris nec ligula in mi accumsan scelerisque sed vel augue. Aliquam elementum, dolor id ornare feugiat, ante justo sollicitudin erat, ut gravida velit nibh vel velit. Fusce ultrices consectetur eros, ac tincidunt libero auctor ut. Quisque dapibus congue arcu sed imperdiet. Pellentesque lorem nisi, dictum sit amet libero in, cursus eleifend ante. Nunc vel euismod erat. Duis massa tellus, tincidunt in fermentum ut, sagittis vulputate lectus. Nunc ut iaculis nibh. In congue laoreet arcu commodo imperdiet. Nullam rutrum augue nec mauris rhoncus facilisis. Donec bibendum luctus magna. Vivamus tempor egestas turpis. Curabitur non porta lorem, nec elementum ante. Cras faucibus consequat augue, laoreet pretium lorem tincidunt sed. Vestibulum magna dolor, pulvinar vitae facilisis eget, posuere sit amet est. Suspendisse vel elit a neque laoreet faucibus eget et quam. Integer feugiat, tellus sit amet tempus dignissim, neque justo congue enim, quis commodo neque neque quis orci. Suspendisse scelerisque erat lobortis felis fermentum, in molestie nulla pharetra. Suspendisse lacinia ac orci et tincidunt. Duis lobortis at leo a viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam libero turpis, consequat non convallis at, eleifend non dolor.</br>
</br>
</br>
</br>
</br>Maecenas tincidunt lorem vitae fringilla consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet magna tincidunt, pellentesque arcu posuere, euismod lectus. Sed nec pellentesque diam, id varius quam. Praesent mattis sapien odio, in mattis dui tempus sit amet. Morbi pulvinar odio nec augue tempus varius. Sed porttitor consequat magna, sit amet lobortis mauris congue eleifend. Donec pretium elit vitae egestas rutrum. Sed sapien libero, vulputate eu lacinia sit amet, aliquam et elit. Aenean nisi mi, vulputate id nulla ut, vestibulum porta enim. Nunc quis tellus eleifend, adipiscing lorem in, congue justo. Vivamus ornare risus quis faucibus pretium. Vestibulum eu velit placerat, lacinia justo rutrum, sagittis nisi. Donec quis tincidunt justo, eu posuere mauris. Morbi eleifend, dui eget aliquet adipiscing, tellus risus hendrerit dolor, non aliquet magna sapien malesuada ante. Fusce lobortis commodo sem id tempus. Nulla eget vehicula mi, id volutpat erat. Proin sed enim egestas, rhoncus ipsum a, consectetur mi. Quisque est arcu, tempus a ligula eu, aliquam elementum quam. Sed tristique sit amet sapien eget ornare. In vitae adipiscing neque. Ut aliquet felis vitae porttitor vehicula. Morbi aliquam rhoncus lacinia. Vestibulum at viverra nisl. Donec rhoncus, dolor eu luctus egestas, magna leo consequat justo, ac venenatis odio ligula ac tortor. Nullam faucibus ante enim, vitae cursus mauris interdum ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc turpis massa, viverra vitae rutrum non, elementum sit amet orci.</p>
</div>
</div>
</body>
Here's the CSS:
* {
font-family:'Lato', sans-serif;
font-weight: lighter;
padding: 0;
margin: 0;
color:white;
}
body {
background: #111111;
height: 100%;
}
#content-container {
background-color: #111111;
height: 113px;
width: 100%;
}
#content-container img {
padding: 15px;
padding-top: 15px;
/*float: left; */
}
.navbar {
float: right;
background-color: #111111;
font-size: 25px;
padding-top: 45px;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 15px;
float:right;
}
nav ul li.homeLink a {
padding-left: 41px;
padding-right: 43px;
}
nav ul li.portfolioLink a {
padding-left: 9px;
padding-right: 9px;
padding-bottom: 1px;
}
nav ul li.aboutLink a {
padding-left: 37px;
padding-right: 37px;
}
#activePortfolioLink a {
padding-left: 9px;
padding-right: 9px;
background: #0033cc;
font-weight: normal;
}
#portfolioUnderline {
background-color: #0033cc;
width: 100%;
height: 10px;
margin-top: -12px;
}
#left {
float: left;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left: 300px padding-left:300px;
height:100%;
overflow:scroll;
}
.verticalNavBar {
float: right;
text-align: right;
margin-top: 20px;
color: white;
font-size: 15px;
}
.verticalNavBar li {
list-style: none;
color: white;
padding-top:10px;
padding-bottom: 10px;
}
.verticalNavBar li a {
text-decoration: none;
color: white;
padding: 10px;
}
#verticalLine {
background-color: #0033cc;
float:left;
width: 10px;
height: 905px;
}
#webDesignLink a {
background: #0033cc;
font-weight: normal;
}
.portfolioImages {
margin: 0 auto;
padding-top: 20px;
padding: 10;
margin-right: 10%;
margin-left: 10%;
margin-bottom: 20px;
overflow: auto;
}
img.individualImage {
margin-left: 450px;
}
.portfolioImages p {
font-size: 15px;
font-weight: lighter;
text-align: center;
}
Here's a jsfiddle of the code: http://jsfiddle.net/GGSSj/
Thanks for your time!
You can fix the height in relation to the screen size, but you have to fix the height /somehow/ to get it to scroll independently.
Here is a fiddle with absolute positioning of each segment: http://jsfiddle.net/GGSSj/3/
#content-container {
position:absolute; top:0; left:0; width:100%; height:113px;
}
#left {
position:absolute; top:123px; bottom:0; left:0; width:300px;
}
#rightContent {
position:absolute; top:123px; bottom:0; left:310px; right:0;
overflow-y:scroll;
}
You can fix the height in relation to the screen size, but you will have to fix the height the scrollable container (somehow with javascript for full screen height) to get it to scroll independently.
Give it a try : fiddle updated here
#rightContent {
height: 555px; /* fit height to your needs */
overflow: auto;
}
You need to set your top area and your left area to position:fixed;
http://jsfiddle.net/GGSSj/
#left {
position:fixed;
top: 113px;
left: 0;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left:300px;
padding-top:113px;
height:100%;
overflow: auto;
}
#content-container {
position: fixed;
background-color: #111111;
height: 113px;
width: 100%;
}
I'm trying to create a list of horizontal items so they can be used as navigation. But for some reason, setting display to inline is not working. I have also tried setting display to inline-block with no results. Any suggestions?
CSS
#page {
margin-top: 2em;
background: #00000
}
#pageborder {
background-color: white;
margin-left: 150px;
margin-right: 150px;
}
body, html {
padding: 0;
margin: 0;
background-color: #EEEEEE;
height: 100%;
font-family:"Monospace", Lucida Console;
font-size: 16;
}
h1 {
font-size: 28pt;
}
h2 {
margin:0;
padding-bottom: 7px;
font-size: 22;
}
p {
margin-bottom:0px;
padding-bottom:0px;
}
#header {
height:50px;
background-color: none;
border-color: #E7E7E7;
font-size: 28pt;
color: white;
padding-top: 20px;
padding-bottom: 5px;
margin-top: 108px;
}
#content {
position: left;
color: #5E5849;
background-color: white;
border: 2px solid;
border-color: #EEEEEE;
text-align: left;
padding: 1em 2em 4em;
margin-left: 20px;
margin-right: 322px;
}
#sidebar {
float:right;
margin-right: 180px;
position: absolute;
top:;
right:0;
text-align: left;
width: 250px;
border: 2px solid;
border-color: #EEEEEE;
padding-top: 8px;
padding-left: 40px;
}
#twitter {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
}
#youtube {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
}
#google {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
padding-bottom: 2px;
}
#justin {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
}
#Social {
border-bottom: solid thin grey;
padding-bottom: 7px;
font-size: 15px;
margin-top: 10px;
}
#profilepic {
margin-bottom: 10px;
}
* {
margin: 0;
}
.footer {
margin-left: 100px;
height: 2em;
color: white;
clear: both;
background-color: black;
}
th {
text-align: left;
padding-right: 2em;
}
#nav {
width:100%;
height:30px;
background-color:#999;
}
#nav ul {
display: inline-block;
list-style-type: none;
height:150px;
color: red;
padding-left: 150px;
}
#nav ul li {
display:inline;
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="template.css" />
<title>Template</title>
</head>
<body>
<div id="page">
<div id="pageborder">
<div id="header">
<img src="banner.png" width=600 height=74.18>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Links</li>
</ul>
</div>
<div id="sidebar">
<table>
<tr>
<div id="Social"><p><b>Social</b></p></div>
<p>
<div id="youtube">
<a href="http://www.youtube.com/ksheehan77" target="_blank">
<img src="youtube_icon.png" width=36 height=36>
</a>
</div>
<div id="twitter">
<a href="http://www.twitter.com/#!/ksheehan77" target="_blank">
<img src="Twitter.png" width=32 height=32>
</a>
</div>
<div id="justin">
<a href="http://www.justin.tv/ksheehan77" target="_blank">
<img src="justintv.png" width=32 height=32>
</a>
</div>
<div id="google">
<a rel="author" href="https://profiles.google.com/110661467085975877308/" target="_blank">
<img src="http://ssl.gstatic.com/images/icons/gplus-32.png" width="32" height="32">
</a>
</div>
</p>
</tr>
</table>
</div>
<div id="content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus nunc eget sem iaculis pharetra. Integer sodales interdum accumsan. In et diam neque. Praesent eget erat id lectus rutrum placerat a a purus. Integer molestie arcu vel orci iaculis sagittis consequat mauris hendrerit. Fusce placerat leo ac tortor fringilla posuere. Quisque et enim nisl, eu laoreet nibh. Sed vitae turpis leo. Etiam dictum pretium faucibus. Nam quis ornare nibh. Sed ultricies lacinia dolor ac ullamcorper. Sed dictum enim ut urna consequat quis bibendum mi eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec blandit nisi vitae dui blandit ultrices.</p>
<p>Aliquam enim ligula, pharetra at scelerisque eu, imperdiet vel lorem. Phasellus faucibus nunc ac purus imperdiet eleifend. Praesent id scelerisque massa. Suspendisse sed ornare lectus. Duis eget lacus quam, quis pharetra magna. Phasellus rhoncus, lectus et dictum accumsan, diam justo volutpat urna, ac auctor leo velit in augue. Proin eget nisi vel turpis hendrerit tempor sed a odio. Phasellus lacinia placerat lobortis. Vestibulum consequat bibendum semper. Vivamus cursus eros non felis gravida fermentum. Donec pulvinar, nisl a varius volutpat, ante lectus varius erat, ac sodales nisl nulla sed eros. Nam bibendum cursus bibendum. Nam id orci vitae odio consequat vestibulum eu vitae ipsum. Fusce ullamcorper pretium est, eget elementum mauris tristique vitae.</p>
<p>Suspendisse facilisis mauris eget mi tempus porta. Morbi viverra, libero sed posuere porta, est purus commodo nunc, ac interdum lacus eros et turpis. Pellentesque consequat sagittis elit vel imperdiet. Pellentesque elementum, eros eget vestibulum tempor, justo metus volutpat purus, sed viverra justo odio et erat. Maecenas id urna quam. Praesent auctor congue venenatis. Aenean dolor nisl, viverra vitae ornare sed, pretium sed nibh. Pellentesque pharetra pellentesque ipsum, in ornare lacus iaculis vel. Aliquam quis arcu lectus, eu pretium est. Integer a urna dui, vel tincidunt magna.</p>
<p>Nulla mauris felis, mollis at egestas at, suscipit at sem. Donec tincidunt, tellus at consectetur consectetur, elit nisi ullamcorper dolor, vel posuere odio sapien quis ligula. Proin nunc arcu, commodo id hendrerit pulvinar, hendrerit a ligula. Nulla sagittis iaculis est, eleifend mollis dolor ullamcorper a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non urna non nulla mollis rhoncus. Mauris eu urna tortor, et tincidunt diam.</p>
<p>Ut vehicula sodales nisi eu viverra. Donec nec sollicitudin nisi. Quisque tristique massa vel felis gravida iaculis. Proin a urna quis lacus facilisis viverra. In lacus nunc, faucibus sed luctus sit amet, tempor vitae nunc. Sed erat urna, ultricies non pretium at, vehicula id nibh. Sed sed dolor nisl. Duis nisi felis, euismod sit amet pulvinar ac, hendrerit vel tellus. Fusce vehicula tristique pellentesque. Cras molestie laoreet viverra.</p>
</div>
</div>
</div>
</div>
<center>
<div class="footer">Kieran Sheehan - 2012</div>
</center>
</body>
</html>
Works using:
<html>
<head>
<style type="text/css">
#nav{
width:100%;
height:30px;
background-color:#999;
}
#nav ul{
height:150px;
color: red;
padding-left: 150px;
}
#nav ul li{
display:inline;
list-style-type: none;}
</style>
</head>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Links</li>
</ul>
</div>
</html>
Try refreshing your browser using Ctrl+F5 - it may have cached some results that didn't work.
works well for me. Do you have some other css rules that could conflict with these ones? You could check which styles are applied to your "li" with the chrome developper console, maybe.
By the way, "list-style-type" is meant to be used with "ul" or ol", not with "li".
Although your css does not include such a property, make sure your li elements don't clear (i.e. clear:left / clear:right / clear:both)
To double check, add this into your css (using !important is bad, only use it for testing)
#nav ul li{
clear: none !important;
}
try adding floating too to see if you manage to get your elements to appear on the same line. If you still have no luck, there is definitely something wrong with your setup that's not apparent from the code you pasted.
#nav ul{
display: inline-block;
list-style-type: none;
height:150px;
color: red;
***padding-left: 150px;***}
I think here you did mistake; Remove padding for ul, might b it'll work