Trying to remove the whitespace under my navigation bar, when you inspect element and disable overflow: hidden the whitespace disappears?
https://i.gyazo.com/b2f412e61b09f24348a02fd5b7d4bdf3.png > with overflow
https://i.gyazo.com/cbd9766f50c97a732064133a8a77e25a.png > without
Naturally it also removed the background color so I'd like to find another fix for this problem?
body {
font-family: 'Oxygen', sans-serif;
width: 100%;
height: 100%;
margin: 0;
background-color: #EEEEE7;
}
h1 {
font-family: 'Oxygen', sans-serif;
}
button {
color: #FE5B3C;
background-color: #2B211F;
border: none;
padding: 10px;
text-align: center;
font-size: 24px;
}
/* The dividers */
#wrapper {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
margin: 0;
background: url('images/studying.jpg');
background-size: cover;
background-position: 0;
margin-top: 0;
clear: both;
}
.container h1, p {
color: #FE5B3C;
text-align: center;
padding: .5em;
}
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
margin-bottom: 0;
padding: 0;
overflow: hidden;
white-space: no wrap;
background-color: #2B211F;
width: 100%;
}
.img-topnav {
display: block;
margin: 0;
padding: 1em;
height: 32px;
width: auto;
max-width: 100%;
float: left;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #FE5B3C;
text-align: center;
padding: 22px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
margin: 0;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #EEEEE7;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
and html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<title>Your Landing Page!</title>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT -->
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<!-- Scripts -->
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<!-- Favicon / How to Edit: Make sure the type="" is the right type. Then change the href="" to the path of the image/.ico file you'd like to use. -->
<link rel="icon" type="image/png" href="images/icons/mortarboard.png">
</head>
<body>
<div id="wrapper">
<ul class="topnav">
<li><img src="images/icons/medal.png" class="img-topnav" alt="Home">Personal Tutors</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">☰</li>
</ul>
<div class="container">
<h1>Welcome to Personal Tutors!</h1>
<button>Find a Tutor!</button>
<p> This is a test to see if the font is working. </p>
<div>
</div>
</body>
</html>
The problem has nothing to do with the overflow property. The whitespace is actually the top margin of the h1 tag.
An easy and quick fix would be to replace the h1 margin top with padding.
Try to add this to you code:
.container h1 {
margin-top: 0;
padding-top: 1em;
}
Related
I am currently making my first mockup website, fiddled around with making a navbar and having a logo on it. I've managed to do it, but now when I try to add the 'name' onto the navbar it won't show up.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #333;
height: 70px;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
float: right;
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I've tried moving the text around to different places, but it ends up moving the navbar to be under the text.
You have set .navigation-bar ul to be float: right. float removes items from the normal flow of the page, which is why it is leaving your navbar.
You can fix this using flexbox, by adding the following rules to .navigation-bar ul:
.navigation-bar ul{
...
display: flex;
justify-content: right;
}
Here are some extra observations on your code, that are unrelated to the main problem
There are several places where you have hardcoded the height of the navbar - this could instead be replaced with a CSS variable - i.e.
:root{
--navbar-height: 70px;
}
.logo {
height: calc(var(--navbar-height) - 10px);
}
#navigation-container {
height: var(--navbar-height);
}
.navigation-bar {
height: var(--navbar-height);
}
/* etc */
You should try to avoid pixel units where possible as these are not responsive - instead, the preferred unit is rems.
However, in this case I don't actually think you need to set the height - the content inside (i.e. the header, logo and navbar) should instead make the header resize. This is particularly important for responsive pages.
Adapted code:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
}
.navigation-bar {
background-color: #333;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
display: flex;
justify-content: right;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
Can't get the hover on menu links to work. I'm using Xampp for local remote testing.
.menu ul>li a:hover{
color: blue;
font-size: 3rem;
}
I've tried different selectors, etc... nothing seems to work
here is the code:
* {
box-sizing: border-box;
}
html,
body {
color: #222;
font-size: 16px;
line-height: 1.4;
height: 100%;
font-family: 'Roboto', sans-serif;
margin: 0;
}
header {
background-image: url("../images/header.jpg");
height: 70%;
width: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.about {
background-image: url("../images/bellow_header.jpg");
height: 70%;
width: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* here starts the styles for the NAvigation bar */
#logo {
font-size: 2.5rem;
text-decoration: none;
display: block !important;
text-align: center;
color: black;
margin: 1rem auto 0 auto;
font-family: 'Pacifico', cursive;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu {
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0.5rem 1.5rem;
}
.active a {
color: #CC5200!important;
font-size: 1.7rem;
font-weight: 700;
}
.menu a {
font-size: 1.5rem;
font-weight: 500;
padding: 0.3rem;
text-decoration: none;
color: black;
}
/*by default on mobile the navigation isn't visible*/
.menu li {
display: none;
color: black;
}
.menu .icon {
order: 99;
display: block;
}
.menu.menuOpen {
position: fixed;
width: 80%;
left: 10%;
flex-direction: column;
background-color: #161415;
border-radius: 1rem;
margin: 0.5rem auto;
}
/*moving the icon to the top-right corner*/
.menu.menuOpen .icon {
position: absolute;
right: 0;
top: 0;
}
.menu.menuOpen li {
display: block;
text-align: center;
color: white;
}
/*tablets */
#media only screen and (min-width: 481px) {
/* Styles */
/*hidding the icon*/
.menu .icon {
display: none!important;
}
.menu li {
display: inline-block;
margin-left: 0.5rem;
}
.menu ul>li a:hover {
color: blue;
font-size: 3rem;
}
#logo {
margin-left: 2rem;
margin-top: 1rem;
display: inline-block;
text-align: left;
}
}
/*Landscape making the background look good */
#media screen and (min-width: 481px) and (max-width: 768px) and (orientation:landscape) {
/* Landscape styles */
header {
height: 120%;
}
}
/*laptops */
#media only screen and (min-width: 769px) {
/* Styles */
#logo {
display: inline-block;
position: relative;
top: 3rem;
left: 4rem;
}
}
/*large screens */
#media only screen and (min-width: 1025px) {
/* Styles */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>StyleTravel-Home</title>
<!-- Javascript -->
<script type="text/javascript" src="scripts/app.js"></script>
<meta name="description" content="StyleTravel is one of the most used services for booking HighEnd Sejours">
<meta name="keywords" content="Sejours,StyleTravel,HighEnd,Expensive,Exotic">
<meta name="author" content="Bogdan Mihalca">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- normalize -->
<link rel="stylesheet" href="css/normalize.css">
<!--layout styles -->
<link rel="stylesheet" href="css/layout.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/favicon.png" />
</head>
<body>
<header>
StyleTravel
<nav class="menu" id="myMenu">
<ul>
<li class="active">Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li><i class="fa fa-search"></i>Search</li>
<li>
<a href="javascript:void(0);" class="icon" onclick="myResponsiveHamburger()">
<i id="hamb-icon" class="fa fa-bars"></i></a>
</li>
</ul>
</nav>
</header>
<div class="about"></div>
</body>
</html>
#logo {
font-size: 2.5rem;
text-decoration: none;
/* display: block !important; */
}
Your hover is absolutely fine but one mistake! display: block !important; this is what you put on and it is stretching and took all the visible width. So when you hovers over the links it's actually not hover over them! If you remove or unset the style it will work!
Though your hover is not looking great but it will hover if you remove the code! Here is my demo
#logo {
font-size: 2.5rem;
text-decoration: none;
display: block !important; /* Remove this ans code will work!*/
text-align: center;
color: black;
margin: 1rem auto 0 auto;
font-family: "Pacifico", cursive;
outline: 1px solid red; /* for demonestration */
background: #3333; /* for demonestration */
}
Just Remove the commented styles and it will be fine.
I am following this tutorial EDIT: changed link to specific time of video https://www.youtube.com/watch?v=XZsuI5wyRzs&feature=youtu.be&t=560 on how to make a responsive nagivation bar before I dive into the main content.
For some reason at this part of the timeline here (I saved the link to current time so you can see what I'm talking about without having to skim through the video) I followed the steps exactly, but my hamburger icon is not being activated when it is clicked in order to bring down the drop-down menu. Other than that, everything else looks pretty good. What is wrong with my code? Please take a look at it below.
Thanks
/*CSS Page*/
/*-----HTML Body-----*/
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/*----End HTML Body-----*/
/*-----Start of Navigation Bar-----*/
nav {
width: 100%;
background: #8000ff;
}
ul {
width: 50%;
margin: 0 auto;
padding: 0;
}
ul li {
list-style: none;
display: inline-block;
padding: 20px;
}
/*For mouse hover*/
ul li:hover {
background: #4dff4d;
}
/*Smartphone/Tablet: Menu Bar*/
.toggle {
width: 100%;
padding: 10px 20px;
background: #cc66ff;
text-align: right;
box-sizing: border-box;
color: #000000;
font-size: 30px;
display: none;
}
/*-----End of Navigation Bar-----*/
/* Media Queries for Smaller Screen Size Begins */
#media (max-width: 786px) {
.toggle {
display: block;
}
/* Navigation Drop down */
ul {
width: 100%;
display: none;
}
/* End Navigation Drop Down */
ul li {
display: block;
text-align: center;
}
.active {
display: block;
}
}
/* Media Queries for Smaller Screen Size Ends */
<!DOCTYPE html>
<!--HTML Page-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>test</title>
</head>
<link rel="stylesheet" href="css/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<nav>
<div class="toggle">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready() {
$('menu').click(function() {
$('ul').toggleClass('active')
})
})
</script>
</body>
</html>
2 issues...
Missing callback function on the ready event...
$(document).ready()
Need to be this...
$(document).ready(function () {
You're missing the '.' in front of 'menu' class selector...
$('menu')
Needs to be like this...
$('.menu')
Working example below...
/*CSS Page*/
/*-----HTML Body-----*/
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/*----End HTML Body-----*/
/*-----Start of Navigation Bar-----*/
nav {
width: 100%;
background: #8000ff;
}
ul {
width: 50%;
margin: 0 auto;
padding: 0;
}
ul li {
list-style: none;
display: inline-block;
padding: 20px;
}
/*For mouse hover*/
ul li:hover {
background: #4dff4d;
}
/*Smartphone/Tablet: Menu Bar*/
.toggle {
width: 100%;
padding: 10px 20px;
background: #cc66ff;
text-align: right;
box-sizing: border-box;
color: #000000;
font-size: 30px;
display: none;
}
/*-----End of Navigation Bar-----*/
/* Media Queries for Smaller Screen Size Begins */
#media (max-width: 786px) {
.toggle {
display: block;
}
/* Navigation Drop down */
ul {
width: 100%;
/* display: none; */
display: block;
height:0px;
transition: height 0.5s linear;
overflow: hidden;
}
/* End Navigation Drop Down */
ul li {
display: block;
text-align: center;
}
.active {
/* display: block; */
height: 300px;
}
}
/* Media Queries for Smaller Screen Size Ends */
<!DOCTYPE html>
<!--HTML Page-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>test</title>
</head>
<!-- <link rel="stylesheet" href="css/style.css"> -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<nav>
<div class="toggle">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.menu').click(function() {
$('ul').toggleClass('active')
})
})
</script>
</body>
</html>
Upon resizing the browser window the last <li> element in the navigation bar of this site always jumps down to a new line as the browser gets to its smallest size, rather than all the elements remaining in line. I've tried minimizing margins and padding but it hasn't resolved the issue.
I'm in the CSS portion of a web development class, and we're being asked to use max-width and mid-width properties along with percentages to size the main sections of our practice sites (to get us used to working with percentages and such), and I feel like that must be part of the issue.
Any thoughts much appreciated. I've also tried adjusting white-space property, wrapping the <nav> in another div, etc. Not sure what's gone wrong.
<!DOCTYPE html>
<html>
<head>
<!-- font-family: 'Open Sans', sans-serif; -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
* {
font-family: 'Open Sans', sans-serif;
}
* {
list-style-type: none;
}
/* Section Sizes */
body {
background-color: #ffffff;
margin: 0;
padding: 0;
width: 100%;
min-width: 480px;
}
header {
width: 100% min-width: 480px;
height: 4rem;
}
.width,
#container {
min-width: 480px;
max-width: 1080px;
margin: 0 auto;
width: 100%;
}
.width:after,
#container:after,
header:after,
ul:after,
li:after,
#articles:after {
display: table;
content: "";
clear: both;
}
/* Header Styles */
header {
border-bottom: 1px solid #0099cc;
margin-bottom: 4rem;
}
header .width h1 {
float: left;
margin: 0;
margin-right: 5rem;
margin-top: 0.7rem;
color: #ce6d0b;
font-size: 1.4rem;
font-weight: 400;
padding: 0;
}
header .width ul {
bottom: 0;
padding: 0;
}
header .width ul li {
float: left;
}
header .width ul li:last-child {
padding-right: 0;
}
header .width ul li a {
color: #8c8c8c;
text-decoration: none;
border-bottom: 10px solid transparent;
font-size: 1.1rem;
display: block;
text-align: center;
padding: 0.95rem 1.5rem;
}
header .width ul li a:hover {
border-bottom: 10px solid #0099cc;
color: #404040;
}
header .width ul .active a {
color: #404040;
border-bottom: 10px solid #0099cc;
}
</style>
</head>
<body>
<!-- global site header -->
<header>
<div class="width">
<h1>Mockup 2</h1>
<nav>
<ul>
<li class="active">Dashboard
</li>
<li>Section 2
</li>
<li>Section 3
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
http://jsbin.com/vahemoy/edit?html,output
Thank you.
Elements with float: left will wrap like text does if there isn't enough room. What you have to do is make sure there's always enough room for all your elements inside their container. In this case, the last li wraps at 572px for me, but you have min-width set to 480px.
Try increasing your min-width. Then when the window shrinks, you'll get a scroll bar to see the rest of your content, rather than having it wrap.
I am not able to get this code working properly on IE-8. I am sorry as I am beginner in CSS.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid /ns#">
<head>
<meta name="generator" content= "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<meta content="text/html; charset=us-ascii" http-equiv="Content-Type"/>
<link href="/site_media/css-dock-menu/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/site_media/css/new.css"/>
</head>
</body>
<ul class="navbar">
<li style="width:9%;">
Useful Sites
<ul>
<li>Portal</li>
<li>Calender</li>
</ul>
</li>
<li>
[....]
Basically Hovering over "Useful Sites" should display drop down having "Portal" and "Calender".
Here is my new.css -
#wrap {
width: 100%;
height: 30px;
margin: 0;
z-index: 99;
position: relative;
background-color: #366b82;
}
.navbar {
height: 20px;
padding: 0;
width: 100%;
left-margin: 0;
position: absolute;
right: 0;
}
.navbar li {
height: auto;
width: 125px;
float: left;
list-style: none;
}
.navbar a {
padding: 10px 0;
border-left: 1px solid #54879d;
border-right: 1px solid #1f5065;
text-decoration: none;
color: white;
display: block;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
Thanks in advance !
you need as below
.navbar li a:hover ul
{
display: block; /* Displays the drop-down box when the menu item is hovered over */
}