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
Related
So I'm creating an single page website with a dot navigation at the side. I have a picture as background on the first section, because the website exists out of 5 section where you can scroll downwards.
The black screen is pushing away my right navigation downwards, i used z-index but thats only the makes sure that the navigation is displayed on top. margin and padding also on 0. I want the black screen with 50% opacity but that isn't working either.
What I need is a black screen with 50% opacity on top of my background picture covering the whole section without pushing away other elements.
.back{
background-color: black;
opacity: 50%;
width: 100%;
height: 110%;
margin: 0;
padding: 0;
display: block;
position: sticky;
z-index: -1;
background-size: cover;
}
#section1{
background-image: url("../Content website/background.png");
background-repeat: no-repeat;
background-size: cover;
z-index: 50;
}
/* Dot navigation */
.dotstyle-scaleup{
float: right;
margin-right: 3%;
}
.dotstyle-scaleup li{
background-color: #eeeeee;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
}
.dotstyle-scaleup .current1{
background-color: #54a59f;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
margin-left: -2.5px;
}
.dotstyle-scaleup li a {
width: 100%;
height: 100%;
display: block;
}
<html lang="en">
<body>
<div id="wrapper">
<!-- Landings -->
<div class="section" id="section1" data-anchor="page1">
<div class="back"></div>
<div class="dotstyle-scaleup">
<ul>
<li class="current1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
Changes you need to make:
Add position:relative to your section container.
Position your back in fixed position in your section with position:fixed and use the top,left,bottom,right as 0 so it stretches over the entire length of your section.
.back {
background-color: black;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.5;
position: fixed;
}
#section1 {
position:relative;
background-image: url("../Content website/background.png");
background-repeat: no-repeat;
background-size: cover;
z-index: 50;
}
/* Dot navigation */
.dotstyle-scaleup {
float: right;
margin-right: 3%;
}
.dotstyle-scaleup li {
background-color: #eeeeee;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
}
.dotstyle-scaleup .current1 {
background-color: #54a59f;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 80px 0 0 0;
list-style: none;
margin-left: -2.5px;
}
.dotstyle-scaleup li a {
width: 100%;
height: 100%;
display: block;
}
<div id="wrapper">
<!-- Landings -->
<div class="section" id="section1" data-anchor="page1">
<div class="back"></div>
<div class="dotstyle-scaleup">
<ul>
<li class="current1">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
I have a header with image in the following HTML page:
<div class="wrapperHeader">
<div class="header">
<img src="header.png">
</div>
<!-- header ends here -->
<div class="menu-wrap">
<nav class="menu">
...
</nav>
</div>
<!-- menu-wrap ends here-->
</div>
<!-- wrapper Header ends here-->
The relevant CSS is as follows:
.menu-wrap {
width: 70%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #808080;
margin: 0 auto;
}
.menu {
width: 700px;
margin: 0px auto;
}
.wrapperHeader {
margin-left: auto;
margin-right: auto;
display: block;
}
.header {
width: 1210px;
height: 192px;
margin: 0 auto;
}
.header img {
position: absolute;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
When I zoom in and out the image in the header scales (up or down) faster than the menu, so I loose the proportions of the page. I would like some scaling similar to what you can see in http://www.studio-efekt.com.pl/ Any ideas how to solve this?
This works for you.
The Image is placed into the empty block.
.menu-wrap {
width: 70%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#808080;
margin: 0 auto;
}
.menu {
width:700px;
margin:0px auto;
}
.wrapperHeader {
margin-left:auto;
margin-right:auto;
display:block;
}
.header {
width:70%;
height: 192px;
margin: 0 auto;
border: 1px solid black;
}
.header img {
position: absolute;
max-width:100%;
max-height:100%;
margin: 0 auto;
}
<div class="wrapperHeader">
<div class="header">
<img src="header.png">
</div><!-- header ends here -->
<div class="menu-wrap">
<nav class="menu">
...
</nav>
</div> <!-- menu-wrap ends here-->
</div> <!-- wrapper Header ends here-->
Hope this helps!
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;
}
the html menu that i have inserted into the page through SSI is stretching to the left beyond the hard coded width of the page and i can't figure out why...
if you look at my code, the #menu id is the problem as it is floating properly (float:right;) but the width it seem is being overridden by something....and i can't find out what is overriding it.....i've checked all the properties that would affect #menu but nothing has an effect on it...
here is the webpage where it is clear: http://unifiedforunifat.com/redesign/homepage.html
here is the css for the homepage where the menu is insert:
body{
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin: 0;
padding: 0;
padding-top: 10px;
}
html{
height: 100%;
}
#wrapper{
width: 900px;
min-height: 100%;
height: auto;
margin: 0 auto -4em;
}
#header{
position: relative;
top: 0;
left: 0;
margin-bottom: 1px;
}
here is the corresponding html:
<body>
<div id="wrapper">
<div id="header">
<!--#include virtual="/menus/menu.html" -->
</div>
here is the css for the menu page:
#menu-wrapper{
position: relative;
width: 900px;
margin: 0 auto;
height: 140px;
}
#logo{
background:url('http://www.unifiedforuganda.com/resources/u4ulogo.jpg') no-repeat;
height: 108px;
width: 200px;
position: relative;
top: 3px;
background-position: 0 0;
float: left;
}
#logo span{
position: absolute;
top:0; left:0; bottom:0; right:0;
background:url('file:///Volumes/Despotos/Users/nojohnny101/Documents/Dropbox/Unified%20for%20UNIFAT/website/resources/u4ulogo.jpg') no-repeat;
background-position: -200px 0;
}
#logo:hover span{
opacity: 1;
}
.social{
position: relative;
margin: 50px 0 0 0;
width: 136px;
float: right;
overflow: hidden;
display: block;
}
#menu{
position: relative;
top: 0;
right: 0;
list-style: none;
display: block;
overflow: hidden;
width: 100%;
margin-top: 0;
padding-top: 4px;
border-top: 1px solid black;
float: right;
}
then here is the html for the menu page:
<div id="menu-wrapper">
<div class="menu-header">
<span></span>
</div>
<div class="social">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<ul id="menu">
<li class="active">DONATE</li>
<li class="active">ABOUT US</li>
<li class="active">MEDIA</li>
<li class="active">US MOVEMENT</li>
<li class="active">UGANDA PROGRAMS</li>
</ul>
</div>
any help would be truly appreciated!
so i found the answer...what i ended up doing was put the overflow: hidden; property on the #menu-wrapper id....i don't know if i totally understand why this helped to hide the extra width to the left of the page even though a hard width was specified (900px) and the border is actually applied to the #menu id not the #menu-wrapper id.....
but problem....thanks #MrLister
I'm building the framework for a responsive site that has a fixed header and 25px padding on both right & left sides of the page. I'm not encountering any issue with the padding or width on the content, but the fixed header runs off the right side of the browser when the display is too small. I'd like the header to obey the same rules and design as the rest of the page, and always show a 25px padding unless the display is narrower than my min-width.
Any help would be appreciated. This seems rather simple, but I'm pulling my hair out.
CSS:
#main {
padding: 0 0px 0 25px;
min-width: 725px;
max-width: 1000px;
margin: 0 auto;
}
#page {
padding: 0 25px 0 25px;
display: block;
margin: 0 auto;
max-width: 1000px;
min-width: 725px;
position: relative;
}
ul#header-nav {
margin: 33px 0px 0 0px;
list-style:none;
width:500px;
font-family: "ss-bol", Helvetica, Arial, sans-serif;
overflow: hidden;
}
ul#header-nav li a {
text-decoration:none;
padding-left: 30px;
color:#000000;
float:left;
text-align: right;
display:inline;
}
#container {
padding-top: 100px;
left: 0;
height: 100%;
}
#header-main {
width: 100%;
margin: 0 -25px 0 0px;
}
#header-frame {
z-index: 10;
background-color: #c9dcb1;
float: right;
}
#header-box {
width: 100%;
max-width: 1000px;
min-width: 725px;
padding-left: -25px;
height: 100px;
background-color: #ffffff;
margin:0px;
position: fixed;
background-color: #c9dcb1;
z-index: 11;
}
#content {
padding-top: 100px;
width: 100%;
background-color: #75efe8;
}
HTML:
<body>
<!-- BeginHeader -->
<div id="page" class="clearfix heed">
<div id="header-main">
<div id="header-box">
<div id="header-frame">
<ul id="header-nav">
<li>NEW</li>
<li>SHOP</li>
<li>WINE</li>
<li>BLOG</li>
<li>LOOKBOOK</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
<div id="content">
TEST CONTENT TEXT
</div>
</div>
</body>
padding, margin and border are added to the with of an element. So, when your display is to small, by telling max-width: 1000px, you imply 1050px because of the padding.
The easy solution is to replace width: 100% by this left and right set as 0, and center your inner content.
<div id="header-box">
<div class="inner">header</div>
</div>
#header-box {
max-width: 1000px;
min-width: 725px;
position: fixed;
left: 0;
right: 0;
top: 0;
}
#header-box .inner {
max-width: 1000px;
margin: 0 auto;
}
Simon, I took the basics of your approach and expanded upon it to get what I needed.
Here's the final CSS:
#header-wrapper {
padding: 0;
margin: 0;
}
#header {
position: fixed;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 9;
background-color: #ffffff;
}
#header .inner {
margin: 0 auto;
padding: 0 25px 0 25px;
max-width: 1000px;
height: 100px;
z-index: 10;
background-color: #ffffff;
}
ul#header-nav {
margin: 58px -20px 0 0px;
list-style: none;
width: 500px;
font-family: "ss-bol", Helvetica, Arial, sans-serif;
font-size: 14px;
overflow: hidden;
}
ul#header-nav li a {
text-decoration: none;
padding-left: 30px;
color: #000000;
float: left;
text-align: right;
display: inline;
}
And the HTML:
<div id="header-wrapper">
<div id="header">
<div class="inner">
<div class="right">
<ul id="header-nav">
<li>NEW</li>
<li>SHOP</li>
<li>WINE</li>
<li>BLOG</li>
<li>LOOKBOOK</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
Thanks again!