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/
Related
Should be a common and not a rare question, but still I tried everything and nothing worked. So maybe this time somebody can help and this question will be for everyone to check their mistakes.
So I am making Car Service website, I am a bit of a beginner in both HTML and CSS.
This is the normal full screen mode of my browser and it looks fine:
As soon as I resize my browser size this happens with navbar
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="img/header.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services
<li>Registration
<li>Contact</li>
<li>Profile</li>
</ul>
</nav>
</div>
</header>
</body>
CSS CODE:
body{
margin: 0;
padding: 0;
background-color: black;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background-color: #25DE8B;
}
header::after{
content: '';
display: table;
clear: both;
}
.logo{
float: left;
padding: 10px 0;
}
nav{
float: right;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 35px;
position: relative;
}
nav a{
color: #012b4f;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
nav a:hover{
color: #28AA1A;
}
nav a::before{
content: '';
display: block;
height: 8px;
width: 0%;
background-color: #012b4f;
position: absolute;
top: 0;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
I need to change code so my navbar stays on its place in any case. Thanks for any help.
you use px as your units. you should use % or something else that is relative to the size of the page.
you can see more information in this link:
https://www.w3schools.com/cssref/css_units.asp
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'm making a website from scratch and all I currently have is the NAV bar. But I figured I'd get this problem solved before I continue on with development. Anytime I minimise the browser, my nav bar will not stay in a straight line. I've included the code below. The text editor I use is Brackets, I've tried multiple things for the past week but nothing has worked.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 86.5%;
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
}
.header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 0.5%;
}
nav {
float: right;
position: relative;
top: 0px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 99px;
padding-top: 25px;
position: relative;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
You are probably looking for something like this.
When I'm stuck with a layout and I cannot get it right, I start by adding borders to each element. This way you see how each element is spaced on the page and based on that I start to tweak CSS properties to place items in its place. Obviously, the more you work with CSS the easier it gets. Once I'm happy with the layout I then remove the borders.
Adjustments I've made:
Made the header full width so it covers the entire width of the page
Gave the logo 20% width of the page.
The remaining space 80% is taken up by the menu
Then each list-item is allowed to take up 20%.
If you resize the page, you'll see that by using percentages it will assign space properly. I hope this helps you along and good luck with the rest of the page.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
border: 1px solid black;
}
.logo {
float: left;
width: 19%;
border: 1px solid blue;
}
nav {
float: right;
position: relative;
top: 0px;
width: 80%;
border: 1px solid yellow;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
}
nav li {
position: relative;
display: inline-block;
width: 20%;
margin: 1rem 0;
border: 1px solid red;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
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'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>