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; ?
Related
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>
Somehow there is this fixed white space between the name "Larry Rosenburg" and the picture below it. No matter how I change the margin, it doesn't affect the distance. Here is a screen shot screenshot!
How can i shorten the white space?
here is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Larry Rosenburg Official Website </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src ="lincoln.jpg" width ="27%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home </li>
<li> Lincoln </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</div>
</header>
<div class="clearfix"> </div>
<div id="title">
<p>Larry Rosenburg </p>
</div>
<div id="profile">
<img src="picture.jpg" width="25%" alt="" id="profile-pic" >
</div>
</body>
<footer>
</footer>
</html>
And here is the css:
body{
width: 100%;
}
#logo_picture{
margin-left: 80px;
}
#logo img, #logo nav{
float: left;
}
#logo nav{
line-height: 120px;
margin-left: 250px;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li{
display: inline;
}
nav a{
color: black;
font-size: 20px;
font-family:'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration:none;
}
nav a, nav a:visited {
color: black;
}
nav a.selected, nav a:hover{
color: grey;
}
#title{
font-size: 70px;
margin-top: 70px;
margin-bottom: 0;
text-align: center;
font-family: 'Anton','sans-serif';
}
#profile-pic{
border-radius: 30px;
background: url('picture.jpg');
margin: 30px auto;
display: block;
padding: 0;
border-top: 0;
}
.clearfix {
clear: both;
}
Your CSS margin: 30px auto; of #profile-pic sets the top and bottom margin as 30px. That is the white space you are seeing. Either set the margin individually or set it all at once. Don't use the current style.
Before posting questions like this, please try to inspect the html element using any Web Browser. All web browsers shows the layout and margins of elements. It would help you in solving issues faster.
I have edited this. now you may try this because it works fine in my device.
#profile-pic {
background: rgba(0, 0, 0, 0) url("picture.jpg") repeat scroll 0 0;
border-radius: 30px;
border-top: 0 none;
display: block;
margin: -60px auto;
padding: 0;
}
[here the screenshot][checked]
Try this.
<p style="margin-bottom:0px">Larry Rosenburg </p>
There might be some margin-top on the image as well.
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.
There is a little white gap in between the top of my navigation bar and the bottom of my logo graphics. How can I get these to stick together? Am I missing a selector like header or nav? Maybe I missed a declaration?
body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
border: 5px solid #0009bc;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 140px;
font-weight: bold;
color: #20dbd4;
background-color: #000000;
text-align: center;
padding: 12px;
text-decoration: underline;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #20dbd4;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow, noarchive"/>
<title>Grid Design</title>
</head>
<body>
<header>
<img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/>
</header>
<nav>
<ul>
<li>home</li>
<li>news</li>
<li>about</li>
<li>products</li>
<li>photos</li>
<li>contact</li>
</ul>
</nav>
</body>
</html>
Just declare the image as display:block and then centre as required.
The image is display:inline by default which means it is affected by whitespace...making the image into block element resolves the issue.
JSfiddle Demo
CSS
header img {
display: block;
margin: 0 auto;
}
You could set the margin of the nav to -4 so:
CSS:
nav {
margin: -4px 0 0 0;
}
But this is not the only way...actually this should be your last resort !! There are several better ways to do this.
I have this basic navigation bar, and I want to make the menu buttons centered, and also I want a separating line between them. Also I think my code may have some unnecessary parts.
Here is an image of what I am trying to create:
Here is my source code:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>NOT!fy</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="nav" align="center">
<span>
<ul>
<li><img src="img/notify_icon.png" alt="notify_icon" width="30px" /></li>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</span>
</div>
</body>
</html>
And here is my CSS file:
#charset "utf-8";
/* CSS Document */
#nav {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
margin-left:auto;
margin-right:auto;
background-color: #353539;
height: 50px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
}
#nav ul {
padding: 7px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#nav ul li {
list-style-type: none;
text-align: center;
float: left;
margin: 0px;
padding-left:50px;
}
#nav ul li a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: block;
padding: 10px;
margin: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
body
{
background-color:#c5c5c5;
}
DEMO
This should do what you like.
margin:0 auto centers elements on the page, so you simply had to set the li parent to an auto width with this css attatched.