I know that multiple questions has been discussed on this subject, I coped and pasted every suggestion/answers.. None of them work, please help!
Remember I would like the content, when scrolled to not overlap the menubar.
My Problem
Here is the image.
When ever I scroll the center div(the one that says "this website is dedicated to games") overlaps the menu bar.
How do I prevent this from happening?
Here's another image
Code Id(s)
Center div that is colored black. id="divCenter".
Element that is being overlapped("menu bar). id="NavDivef"
Code, html
<!DOCTYPE html>
<html>
<head>
<title>Home:</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav id="nav">
<div id="maindic">
<div id="NavDivef">
<ul>
<h1>CPG</h1>
<li>Contact</li>
<li>Find out more</li>
<li>Contact</li>
<li>Find out more</li>
</ul>
</div>
</div>
</nav>
<center>
<div id="divCenter">
<p>
This website is dedicated to games.
</p>
</div>
</center>
<img alt="" id="gameImage" src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg"/>
</body>
</html>
Code, css
body{
font-family: arial, sens-serif;
background-size: cover;
}
*{
padding: 0px;
margin: 0px;
}
#NavDivef ul{
width: 100%;
height: 80px;
background-color: black;
line-height: 80px;
position: fixed;
line-height: 80px;
opacity: 0.8;
}
#NavDivef ul li{
list-style-type: none;
display: inline-block;
float: right;
}
#NavDivef ul a{
text-decoration: none;
padding: 30px;
color:White;
}
#NavDivef ul li:hover{
background: orangered;
color: #cc0000;
}
#NavDivef h1{
color:red;
width: 300px;
float: left;
font-size: 480%;
margin-left: 15px;
}
#divCenter{
position: absolute;
width: 50%;
height: 54%;
background-color: black;
margin-top: 280px;
margin-left: 350px;
}
#divCenter p{
color:red;
margin-top: 30px;
margin-left: 30px;
font-size: 40px;
}
#divExample{
width: 600px;
height: 700px
}
Thank you in advance.
Related
I've been trying to create a pretty basic CSS navbar, comprised of a "navbar" container div, and within that a "logo" div and a "menu" div.
However, I seem to have run into some trouble with getting the "menu" div (which contains an unordered list of links) to nest within the "navbar" container div.
Perhaps I'm missing something very simple, but I've tried doing some Googling and can't seem to find a solution to this issue.
I did see a tutorial that showed how to create a similar type of navbar using only an unordered list, but given that I'm also looking to have a logo and potentially other elements in the navbar, I don't think that's what I'm looking for.
Please see below for the HTML and CSS that I've been working with. Any assistance would be greatly appreciated.
Thanks!
body{
padding: 0px;
margin: 0px;
}
.navbar{
height: 50px;
width: 100%;
background: #b4cef7;
}
.logo{
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul{
list-style-type: none;
}
.navbar ul li{
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a{
text-decoration: none;
color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Simple CSS Navbar</title>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
You have a set height on the navbar and a block level element, forcing the navbar to a new line.
There's many ways you could have the elements on the same line, such as floating or displaying inline-block.
Here's a simple demo of using inline-block:
body {
padding: 0px;
margin: 0px;
}
.navbar {
height: 50px;
width: 100%;
background: #b4cef7;
}
.navbar>* {
display: inline-block;
vertical-align: top;
}
.logo {
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.navbar ul li {
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a {
text-decoration: none;
color: black;
}
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
There isn't generally a option you should use, be it inline-block, floating, or flexbox; it really just depends on your preferences and target browsers.
I am having some problems with floated nav. As can be seen in the first image below, I use position in my code and the result is that the nav is floated above the logo when I scaled the browser.
But I want the nav and the logo to be separated (like the second image) whenever I scale the browser. What should I do?
Are there any other ways to do that without using float?
This my my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<style>
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav{
float: right;
position: absolute;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="images\logo.png" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
There are many ways to do that. Here's one:
Add this to your style:
nav {margin-left: 50px;}
Here is one version where nav floats right: jsfiddle
CSS:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
margin-left: 50px;
}
/* width is set to 80% and nav floats right, no pos absolute */
header nav{
float: right;
width: 80%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
This is other method using display:flex.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header {
display: flex !important;
justify-content: space-between;
}
.logo img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
#media screen and (max-width:1024px){
.logo {
width: 20%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/250x150/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
You might need to adjust the widths a little bit. You can add max-width and min-with to both your logo and nav too.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
/* add the width and margin to your logo class*/
header .logo{
float: left;
margin-right:2%;
width:26%;
}
/* make sure your image has a width */
header .logo img{
width:100%;
}
/* add the width to your nav class */
header nav{
float: right;
width:70%;
padding-top:5%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
This is one method using float:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav {
float: right;
position: relative;
margin-top: 35px;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
#media screen and (max-width:1169px){
header .logo {
width: 19%;
}
}
#media screen and (max-width:767px){
header .logo {
width: 15%;
}
header a {
padding: 5px;
font-size: 14px;
}
header nav {
margin-top: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
So I'm REALLY new to HTML and brackets, however I have a little navigation bar going. That's pretty much it. What I want to ask is, how do I make it so when I press one of the buttons in the bar, that button leads to another page? This is the code:
Index.html:
<DOCTYPE Html>
<html>
<head>
<title>Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="Maindiv">
<div id="navdiv">
<u1>
<h1>The Turtle House</h1>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Information</li>
<li>Care Guide</li>
</u1>
</div>
</div>
</body>
</html>
Style.css:
body{
font-family: arial, sans-serif;
}
*{
padding: 0px;
margin: 0px;
}
#maindiv{
width: 100%;
height: 1000px;
background: url(img/RiverRock.jpg) repeat;
background-size: cover;
}
#navdiv u1{
width: 100%;
height: 80px;
background: #648DA0;
line-height: 80px;
color: white;
float: right;
}
#navdiv u1 a{
text-decoration: none;
color: white;
padding: 20px;
}
#navdiv u1 li {
list-style-type: none;
display: inline-block;
float: right;
}
#navdiv u1 li:hover{
background: #8FB0BF;
transition:all 0.40s;
}
#navdiv h1{
width: 300px;
float: left;
cursor: pointer;
margin-left: 15px;
}
Thanks.
Put the page name in the anchor link href:
<li>Contact</li>
So I cant find a way to keep this navbar in my website from automatically putting itself over top of a header image! I try setting the navbar's position to relative, but that doesn't do anything! I wanna keep my header image's position to be both top and left 0, but without setting the images position to absolute, I cannot get the image to stay at 0 top and left on the screen!
body {
font-family: Roboto;
background-color: #F0F0F0;
}
.header-img {
position: absolute;
background-repeat: no-repeat;
top: 0px;
left: 0px;
}
.navbar ul {
list-style-type: none;
color: white;
position: relative;
}
.navbar ul li {
border: 1px solid black;
padding-right: 2em;
padding-left: 2em;
display: inline;
}
<!DOCTYPE html>
<head>
<title>Official Rusty Ohio Server</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<img src="rusty ohio background.png" class="header-img" width="100%" height="95%">
<nav class="navbar">
<ul>
<li>Plugins</li>
<li>Server Status</li>
<li>Donate</li>
</ul>
</nav>
</body>
</html>
try this in css
.navbar{
position: absolute;
z-index: 11;
}
.header-img{
z-index:10;
}
I would recommend using a background image which will give you more control over the image re-sizing respective to your container. You can implement something like below to achieve what you want.
body {
font-family: Roboto;
background-color: #F0F0F0;
}
#header-wrapper {
width: 100%;
height: 50px;
}
.header-img {
float: left;
width: 100px;
margin: 0px;
height: 100%;
background-image: url("http://cdn6.bigcommerce.com/s-kjbnzo2/products/12634/images/13240/LP_8206__81949.1444680903.500.500__96128.1446754363.1280.1280.jpg?c=2");
background-repeat: no-repeat;
background-size: auto 100%;
top: 0px;
left: 0px;
}
.navbar {
float: left;
width: 80%;
}
.navbar ul {
list-style-type: none;
color: white;
position: relative;
}
.navbar ul li {
border: 1px solid black;
padding-right: 2em;
padding-left: 2em;
display: inline;
}
<div id="header-wrapper">
<div class="header-img"></div>
<nav class="navbar">
<ul>
<li>Plugins</li>
<li>Server Status</li>
<li>Donate</li>
</ul>
</nav>
</div>
I'm having a small issue with some CSS/HTML. I'm unsure what it is. I think its me being stupid but i'm unsure...
The issue is this white line:
CSS
body{
width: 100%;
color: white;
margin: 0 0;
}
.main-header nav{
height: 40px;
width: 100%;
background-image:url('img/menu-bg.png');
padding: 15px 0px;
}
.main-header .logo{
float: left;
vertical-align: middle;
line-height: 12.5px;
}
.main-header .logo a:hover{
color:white;
text-decoration:none;
font-size: 150%
}
.main-header ul{
float: right;
list-style: none;
vertical-align: middle;
line-height: 12.5px;
}
.main-header ul li{
display: inline;
padding: 5px 5px;
}
.main-header nav a{
color:white;
text-decoration:none;
font-size: 150%
}
.main-header nav a:hover{
text-decoration:underline;
color: #FFBB00;
}
.main-header .nav-line{
width: 100%;
padding: 3px 0px;
background-color: #FFBB00;
color: #fff;
overflow: hidden;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Project 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<nav>
<div class="logo">
<h2>Project 2</h2>
</div>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Features</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Team</li>
</ul>
</nav>
<div class="nav-line"></div>
</header>
</body>
</html>
The Logo is pushing the line. Its line height is too tall to fit into the parent, so, setting .main-header .logo {line-height: 11px;} solves it.
Note that this is not the only solution, but is the solution which points the origin of the gap. You could also solve this by setting a height on the parent and overflow hidden.
Removing the overflow:hidden from the .nav-line div fixes it.
jsFiddle example
Or add overflow:auto; to your nav:
.main-header nav {
height: 40px;
width: 100%;
background:#000;
padding: 15px 0px;
overflow:auto;
}
jsFiddle example
Either way your top container content is pushing the content below it down by about a pixel.
I think your problem is the img/menu-bg.png who have one line of white pixels or 60% black.
Why you don't use background:#000; ?