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>
Related
In normal (not responsive yet) my website running good, but after I set responsive to (width: 1336px) for my web it's display screen like this although I've set width for this is 100%
/* Here is my CSS *style.css* */
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
width: 100%;
}
/* style for header section */
h1 {
line-height: 65px;
font-size: 48px;
}
.header-container {
background-image: linear-gradient( 0deg, rgba(35, 39, 49, -0.18), rgba(35, 39, 49, 1.82)), url("images/bg-image.jpeg");
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 743px;
left: -1px;
top: 0px;
}
.nav-bar {
position: absolute;
width: 1700px;
height: 135px;
left: 69px;
top: 17px;
filter: brightness(100%);
}
.header-logo {
float: left;
}
.nav-content {
list-style-type: none;
}
.menu-section {
width: 50%;
float: right;
margin-top: 34px;
}
.menu-item {
float: left;
display: block;
margin-right: 70px;
}
/* nav menu */
.nav-content li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.nav-content li a:hover {
color: #00B9F7;
}
/* header title */
.header-title {
color: #fff;
text-align: center;
margin: auto;
width: 30%;
padding: 10px;
margin-top: 10%;
}
/* header video */
.header-video {
margin-left: 30%;
width: fit-content;
}
<!-- here is my HTML code *index.html* -->
<header class="header-container">
<div class="header-content">
<div class="nav-bar">
<div class="header-logo">
<a href="#">
<img id="image-logo-header" class="bottom img-logo" src="images/logo.png">
</a>
</div>
<div class="menu-section">
<div class="menu-btn-group">
<div class="menu-toggle"></div>
<div class="menu-close"></div>
</div>
<div class="navigation navbar-collapse ">
<nav role="navigation">
<ul class="nav-content">
<li class="menu-item"><a class="active-item" href="#">Home</a></li>
<li class="menu-item">Blog</li>
<li class="menu-item">About</li>
<li class="menu-item">Contact</li>
<li class="menu-item">Login</li>
<li class="menu-item">Sign up</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="header-title">
<h1>SHARE YOUR HOLIDDAY DREAM</h1>
</div>
<div class="header-video">
<img class="video-img" src="images/video-img.png">
</div>
</div>
</header>
Can anyone help me, please? your answer is my happiness, thank you so much
This is happening because in your code you have set background width to 100% that is working fine but when you are using resposive design the background image not filling the screen.
Because the background image is filling the 100% width of your responsive container but the blank space that you are seeing in right side is because of nav-bar, you have set its width fixed to 1700px.
To resolve this make your nav-bar responsive so that it can also set its width according to container.
You can use
.nav-bar {
position: absolute;
width: 100%;
height: 135px;
left: 69px;
top: 17px;
filter: brightness(100%);
}
width: 100% make your nav-bar responsive too.
Can you try using img: { width: 100vw };?
In css, verify the margins and padding.
Firstly, my navigation bar is causing my div to be pushed down the page leaving a white bar before the website actually starts. How do I remove this bar?
Secondly, I cannot get the svg circle to align vertically. How do I do this?
Here is my current code:
#import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200);
body{
margin: 0 auto;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: #FFFFFF;
}
header div{
background-image: url(http://eskipaper.com/images/sunset-dark-clouds-1.jpg);
width: 100%;
height: 375px;
}
header div nav ul li{
display: inline-block;
float: right;
padding-right: 10px;
font-size: 25px;
margin-top: 10px;
margin-right: 10px;
}
header div nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
.circular {
width: 200px;
height: 200px;
border-radius: 80px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg) no-repeat;
margin-left: auto ;
margin-right: auto ;
}
.circular img {
opacity: 0;
filter: alpha(opacity=0);
}
<!-- Start of header -->
<header id="header">
<div>
<!-- Start of navigation bar -->
<nav>
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<!-- End of navigation bar-->
<!-- Profile picture -->
<div class="circular">
<!--<p id="name">Your name</p>-->
<img src="#" alt="Me" />
</div>
</div>
</header>
<!-- End of header -->
Firstly, you don't need a <div> inside the <header> since <header> essentially behaves same as <div>.
Second, unless you're using a reset that we can't see, the <ul> comes with default margin-top and margin-bottom of about 1em. You need to reset to margin:0.
header ul,
header ul li {
margin: 0;
}
Thirdly, you can vertically center using absolute positioning and margins, since you know your element's fixed dimensions.
.circular {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px; /* half of 200px dimension */
margin-top: -100px; /* half of 200px dimension */
}
Working example: https://jsfiddle.net/7uubayLu/
Ok, so it looks like the default stylings of <ul> are causing the header to move down.
ul {
margin: 0;
}
You should consider using a base CSS file like Normalizer.
As for the circle, absolute positioning is what you can use.
Place position: relative on the parent element.
Then add:
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
To .circular.
See the Code Snippet below...
#import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200);
body{
margin: 0 auto;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: #FFFFFF;
}
header div{
background-image: url(http://eskipaper.com/images/sunset-dark-clouds-1.jpg);
width: 100%;
height: 375px;
position: relative;
}
header ul {
margin:0;
}
header div nav ul li{
display: inline-block;
float: right;
padding-right: 10px;
font-size: 25px;
margin-top: 10px;
margin-right: 10px;
}
header div nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
.circular {
width: 200px;
height: 200px;
border-radius: 80px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg) no-repeat;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.circular img {
opacity: 0;
filter: alpha(opacity=0);
}
<!-- Start of header -->
<header id="header">
<div>
<!-- Start of navigation bar -->
<nav>
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<!-- End of navigation bar-->
<!-- Profile picture -->
<div class="circular">
<!--<p id="name">Your name</p>-->
<img src="#" alt="Me" />
</div>
</div>
</header>
<!-- End of header -->
This is the situation:
I have a main div with 2 div parts(red and orange), both have width: 100% and height: 90%. (should be responsive!)
Inside the red div there is a nav bar (top-right-pink), and 3 buttons in the middle.
The aqua div has to be above both red and orange divs.
What is the right way to position everything?
using relative on the red and orange divs doesnt work because of the '%' in the heights.
<div class="main">
<div class="thedude"></div>
<div class="first">
<ul>
<li> Clients </li>
<li> About Us </li>
<li> Contact </li>
<li class="hasImage"> <img src="logo.png"> </li>
</ul>
<div class="timages">
<img src="icon1.png">
<img src="icon2.png">
<img src="icon3.png">
</div>
</div>
<div class="second">
</div>
</div>
*{
margin: 0;
padding: 0;
}
body{
font-size: 100%;
font-family: arial;
}
.first{
width: 100%;
height: 90%;
background-color: #2acecd;
}
.thedude{
width: 95em;
height: 100%;
max-width: 100%;
max-height: 100%;
position: absolute;
background-image: url('yellow_creature.png');
background-repeat: no-repeat;
background-size: 100%, 100%;
z-index: 500;
}
.second{
width: 100%;
height: 90%;
background-color: #f49900;
}
.third{
width: 100%;
height: 90%;
background-color: #fbc00a;
}
.timages{
margin:0 auto;
width: 81%;
padding-top: 23%;
text-align: center;
max-width: 62%;
}
.timages img{
text-align: center;
max-width: 100%;
}
ul{
z-index: 540;
position: absolute;
right: 0;
text-transform: uppercase;
}
li{
float: left;
padding: 2em 0.5em;
}
li a{
text-decoration: none;
color: white;
}
li img{
max-width: 10em;
}
.hasImage{
padding: 0.6em 0.5em;
}
http://jsfiddle.net/4z55sjn0/
Your HTML structure is the main problem.
HTML
<div class="main">
<div class="thedude">
<div class="first">
</div>
<div class="second">
<ul>
<li> Clients </li>
<li> About Us </li>
<li> Contact </li>
<li class="hasImage"> <img src="logo.png"/> </li>
</ul>
<div class="timages">
<img src="icon1.png"/>
<img src="icon2.png"/>
<img src="icon3.png"/>
</div>
</div>
<div class="third">
</div>
</div>
</div>
If you want the menu on the orange div you need to move it...inside the orange block!
CSS
.first {
width: 30%;
height: 90%;
background-color: #2acecd;
float:left;
position:absolute;
top:5%;
z-index: 999 !important;
}
.thedude {
width: 95em;
height: 100%;
max-width: 100%;
max-height: 100%;
position: absolute;
background-image: url('yellow_creature.png');
background-repeat: no-repeat;
background-size: 100%, 100%;
z-index: 500;
}
.second {
width: 100%;
height: 90%;
background-color: #f49900;
position:relative;
}
.third {
width: 100%;
height: 90%;
background-color: #fbc00a;
}
.timages {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
.timages img {
text-align: center;
max-width: 100%;
}
ul {
z-index: 540;
position: absolute;
right: 0;
text-transform: uppercase;
list-style: none;
}
li {
float: left;
padding: 2em 0.5em;
}
li a {
text-decoration: none;
color: white;
}
li img {
max-width: 10em;
}
.hasImage {
padding: 0.6em 0.5em;
}
Check the updated fiddle. Is that close to what you're after?
UPDATE (following comments to this answer)
I've swapped the styles to overcome the misunderstanding.
Check updated fiddle.
I hope it helps.
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!