I am having trouble with finding my link. When I open up my html and css in the file, I cannot visibly see it (I believe it is stuck under my div, even though the z-index is higher?) I am not entirely sure why, any help would be greatly appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="Stylesheet" href="Stylesheet.css" />
<title>Derpycats.com</title>
</head>
<body>
<!--Background (Carbon Fibre)-->
<body background="background.jpg" alt="Background" />
<!--Header-->
<h1 id="header">DerpyCats.com</h1>
<div id="headerdiv"></div>
<!---Links-->
Home
</body>
</html>
CSS:
/* Sets the pixel density to "fill browser" */
* {
width: 100%;
height: 100%;
}
/* Heading */
#header {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #D9411E;
z-index: 2;
position: fixed;
font-size: 50px;
bottom: -50px;
}
/* CSS for the heading div */
#headerdiv {
border-radius: 5px;
z-index: 1;
position: fixed;
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}
/* Css for the links */
a {
z-index: 3;
font-family: Verdana, sans-serif;
}
/* CSS for the normal paragraphs */
.paragraph {
color: white;
font-family: Courier, serif;
}
P.S. I don't believe this matters, but I am on OSX using sublime text 2.
I didnt understand what are you trying to do but, #headerdiv overlays your link.
You can give z-index = -1 value to your #headerdiv to send it back.
little Change in css will work here
#headerdiv {
border-radius: 5px;
z-index: 1;
/*position: fixed; this is creating problem*/
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}
Related
I'm relatively new to creating websites and I had an HTML/CSS questions I hope someone could help me with!
I noticed that in Safari and Google Chrome, my grey box is not where it is supposed to be (I assume because I made the .veryouter a fixed px, but when I tried to use percentages and resized the page and changed the page sizing, my text box started to move off the page! I'm trying to have everything stay in place when resizing the window, so I'm unsure if changing it to percentage is the answer or not..) I have attached pictures to show the difference, Chrome is it vertically centered while on Safari it isnt). //The code snippet looks odd, sorry about that!
Thank you for any help :) I appreciate it]1
html{
height: 97%;
}
body{
background-image: url("Metakingpic.png");
background-size: 1300px;
min-width: 1080px;
height: 100%;
}
.veryouter{
height: 589px;
}
#outer{
height: 100%;
width: 550px;
display: flex;
justify-content: center;
align-items: center;
}
#inner{
position: relative;
background-color: #696969;
opacity: .5;
height: 540px;
width: 370px;
}
h1{
margin-top: 40px;
margin-bottom: 0;
}
p{
margin-top: 40px;
margin-right: 10px;
}
.words{
font-family: 'Londrina Outline', cursive;
color: #ffffff;
font-size: 55px;
line-height: 50px;
letter-spacing: 5px;
padding-left: 23px;
}
.font2{
font-family: 'Slabo 27px', serif;
color: #ffffff;
font-size: 23px;
line-height: 32px;
letter-spacing: 2px;
margin-left: 20px;
}
.image{
height: 114px;
width: 174px;
position: absolute;
bottom: 0;
right: 0;
z-index: 100;
font-size: 25px;
}
.arrow{
position: absolute;
bottom: 0;
right: 0;
padding-right: 15px;
padding-bottom: 15px;
z-index: -1;
}
.n{
padding-top: 25px;
font-weight: bold;
color: white;
width: 125px;
text-align: center;
font-size: 30px;
font-family: 'Londrina Outline', cursive;
position: relative;
letter-spacing: 5px;
}
a{
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link href = "intro.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Londrina+Outline" rel="stylesheet">
</head>
<body>
<div class = "veryouter">
<div id = "outer">
<div id = "inner">
<div class = "words">
<h1>My <br></br>PHOTO<br></br>BOOK</h1>
</div>
<div class = "font2">
<p> Press "NEXT" to continue! </p>
</div>
</div>
</div>
</div>
<div class = "image">
<a href = "https://www.facebook.com/" >
<div class = "n">NEXT</div>
</a>
<img class = "arrow" src = "Arrow.png" atl = "Arrow"/>
</div>
</body>
</html>
This is most likely because those two browsers have different default css rules, I would recommend using a css reset, either use https://meyerweb.com/eric/tools/css/reset/ or https://github.com/necolas/normalize.css/
If you're not familiar with these reset css - they basically normalize the default browser styles. I personally prefer using normalize.css on all my projects.
To align the container center need to add the following style :
#outer{
height: 100%;
width: 550px;
display: flex;
justify-content: center;
margin-top: 20px;
display: -webkit-box;
-webkit-box-pack: center; /* justify-content */
-webkit-box-align: center; /* align-items */
}
#inner{
position: relative;
background-color: #696969;
opacity: .5;
height: 100%;
width: 370px;
}
Hope the changes will help.Try this code and let me know if any concern.
Okay, been trying to find an answer and testing this out for a couple hours now to no avail. I couldn't find the proper answer on here or through my own trial and error so forgive me if this is a duplicate. Here's what I need help with: I'm trying to change the nav text color when I'm scrolled to another part in the page. So, if I'm scrolled over the #firstpane id/div the 'about' text in my navbar will be black. When the #secondpane id/div is scrolled over the navbar text 'skills' will be black. When scrolled over the #thirdpane id/div the text 'contact' in my navbar will turn black. That sort of thing is what I'm trying to accomplish here.
Does anybody know how to approach this using pure css or javascript, no jQuery? I have an idea of how to do it in jQuery, just can't use it in this instance, so please no guidance suggesting jQuery.
Thanks.
body {
background-image: url("images/someTree.jpg");
background-size: cover;
font-family: 'Roboto', sans-serif;
margin: 0;
}
header {
width: 100%;
height: 85px;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
z-index: 1000;
background-color: #96C339;
}
header h1#logo {
display: inline-block;
float: left;
font-family: "Monsterrat", sans-serif;
font-size: 40px;
color: #FFF;
font-weight: 400;
margin-left: 35px;
}
header nav {
display: inline-block;
float: right;
}
header nav a {
line-height: 100px;
margin-left: 20px;
margin-right: 20px;
color: #FFF;
font-weight: 700;
font-size: 20px;
text-decoration: none;
}
header nav a:hover {
color: #111;
}
#media all and (max-width: 600px) {
header h1#logo {
font-size: 30px;
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 55px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
margin-top: -65px;
}
header nav a {
font-size: 15px;
line-height: 50px;
margin: 0 5px;
}
}
#firstpane {
background-color: #FFF;
margin-left: 0;
height: 100vh;
margin: auto;
opacity: 0.8;
}
#secondpane {
background-color: #FFF;
height: 100vh;
margin: auto;
margin-top: 6%;
opacity: 0.8;
}
#thirdpane {
background-color: #FFF;
height: 100vh;
margin: auto;
margin-top: 6%;
opacity: 0.8;
}
::selection {
background: #000;
/* WebKit/Blink Browsers */
}
::-moz-selection {
background: #000;
/* Gecko Browsers */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Portfolio Stuff</title>
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<h1 id="logo">Some Name</h1>
<nav>
About
Skills
Contact
</nav>
</header>
<!-- /header -->
<div id="firstpane"></div>
<div id="secondpane"></div>
<div id="thirdpane"></div>
<!-- end of container -->
</div>
<script type="text/javascript" src="portfolio.js"></script>
</body>
</html>
You could try using JavaScript. In order to do so simply use window.onscroll (to fire a function every time you scroll). Within that function you would have to check wheter a specific part of your markup falls behind your header. If so, you just add a class to your nav. On the other hand, if your desired element is back on it's initial place (or at least not behind your header anymore) you can simply remove that class from your nav.
Your code could look like this. Of course you would need to extend this to also handle your 1st and 3rd nav/div. But at least I guess this should help you on your way achieving what you want.
// Get the necessary elements first
var skills = document.getElementsByClassName('secondpanenav')[0];
var second = document.getElementById('secondpane');
// Trigger event every time you scroll
window.onscroll = function() {
// Get boundries of your div (top, bottom, left, right)
var position = second.getBoundingClientRect();
// Check your divs position and add/remove your desired class
if (position.top < 85) {
skills.classList.add('redColor');
} else {
skills.classList.remove('redColor');
}
}
Demo: https://jsfiddle.net/vw68eaqv/1/
This question already has answers here:
Why isn't z-index working here
(3 answers)
Closed 8 years ago.
So I've got a div that I want to appear in front of every other div on the page. Here's all my code:
<!DOCTYPE html>
<html>
<head>
<title>Koowalk Game Development - Home</title>
<link rel="stylesheet" href="koowalk.css"/>
</head>
<body>
<h4 id="header">KOOWALK</h4>
<h4 id="headerb">GAMES</h4>
<p>Hello. We're Koowalk Games. We make games.</p>
<div id="work">
<p id="workheader">Games</p>
<div id="workbar"></div>
<script type="text/javascript">
var bar = document.getElementById("workbar");
var x = 0;
window.onload = change;
function change() {
requestAnimationFrame(color);
}
function color() {
bar.style.background = "hsl(" + x + ", 100%, 50%)";
if (x < 358) {
x++;
requestAnimationFrame(color);
}
else {
x = 0;
requestAnimationFrame(color);
}
}
</script>
<div class="workleft">
<p class="headerleft">Some Game</p>
<p class="pleft">This will be some kind of description of the game. There will also be a picture to the left. Cause I know how much you love pictures. I'm in bio. Dransfield is about to yell at me. Except he isn't. Why am I writing this, you might ask? Just think appearences. It's all about the appearences.</p>
</div>
<div id="sliding1"></div>
</div>
</body>
</html>
And the CSS:
#font-face {font-family: "Veger"; src: url('Fonts/Veger(light).ttf'); }
#font-face {font-family: "Kloe"; src: url('Fonts/ff4a_kloe_thin-web.ttf'); }
::selection {
background-color: #e2e2e2;
color: white;
}
::-moz-selection {
background-color: hsl(0, 0%, 89%);
color: white;
}
body {
background: #5a5a5a;
font-family: Veger;
color: white;
text-align: center;
}
#header {
font-size: 100px;
color: #49ffdc;
}
#headerb {
font-size: 100px;
margin-top: -145px;
color: #ffff63;
}
p {
font-family: Kloe, sans;
font-size: 40px;
margin-left: 15%;
margin-right: 15%;
margin-top: -40px;
}
#work {
position: absolute;
left: 0px;
right: 0px;
margin: 0;
padding: 0;
width: 100%;
height: 500px;
background: #ff4545;
margin-top: 100px;
}
#workheader {
font-family: Kloe, sans;
font-size: 80px;
margin-top: 10px;
}
#workbar {
float: left;
width: 50%;
margin-left: 25%;
margin-right: 25%;
height: 3px;
margin-top: -70px;
background: hsl(0, 100%, 50%);
}
.workleft {
float: left;
width: 40%;
margin-left: 3%;
margin-top: -20px;
height: 300px;
background: #5a5a5a;
color: white;
font-family: Kloe, sans;
text-align: right;
}
.headerleft {
margin-right: 5%;
font-size: 50px;
margin-top: -5px;
}
.pleft {
margin-right: 5%;
margin-left: 50%;
font-size: 15px;
}
#sliding1 { //This is the div that needs to appear in front of everything
z-index: 2;
width: 47%;
height: 10px;
color: #06168d;
}
As you can see, #sliding1 is the div I need to get in front of everything else. I've never used z-index before. The div is showing up, but it's behind everything. How do you use z-index exactly?
EDIT: This is not duplicate. I looked at most of the other questions, and all the answers that were provided didn't work. I now have position: absolute and it is still not working.
In order to use z-index you have to add position to the element.
#sliding1 {
z-index: 2;
position: relative;
}
The z-index property in CSS controls the vertical stacking order of
elements that overlap. As in, which one appears as if it is physically
closer to you. z-index only effects elements that have a position
value other than static (the default).
Reference: css-tricks
I've been trying to center text and put more text in the same line right next to it, while keeping the whole thing centered on the first text and not the whole line. Is there an easy way to do this?
All the solutions that I tried so far were either centering on the whole line or failed to put everything on the same line. Of course I also searched through stackoverflow but could not find a solution.
I've made this as a mockup: http://jsfiddle.net/mzqC5/
The way it should behave is that the alignment is centered on "A" and not the whole line. I'd appreciate any help with it since I've been trying to solve this for a good time now.
Thank you very much.
<div class="centered">A<div class="subtext">[24]</div>
.centered {
font-family: Meiryo, sans-serif;
font-size: 75px;
text-align: center;
color: black;
background-color: cornflowerblue;
max-width: 175px;
margin: 0 auto;
}
.subtext {
font-family: Arial;
font-size: 24px;
display: inline-block;
}
One way to achieve this is to absolutely position [24] with the relatively-positioned A.
.centered {
font-family: Meiryo, sans-serif;
font-size: 75px;
text-align: center;
color: black;
background-color: cornflowerblue;
max-width: 175px;
margin: 0 auto;
position: relative;
}
.subtext {
font-family: Arial;
font-size: 24px;
display: inline-block;
position: absolute;
bottom: 24px;
}
Because the element is absolutely-positioned it is not in the document-flow and doesn't affect the text-alignment.
You can adjust bottom to move it higher up.
You could set it up like this (red line added just to demonstrate page center):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
text-align: center;
height: 100%;
}
span {
position: relative;
}
b {
position: absolute;
left: 100%;
font-weight: normal;
}
html, body {height: 100%;}
body {padding: 0; margin: 0;}
div::after {content: ''; height: 100%; width: 2px; background: red; left: 50%; margin-left: -1px; position:absolute;}
</style>
</head>
<body>
<div>
<span>
A
<b>[24]</b>
</span>
</div>
</body>
</html>
#header {
z-index: 1;
width: 100%;
padding: 8px 0px 8px 0px;
background-image: url('img/head-img.png');
background-repeat: repeat;
}
#nav {
z-index: 1;
margin: 0px auto;
text-align: center;
font-size: 25px;
}
#nav a {
color: white;
text-decoration: none;
padding-right: 10px;
font-family: fantasy;
}
#nav a:hover {
color: black;
text-decoration: underline overline;
}
#dlogo {
position: absolute;
/* background-color: #feffe3; */
z-index: -1;
width: 100%;
height: 100%;
}
#dtext {
position: absolute;
z-index: -1;
margin: 0px auto;
width: 100%;
height: 100%;
}
#blogo {
display: block;
margin-top: 12%;
margin-left: auto;
margin-right: auto;
}
#btext {
margin-top: 55px;
margin-left: 40%;
}
#wrapper {
}
#content {
margin: 0px auto;
margin-top: 60px;
min-width: 600px;
max-width: 1000px;
font-size: 22px;
font-family: sans-serif;
}
#content h1, h2 {
color: orange;
font-family: serif;
}
#content a {
color: black;
text-decoration: none;
}
#content a:hover {
color: red;
}
#footer {
z-index: 1;
width: 100%;
height: 200px;
background-color: #1d726d;
margin-top: 40%;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div id="dlogo">
<img id="blogo" src="img/back-img2.png" />
</div>
<div id="dtext">
<img id="btext" src="img/f-it2.png" />
</div>
<div id="header">
<div id="nav">
Home
About Us
Solutions
Success Stories
Contracts
Careers
Contact Us
</div>
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
If you look closely you will see that the black nav bar / header will not stretch all the way from side to side.
It seems like a 10px margin has been applied to the whole website.
How do I get rid of the "margin" that I never applied, but does not happen to any other website.
I am using netbeans, chrome, and xampp.
You should use a reset stylesheet to reset the default rules that browsers add to webpages. Eric Meyer's and YUI's reset stylesheets are good for most webpages. Personally, I use Eric Meyer's for my webpages. Make sure to place the reset stylesheet before any other stylesheets.
Can't you just do this?
html {
padding:0px;
margin:0px;
}
Or am I missing the point here? Not very many details were given, if you could elaborate? It helps. :D
Also, giving your div a negative margin value is what I do sometimes.