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
Related
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>
I need some help to hide the background color of my container div.
The main content area is structure in such a way that the article tags stack on top of each other and then after that the footer should take up whatever space is left.
I have tried to get rid of the space between the article tag and the footer while still keeping the margin. In order words I want to get rid of the blue line while.
Can someone give me a hint of how to achieve this?
#container {
background-color: #004bb8;
min-width: 320px;
max-width: 960px;
}
/*------Header-----*/
header {
background-color: lightsalmon;
border-bottom: solid #65ff09 2px;
}
h1, h2 {
font-family: "Impact";
margin: 0px;
padding: 0px;
color: darkred;
text-align: left;
text-transform: uppercase;
letter-spacing: 4px;
}
#image-container {
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 1%;
}
#sitename{
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 8% 1% 1% 1%;
}
header::after {
content: "";
display: block;
clear: left;
}
header img {
width: 250px;
margin: 0 auto;
}
header h1 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 1.5em;
padding: 10px 10px;
color: #f9db00;
}
header h2 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 0.8em;
padding: 10px 10px;
color: #ff2a86;
}
/*-------navigation------*/
nav {
width: 100%;
background-color:
}
nav ul li {}
nav ul li a {
display: block;
text-align: center;
border-radius: 5px;
padding: 0.5em;
margin: .3em;
border: 1px solid #fff;
background-color: #004bb8;
text-decoration: none;
color: #fff;
}
nav ul li.active a {
background-color: #b8005c;
}
nav ul li a:hover {
background-color: #f9db00;
color: #323C40
}
/*-------content------*/
#content {
min-height: 5em;
background-color: #fff;
}
#content article {
margin: 0 2%;
}
#content article.News, #content article.Tweets {
background-color: #ddd;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
article.News h2, article.Tweets h2 {
background-color: darkgray;
color: #fff;
padding: 0.5em;
font-size: 0.8em;
}
article.News h2 {background-color: #004bb8;}
article.Tweets h2 {background-color: #b8005c;}
article.News h3, article.Tweets h3 {
padding: 0.5em 0 0 1%;
font-size: 1.0em;
}
article.News h3 {color: #004bb8;}
article.Tweets h3 {color: #b8005c;}
article.News p, article.Tweets p {
color: #666;
font-size: 0.8em;
padding-left: 1%;
padding-right: 1%;
line-height: 120%;
}
#contents article.Tweets::after {
content: "";
display: block;
clear: left;
}
/*-------footer------*/
footer {
clear: both;
text-align: center;
padding: 1em;
background-color: #111;
color: #fff;
font-size: 0.6em;
}
/*---------IMAGES------------*/
figure.w100 {
overflow: hidden;
width: 100%;
}
figure.w33 {
width: 96%;
border: 1px solid #999;
margin: 0.3em 0 0.3em 2%;
}
figure.w33 img {
width: 100%;
}
figure.w100 img {
width: 100%;
}
#content figcaption {
text-align: center;
font-size: 0.6em;
color: #777;
padding: 0.3em;
}
<body>
<div id="wrapper">
<div id="container">
<header>
<div id="image-container">
<img src="img/logo.png" alt="logo">
</div>
<div id="sitename">
<h1>Responsive Design</h1>
<h2>Don't Settle for Less</h2>
</div>
</header>
<!--------Page Navigation Links -->
<nav>
<ul>
<li>Desktop Work Around</li>
<li class="active">Phone-Default</li>
<li>Tablet Enhancement</li>
<li>Reset CSS</li>
</ul>
</nav>
<!--------Page Content -->
<div id="content">
<figure class="w100">
<img src="img/lake.jpeg" alt="lake">
</figure>
<article>
<h2> Lorem Ipsum</h2>
<figure class="w33">
<img src="img/car.jpeg" alt="car">
<figcaption> what i wish to drive when i get super rich</figcaption>
</figure>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<div class="row">
<article class="News">
<h2>News</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<article class="Tweets">
<h2>Tweets</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
</div>
</div>
<!-----End of Content --->
<footer>
<p>© Buko Ogbobe Responsive Start File</p>
</footer>
</div> <!----end of Container ---->
</div> <!----end of Wrapper ---->
</body>
Here's two solutions, you can use :
footer {
margin-top:-13px;
}
or :
#content article.Tweets, article.Tweets p {
margin-bottom:0px;
}
This will fix the gap in between your footer and content.
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%;
}
The idea to develop my own blog's theme just poped into my mind, probably I enjoy making my own things, but I have very little experience in CSS and HTML, so I've run into some weird problems already.
Actually, it's about the footer. I've written a large piece of code and now I'm trying to trace back the problem, but no results yet. I've used the search here, analyzed some of the similar problems, still no result. Even wrapped everything still nothing.
What I'm trying is to make footer appear at the very bottom of the page content but it always pops on the bottom of the browser's window (somewhere in the middle of the content). Could you guys take a look at the code - I'd really appreciate help, because I've heard there are some good coders slash helpers here.
Please, do not take me as an idiot or something like that. Newbie, that's who I am! Just that.
Styles.css
h
tml{
min-height: 100%;
}
body {
margin: 0;
padding: 0;
font: 16px Georgia;
line-height:25.88854px;
color:#222222;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#footeris {
position: absolute;
bottom:-20px;
height: 100px;
min-width: 100%;
background: #00a651;
}
#blogheader {
min-width: 100%;
height: 55px;
background: #00a651;
position: fixed;
z-index:3;
}
#menu {
width: 900px;
height: 55px;
background: #00a651;
display: block;
margin: auto;
}
#social {
width: 200px;
height: 55px;
display: block;
float: right;
margin: auto;
}
#twitter {
margin-top:12px;
margin-right: 15px;
float: right;
}
#twitter:hover
{
margin-top:15px;
}
#googleplus:hover
{
margin-top:15px;
}
#youtube:hover
{
margin-top:15px;
}
#googleplus {
margin-top:12px;
margin-right: 15px;
float: right;
}
#youtube {
margin-top:12px;
margin-right: 15px;
float: right;
}
#menubutton1 {
display:inline-block;
height:55px;
background: #00a651;
}
#menubutton1:hover
{
background-color:#000000;
}
#navigacija {
width: 600px;
height:55px;
float: left;
padding:0;
}
#navigacija li {
display:inline;
}
#navigacija li a {
font-family:Arial;
font-size:20px;
font-weight: bold;
text-decoration: none;
letter-spacing: 1.5px;
padding-top:100%;
padding-bottom:14px;
padding-left:18px;
padding-right:18px;
background-color: #00a651;
color:#ffffff;
}
#navigacija li a:hover {
background-color:#000000;
}
#name {
position:relative
color: #FFFFFF;
padding-top: 18px;
padding-left: 9px;
padding-right: 9px;
height:55px;
}
#name a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}
#line {
margin-left: auto;
margin-right: auto;
height: 7px;
background: #C9C9C7;
}
#blogbody {
width: 1024px;
min-height:100%;
margin-left: auto;
margin-right: auto;
padding-bottom:60px;
z-index:2;
}
#myinfo {
float: right;
max-width: 300px;
background: #DDE3DC;
z-index: 1;
border-bottom: 2px solid #cccccc;
display:inline-block;
}
#myinfotext {
margin-bottom: 20px;
font: 17px Georgia;
line-height:25.88854px;
color:#222222;
text-align:left;
padding-left:40px;
}
a {
color: #00a651;
text-decoration: none;
}
h1 {
font-size: 25px;
font-weight:normal;
font-family: Helvetica Neue;
color: #474A46;
}
#me {
margin-left:auto;
margin-right:auto;
background: url(images/me.png) no-repeat;
width: 120px;
height: 120px;
}
#content {
width: 615px;
float: left;
margin-top: 55px;
min-height:100%;
}
#blogprojects {
width: 615px;
height: 200px;
display: block;
float: left;
padding: 20px;
border-bottom: 1px solid #cccccc;
}
#newsfeed {
width: 615px;
float: left;
padding: 20px;
padding-top: 15px;
}
#blogpost {
width: 615px;
float: left;
padding: 20px;
}
#blogsidebar {
width: 300px;
min-height: 100%;
background: #DDE3DC;
display: block;
float: right;
border-left: 2px dashed #cccccc;
padding: 25px;
margin-top: 55px;
z-index:1;
}
#blogwidget {
margin-top: 20px;
width: 300px;
display:inline-block;
border-bottom: 2px solid #cccccc;
}
#blogwidgetcontent {
margin-bottom: 20px;
}
HTML Code
<!DOCTYPE HTML>
<html>
<head>
<title>Lukas Valatka Blog</title>
<link rel="stylesheet" href="styles.css">
</link>
</head>
<body>
<div id="wrapper">
<div id="blogheader">
<div id="menu">
<div id="navigacija">
<ul id="navigacija">
<li>POSTS</li>
<li>About</li>
<li>About</li>
</ul>
</div>
<div id="social">
<div id="twitter">
<img src="images/social/twitter.png" alt="Twitter" >
</div>
<div id="googleplus">
<img src="images/social/googleplus.png" alt="Google Plus" >
</div>
<div id="youtube">
<img src="images/social/youtube.png" alt="Youtube" >
</div>
</div>
</div>
<div id="line">
</div>
</div>
<div id="blogbody">
<div id="content">
<div id="blogprojects">
<h1>Recent Projects</h1>
test
</div>
<div id="linijele">
</div>
<div id="newsfeed">
<h1>What's Going On</h1>
<div id="blogpost">
<h2>Test</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus, ante at gravida condimentum, nibh eros bibendum dolor, non aliquam augue velit sit amet lectus. Phasellus pellentesque diam quis metus fermentum sollicitudin. Suspendisse suscipit, enim quis ultricies congue, lectus sem luctus orci, non lacinia nunc ante non augue. Praesent at ante lectus. In quam magna, eleifend ornare facilisis sed, dignissim a nunc. Nullam ultricies vulputate lorem nec sagittis. Nullam vulputate nisi vel lorem pharetra volutpat. Suspendisse dui est, consectetur malesuada consequat nec, egestas et lorem. Nulla facilisi. Maecenas eleifend pulvinar tincidunt. Donec eu orci at libero ultricies ornare. Suspendisse potenti. Nullam tortor ante, rutrum ut sollicitudin at, pulvinar vel orci. Sed semper sem tincidunt urna cursus et ultrices tortor aliquet. Vestibulum pellentesque arcu dictum nisl mollis auctor.
Proin ut vehicula risus. Nulla ut urna sit amet neque commodo venenatis. Nulla hendrerit tincidunt tellus, congue convallis orci porta non. Nam sollicitudin ultricies dui, id dignissim odio tempus eu. Fusce viverra condimentum euismod. Suspendisse mauris magna, pulvinar venenatis porttitor id, interdum a purus. Donec nisi augue, semper eu fermentum ac, blandit at justo. Phasellus aliquet ultrices dapibus. Donec nibh libero, tempus ut pellentesque a, aliquet ut libero. In hac habitasse platea dictumst. Nam eget nunc lectus, in commodo odio.
Nulla a justo nunc, quis sollicitudin ante. Proin mi magna, tempor sit amet porttitor volutpat, luctus eu sem. Vestibulum porttitor arcu eget magna vulputate quis laoreet massa mollis. Maecenas justo nibh, ornare elementum ornare quis, aliquam sit amet velit. Cras hendrerit consequat viverra. Aenean eget libero at urna viverra rutrum. Fusce eleifend tincidunt dignissim. Nam pellentesque aliquam lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Etiam massa nisl, luctus sollicitudin congue non, suscipit ac justo. Morbi pretium elementum urna, et dignissim lectus viverra vel. Duis sit amet massa felis, ut consequat dolor. Nullam in justo lectus, id rutrum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent fringilla urna rutrum orci dignissim a mollis leo varius. Vivamus accumsan neque a nisl ornare vel ultricies eros ultrices. Quisque nec odio non libero pellentesque molestie in ut quam. Phasellus feugiat consequat nunc, commodo venenatis tortor volutpat eget. Curabitur tristique posuere mollis. Quisque sit amet lacus nec elit fermentum laoreet sed vitae neque. Sed sem leo, fermentum eu sagittis in, auctor eget lacus. Duis lacus orci, semper vitae faucibus vitae, bibendum ac augue. Curabitur at felis ac mi dictum adipiscing.
</div>
</div>
</div>
<div id="blogsidebar">
<div id="myinfo">
<div id="me">
</div>
<center>
<h1>
L
</h1>
<div id="myinfotext">
Hey
</div>
</center>
</div>
<div id="blogwidget">
<div id="blogwidgetcontent">
<h1>
Latest Tweets
</h1>
<a class="twitter-timeline" data-tweet-limit="3" href="https://twitter.com/" data-widget-id="3168357470">Tweets by #L</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
</div>
<div id="footeris">Copyright 2013.</div>
</div>
</body>
</html>
An easy solution is to use floats, and clear it if needed.
Lets say you got 4 div's, a header, content, sidebar and footer:
.header { width:100%; height:100px; float:left; }
.content { width:65%; float:left; }
.sidebar { width:35%; float:right; }
.footer { width:100%; float:left; clear:both; }
Use the Chrome console (rightclick-inspect element) to see what is happening and adjust where needed if you're unsure.
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