I'm trying to make my #logo element disappear once the screen gets smaller than 670px. It works in that the logo disappears but it takes my navigation with it for some reason. Why is my nav ul disappearing?
The Code:
header {
position: fixed;
background-image: url(img/grey-bg.jpg);
background-size: cover;
width: 100%;
height: 8%;
min-height: 50px;
z-index: 2;
}
header nav ul {
position: relative;
margin-top: -28px;
margin-right: 5%;
z-index: 3;
}
header li {
font-size: 1rem;
font-family: 'Cabin Sketch', cursive;
float: right;
color: #fff;
padding-right: 30px;
z-index: 3;
}
#logo {
height: 75%;
margin-top: 5px;
margin-left: 10%;
}
#media screen and (max-width: 670px) {
#logo {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jovial Entertainment | Home</title>
<link href="main.css" type="text/css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Cabin+Sketch'rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<img src="img/JOVIAL-LOGO-TEXT.png" id="logo"/>
<nav>
<ul>
<li>VIDEOS</li>
<li>ABOUT</li>
<li>PHOTOS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</body>
</html>
Because you changed it to display: none, it's not there on the page any more, therefore there's nothing to take up the space where it once was, so your nav is moving over to where the logo was. Try visibility: hidden instead.
You have negative margin on your navigation, so once you remove the logo your navigation just goes above the top of the screen. You need to set margin top of your navigation to zero in your media query.
Related
I am trying to position a div in the center of a grid header but many of my attempts have failed.
Here's link to code pen: https://codepen.io/ZeePintor/pen/OKxLRe
Here's the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ermesinde Clube de Karaté</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:900|Work+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="brand">
<img src="/images/eck_logo.png">
<div class="page-headers">
<h1>ECK</h1>
<h3>ERMESINDE CLUBE KARATE</h3>
</div>
</div>
</div>
<div class="section1">Section1</div>
<div class="section2">Section2</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
And here is the css:
.wrapper{
display:grid;
width:100%;
background-color:#e3e3e3;
grid-template-rows:
[grid-start hd-start] 100vh
[hd-end sc1-start] 100vh
[sc1-end sc2-start] 100vh
[sc2-end ft-start] 125px
[ft-end grid-end];
grid-template-columns: 100%;
}
div div:hover{
border:1px solid black;
}
/*
HEADER
*/
.header{
grid-row:hd;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/black_belt_stock_photo.jpg);
}
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
}
.brand img{
border: 2px rgb(109, 12, 12) solid;
border-radius: 50%;
}
.brand h1{
color:white;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
}
.brand h3{
color:white;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.section1{
grid-row:sc1;
}
.section2{
grid-row:sc2;
}
.footer{
grid-row:ft;
}
This is supposed to be the big header of the page to when people open the page, animations might be added to the headers and image, but first I would like to center vertically while aligning the element to the far right.
I have tried to move around in the css with somethings like:
- position:absolute;
- vertically-align:center;
- justify-content:right; align-content:center;
But none of these worked for me, so please could someone help me?
Thank you.
This might work for you:
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
position: absolute;
right: 2rem;
top: 50%;
margin-top: -160px; /* 1/2 image height */
}
After looking on stackoverflow for really long i could not find an answer to my question, so that's why i am asking it instead!
There's a strange white part between my navigation bar and main container, which i tested by just typing a under the bar
This is my code:
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: gray;
}
#wrapper {
margin: 32px 160px 0 160px;
background-color: white;
height: 90%;
}
#nav {
background-color: #48D1CC;
margin: 0;
padding: 0;
}
#nav ul li {
margin: -7px 4px 1px 0;
background-color: #48D1CC;
width: 19.5%;
height: 42px;
display: inline-block;
text-decoration: none;
text-align: center;
color: black;
}
#nav a {
line-height: 42px;
font-family: arial, serif;
font-size: 20px;
}
#nav ul li:hover {
background-color: #40E0D0;
}
#right {
margin: 0;
width: 15%;
height: 10px;
color: black;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home</li>
<li>Help</li>
<li>Contact</li>
<li>Forum</li>
<li>Info</li>
</ul>
</div>
a
<noscript>Please enable JavaScript, you have it disabled</noscript>
</div>
</body>
</html>
I am not sure why this happens, so some help would be great to have.
Your ul has a 16px bottom margin
#nav ul {
margin-bottom: 16px;
}
NOTE the next time you face a similar problem try using Chrome Dev Tools (prssing f12) or FireBug to analyze the elements with an unexpected behaviour
Your <ul> tag is adding padding by default. Override it by adding:
ul{
margin-bottom: -1px;
}
I have the following HTML5 code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header, nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
header {
border-color: red;
}
img.mainpicture {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<img class="mainpicture" src="http://s29.postimg.org/ajjbb0n07/apic.jpg" alt="A picture"/></header><nav>Navigation area.</nav>
</body>
</html>
Can someone please explain why there is about 5 pixels of empty space between the <header> and the <nav> content, and how can I remove it?
By adding
header {
padding-bottom: 1px;
}
to the CSS file, the height of the white space is extended by one pixel, so it doesn't seem to have anything to do with the padding of <header>.
EDIT: I would like to do it without using <nav style="position: relative; top:-7px;">.
Set display block on the image for fixing fitting issues.
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header,
nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
img.mainpicture {
width: 100%;
display: block;
}
<header>
<img class="mainpicture" src="//lorempicsum.com/futurama/960/200/2" alt="A picture" />
</header>
<nav>
Navigation area.
</nav>
Just add
img.mainpicture{
.....................
.....................
vertical-align: top;
}
That will fix the issue:)
It could be because of the inner elements having a margin, that is protruding outside! And also since you have an <img />, give a display: block; to it. Try overflow: hidden; for both header, nav:
header, nav {
overflow: hidden;
}
header img {
display: block;
}
Set the property margin-bottom equal to zero.
margin-bottom: 0;
I have a section containing a anchor tag containing a h1, the h1 has a background image, when I hover over the h1 background image the position change to imitate a rollover, however, the rollover is also active outside of the h1 to the right of it try hovering to the right, I have tried to get rid of margins and padding to no avail.
Here is the site live
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<section id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<h1>Springmethod.com</h1>
</section>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#siteThumbs h1 {
background: url("../images/springmethod.jpg");
width: 321px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover h1 {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
You can nest the h1 within a div, setting the div's width to achieve the desired effect.
<a href="#">
<div style="width: 100px">
<h1>Springmethod.com</h1>
</div>
</a>
I'm working on a CSS layout, but I don't understand why the background color of my navigation bar doesn't show up unless I add overflow: hidden to the CSS. Can someone explain to me what's going on? Thanks :)
My CSS file:
#import "reset.css"; /* Meyer's CSS reset */
body { background-color: #f3f3f3; font: 15px sans-serif; }
#wrapper {
width: 1000px;
margin: 0 auto;
}
#navigation {
width: inherit;
margin-top: 20px;
background-color: #ccc;
overflow: hidden;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
padding: 10px 10px;
text-decoration: none;
color: #000;
}
#navigation li a:hover {
background-color: #aaa;
}
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Nav0</li>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
</ul>
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
overflow: hidden causes the container to establish a new formatting context within which to contain the floats. Without it, the floated elements form their own formatting contexts and display independently of the container, out of normal flow.
You should use a clear fix class (either an empty element after the <ul> or use a clear fix class on the <ul> so the browser will properly clear the floats.
.clearfix {
zoom:1;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Is one I use most of the time. Here is a fiddle of it in action: http://jsfiddle.net/gpQ2f/1/