I tried researching this question on this site, but everything wasn't related to my particular site. Pretty much I have a background image on my home page, and the background is "fixed" and "covered". I am not sure if that's the reason why it is not working. I want the "View Works" button in the center of the computer. Please help!
HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Kasia's Website </title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<a href="works.html">
<input class="butt" type="button" value="VIEW WORKS" />
</a>
</div>
<div id="page">
<div id="sidebar">
<div>
<a href="index.html"><img id="logo"
src="http://i66.tinypic.com/xnf4us.png" /></a>
</div>
<div>
<ul class="sb">
<li> Home </li>
<li> About </li>
<li> Works </li>
<li> Contact </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div>
</body>
</html>
CSS
#charset "UTF-8";
body {
background-image: url(http://i66.tinypic.com/ww1d7n.png);
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-family: "Helvetica Neue";
}
#sidebar {
background: #05E2D4;
background-color: rgba(5, 226, 212, 0.7);
width: 220px;
height: 100%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul.sb {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
padding: 200px;
display: block;
width: 180px;
padding: 30px;
text-transform: uppercase;
font-weight: 105;
letter-spacing: 2.5px;
line-height: 30%;
margin-left: 20px;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 15px;
position: absolute;
margin: 20px;
top: 0px;
right: -60px;
cursor: pointer;
}
#sidebar-btn span {
height: 2px;
background: #000000;
margin-bottom: 5px;
display: block;
}
a {
text-decoration: none;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: none;
}
a:hover {
color: #ffcd03;
}
a:active {
color: #ffcd03;
}
#logo {
margin: 20px 50px 20px 50px;
}
#page {
max-width: 800px;
min-width: 600px;
}
#Kasiaport {
width: 500px;
margin: 50px 200px 50px 200px;
}
aside {
width: 30%;
background-color: white;
padding: 40px 40px 20px 40px;
margin: auto;
}
p.work {
color: white;
font-size: 9px;
text-transform: uppercase;
border-style: solid;
border-color: white;
margin-left: auto;
margin-right: auto;
width: 70px;
padding: 15px 30px 15px 30px;
display: block;
}
.butt {
-webkit-border-radius: 0;
-moz-border-radius: 0;
background-color: transparent;
border-radius: 2px;
color: #ffffff;
font-size: 15px;
padding: 10px 20px 10px 20px;
border: solid #FFFFFF 2px;
text-decoration: none;
font-weight: 200;
letter-spacing: 1.5px;
font-family: "Helvetica Neue";
text-align: center;
margin-left: 45%;
margin-top: 32%;
position: absolute;
}
.butt:hover {
border-color: #ffcd03;
background-color: none;
color: #ffcd03;
text-decoration: none;
}
http://codepen.io/kasiariele/pen/MaLdWv/
In order to see the error visually, you may need to go in full screen mode (http://codepen.io/kasiariele/full/MaLdWv/) or make the screen smaller so you can see it scroll.
Thank you.
Don't use margin to "center" your elements as you did.
You can add this code and the button will be centered both horizontally and vertically without having to adjust your old code:
.butt {
margin: 0; /* reset your old margin */
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Check browser support for transforms and any extra prefixes needed (-ms for ie9).
Related
So here's the HTML code for my website about a holiday destination (New York). I've so far made a nav bar and implemented parallax scrolling with two background images. I then saw when running the code that there was a white space after the nav bar and the first background image and I'm not sure how to solve this. I've tried changing the padding and margins around but that's not working :( Some help would be greatly appreciated!
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 50px;
}
header{
background:plum;
position: relative;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 100px;;
height: 60px;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 20px;
font-size: 18px;
position: relative;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 3px;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-top: 4%;
margin-bottom: auto;
display: block;
}
.transbox p{
margin: 5%;
font-weight: bold;
color: black;
}
h1{
text-align: center;
font-size: 65px;
}
.first-block{
height: 100px;
background-color:rgb(109, 176, 243);
text-align: center;
border: 10px double white;
padding-bottom: 60px;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
color: rgb(13, 97, 170);
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New York</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two"></div>
</body>
</html>
I'm not fully understand what is white space you mean, but try to delete margin-top: 4% in
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-bottom: auto;
display: block;
}
Despite having position fixed and no transform properties, my "hero" div always moves with the page. I want it to stay put
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css:
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color:white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover{
border: 1px solid white;
}
.logo img
{
width: 150px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1{
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button
{
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one{
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two{
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2{
height: 1000px;
background-color: red;
}
Full HTML:
<html>
<head>
<title>Summer Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class ="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class ="bro">
</div>
</div>
</div>
</header>
<!--particles js file -->
<!-- <h1> TEST </h1> -->
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>
<div id=page_2>
</div>
</body>
</html>
There just seems to be problem with your closing tags incorrectly nested. There needs to another closing div before the closing header tag. The snippet shows the hero in a fixed position:
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css: * {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button {
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one {
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two {
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2 {
height: 1000px;
background-color: red;
}
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class="bro">
</div>
</div>
</div>
</div>
</header>
<div id=page_2>
</div>
Use position:inherit
You are using fixed and I think that is causing your issue.
Inherit won’t move, absolute stacks, fixed scrolls with page, static is default.
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.hoofd-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.hoofd-nav li
{
display: inline-block;
}
.hoofd-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
border: 3px solid transparent; /* Remove wobble */
}
.hoofd-nav li a.actief
{
border: 3px solid white;
}
.hoofd-nav li a:hover
{
border: 3px solid white;
}
.logo img
{
width: 150px;
height: auto;
filter: brightness(0) invert(1);
float: left;
}
body
{
font-family: monospace;
}
.rij
{
max-width: 1600px;
margin: auto;
}
.voorblad
{
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
top: 30%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
h1
{
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.knop
{
margin-top: 30px;
margin-left: 550px;
}
.knop1
{
border: 3px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
}
.knop1
{
background-color: darkorange;
font-family: "Roboto", sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="rij">
<div class="logo">
<img src="leeuw.png">
</div>
<ul class="hoofd-nav">
<li> Home </li>
<li> Voorstellen </li>
<li> Hobby's </li>
<li> Toekomstdromen </li>
</ul>
</div>
<div class="voorblad">
<h1 id="iets"> Start De Reis</h1>
<div class="knop">
Start
</div>
</div>
</header>
</body>
</html>
So I am making a website for school and it has to be like a blog or something like that and I think It would be great if I have a moveable header when you scroll so does anyone now how I can change my header to a moveble header?
Thanks
My code: http://www.mediafire.com/file/64op22c06dc7ei6/Eindopdracht.rar/file
The snippet doesn't work correctly because I can't add 4 html files
I have 4 diffrent html files only to let the header work that if you click on one of the subjects its changes hte box maybe someone has a suggestion for that?
So my website shows the images in google chrome but not in firefox! Anyone who can help? It only shows the background image in firefox! I've tried many things but nothing works for me. Anyone who can help :D
website: http://z16-zacho.it.slotshaven.dk/html/index.html
body {
background-color: transparent;
color:saddleBrown;
font-family:Verdana, Geneva, sans-serif;
margin:0px 0px 0px 0px;
}
h1, h2 {
color: black;
text-align: center;
}
h1 {
text-align: center;
border-style: solid;
border-color: rgb(176, 184, 196);
border-radius: 100px;
display: table;
margin: 0 auto;
margin-bottom: 20px;
padding: 6px;
background-color: white;
opacity: 0.9;
}
h3 {
text-align: center;
color: black;
font-size: 24px;
}
p {
text-align: center;
border-style: solid;
border-color: rgb(176, 184, 196);
display: table;
margin: 0 auto;
margin-top: 20px;
padding: 6px;
background-color: white;
opacity: 0.9;
color: black;
font-size: 24px;
font-weight: bold;
}
span {
color: rgb(16, 140, 206);
}
ul {
list-style-type: none;
margin-top: -3px;
padding: 0px;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#boks1 {
max-width: 48%;
width: auto;
padding: 0.5%;
border: 1px;
border-style: solid;
border-color: purple;
float: left;
background-color: white;
overflow: hidden;
}
#boks2 {
max-width: 48%;
width: auto;
padding: 0.5%;
border: 1px;
border-style: solid;
border-color: purple;
float: right;
background-color: white;
overflow: hidden;
}
#background {
background-image: url(../billeder/background.jpg);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img-me {
content: url(../billeder/billede_af_mig.jpg);
width: 300px;
height: 300px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
float: center;
margin: 0 auto;
display: table;
}
#head {
content: url(../billeder/head.png);
margin-bottom: 3px;
background-color: rgb(238, 242, 254);
height: 0 auto;
max-width: 100%;
float: center;
margin: 0 auto;
display: table;
}
#facebook {
content: url(../billeder/fb.png);
width: 16px;
}
#instagram {
content: url(../billeder/instagram.png);
width: 16px;
}
#twitter {
content: url(../billeder/twitter.png);
width: 20px;
}
#snapchat {
content: url(../billeder/snap.png);
width: 16px;
}
#normalP {
font-size: 16;
font-weight: normal;
text-align: left;
border-style: none;
display: table;
margin: 0 auto;
margin-top: 20px;
padding: 0px;
opacity: 1;
color: black;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link href="../css/frontpageStyle.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
<title>Zacool site</title>
</head>
<body>
<body id="background"></body>
<header>
<a href=" (link here was url shortened so i removed it) " target="_blank">
<div id="head"></div>
</a>
<ul>
<li><a class="active" href="index.html">Forside</a></li>
<li>Min valgfrie ting</li>
<li>Kronik</li>
<li><a id="facebook" href="https://www.facebook.com/tobias.zacho" target="_blank"></a></li>
<li><a id="instagram" href="https://www.instagram.com/tobiaszacho99/" target="_blank"></a></li>
<li><a id="twitter" href="https://twitter.com/Tobi1790?lang=da" target="_blank"></a></li>
<li><a id="snapchat" href="snap.html" target="_blank"></a></li>
<li>Slotshaven</li>
</ul>
</header>
<h1>Velkommen! Denne side er kodet af <span id="header-shadow">Tobias Zacho</span></h1>
<div id="img-me"></div>
<p>↓ <span>Scroll ned for mere info</span> ↓</p>
<body>
<div id="background"></div>
<div style="height:0px;background-color:transparent;"><!-- Lavet så man får scrolling effekten! --></div>
</body>
<div id="boks1">
<h3>
Hvem er jeg?
</h3>
<p id="normalP">
Test
</p>
</div>
<div id="boks2">
<h3>
Overskrift
</h3>
<p id="normalP">
Test
</p>
</div>
</body>
</html>
Try changing #head on your CSS:
#head {
background-image: url(../billeder/head.png);
background-color: rgb(238, 242, 254);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 15vh; /* 15% of the screen's height */
}
The way you set it, it doesn't have a defined height, and different browsers interpret that in different ways.
Also, a thing to note: on small width screens, that header image looks quite small. Try cutting a bit of that whitespace on the .png to give it some space!
And lastly, this is one solution to it. If you're ever unsatisfied, there surely are other ways to accomplish what you're looking for!
I am creating a webpage and the css and html are fairly straightforward. However, in Chrome, and only on 100% zoom, when I hover over a navbar item a tiny sliver of the container div color stays the same. If I change the zoom level or use another browser this effect is not present. Any thoughts: Code is below.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Site Title</title>
</head>
<body>
<div class="img_div" id="visible_div1">
<img src="images/logo_transparent.png" class="logo_img" id="img1"/>
</div>
<div class="nav_bar_div" id="visible_div2">
<ul class="nav_bar" id="ul1">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="main_div" id="visible_div3">
</div>
</body>
<footer>
Footer Text
</footer>
CSS:
body{
background-color: #5d5953;
font: arial;
color: white;
}
.img_div{
position: relative;
margin: auto;
height: 10%;
overflow: hidden;
background: white;
width: 60%;
}
.logo_img{
top: 10%;
float: right;
height: 80%;
padding: 0 2% 0 2%;
position: relative;
}
.nav_bar_div{
width: 60%;
background: #ff9900;
margin: auto;
padding: 0;
}
.nav_bar{
list-style-type: none;
margin: auto;
overflow: hidden;
}
.nav_bar > li{
display: inline-block;
margin: 0;
padding: 1%;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.nav_bar > li:hover{
background-color: white;
}
.nav_bar > li > a{
display: block;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
font-size: 2em;
margin: 0;
}
.nav_bar > li:hover a{
color: #ff9900;
}
.main_div{
background-color: white;
color: black;
width: 60%;
height: 85%;
margin: auto;
background-image: url("images/welcome_image.jpg");
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
}
footer{
background-color: #ff9900;
font-family: arial;
width: 60%;
margin: auto;
text-align: center;
padding: 0.5% 0 0.5% 0;
}
Example (Chrome):
NavBar Issue In Chrome
Example (IE):
NavBar Correct In IE