I'm just new to front end coding, I am facing some problems about the margin here.
I have a #header div as a base, and other div inside it.
body {
margin: 0;
padding: 0;
}
#header {
max-width: 100%;
height: 135px;
background-color: #ebebeb;
}
#headWrapper {
max-width: 1200px;
height: 85px;
margin: auto;
float: left;
}
.logo {
background-image: url("img/logo.png");
float: left;
width: 350px;
height: 78px;
margin-top: 20px;
}
#naviWrapper {
float: left;
max-width: 530px;
height: 40px;
margin-left: 275px;
font-family: 'Open Sans', sans-serif;
margin-top: 50px;
}
.homeBTN,
.aboutBTN,
.productBTN,
.solutionBTN,
.contactBTN {
float: left;
margin: 5 20;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="headWrapper">
<div class="logo"></div>
<div id="naviWrapper">
<div class="homeBTN">Home</div>
<div class="aboutBTN">About us</div>
<div class="productBTN">Products</div>
<div class="solutionBTN">Solutions</div>
<div class="contactBTN">Contact us</div>
</div>
</div>
</div>
</body>
</html>
My problem is the inside div if I add margin-top on it, the whole div will goes down together, how can I just move the div inside the #header? Is there anything wrong with my code?
There are many problems with your code.
Summary of the changes:
Remove all margins, floats and heights.
For the navigation links use the instead of divs and consider having ul li a structure.
Then to position the navigation vertically in the middle:
Add to #header container a display: table;
Add to #headWrapper a display: table-cell; vertical-align: middle;
To align the navigation's text in the middle use text-align: center;
Code:
body {
margin: 0;
padding: 0;
}
#header {
display: table;
max-width: 100%;
height: 135px;
background-color: #ebebeb;
width: 100%;
}
#headWrapper {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 40px;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
#naviWrapper a {
text-decoration: none;
padding: 10px;
}
#naviWrapper ul li {
list-style: none;
display: inline-block;
}
.logo {
background-image: url("img/logo.png");
float: left;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="headWrapper">
<div class="logo"></div>
<nav id="naviWrapper">
<ul>
<li>Home
</li>
<li>About us
</li>
<li>Products
</li>
<li>Solutions
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
Related
Pretty frustrating when something as simple as this has me stuck! I've tried many different things, but for some reason, it's stuck in the vertical display.
Relevant HTML
body {
margin: 0 auto;
max-width: 90%;
min-width: 45%;
background-color: #dadada;
height: 100%;
}
header {
background-color: black;
max-width: 90%;
min-width: 45%;
margin: 0 auto;
margin-top: 1%;
font-family: typographica;
padding: 45px;
}
.logo h1 {
text-align: center;
}
h1 {
color: white;
font-size: 300%;
margin-left: 3%;
position: absolute;
top: 2%;
}
ul li a {
color: white !important;
text-decoration: none;
width: 50%;
position: relative;
}
.nav li {
float: none;
display: inline;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Title</title>
<link href="../Style Docs/Home-page.css" type="text/css" rel="stylesheet" >
</head>
<body>
<header>
<div type="logo">
<h1>Name</h1>
</div>
<div type="head-wrap">
<ul type="nav">
<li>Home</li>
<li>Discover</li>
<li>Upload</li>
<li>More</li>
</ul>
</div>
<div id="decoration-banner">
</div>
</header>
</body>
</html>
Like I said, I've tried a lot of different things, but I must be missing something. I'm not sure if it's because of the way I wrote my html or what, but I haven't had this problem before..
Your CSS is looking for a class called .nav. If you look at your <ul>, you meant to use the attribute class but instead used type.
<ul type="nav">
</ul>
Should be
<ul class="nav">
</ul>
In your CSS you're calling a .nav li. If you call with a dot, you call a class in CSS.
Just renamed type by class and it works now.
body {
margin: 0 auto;
max-width: 90%;
min-width: 45%;
background-color: #dadada;
height: 100%;
}
header {
background-color: black;
max-width: 90%;
min-width: 45%;
margin: 0 auto;
margin-top: 1%;
font-family: typographica;
padding: 45px;
}
.logo h1 {
text-align: center;
}
h1 {
color: white;
font-size: 300%;
margin-left: 3%;
position: absolute;
top: 2%;
}
ul li a {
color: white !important;
text-decoration: none;
width: 50%;
position: relative;
}
.nav li {
float: none;
display: inline;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Title</title>
<link href="../Style Docs/Home-page.css" type="text/css" rel="stylesheet" >
</head>
<body>
<header>
<div type="logo">
<h1>Name</h1>
</div>
<div type="head-wrap">
<ul class="nav">
<li>Home</li>
<li>Discover</li>
<li>Upload</li>
<li>More</li>
</ul>
</div>
<div id="decoration-banner">
</div>
</header>
</body>
</html>
I can think of these two possible ways of doing it:
1. change it into a table
<table style="width:50%; margin-left: auto; margin-right: auto;">
<tr>
<td>
Home
</td>
<td>
Discover
</td>
<td>
Upload
</td>
<td>
More
</td>
</tr>
</table>
2. Use flex and flex-direction
<div type="head-wrap" >
<ul type="nav" style="display: flex; flex-direction: row">
<li>Home</li>
<li>Discover</li>
<li>Upload</li>
<li>More</li>
</ul>
</div>
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>
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.
i have searched about and can't seem to find the answer I am looking for.
I want to know how to move my div down below my fixed header.
#import url(http://fonts.googleapis.com/css?family=Oswald);
body {
width: 100%;
margin: auto;
}
.container {
width: 75%;
margin: 0 auto;
}
.header {
background: #6396bc;
width: 100%;
top: 0;
position: fixed;
}
.logo {
float: left;
font-family: "Oswald", sans-serif;
font-size: 15px;
margin-left: 15%
}
a {
text-decoration: none;
color: white;
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: "Oswald", sans-serif
}
.nav {
float: right;
margin-right: 15%
}
<!DOCTYPE html>
<html>
<head>
<title>team Zeus | Home</title>
<link rel="stylesheet" href="../stylesheets/styles.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1>team Zeus</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Page</li>
<li>Another page</li>
<li>1 other page</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>I copied and pasted some article from Wikipedia in here, you could do that too (to test out the header at the top)</p>
</div>
</body>
</html>
I think it is something to do with the containers, because when I try and resize them with width, it just messes the full page around. I cannot figure it out
Thanks
You mean just move the content down below the header? If that's what you want just position the content div like this:
.div {
position:relative;
top: 100px;
}
i think this will definately help
As the title says I seem to be encountering issues with my css and I cant for the life of me figure out why. Everything looks correct to me, so I decided to bring it to stack overflow to get some help. Here is my code below
header {
height: 70px;
width: 100%;
background: url("../img/header.svg");
background-size: cover; }
header #logo {
float: left;
display: inline-block;
margin: 10px 0 0 50px;
width: 112px;
height: 50%; }
header nav {
float: right;
margin-right: 50px;
display: inline-block;
height: 70px;
width: 435px; }
header nav a#pull {
display: none; }
header nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 70px; }
header nav ul li {
line-height: 70px;
margin: 0 15px;
display: inline;
list-style: none; }
header nav ul li a {
text-decoration: none;
text-transform: capitalize;
font-family: Helvetica;
font-size: 20px;
color: #ffffff;
line-height: 35px; }
#media (max-width: 584px) {
header {
height: 200px; }
header #logo {
display: block; }
header nav {
width: 100%;
height: 80px;
margin: auto; }
header nav ul {
width: 100%;
display: block;
height: auto;
margin: auto; }
}
and this is my html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/style.css"/>
<title></title>
</head>
<body>
<Header>
<img id="logo" src="img/caseywoelfle.svg" alt="Logo"/>
<nav class="clearfix">
<ul class="clearfix">
<li>home</li>
<li>about me</li>
<li>portfolio</li>
<li>contact</li>
</ul>
Menu
</nav>
</Header>
<div id="homepage">
<div id="banner">
<img id="bannerLogo" src="img/caseywoelfle.svg" alt=""/>
<p id="wd">web development</p>
<a id="fomLink" style="display:block" href="about.html">
<div id="fom">
<p>find out more</p>
</div>
</a>
</div>
<footer>
</footer>
</body>
</html>
The main issue I am facing is my media query is not happen at the amount of pixels I specified. On some browsers it happens before, and on others it happens to late after.
You need to add media type like print or screen. Read more here, about media query here.
#media screen and (max-width: 584px)
You need to make sure that you are providing the mediatype as part of the query. This describes the selected output which could be screen or print for instance.
So in your code you need to add the following: #media screen and (max-width: 584px) {
I created a fiddle here:
http://jsfiddle.net/2rgxfmak/