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.
Related
I am working on a horizontal navigation bar with a dropdown menu. I'm quite new to making codes so this is maybe a stupid question. My navigation is sticking to the left of my website, but I need it to stay in line with the text and I can't get the navigation bar threw my whole webpage how do I fix this?
photo of my website with the 2 problems:
enter image description here
nav {
position: absolute;
}
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
width: 70px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
h1 {
margin-top: 80px;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Two things in your css are giving you trouble.
nav{ position: absolute; } means this div will not fill the width.
horizontal{ margin: 40 auto;} 40 is not valid.
You MUST specify a measurement unit in CSS, so it should be 40px if I'm guessing your intention, but other units are available.
Here is amended css you can try.
nav {
width: 100%;
background-color: #006600;
}
.horizontal {
list-style-type: none;
margin: 40px auto;
width: 640px;
padding: 0;
overflow: hidden;
}
Step 1) Add HTML:
Example
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
Planning
Takken
Kleding
Contact
Inschrijven
</div>
And CSS:
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 15%;; /* Four links of equal widths */
text-align: center;
}
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>
I am working on a new version of a website. Right now I am almost satisfied with the results, except one problem. The website consists of a header (with logo and menu) and a content-part. I want it to work on both larg/small-size screens.
On a small screen I encounter one problem. When I expand the menu it is on top of the content-part, but the content-part is still clickable, so the menu-options are not clickable and the menu is not working right.
What I want is as follows (for small screen, i.e. Smartphone):
- When I click 'Show Menu' all menu-options will show up (Menu1, Menu2, Menu3, Menu4) and are clickable. Underlying text (div 'page') not visible (dissapears under the menu-options).
- When I click one of the menu-options, all options in submenu will show up and are clickable. Underlying text (div 'page') not visible.
I already searched and tried many options, but not with the expected result.
Thanks in advance for any hints :)
My html is as follows:
<body>
<div id="wrapper">
<div id="logo">
<img src="#" style="width:180px;height:50px;">
</div>
<div id="menu">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>Menu1 ￬
<ul class="hidden">
<li>Submenu11</li>
<li>Submenu12</li>
</ul>
</li>
<li>Menu2 ￬
<ul class="hidden">
<li>Menu21</li>
<li>Menu22</li>
<li>Menu23</li>
</ul>
</li>
<li>Menu3 ￬
<ul class="hidden">
<li>Menu31</li>
<li>Menu32</li>
<li>Menu33</li>
</ul>
</li>
<li>Menu4 ￬
<ul class="hidden">
<li>Menu41</li>
<li>Menu42</li>
<li>Menu43</li>
<li>Menu44</li>
<li>Menu45</li>
<li>Menu46</li>
</ul>
</li>
</ul>
</div>
<div id="header">
<h3>Header</h3><hr>
</div>
<div id="pageliquid">
<div id="page">Page-text<br />
</div>
</div>
</div>
</body>
My CSS is as follows:
body {
margin: 20px;
font-family: Tahoma, Arial;
font-size: 12pt;
color: #001245;
}
#wrapper {
width: 100%;
min-width: 1000px;
max-width: 2000px;
margin: 0 auto;
}
#logo {
height: 50px;
width: 100%;
position: static;
}
#menu {
height: 50px;
width: 100%;
position: static;
}
#header {
height: 75px;
width: 100%;
position: static;
}
#pageliquid {
width: 100%;
position: static;
}
#page {
top: 200px;
max-width: 100%;
position: absolute;
overflow: scroll;
bottom: 1px;
left: 20px;
right: 0px;
}
ul, img {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
li a {
display:block;
min-width:200px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: small;
color: #fff;
background: #0b0b3b;
text-decoration: none;
}
li:hover a {
background: #0b0b3b;
}
li:hover ul a {
background: #08088a;
color: #d8d8d8;
height: 40px;
line-height: 40px;
}
li:hover ul a:hover {
background: #08088a;
color: #ffffff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: 160px;
min-width: 100px;
padding: 0 20px;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox] {
display: none;
-webkit-appearance: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
#media screen and (max-width : 760px) {
body {
margin: 0px;
}
#wrapper {
min-width: 0px;
margin: 0;
}
#header {
position: absolute;
}
#page {
left: 0px;
}
ul {
position: absolute;
width: 100%;
display: none;
}
li {
margin-bottom: 1px;
margin-right: 0px;
}
ul li, li a {
width: 100%;
}
li ul li a {
width: 100%;
padding: 0 0px;
}
.show-menu {
display:block;
}
}
The problem is with the z-index of the menu since it is underneath later elements on the page due to the fixed height and natural height of #menu and absolute positioning of that menu. You have duplicate ID's here, but forcing a higher z-index on #menu puts the navigation above other elements on the page. That also requires changing position: static; to position: relative; on #menu as well. Here's a demo - http://codepen.io/anon/pen/MJwoOL (PS - there were some overlapping issues with your nested li's and ul's that I tweaked a little in your media query, too, but are unrelated to your question here)
I'm working on a simple navigation bar with a logo on the left, an image at the center and some links on the right.
I want this all to be on one line, next to each other, but for some reason I don't manage to get the links on the same line as the rest.
You can see my work here. This is the code:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
background-color: #D8D8D8;
color: white;
border: 0;
padding: 0;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
nav {
background-color: #888888;
}
#links {
height: 30px;
padding: 10px;
margin: 0;
}
#links li {
text-align: center;
margin: 0;
height: 30px;
padding: 0;
padding-left: 10px;
padding-right: 10px;
list-style-type: none;
display: inline;
}
#container {
min-width: 624px;
min-height: 100%;
position: relative;
}
* {
margin: 0;
padding: 0;
}
#links {
overflow: auto;
list-style-type: none;
}
#links li {
height: 25px;
float: right;
margin-right: 0;
border-right: 1px solid #aaa;
padding: 0 20px;
}
#links li:first-child {
border-right: none;
}
#links li a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;
transition: all 0.5s ease;
}
#links li a:hover {
color: #666;
}
#links li.active a {
font-weight: bold;
color: #333;
}
#logo img {
height: 50px;
float: left;
margin-left: 10px;
cursor: pointer;
}
#arrow {
text-align: center;
}
#arrow img {
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
<div id="container">
<nav>
<ul id="logo">
<img src="images/logo_tekst.png">
</ul>
<ul id="arrow">
<img src="images/remove-arrow-hi.png">
</ul>
<ul id="links">
<li class="link">Pro
</li>
<li class="link">Recreative
</li>
</ul>
</nav>
</div>
The code stripped to the bare minimum with just the essentials to make the positioning work, should look something like this:
<div id="container">
<nav>
<img id="logo" src="images/logo_tekst.png" />
<img id="arrow" src="images/remove-arrow-hi.png" />
<ul id="links">
<li> Pro
</li>
<li> Recreative
</li>
</ul>
</nav>
</div>
nav {
position: relative;
}
#logo {
float: left;
}
#links {
float: right;
}
#links > li {
float: left;
margin-left: 10px;
}
#arrow {
position: absolute;
left: 50%;
width: 40px;
margin-left: -20px; /* halve the width of the image */
}
What i did:
I fixed your html, img can not be a direct child of ul, only li can. No need for any extra wrappers anyway, so I just removed them and moved the id's to the image.
to make your logo be always on the left, I just floated it left
to make your menu be always on the right, I just floated it right.
to center that arrow, I went a bit more creative. I positioned it absolute (note the relative on the nav so it will act as the reference) and set the left to 50%. This causes the left edge of the image to be in the exact center. I then moved that edge to the left, by setting the left margin to negative halve the width of the image. If you do not know the width of the image in advance (or if it isn't an image, but some sort of dynamic content) you can also do transform: translate(-50%,0) in stead of the margin-left to get the same effect.
A demo can be found here: http://jsfiddle.net/73ejv2sg/
The problem you have is you only float your logo. You need to float all elements and add padding or width to align. Also add height to nav to display the background.
Per your comments position absolute and set the left:
#arrow {
position:absolute;
left:45%;
}
Here I just set 45% but you could use JavaScript to easily grab the width of the screen and image width and force it to the center every time.
$(document).ready(function() {
var imageWidth = $("#arrow").width();
var pageWidth = $(window).width();
var left = ((pageWidth/2) - (imageWidth/2));
$("#arrow").css('left',left);
});
$(window).resize(function() {
var imageWidth = $("#arrow").width();
var pageWidth = $(window).width();
var left = ((pageWidth/2) - (imageWidth/2));
$("#arrow").css('left',left);
}
html {
height: 100%;
margin:0;
padding:0;
}
body {
height:100%;
margin:0;
background-color:#D8D8D8 ;
color:white;
border:0;
padding:0;
font-family: "Helvetica Neue",Arial, Helvetica, sans-serif;
}
nav {
background-color: #888888;
height:55px;
}
#links {
height:30px;
padding:10px;
margin:0;
}
#links li {
text-align:center;
margin:0;
height:30px;
padding:0;
padding-left:10px;
padding-right:10px;
list-style-type: none;
display:inline;
}
#container {
min-width: 624px;
min-height:100%;
position:relative;
}
* {
margin: 0;
padding: 0;
}
#links {
overflow: auto;
list-style-type: none;
float:right;
}
#links li {
height: 25px;
float: right;
margin-right: 0;
border-right: 1px solid #aaa;
padding: 0 20px;
}
#links li:first-child {
border-right: none;
}
#links li a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;
transition: all 0.5s ease;
}
#links li a:hover {
color: #666;
}
#links li.active a {
font-weight: bold;
color: #333;
}
#logo img {
height:50px;
float:left;
margin-left:10px;
cursor:pointer;
}
#arrow {
position:absolute;
left:45%;
}
#arrow img {
height:30px;
margin-top: 10px;
margin-bottom: 10px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<nav>
<ul id="logo">
<img src="images/logo_tekst.png">
</ul>
<ul id="arrow">
<img src="images/remove-arrow-hi.png">
</ul>
<ul id="links">
<li class="link">Pro</li>
<li class="link">Recreative</li>
</ul>
</nav>
</div>
I'm trying to write a simple menu for my site's backend. I'd like to acomplish that there is no space between the menu an the top of my site. It looks ok until I add a <h> or <p>
element. The menu moves about 30px down.
Why is it happening and how can I fix it?
<!DOCTYPE html>
<head >
<title>my page</title>
<link href="Styles.css" rel="stylesheet" />
</head>
<body>
<div id="PageWrapper">
<nav>
<ul id="navMenu">
<li>Home</li>
<li>Manage Books
<ul>
<li>New Book</li>
</ul>
</li>
<li>Reservations</li>
<li>Lendings</li>
<li>Back>></li>
</ul>
</nav>
<section>
<h1>Welcome to the management part of your site.</h1>
<section>
</div>
And the css file:
body {
margin: 0;
background-color: whitesmoke;
}
#PageWrapper {
width: 1000px;
margin: auto;
}
nav {
clear: both;
width: 100%;
float:left;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
}
ul#navMenu {
padding:0px;
margin:auto;
list-style: none;
}
ul#navMenu ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 0px;
margin: 0px;
}
ul#navMenu li {
display: inline;
float: left;
position: relative;
}
ul#navMenu a {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
text-transform:uppercase;
text-decoration: none;
padding: 10px 0px;
width: 150px;
background: #666666;
color: #ffffff;
float: left;
text-align: center;
border-right: 1px solid #ffffff;
}
ul#navMenu a:hover {
background: #cccccc;
color: #333333;
}
ul#navMenu li:hover ul {
display: block;
}
ul#navMenu ul a {
width: 150px;
}
ul#navMenu ul li {
display: block;
margin: 0px;
}
I tried to look for unwanted margins in browser developer tools but I haven't seen anything obvious.
Remove the float and clear from nav and replace with overflow:hidden to contain the floats applied to the underlying li menu items.
This forces the nav into a new block formatting context, which will display as anticipated.
Demo Fiddle
nav {
width: 100%;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
overflow:hidden;
}