I wanted to create a navigation menu, but last item after zooming out, for example at 90% zoom goes down. "Five" is located under "Four" item. Navigation should be static in size and span one line, not two. All items should occupy the entire size of the div#page (960px, 192px*5) in one bar.
body {
background-color: blue;
margin: 0;
}
.wrapper {
width: 960px;
margin: 20px auto 0 auto;
}
#page {
background-color: #777272;
width: 100%;
height: 800px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
}
nav ul li a {
text-decoration: none;
display: block;
background-color: purple;
width: 170px;
height: 20px;
line-height: 20px;
padding: 10px;
border: 1px solid black;
text-align: center;
margin: 5px 0px 20px 0;
}
a:visited {
color: white;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div id="page">
<nav>
<ul>
<li>One "1" One</li>
<li>Two "2" Two</li>
<li>Three "3" Three</li>
<li>Four "4" Four</li>
<li>Five "5" Five</li>
</ul>
</nav>
<ul class="clear">
<li>Tomato</li>
<li>Cucumber</li>
<li>Carrot</li>
</ul>
</div>
</div>
</body>
</html>
Simply remove this style:
nav ul li {
float: left;
} // not needed
and add this style:
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex; // this has been added
}
JSFiddle:
https://jsfiddle.net/1c2gsn34/
EDIT: In 33% UI is breaking, due to width:170px. Please remove the width from a instead of width use
nav ul li {
flex: 1;
}
Here you go this is what you want.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Source : W3school
Related
been trying to do a Nav bar, though through live stream it the #.media command does not effect my coding, no idea why. it should just keep a home sign in mobile state, though it does not effect it all. using chrome browsers, Brackets.
help me please.
----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/
nav,
header,
footer {
display: block;
}
body {
line-height: 1;
margin: 0;
}
/*################Nav Bar##################*/
nav {
width: 100%;
margin: 0;
}
nav ul {
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.topnav li {
list-style: none;
float: left;
}
ul.topnav li.topnav-right {
float: right;
}
ul.topnav li a {
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}
ul.topnav li a:hover {
background-color: #0080ff;
color: #fff;
}
ul.topnav li.dropdownIcon {
display: none;
}
/*################# mobile #############*/
u/media screen and (max-width: 680px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<title> MY CSS website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign Up</li>
<li class="topnav-right">Sign In</li>
<li class="dropdownIcon"><a href="">\☰
</a></li>
</ul>
</nav>
</body>
</html>
Seems to work fine for me. Try this code and you should also include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your head
----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/
nav,
header,
footer {
display: block;
}
body {
line-height: 1;
margin: 0;
}
/*################Nav Bar##################*/
nav {
width: 100%;
margin: 0;
}
nav ul {
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.topnav li {
list-style: none;
float: left;
}
ul.topnav li.topnav-right {
float: right;
}
ul.topnav li a {
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}
ul.topnav li a:hover {
background-color: #0080ff;
color: #fff;
}
ul.topnav li.dropdownIcon {
display: none;
}
/*################# mobile #############*/
#media screen and (max-width: 680px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<title> MY CSS website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign Up</li>
<li class="topnav-right">Sign In</li>
<li class="dropdownIcon"><a href="">\☰
</a></li>
</ul>
</nav>
</body>
</html>
I've been trying to make my nav (including the "works" dropdown button) responsive by making them appear through the usual three parallel lines on the top right margin that would then display what I've written on the nav bar when clicked from a mobile.
I've been trying for about two hours without a decent result.
I'm pretty sure it's not the hardest thing but I can't seem to get it right. Would love to understand how it works. Here's the desktop size, non-responsive navbar.
Here's the html:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AURORA CATERA -- 2020 ALL RIGHT RESERVED</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel='icon' href='FAVICON.jpg' type='image/x-icon'/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="img/AURORA-YLOW-FIN.png" alt="logo"></div>
<div class="menu">
<ul>
<li>ALL</li>
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
<li>ABOUT</li>
<li>CONTACT</li>
<li><i class="fa fa-instagram"></li></i>
</ul>
</div>
</body>
</html>
and here is the CSS:
.wrapper{
width: 100%;
}
body{
margin: 0;
padding: 0;
background-color: black;
}
.header{
padding: 5px 0px;
display: inline-block;
width: 100%;
}
.header img{
max-height: 400px;
max-width: 550px;
margin-left: 60px;
margin-top: 30px;
}
.menu{
float: right;
position: relative;
display: inline-block;
top: -85px;
left: 0px;
margin-right: 70px;
}
.menu ul li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.menu ul li a{
text-decoration: none;
color:#F8E315;
font-family: Rajdhani, "sanf serif";
font-size: 15px;
padding: 5px 10px;
}
.menu ul li a:hover{
color:#C7C7C7;
}
.dropbtn {
background-color: black;
color: #F8E315;
padding: 14px;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
border: none;
}
.dropbtn:hover{
color: #c7c7c7;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #F8E315;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: black;
color: #c7c7c7;
}
.dropdown:hover .dropdown-content {
display: block;
}
A basic burger-menu can be achieved by doing the following steps:
1) Create a with the class of burger-menu as a previous sibling element of the navigation you want to hide on mobile screen width.
a) You dont want this to show on your desktop medias, so in the css, style it as display: none;
2) Create a media query for the desired device. Let's say 480px for a mobile device.
3) Within this media query, style the navigation that you want to appear on hover (or click) as display: none;
4) Within this media query, style your burger-menu. In my example, I've styled something very basic, for time reasons, but you can research using spans to make a responsive burger menu.
5) Within this media query, declare an on hover pseudo-class for your burger-menu which accesses the hidden navigation. Since you placed the burger-menu as a the previous sibling element of your navigation, you can use the + css rule to target it like so
.burger-menu:hover + .menu {
}
This means that, when you hover over the burger-menu, you will affect the css of .menu. You can place how .menu's styles will be affected in the above CSS selector.
Here is a basic example of how this process works with your code.
Add this to your html, before your .menu <div>
<div class="burger-menu"></div>
<div class="menu">
Add this to your css file, at the bottom
.burger-menu {
display: none;
}
#media (max-width: 480px) {
.menu {
display: none;
}
.burger-menu {
display: block;
background-color: white;
height: 30px;
width: 30px;
position: fixed;
top: 10px;
right: 10px;
}
.burger-menu:hover + .menu {
display: block;
}
}
Typically, you would advance this by using toggleClass with JQuery to add and remove display to your navigation menu on clicking the burger menu.
P.s the benefit of using spans to create your burger-menu will be when you want it to have nice animation, changing from a burger menu to a cross, or arrow, etc.
here is a solution with a responsive menu list. Now you should add this menu list to your project.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.menu li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.topnav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a, li {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
ALL
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
ABOUT
CONTACT
<a href="https://www.instagram.com/auroracatera" target="_blank"> <i class="fa fa-instagram"></i>
</a>
☰
</div>
I hope you can do something with it and add it to your project ...
Now the nav doesn't display as it should in this example when in full screen but it show correctly when in iPad mode on chrome, so for my purposes this will work.
I have totally made a submenu that pops out from the top nav before but for what ever reason this one has me stumped.
first I thought well duh! You need to change hoverableMenu{position:absolute};
and hoverable{position:relative};
and viola I would be done. However no matter what I do it either goes all the way to the left when I have float:left; and even if I wanted to I could hardcode the position using margin, but thats not an elegant solution and I know that in all honesty it is merely something that is flying over my head.
any and all help is appreciated.
Below is my minimum verifiable example.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
main{
width: 50%;
}
header{
display:none;
}
}
<div id="seperator"></div>
<div id="content">
<nav>
<div class="topnav" id="myTopnav">
Home
Teaching
<a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<div class="hoverableMenu">
Overview
Publications
</div>
<a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<div class="hoverableMenu">
Awards
Gallery
</div>
Contact
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</nav>
</div>
JSFiddle
resources I accessed:
https://jsfiddle.net/davidpauljunior/pdcAF/1/
How to make sub menu float over div?
Can't click on menu links in drop down menu
EDIT
Under my media query I change the following.
div.hoverable{
display: relative;
}
div.hoverableMenu{
float:right;
display: absolute;
}
div.hoverable:focus > div.hoverableMenu{
top:1em;
left: 140px;
z-index: 99;
}
after doing this the menus are now popping up relative to their parents but they are causing the elements to the right of them to wrap around to under the rest of the nave items. Instead of the sub menu floating over the nav. :(
You have to change your structure a bit to ul li, checkout the code below
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*//////////*/
.topnav{
overflow: visible;
}
.topnav > li {
float: left;
list-style-type: none;
}
.topnav li {
list-style-type: none;
padding: 0;
position: relative;
}
.topnav > li > ul {
display: none;
margin: 0;
position: absolute;
left: 0;
padding: 0;
top: 40px;
}
.topnav > li:hover > ul {
display: block;
}
.topnav li {
}
.topnav:after {
content: "";
display: table;
clear: both;
}
/*//////////*/
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
main{
width: 50%;
}
header{
display:none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
</header>
<div id="seperator"></div>
<div id="content">
<nav>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Teaching</li>
<li><a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu" style="
">
<li>Overview</li>
<li>Publications</li>
</ul>
</li>
<li><a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu">
<li>Awards</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
Change Some CSS
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*//////////*/
.topnav{
overflow: visible;
}
.topnav > li {
float: left;
list-style-type: none;
}
.topnav li {
list-style-type: none;
padding: 0;
position: relative;
}
.topnav > li > ul {
display: none;
margin: 0;
position: absolute;
left: 100%;
padding: 0;
top: 0px;
}
.topnav > li:hover > ul {
display: block;
}
.topnav li {
}
.topnav:after {
content: "";
display: table;
clear: both;
}
/*//////////*/
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
.topnav > li > ul {
left: 0%;
padding: 0;
top: 40px;
}
main{
width: 50%;
}
header{
display:none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
</header>
<div id="seperator"></div>
<div id="content">
<nav>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Teaching</li>
<li><a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu" style="
">
<li>Overview</li>
<li>Publications</li>
</ul>
</li>
<li><a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu">
<li>Awards</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 4 years ago.
I have tried all the option that were know to me. Please help me in removing the white space between image and the div tag. I don't know why white is appearing below the image and div. I can not figure out where the CSS'm wrong. I have been working on it since morning but I am not able to find the solution this.
Please help me. I have uploaded the screenshot.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rent-O-Roof</title>
<style type="text/css">
body{
width: 100%;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.topnav{
overflow: hidden;
background-color: #333;
}
.topnav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover{
background-color: #ddd;
color: black;
}
.active{
background-color: #4CAF50;
color: white;
}
.topnav .icon{
display: none;
}
#media screen and (max-width: 600px){
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px){
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a{
float: none;
display: block;
text-align: left;
}
}
/* Style the footer */
.footer {
background-color:#777555 ;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
About US
Contact US
google form
facebook page
CUSTOMER REVIEW
CAREERS
TERM
OPTIONS
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div style="overflow: hidden;">
<img src="file:///Users/varunwadhwa/Desktop/Header.png" style="width: 100%; height: auto; overflow: hidden; padding: 0;">
<div style="background-color: red; font-size: 48px;">About Us
</div>
</div>
</body>
</html>
add display: block to the img tag like Zhenya Telegin said or give the "about" div a negative margin-top value, something like margin-top: -4px
It is space for descenders (the bits that hang off the bottom of 'y' and 'p') since img is an inline element by default. This attribute removes the gap.
Just add display: block to your img style.
jsfiddle
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rent-O-Roof</title>
<style type="text/css">
body{
width: 100%;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.topnav{
overflow: hidden;
background-color: #333;
}
.topnav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover{
background-color: #ddd;
color: black;
}
.active{
background-color: #4CAF50;
color: white;
}
.topnav .icon{
display: none;
}
#media screen and (max-width: 600px){
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px){
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a{
float: none;
display: block;
text-align: left;
}
}
/* Style the footer */
.footer {
background-color:#777555 ;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
About US
Contact US
google form
facebook page
CUSTOMER REVIEW
CAREERS
TERM
OPTIONS
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div style="overflow: hidden;">
<img src="http://via.placeholder.com/350x150" style="width: 100%; height: 150px; overflow: hidden; padding: 0; display: block;">
<div style="background-color: red; font-size: 48px;">About Us
</div>
</div>
</body>
</html>
whenever i hover over the currently selected menu item its color changes i want to prevent that. here my code.
<html>
<head>
<title> Another Page </title>
<link rel="stylesheet" href="style4.css" type="text/css" />
<head>
<body>
<div id="title">
<ul>
<li class="current">Home</li>
<li>Content</li>
<li>Search</li>
</ul>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="header">
</div>
</div>
</body>
</html>
and here's the css
body
{
padding: 0;
margin: 0;
background-color: rgb(24,205,20);
}
h1,h2,h3
{
padding: 0;
margin: 0;
}
p
{
padding: 0;
margin: 0;
}
.current
{
background-color: black;
}
#title
{
background-color: orange;
}
#title ul
{
list-style: none;
padding: 0;
margin: 0;
}
#title li
{
float: left;
}
#title a
{
text-transform: uppercase;
text-align: center;
text-decoration: none;
display: block;
width: 120px;
font-weight: bold;
color: #ffffff;
padding: 4px;
}
#title a:hover
{
background-color: rgb(180,138,18);
}
#clear
{
clear: both;
}
need some urgent suggestions on solving this issue.
Thank you.
Add this line to the end of your CSS file:
#title .current a:hover {
background-color: inherit;
}