I'm trying to create a webpage that will have a fixed sidebar and scrollable content. It does work if I don't have a header div. If I scroll page I have some empty space that previously was a header (i marked it with red color). I'd like my sidebar to cover the empty space after I scroll through header div.
Here's my HTML Code - how can I fix this?
<!doctype html>
<head>
<link rel="stylesheet" href="style.css"type=" text/css"/>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</body>
CSS
#page
{
position:relative;
width:100%;
height:3000px;
background-color:yellow;
}
#header
{
background-color: blue;
width:100%;
height:150px;
}
#navigation
{
background-color: red;
width:10%;
height:3000px;
float:left;
}
#content
{
float:left;
background-color: green;
width:90%;
overflow: auto;
height:1000px;
}
body
{
margin: 0;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a
{
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
You have to place your navigation div in outermost part i.e. in body(not in any other div).
I have tested this and its now working fine.
Your new code should be
<html>
<head>
<link rel="stylesheet" href="style.css" type=" text/css" />
</head>
<body>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="page">
<div id="header">
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</div>
</body>
</html>
And your modified css:-
#page {
position: relative;
width: 100%;
height: 3000px;
background-color: yellow;
}
#header {
background-color: blue;
width: 100%;
height: 150px;
display: block;
}
#navigation
{
background-color: red;
width:10%;
height:100%;
float:left;
position: absolute;
z-index:1;
}
#content {
float: left;
background-color: green;
width: 90%;
overflow: auto;
height: 1000px;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
In css I have changed the navigation's height to 100% and its z-index to 1.
Also you didn't close the div tag with class "page".
Reference:- w3 css sidenav
Please try this:
#navigation {
background-color: red;
width: 10%;
height: 3000px;
float: left;
position: absolute;
z-index: 99999;
left: 0;
top: 0;
}
Related
I'm trying to put the footer at the bottom of the page.
My html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main">
<header id="main__header">
<div id="logo"></div>
<div id="search">
<form>
<input type="text" value="Search..." />
</form>
</div>
<nav>
<ul>
<li id="home">Home</li>
<li id="about">About Us</li>
<li id="carrers">Carrers</li>
<li id="newsletter">Newsletter</li>
<li id="contact">Contact</li>
</ul>
</nav>
</header>
<section id="body__section">
<section id="left__section" class="margin__section">
<article id="news1">
<img src="images/pic.jpg" width="200" height="170" alt="pic1" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news2">
<img src="images/pic.jpg" width="200" height="170" alt="pic2" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news3">
<img src="images/pic.jpg" width="200" height="170" alt="pic2" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news4">
<img src="images/pic.jpg" width="200" height="170" alt="pic3" />
<header> </header>
<div>
<p> </p>
</div>
</article>
</section>
<section id="right__section" class="margin__section">
<aside id="social"></aside>
<aside class="ad"></aside>
<aside class="ad"></aside>
</section>
</section>
<footer> </footer>
</div>
</body>
</html>
My style.css
* {
margin: 0;
padding: 0;
}
html, body, #main {
height: 100%;
}
html, body, #main_header, nav, ul, footer {
width: 100%;
}
#main {
position: relative;
margin: 0 auto;
width: 1100px;
}
#main__header {
position: relative;
height: 180px;
margin: 0 auto;
background-color: #ff532a;
}
#logo {
position: relative;
top: 5px;
left: 20px;
border: 1px solid #fff;
width: 206px;
height: 75px;
}
#search {
position: absolute;
top: 5px;
right: 20px;
}
nav {
position: absolute;
bottom: 10px;
}
ul {
display: block;
list-style-type: none;
clear: right;
width: 1061px;
margin: 0 auto;
}
nav ul li {
display: block;
width: 209px;
float: left;
margin-left: 4px;
}
#home {
margin-left: 0px !important;
}
nav ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 1.4em;
height: 35px;
padding: 5px;
border: 1px solid #fff;
border-radius: 8px;
}
#body__section {
width: 100%;
height: 100%;
padding-bottom: 20px;
}
#left__section {
width: 810px;
height: 100%;
float: left;
}
#right__section {
width: 250px;
height: 100%;
float: right;
border-top: 1px solid #d2d3d2;
}
.margin__section {
margin-top: 30px;
}
article {
position: relative;
border-top: 1px solid #d2d3d2;
border-bottom-width: thin;
height: 230px;
width: 100%;
}
section article img {
margin: 30px;
}
section article div {
position: absolute;
top: 30px;
right: 0px;
width: 550px;
height: 170px;
background-image: url('images/article.jpg');
}
.border__solid {
border: 1px solid #000;
}
#right__section aside {
width: 100%;
margin-top: 30px;
}
#social {
height: 50px;
background-color: #e7e8e7;
}
.ad {
height: 377px;
background-color: #ffffa1;
}
footer {
left: 0px;
right: 0px;
bottom: 0px;
height: 180px;
background-color: #beb0ff;
}
The problem is that the gray footer stays in the middle under the section. I really want the footer to be at the bottom of the page, not fixed.
screenshot
You need to add an element with "clear: both" after the two floating sections that you have inside your container section. Then you have to remove the "height: 100%" from your container section.
So, add to your css:
.clear {
clear: both;
}
Change your "#body__section" to:
#body__section {
width: 100%;
height: auto;
padding-bottom: 20px;
}
And add to your html, just before the end of the "body__section":
<div class="clear"></div>
I recommend to use this CSS...
#main {
position: relative;
margin: 0 auto;
width: 1100px;
min-height: 100%;
padding-bottom: 180px;
}
footer {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 180px;
background-color: #beb0ff;
}
...and take the 'main element out of this rule:
html, body, #main {
height: 100%;
}
so it becomes
html, body {
height: 100%;
}
This makes the footer a child of #main, absolutely positioned at its bottom, with enough padding-bottom on #main to prevent any overlapping(180px, like the height of the footer), and a min-height of 100% for #main to ensure the footer is also at the bottom on pages which aren't that high.
These changes will fix things for you:
#main {
position: relative;
margin: 0 auto;
height: auto; //changing to auto
width: 1100px;
}
footer {
left: 0px;
right: 0px;
bottom: 0px;
height: 180px;
background-color: #beb0ff;
position: relative; //changing to relative
clear: both; //clearing previous divs
}
Hope this helps!
I have a little problem that I could work around but it annoys me that I don't understand it. Maybe you can help. I have a header with a nav bar inside which is floated to the right. Now when I add margin-top to the nav and set it equal to say 10% it is not sizing relative the the parents height. Instead it appears much further down the page. Heres my code:
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
header {
background-color: yellow;
height: 10%;
width: 100%;
overflow: hidden;
}
header img {
float: left;
}
nav {
float: right;
background-color: grey;
width: 30%;
text-align: center;
margin-top: 1%;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
}
<header>
<img src="" alt="Reece Barrett's" height="" width="" />
<nav>
<ul>
<li>About Me
</li>
<!--
-->
<li>Porfolio
</li>
<!--
-->
<li>Contact
</li>
</ul>
</nav>
</header>
If you want header to be auto height, Use min-height instead of using height, also remove overflow:hidden otherwise this will hide overflowed content.
header {
background-color: yellow;
min-height: 10%;
width: 100%;
overflow: hidden;
}
For more info https://developer.mozilla.org/en/docs/Web/CSS/min-height
You can use min-height: 10%
heres the fiddle: https://jsfiddle.net/a4sg5b72/
I would approach it using the positioning absolute & relative.
Codepen: http://codepen.io/rezasan/pen/YGmVGo
header {
background-color: yellow;
height: 10%;
width: 100%;
position:relative;
}
header img {
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
}
nav {
background-color: grey;
width: 30%;
text-align: center;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
}
You can try this:
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 1000px;
}
header{
background-color: yellow;
height: 10%;
width: 100%;
}
header img{
float: left;
}
nav{
float: right;
background-color: grey;
width: 30%;
text-align: center;
margin-top: 10%;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page</title>
</head>
<body>
<header>
<img src="" alt="Reece Barrett's" height="" width="" />
<nav>
<ul>
<li>About Me</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
It's because overflow: hidden of Head
I am creating bootstrap page we have four parts of page container.
Please find below of model screen,
<div id="fixedheader">
<header>
</header>
<div class="a">
</div>
</div>
<!--Fixed header End-->
<!--Search content part start-->
<div class="searchcontent">
</div>
<!--Search Content End-->
I want "fixed-header" part should be fixed part of my page. i added style below,
#fixedheader
{
position:fixed;
overflow: hidden;
left:0;
right:0;
}
Now "search content" part some of the content hide in fixed header part in normal view ,find below of my sample output screen
How to fix the issue.
Try
css:
body{
margin: 0;
padding: 0;
background: #80B196;
}
header{
height: 150px;
background: yellow;
}
h1{
margin: 0 auto;
padding: 50px 0 0 0;
width: 300px;
color: #333333;
}
ul{
margin: 0;
padding: 0 0 0 50px;
list-style-type: none;
background: pink;
}
ul li{
display: inline-block;
padding: 6px;
background: rgba(0,0,0,0.4);
vertical-align: top;
}
.wrapper{
height: 1000px;
}
p{
margin: 0 auto;
width: 60%;
}
.fixed-nav{
width: 100%;
position: fixed;
top: 0;
left: 0;
}
and HTML
<div>
<header>
<h1>Header</h1>
</header>
<nav id="main-nav">
<ul>
<li>div</li>
<li>class</li>
</ul>
</nav>
<span id="mine"></span>
<div class="wrapper">
</div>
Codepen Example
I have seen a lot of similar topics; however I do not seem to get the css code right.
Layout of my page: has a background image. Then I want to create a white page in the middle with different blocks () starting with navigation at the top, header,content.
Im not getting the navigation bar to display at the top of the page (without space between the top of the browser and the bar) there is a small gap in between). Furthermore I want my content to always fill the screen until 'just' above the lower part of the browser.
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href ="css/main.css">
</head>
<body>
<div class="wrapper">
<div class="nav">
<ul>
<li>Home</li>
<li>Education</li>
<li>Experience</li>
<li>More</li>
<li>Contact</li>
</ul>
</div>
<div class="header">
</div>
<div class="maincontent">
</div>
</div>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
}
body {
background-image: url("bgimg.png");
background-repeat: repeat;
}
.wrapper{
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0 auto;
position: relative;
top: 0px;
background-color: white;
}
.nav {
background-color: white;
width: 100%;
height: 40px;
font-family: "Sans-serif", Verdana;
}
.nav li {
float: left;
list-style: none;
float: left;
display: inline;
text-align: center;
width: 20%;
line-height: 40px;
}
.nav a {
display: block;
width: 100px;
}
.header {
background-color: #F7D358;
width: 960px;
height: 100px;
position: relative;
top: 0px;
}
.maincontent {
background-color: white;
height: 100%;
margin: 0;
padding:0;
}
Easiest way in this case is to set:
.nav ul {
margin: 0;
}
I recommend you (highly) to use CSS RESET STYLE to avoid these problems.
Example: http://meyerweb.com/eric/tools/css/reset/
I have an image, and then a series of links. The hover works as intended on the text links, but when I place it on an image, in chrome and safari it only changes the background color for a portion of the image, not the whole thing...which I really dont understand. I tried jsfiddle as well as some of the other tools mentioned on SO, please look at the code below if you know why this is happening:
<html>
<head>
<title>Welcome!</title>
<style type="text/css">
#header {
background-color:#2C2C2C;
height:88px;
width:100%;
margin: 0px auto 0 auto;
}
#header_logo_link {
float: left;
width: 250px;
}
#header_logo_link img {
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 10px;
background: transparent;
}
#header_logo_link :hover {
background-color: #4d4d4d;
}
body, .wrapper {
min-height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">
<div id="header_logo_link">
<img src="logo.png">
</div>
<div id="header_logo_link">
Home
</div>
</div>
</div>
</body>
</html>
I'm not exactly sure what you're asking, but if you're trying to change the color around the image when it's rolled over, try adding some padding to the a element and display:block.
<html>
<head>
<title>Welcome!</title>
<style type="text/css">
#header {
background-color:#2C2C2C;
height:88px;
width:100%;
margin: 0px auto 0 auto;
}
#header_logo_link {
float: left;
width: 250px;
}
#header_logo_link img {
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 10px;
background: transparent;
}
#header_logo_link :hover {
background-color: #4d4d4d;
}
body, .wrapper {
min-height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
min-height: 100%;
}
a.img_rollover{
padding:5px;
display:block;
}
a.img_rollover:hover{
background-color: #00F; /*This is your new rollover color*/
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">
<div id="header_logo_link" class="img_rollover">
<img src="logo.png">
</div>
<div id="header_logo_link">
Home
</div>
</div>
</div>
</body>
</html>