I've added a transparent mask on my background image. The 1st layer will be my navigation bars, contents. Second layer will be the transparent mask, and last layer will be the background image. I manage to make my navigation bar to stay in front of the transparent mask, but now I'm unable to click on the navigation.
HTML:
<body>
<div id="top">
<div id="mask"></div>
<ul>
<li>RACHEL LIM</li>
<li style="float:right">CONTACT</li>
<li style="float:right">GALLERY</li>
<li style="float:right">ABOUT ME</li>
<li style="float:right"><a class="active" href="index.html">HOME</a></li>
</ul>
<h1>I'M A CAT LOVER.</h1>
</div>
</body>
CSS:
body {
font-family:Calibri;
font-size:18px;
margin:0px;
}
#top{
background-image:url(https://static1.squarespace.com/static/5376a044e4b0cf50765bdde1/t/5377554ae4b0aefc671d7dcc/1400329549490/typewriter.jpg);
background-size: 100%;
position:relative;
height:100vh;
z-index:-10;
}
#mask{
position:absolute;
background-color:rgba(0,0,0,0.4);
height:100%;
width:100%;
z-index:-5;
}
ul {
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
padding:20px;
}
li a {
display:block;
color:#EDECEA;
text-align:center;
padding:14px 16px;
text-decoration: none;
}
li a:hover {
color: white;
}
.active{
color: white;
}
h1{
font-size:100px;
color:white;
text-align:center;
}
I suggest to not use negative z-index in this scenario, as it will make things a lot more complicated. Instead remove all the z-indexes and set the position of your list and headline to relative.
body {
font-family: Calibri;
font-size: 18px;
margin: 0px;
}
#top {
background-image: url(https://static1.squarespace.com/static/5376a044e4b0cf50765bdde1/t/5377554ae4b0aefc671d7dcc/1400329549490/typewriter.jpg);
background-size: 100%;
position: relative;
height: 100vh;
/*z-index: -10;*/
}
#top > * {
position: relative;
}
#mask {
position: absolute;
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
width: 100%;
/*z-index: -5;*/
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
padding: 20px;
}
li a {
display: block;
color: #EDECEA;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: white;
}
.active {
color: white;
}
h1 {
font-size: 100px;
color: white;
text-align: center;
}
<div id="top">
<div id="mask"></div>
<ul>
<li>RACHEL LIM
</li>
<li style="float:right">CONTACT
</li>
<li style="float:right">GALLERY
</li>
<li style="float:right">ABOUT ME
</li>
<li style="float:right"><a class="active" href="index.html">HOME</a>
</li>
</ul>
<h1>I'M A CAT LOVER.</h1>
</div>
Related
I need some help with my code. I created a drop-down navigation menu. But when I hover over the sub-menus it pushes the main content of my website down. I don't want that. I want to be able to look at the sub-menus without infecting any of my main content. If I hover the menu it is pushing the other parts of the menu down. I like that, but when I tried to use position absolute, it isn't moving the other parts of the menu down anymore.
(Sorry for my bad English)
A part of the html code:
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>Trajecten
<ul class="submenu">
<li>Sport</li>
<li>Techniek</li>
<li>Moderne Menia</li>
<li>Fast Lane English</li>
</ul>
</li>
<li>2017/18
<ul class="submenu">
<li>Examenreis Berlijn</li>
<li>Examenreis Londen</li>
<li>Examenreis Parijs</li>
<li>Introductie</li>
</ul>
</li>
<li>2016/17
<ul class="submenu">
<li>Diploma uitreiking Havo</li>
<li>Diploma uitreiking Mavo</li>
<li>Introductie</li>
<li>Open Dag</li>
</ul>
</li>
</ul>
</nav>
<center>
<p id="content">2017/18</p>
<img id="picture" src="images/2017,18/Berlijn.jpg">
</center>
Css code:
#content{
font-size: 25px;
position:relative;
top: 25px;
}
#picture{
width: 285px;
position:relative;
top: 30px;
}
html, body {
font-family: Arial, Helvetica, sans-serif;
}
/* Navigatie */
.navigation {
position: relative;
top: 100px;
width: 230px;
}
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu a:hover {
background-color: #C5C5C5;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 420px;
}
.submenu a {
background-color: #999;
text-align: center;
}
.submenu a:hover {
background-color: #666;
}
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.8s ease-out;
}
body{
display:flex;
flex-direction:row;
}
#content{
font-size: 25px;
}
#picture{
width: 285px;
}
html, body {
font-family: Arial, Helvetica, sans-serif;
}
/* Navigatie */
.navigation {
width: 230px;
}
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu a:hover {
background-color: #C5C5C5;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 420px;
}
.submenu a {
background-color: #999;
text-align: center;
}
.submenu a:hover {
background-color: #666;
}
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.8s ease-out;
}
center{
width:calc(100% - 230px);
display:flex;
flex-grow:1;
text-align:center;
flex-direction:column;
align-items: center;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>Trajecten
<ul class="submenu">
<li>Sport</li>
<li>Techniek</li>
<li>Moderne Menia</li>
<li>Fast Lane English</li>
</ul>
</li>
<li>2017/18
<ul class="submenu">
<li>Examenreis Berlijn</li>
<li>Examenreis Londen</li>
<li>Examenreis Parijs</li>
<li>Introductie</li>
</ul>
</li>
<li>2016/17
<ul class="submenu">
<li>Diploma uitreiking Havo</li>
<li>Diploma uitreiking Mavo</li>
<li>Introductie</li>
<li>Open Dag</li>
</ul>
</li>
</ul>
</nav>
<center>
<p id="content">2017/18</p>
<img id="picture" src="images/2017,18/Berlijn.jpg">
</center>
made a few changes,
now it's better centerd
you can make one of the menus open if you use js
Try this:
CSS
nav, center{
display: inline-block;
vertical-align: top;
}
center{
position: relative;
top: 100px;
}
Note: <center> tag is obsolete in HTML5
DEMO HERE
I want to add a linkedin icon (id="linkedin") on the right of my nav bar. I figured the simplest way would be to add a new UL element to the nav but that stretches the image and I can't get the applied styles to go away.
I've tried all:initial and all:revert but they don't seem to work.
You'll want to open the snippet on full page.
.container {
position: relative;
margin: 0 auto;
width: 94%;
max-width: 1100px; /*Stops the nav from expanding too far*/
font-family: helvetica, sans-serif;
}
#nav {
position: absolute; /*Positions nav elements within black space*/
right: 0; /*Positions nav elements to right of screen*/
top: -15px; /*Positions nav elements to top of screen*/
height: 60px;
text-transform: uppercase;
font-weight: bold;
}
#header {
z-index: 2; /*Puts elements in front of other elemtns*/
position: fixed;
width: 100%; /*Makes nav stretch to screen*/
height: 60px; /*Specifies black background height*/
line-height: 60px; /*Vertically centers nav text*/
background: #222;
color: white; /*Text color*/
}
/*LOGO*/
#header img {
width: 180px;
height: 60px;
}
#header h1 {
top: 0px;
margin: 0px;
font-size: 1.75em;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
display: block;
color: white;
text-decoration: none;
padding: 0 10px;
}
/*Nav Dropdown*/
ul ul {
display: none;
position: absolute;
background: #222;
padding: 0;
white-space: nowrap; /*Prevents dropdown elements from wrapping*/
}
#nav ul ul li {
float: none;
}
> ul {
display: block;
}
#linkedin {
all: revert;
}
/**********RESPONSIVE**********/
/* unvisited link */
a:link {
color: blue;
}
/* mouse over link - Nav*/
#nav a:hover {
color: black;
background-color: gold;
}
/* mouse over link - regular*/
.back a:hover {
color: blue;
}
/* selected link */
a:active {
color: blue;
}
/*Inactive Link*/
.inactivelink {
cursor: default;
}
<header id="header">
<div class="container">
<img src="#" alt="LOGO"/>
<nav id="nav">
<ul>
<li>Portfolio
</li>
<li>
Projects
<ul>
<li>BOOK REVIEW SITE</li>
<li><a href="#" style="";>DEMO CODE (under development)</a></li>
</ul>
</li>
<li>
Contact
<ul>
<li><p style="color:#449ff4">LinkedIn</p></li>
<li>Email Me</li>
</ul>
</li>
<li>
<img id="linkedin" src="#" alt="LinkedIn icon" height="10" width="10">
</li>
</ul>
</nav>
</div>
</header>
I would first load a reset stylesheet before your own, so it will get rid of whatever you are inheriting. I imagine this will fix it.
http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
There's a CSS rule for `'header img' in your styles which forces all images in the header to have 180px width. To overwrite that for your linkedin icon and display it in its original size, add this CSS at the end of your stylesheet:
#header #linkedin {
width: auto;
height: auto;
vertical-align: middle;
}
If the icon is displayed too big or too small that way, just use your desired size instead of auto, but only on one of the two /width/height) - the other will adjust automatically.
.container {
position: relative;
margin: 0 auto;
width: 94%;
max-width: 1100px;
/*Stops the nav from expanding too far*/
font-family: helvetica, sans-serif;
}
#nav {
position: absolute;
/*Positions nav elements within black space*/
right: 0;
/*Positions nav elements to right of screen*/
top: -15px;
/*Positions nav elements to top of screen*/
height: 60px;
text-transform: uppercase;
font-weight: bold;
}
#header {
z-index: 2;
/*Puts elements in front of other elemtns*/
position: fixed;
width: 100%;
/*Makes nav stretch to screen*/
height: 60px;
/*Specifies black background height*/
line-height: 60px;
/*Vertically centers nav text*/
background: #222;
color: white;
/*Text color*/
}
/*LOGO*/
#header img {
width: 180px;
height: 60px;
}
#header h1 {
top: 0px;
margin: 0px;
font-size: 1.75em;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
display: block;
color: white;
text-decoration: none;
padding: 0 10px;
}
/*Nav Dropdown*/
ul ul {
display: none;
position: absolute;
background: #222;
padding: 0;
white-space: nowrap;
/*Prevents dropdown elements from wrapping*/
}
#nav ul ul li {
float: none;
}
>ul {
display: block;
}
#linkedin {
all: revert;
}
/**********RESPONSIVE**********/
/* unvisited link */
a:link {
color: blue;
}
/* mouse over link - Nav*/
#nav a:hover {
color: black;
background-color: gold;
}
/* mouse over link - regular*/
.back a:hover {
color: blue;
}
/* selected link */
a:active {
color: blue;
}
/*Inactive Link*/
.inactivelink {
cursor: default;
}
#header #linkedin {
width: auto;
height: auto;
vertical-align: middle;
}
<header id="header">
<div class="container">
<img src="#" alt="LOGO" />
<nav id="nav">
<ul>
<li>Portfolio
</li>
<li>
Projects
<ul>
<li>BOOK REVIEW SITE</li>
<li><a href="#" style="" ;>DEMO CODE (under development)</a></li>
</ul>
</li>
<li>
Contact
<ul>
<li>
<a href="#">
<p style="color:#449ff4">LinkedIn</p>
</a>
</li>
<li>Email Me</li>
</ul>
</li>
<li>
<img id="linkedin" src="http://placehold.it/30x30/0fa" alt="LinkedIn icon" height="10" width="10">
</li>
</ul>
</nav>
</div>
</header>
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<div id="mainbody"></div>
</body>
</html>
CSS:
body {
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
}
#navbar {
margin: 70px 350px;
background-color: #E64A19;
position: absolute;
border: 3px solid black;
text-align: center;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
right: 86px;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
border: 1px solid black;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
#logo {
position: absolute;
top: 30px;
left: 70px;
}
#mainbody {
background: #141414;
width: 1500px;
height: 800px;
position: absolute;
bottom: 0px;
left: 50px;
}
I'm basically trying to get the navbar and site logo to show up on top of the 'mainbody'/background div; as of right now both of the other divs are hidden behind the 'mainbody' one.
I've seen some others posts on it but most just suggest to use float: left and clear: both as a solution, which hasn't worked in my case. Others have said it might be a positioning problem.
You need to use z-index. z-index specifies the stack order of the elements. The higher the number, the closer to the front the element will be.
Here's a simplified JSFiddle to show it in action. I took out HTML and CSS not necessary to the example, and changed the colours of the divs in order to see it more clearly.
I added 'z-index' of 0 on #mainbody, and z-index of 10 on #logo and #navbar.
So I want to center a h1 without an image at the center of my navigation which has 2 more elements and it has to be responsive. I tried almost everything I can find but...works mostly with background images, and with inline-block I can't center it perfectly.
Below I have the best I could do, but hover doesn't work, probably cause of h1 width which 100%;
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
text-shadow: 1px 1px 1px black;
}
li {
list-style: none;
}
header {
margin: 0 auto;
text-align: center;
}
ul li {
float: left;
display: block;
background-color: #232323;
width: 50%;
padding: 10px 0 10px 0;
}
ul li:hover {
background-color: black;
}
.logo {
position: relative;
top: -38px;
}
<header>
<nav>
<ul>
<li><a href='#blog'>Blog</a>
</li>
<li><a href='#portofolio'>Portofolio</a>
</li>
</ul>
</nav>
<a href='#/' class='logo'><h1>Tao SandBox</h1></a>
</header>
It has to be a better way!!!
http://codepen.io/taosx/pen/vNWojo?editors=110
http://codepen.io/anon/pen/OyOKrN
Make the h1 use the .logo class. Then set absolute position and center it.
.logo {
position:absolute;
top:0;
left:0;
right:0;
text-align:center;
}
I'd also recommend adding the h1 markup prior to the nav, to maintain a better semantic flow.
<header>
<nav>
<h1 class='logo'><a href='#/' >Tao SandBox</a></h1>
<ul>
<li><a href='#blog'>Blog</a></li>
<li><a href='#portofolio'>Portofolio</a></li>
</ul>
</nav>
</header>
The simplest method is just to make the logo` part of the menu like so:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: white;
text-shadow: 1px 1px 1px black;
}
ul {
overflow: hidden;
}
li {
list-style: none;
}
header {
margin: 0 auto;
text-align: center;
background-color: #232323;
}
ul li {
float: left;
width: 33%;
vertical-align: middle;
}
ul li:hover {
background-color: black;
}
<header>
<nav>
<ul>
<li><a href='#blog'>Blog</a>
</li>
<li><a href='#/' class='logo'><h1>Tao SandBox</h1></a>
</li>
<li><a href='#portofolio'>Portofolio</a>
</li>
</ul>
</nav>
</header>
Using the following CSS, I'm trying to make a navigation bar at the top of the page (fixed to the top) but instead of it being on the absolute left of the screen, I want it centered.
ul#list-nav
{
position:fixed;
top:0;
left:0;
margin:auto;
padding:0px;
width:100%;
height:28px;
font-size:120%;
display:inline;
text-decoration:none;
list-style:none;
background-color: #1F1F1F;
border:none;
z-index:1000;
}
ul#list-nav li
{
float:left;
}
ul#list-nav a
{
background-color:#1F1F1F;
color:#C4C4C4;
/*display:block;*/
padding:5px 15px;
text-align: center;
text-decoration:none;
font-size:14px;
}
ul#list-nav a:hover
{
background-color:#4D4D4D;
text-decoration:none;
}
ul#list-nav a:active
{
background-color:#9C9C9C;
text-decoration:none;
}
Attempts so far make it a vertical list, or make the buttons start in the center (rather than be centered). How can I accomplish this?
EDIT: below is the HTML ... this list is the only thing being styled.
<ul id="list-nav">
<li>Home</li>
<li>Projects</li>
<li>Opinion</li>
<li>Humour</li>
<li>Games</li>
<li>Movies</li>
<li>TV Shows</li>
</ul>
EDIT2: here's a jsFiddle if this helps
http://jsfiddle.net/752jU/1/
You only need one wrapper div to accomplish this...
http://jsfiddle.net/752jU/5/
Note: By using display: inline my answer is also good in IE 6 & 7, if that matters.
CSS:
div#wrapper {
position: fixed;
top: 0;
width: 100%;
text-align: center;
height:28px;
background-color: #1F1F1F;
border: none;
z-index: 1000;
}
ul#list-nav {
padding: 0px;
width: auto;
font-size: 120%;
text-decoration: none;
list-style: none;
}
ul#list-nav li {
display: inline;
}
HTML:
<div id="wrapper">
<ul id="list-nav">
<li>Home</li>
<li>Projects</li>
<li>Opinion</li>
<li>Humour</li>
<li>Games</li>
<li>Movies</li>
<li>TV Shows</li>
</ul>
</div>
You need to insert the list in 3 nested divs:
In your css:
div#container1
{
position:fixed;
top:0;
left:0;
width:100%
}
div#container2
{
margin-left:auto;
margin-right:auto;
text-align: center;
}
div#container3
{
display:inline-block;
}
Then in your html:
<div id="container1">
<div id="container2">
<div id="container3">
<ul id="list-nav">
...
</ul>
</div>
</div>
</div>
See http://jsfiddle.net/jZQ4v/ for a version of your code that center properly
Use:
#list-nav {
padding: 0px;
height: 28px;
font-size: 120%;
margin: auto;
text-align: center;
list-style: none;
background-color: #1F1F1F;
border: none;
z-index: 1000;
}
#list-nav li {
display: inline;
text-align: center;
}
#list-nav a {
color: #C4C4C4;
background-color: #1F1F1F;
display: inline;
text-decoration: none;
padding: 5px 15px;
font-size: 14px;
}
#list-nav a:hover {
background-color: #4D4D4D;
text-decoration: none;
}
#list-nav a:active {
background-color: #9C9C9C;
text-decoration: none;
}
I removed all unnecessary coding which didn't alter the menu in any way.
See a live demo here: http://jsfiddle.net/YFDeX/1/
Edit: Altered for compatibility with IE6+
Hope this helps.