I have an issue after my web went live.
I am using WebStorm and during localhost check everything was ok, all elements were on the same level.
In the menu bar Photo section shifted down.
I have a dropdown.ccs file to format the dropdown list.
What might be the issue?
#top {
width: 650px;
height: 120px;
margin: 0 auto 30px auto;
/*background-color: #e7e7e7;*/
}
#menu-bar {
position: relative;
float: right;
left: -50%;
}
#menu-bar ul {
list-style: none;
position: relative;
left: 50%;
margin-top: 10px;
}
#menu-bar li {
float: left;
position: relative;
margin-right: 55px;
}
#menu-bar a {
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
#selected {
color: #000000;
}
#selected > a {
color: #000000;
}
#menu-bar a:hover {
color: #222222;
text-decoration: none;
}
#images {
width: 533px;
height: 800px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
}
/* Dropdown Button */
.dropbtn {
cursor: pointer;
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
margin-bottom: 5px;
/*background: #dddddd;*/
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: 8c8c8c;
text-decoration: none;
display: block;
font-size: 10pt !important;
margin-bottom: 2px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color: #000000;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
color: #565656;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/dropdown.css">
<link rel="stylesheet" type="text/css" href="css/crossfade.css">
<link rel="stylesheet" href="src/css/bootstrap.min.css"/>
<title>Feanor Studio</title>
</head>
<body>
<div id="top">
<div id="menu-bar">
<ul>
<li id="selected">Home</li>
<li class="dropdown">
<p class="dropbtn">Photo</p>
<div class="dropdown-content">
Fashion portraits
Art portraits
Car photography
Product photography
Interior photography
</div>
</li>
<li>Paintings</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</div>
<div id="images">
<div id="crossfade">
<img class="bottom img-responsive" src="images/main/1.jpg" alt="Image 1">
<img class="top img-responsive" src="images/main/2.jpg" alt="Image 2">
<img class="top img-responsive" src="images/main/3.jpg" alt="Image 3">
<img class="top img-responsive" src="images/main/4.jpg" alt="Image 4">
<img class="top img-responsive" src="images/main/5.jpg" alt="Image 5">
</div>
</div>
</body>
</html>
Remove your <p></p> tags from the Dropdown and use <a> tags:
<li class="dropdown">
Photo
<div class="dropdown-content">
Fashion portraits
Art portraits
Car photography
Product photography
Interior photography
</div>
</li>
#top {
width: 650px;
height: 120px;
margin: 0 auto 30px auto;
/*background-color: #e7e7e7;*/
}
#menu-bar {
position: relative;
float: right;
left: -50%;
}
#menu-bar ul {
list-style: none;
position: relative;
left: 50%;
margin-top: 10px;
}
#menu-bar li {
float: left;
position: relative;
margin-right: 55px;
}
#menu-bar a {
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
#selected {
color: #000000;
}
#selected > a {
color: #000000;
}
#menu-bar a:hover {
color: #222222;
text-decoration: none;
}
#images {
width: 533px;
height: 800px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
}
/* Dropdown Button */
.dropbtn {
cursor: pointer;
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
margin-bottom: 5px;
/*background: #dddddd;*/
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: 8c8c8c;
text-decoration: none;
display: block;
font-size: 10pt !important;
margin-bottom: 2px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color: #000000;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
color: #565656;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/dropdown.css">
<link rel="stylesheet" type="text/css" href="css/crossfade.css">
<link rel="stylesheet" href="src/css/bootstrap.min.css"/>
<title>Feanor Studio</title>
</head>
<body>
<div id="top">
<div id="menu-bar">
<ul>
<li id="selected">Home</li>
<li class="dropdown">
Photo
<div class="dropdown-content">
Fashion portraits
Art portraits
Car photography
Product photography
Interior photography
</div>
</li>
<li>Paintings</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</div>
<div id="images">
<div id="crossfade">
<img class="bottom img-responsive" src="images/main/1.jpg" alt="Image 1">
<img class="top img-responsive" src="images/main/2.jpg" alt="Image 2">
<img class="top img-responsive" src="images/main/3.jpg" alt="Image 3">
<img class="top img-responsive" src="images/main/4.jpg" alt="Image 4">
<img class="top img-responsive" src="images/main/5.jpg" alt="Image 5">
</div>
</div>
</body>
</html>
Related
I am writing a web and the drop-down menu button is not working. The hoverable content is not shown. May anyone tell me the reason, please. Thanks a lot!!!
Here is the code
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
h1.header {
text-align: center;
color: #66F3ED;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #808080;
height: 70px;
font-size: 18px;
}
li {
float: left;
height: 70px;
}
li:last-child {
border-bottom: none;
}
li a {
display: block;
color: #66f3ed;
text-align: center;
padding: 23px 60px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #808080;
border-bottom: 5px solid #66f3ed;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
height: 800px;
}
/* Left and right column */
.column.side {
width: 6%;
background-color: #868686;
overflow: hidden;
z-index:2;
}
/* Middle column */
.column.middle {
width: 70%;
background-color: #777777;
z-index:1;
}
.column.right {
width: 24%;
background-color: #919191;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/*Drop down Menu*/
.dropbtn {
background-color: transparent;
color: #66F3ED;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
display: inline-block;
z-index: 10!important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left:100%;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<!--Side Menu Bar-->
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
</div>
<br /><br />
<img src="menu.jpg" alt="Menu">
</div>
<div class="dropdown-content">
Link 1
Link 2
</div>
<div class="column middle">
<ul>
<li><img src="sa_crop.gif" style="height: 70px"alt="Logo"></li>
<li><a class="active" href="#home">Face Mask Detection</a></li>
<li>Social Distance Detection</li>
</ul>
<br /><h1 class="header">Face Mask Detection</h1><br />
<!--Face Mask Detection Area-->
</div>
<div class="column right">
<ul>
<li style="float:right"><img src="user_808080.jpg" style="height: 70px" alt="User"></li>
</ul>
</div>
</div>
</body>
</html>
The whole codings are shown above. I am not sure about the problem, yet it should be the CSS styling issues. Please someone give me a hint. Thank you very much!
You have several issues in both your HTML and CSS to solve, so the menu will work correctly.
First: The <div class="dropdown"> should contins the button, image and dropdown-content inside </div>
for example, change:
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
</div>
<br /><br />
<img src="menu.jpg" alt="Menu">
</div>
<div class="dropdown-content">
Link 1
Link 2
</div>
to
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
<br /><br />
<img src="menu.jpg" alt="Menu">
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
</div>
Second: in the style of .dropdown-content, using of position: absolute; is correct but you should change left:100%; to left:0;, therefore you get the dropdown-content beside the menu-item.
Third: Add the CSS style code for hovering over the menu item, to make the sub-menu-item appears as:
.dropdown:hover .dropdown-content{
display: block;
}
Fourth: Change the background of the sub-menu-item when hovering, for example
.dropdown-content a:hover {
color: white;
background-color: red;
}
if you make the above four points, the menu will behave as expected.
and here is the full modified code of the question- just press Run the code snippet below:
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
h1.header {
text-align: center;
color: #66F3ED;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #808080;
height: 70px;
font-size: 18px;
}
li {
float: left;
height: 70px;
}
li:last-child {
border-bottom: none;
}
li a {
display: block;
color: #66f3ed;
text-align: center;
padding: 23px 60px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #808080;
border-bottom: 5px solid #66f3ed;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
height: 800px;
}
/* Left and right column */
.column.side {
width: 6%;
background-color: #868686;
overflow: hidden;
z-index:2;
}
/* Middle column */
.column.middle {
width: 70%;
background-color: #777777;
z-index:1;
}
.column.right {
width: 24%;
background-color: #919191;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/*Drop down Menu*/
.dropbtn {
background-color: transparent;
color: #66F3ED;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
display: inline-block;
z-index: 10!important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left:0; /* Modified */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* adding */
.dropdown:hover .dropdown-content{
display: block;
}
/* adding */
.dropdown-content a:hover {
color: white;
background-color: red;
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<!--Side Menu Bar-->
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Title"></button>
<br /><br />
<img src="menu.jpg" alt="MenuItem">
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
</div>
<div class="column middle">
<ul>
<li><img src="sa_crop.gif" style="height: 70px"alt="Logo"></li>
<li><a class="active" href="#home">Face Mask Detection</a></li>
<li>Social Distance Detection</li>
</ul>
<br /><h1 class="header">Face Mask Detection</h1><br />
<!--Face Mask Detection Area-->
</div>
<div class="column right">
<ul>
<li style="float:right"><img src="user_808080.jpg" style="height: 70px" alt="User"></li>
</ul>
</div>
</div>
</body>
</html>
I use a div tag but my about division is still overlapping my navbar division.
This is my demo:
#import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
body {
background: url(boba.jpg);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Fredoka One', cursive;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.menu ul {
margin: 0 auto;
width: 1170px;
padding-top: 100px;
}
.menu ul li {
float: none;
display: inline-block;
}
.menu ul li:nth-child(1) {
float: left;
}
.menu ul li:nth-child(2) {
float: left;
}
.menu ul li:nth-child(3) {
float: left;
}
.menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
font-family: 'Fredoka One', cursive;
font-size: 23px;
}
.menu ul li a:hover {
background-color: #77DF79;
color: black;
}
#navbar {
width: 100%;
position: relative;
}
.logo {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 0;
content: "";
margin-left: -205px;
}
#descrip p {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 16px;
}
#descrip h1 {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Lobster', cursive;
font-size: 10vw;
}
.button {
background-image: linear-gradient(to right, #56ab2f 0%, #a8e063 51%, #56ab2f 100%);
border: none;
color: black;
font-family: 'Fredoka One', cursive;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
.button:hover {
background-position: right center;
}
.slicknav_menu {
font-size: 16px;
padding: 5px;
position: fixed;
right: 0;
background: none;
display: none;
}
#media (max-width: 767px) {
.slicknav_menu {
display: block;
}
.menu {
display: none;
}
body {
background-image: url(m3.jpg);
}
.button {
margin-top: 50px;
}
}
.about {}
<!DOCTYPE html>
<html>
<head>
<title>Smile to Go! </title>
<link rel="icon" href="logo1.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="slicknav.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="logo">
<img src="logo1.png" alt="">
</div>
<div class="container">
<div id="navbar">
<div class="menu">
<ul id="list">
<li> Home </li>
<li> About </li>
<li> Products </li>
<li> Branches </li>
<li> Gallery </li>
<li> Contact </li>
</div>
</div>
<div id="descrip">
<h1> Smile to Go! </h1>
<p>Smile to go milktea serves a wide variety of tasy and refreshing authentic pearl milktea drinks. uaranteed made from 100% freshly brewed loose-leaf teas of high quality for an overall healthier lifestyle. We also serve variety of iced coffees,slush,cream
and latte drinks and toppings for your freshly cool drinks!.</p>
<button type="button" class="button"> Learn More </button>
<br>
<br>
</div>
<div class="about">
<hr>
<h1> Welcome to Smile to Go!</h1>
<p> Sip up a refreshin milktea that will give you a large smile on your face!<br> Enjoy different variety of coffees, tea,slush and cream lattes. <br>Share the cool refreshing drink now to your friends and families. <br>Visit us on our stores nationwide!</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#list').slicknav();
});
</script>
</body>
</html>
<!----- references and resources
https://www.w3schools.com/html/default.asp
https://www.facebook.com/SmileToGoHongKong/
https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog
https://www.w3schools.com/css/default.asp
https://www.youtube.com/watch?v=hp-LP8Nv18s
https://www.youtube.com/watch?v=svv7jOxaSzw
https://slicknav.io/----->
I think this will help.
#import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
body {
background: url(boba.jpg);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Fredoka One', cursive;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.menu ul {
margin: 0 auto;
width: 1170px;
padding-top: 100px;
}
.menu ul li {
float: none;
display: inline-block;
}
.menu ul li:nth-child(1) {
float: left;
}
.menu ul li:nth-child(2) {
float: left;
}
.menu ul li:nth-child(3) {
float: left;
}
.menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
font-family: 'Fredoka One', cursive;
font-size: 23px;
}
.menu ul li a:hover {
background-color: #77DF79;
color: black;
}
#navbar {
width: 100%;
position: relative;
}
.logo {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 0;
content: "";
margin-left: -205px;
}
#descrip{text-align:center;}
#descrip p {
text-align: center;
font-size: 16px;
}
#descrip h1 {
font-family: 'Lobster', cursive;
font-size: 10vw;
}
.button {
background-image: linear-gradient(to right, #56ab2f 0%, #a8e063 51%, #56ab2f 100%);
border: none;
color: black;
font-family: 'Fredoka One', cursive;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {
background-position: right center;
}
.slicknav_menu {
font-size: 16px;
padding: 5px;
position: fixed;
right: 0;
background: none;
display: none;
}
#media (max-width: 767px) {
.slicknav_menu {
display: block;
}
.menu {
display: none;
}
body {
background-image: url(m3.jpg);
}
.button {
margin-top: 50px;
}
}
.about {}
<!DOCTYPE html>
<html>
<head>
<title>Smile to Go! </title>
<link rel="icon" href="logo1.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="slicknav.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="logo">
<img src="logo1.png" alt="">
</div>
<div class="container">
<div id="navbar">
<div class="menu">
<ul id="list">
<li> Home </li>
<li> About </li>
<li> Products </li>
<li> Branches </li>
<li> Gallery </li>
<li> Contact </li>
</div>
</div>
<div id="descrip">
<h1> Smile to Go! </h1>
<p>Smile to go milktea serves a wide variety of tasy and refreshing authentic pearl milktea drinks. uaranteed made from 100% freshly brewed loose-leaf teas of high quality for an overall healthier lifestyle. We also serve variety of iced coffees,slush,cream
and latte drinks and toppings for your freshly cool drinks!.</p>
<button type="button" class="button"> Learn More </button>
<br>
<br>
</div>
<div class="about">
<hr>
<h1> Welcome to Smile to Go!</h1>
<p> Sip up a refreshin milktea that will give you a large smile on your face!<br> Enjoy different variety of coffees, tea,slush and cream lattes. <br>Share the cool refreshing drink now to your friends and families. <br>Visit us on our stores nationwide!</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#list').slicknav();
});
</script>
</body>
</html>
so I will explain cause i have been in your place before ..
first you are making the elements inside #descrip position absolute and that's okay if u add position relative and a height to #descrip .. cause now the elements are flowing out of that #descrip container and that container's height is small so the about is coming after it therefore under the element
what would be better is using the margins and so on to place the element in the place u want .. read about margin auto also is really help full .. and be careful with float .. read about flex box also really helpful
IssueTo make my website responsive for mobile layout, I am trying to make the navigation menu appear on clicking the menu button. However, the click is not working and navigation options are not appearing at all. Only the navigation menu icon is appearing. The options are appearing below the menu button separately. However, I want them to appear on clicking the menu icon.
.navbar {
width: 100;
text-align: center;
height: 20px;
padding: 35px;
font-size: 10px;
overflow: hidden;
}
.navbar a {
float: left;
font-size: 18px;
text-align: center;
padding: 12px 16px;
text-decoration: none;
color: #0069BD;
font-family: Helvetica;
}
.navbar .current{
border-bottom: 3px solid #0069BD; /* Showing the border under the navigation option on hover */
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
border: none;
outline: none;
color: white;
padding: 12px 16px;
background-color: inherit;
font-family: Helvetica;
margin: 0;
color: #0069BD;
}
.navbar a:hover, .dropdown:hover .dropbtn {
border-bottom: 3px solid #00A0EF;
}
.navbar a {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0069BD;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
font-size: 10px;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 17px;
}
.dropdown-content a:hover {
border-bottom: 3px solid #00A0EF;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
color: white;
}
.show {
display: block;
}
.active {
color: white;
}
.content p{
font-size: 13px;
color: #4e5153;
font-weight: normal;
font-family: 'Arial' sans-serif;
line-height: 20px;
display:inline-block;
}
/* Header Logo */
header div.logo {
padding-top: 14px;
padding-right: 24px;
float: left;
border: red;
}
header div.logo a {
width: 216px;
height: 74px;
float: left;
text-indent: -999em;
}
div.page {
min-height: 400px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}
<html><!-- head --><head profile="http://www.w3.org/2005/10/profile"> <!-- image displayed on the tab alongwith the title-->
<link rel="icon" type="image/png" href="images/logo.jpg"> <!-- image displayed on the tab alongwith the title-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- encoding scheme-->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Marvel Tech</title> <!--title of the tab-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <!--icons used in footer-->
<link rel="stylesheet" href="style.css"> <!--stylesheet Linking-->
<script src="jquery.min.js"></script> <!-- javascript used for slider animation-->
<script type="text/javascript" src="slider.js"></script> <!-- javascript used for slider animation-->
</head>
<!-- Body-->
<body>
<div class="page-wrap">
<!--- Header section -->
<header>
<div class="headercontent">
<div class="logo">
<img src="images/newlogo.jpg" style="height: auto;">
</div>
<!--–– Navigation Bar -->
<div class="navbar">
<a class="current" href="Marvel_Tech.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
Design
Consulting
R&D
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Software
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
Steam Turbine Design Package
Gas Turbine Design Tools
Power Plant Monitoring
Prognostic System
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
ORC Turbine
Gas Turbine
Saturated Team Turbine
</div>
</div>
About
Contact
<div class="dropdown">
<button class="dropbtn">Language
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
<img src="images/english.png" style="height: auto;"> English
<img src="images/chinese.png" style="height: auto;"> Chinese <!--- Mention the name of chinese page in place of hash.-->
</div>
</div>
</div>
</div>
</header></div>
<div class="mobilenavbtn">
<div class="content">
<img src="images/mobilenavbtn.png" alt="Menu" style="height: auto;">
</div>
</div>
</body>
</html>
Step 1) Create HTML:
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<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">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
Step 2) Create CSS:
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/*==================this is the part that is causing me headaches, I can't get the Header to stay flush with the top without losing the layout*/
header {
background-image: url("images/song.png");
background-color: #00020e;
height: 210px;
width: 1050px;
margin: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />
<title>Lilydale Football Club</title>
</head>
<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> Home
</li>
<li> History
</li>
<li> Players
</li>
<li> Sponsors
</li>
<li> News
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<section></section>
<aside></aside>
</div>
</body>
</html>
So basically, I can't seem to get the header flush with the top of the page. I can see the background image at the top behind the header, I don't want that. I am clearly new to all of this and this is my first attempt at coding a website.
Here is a screenshot
The reason there is a small gap here is because the standard element styling in many browsers includes automatic value for things like padding and margin. It's a good idea to initialize these CSS values for all elements when starting new projects.
Learn more about CSS resets here.
Adding padding:0 and margin:0 to your body solves the issue. I changed the styling of your header to better illustrate that it is indeed flush with the top of the page now. There is still a small gap between your logo and the top of the page however because of the padding on your logo.
/*==================this is the part that is causing me headaches, I can't get the Header tostay flush with the top without losing the layout it self*/
header {
background-image: url("images/song.png");
background-color: white;
border:1px solid red;
height: 210px;
width: 1050px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
padding:0;
margin:0;
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />
<title>Lilydale Football Club</title>
</head>
<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> Home
</li>
<li> History
</li>
<li> Players
</li>
<li> Sponsors
</li>
<li> News
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<section></section>
<aside></aside>
</div>
</body>
</html>
write following on the top of your CSS file (before any other code)
*
{
margin:0;
padding:0;
}
Every browser has some default padding and margin. By writing the above lines on the top your css file you are saying that every element (denoted by *) should have margin and padding as 0 when the page loads. I hope this helps
I've finished coding my website for a 1024x768 resolution and now want to add #media queries to my code so that the sidebar disappears when the screen is at a width of 980px and then stays like that all the way down from there. I have tried adding the #media max-width 980 myself but it does not seem to be working at all. I've also tried in various places on the page but again, no luck. It's so frustrating! Code Below (Sorry if it's really long, I'm gonna leave it all in there to avoid any questions regarding code).
HTML:
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
<span style="color: #ed786a">Home</span>
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
display: block;
}
#nav li a:link{
color: #DADADA;
text-decoration: none;
}
#nav li a:visited{
color: #DADADA;
text-decoration: none;
}
#nav li a:hover{
color: #DADADA;
text-decoration: none;
}
#nav li a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
/*font-style: italic;*/
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
/*-------Media Styles-------*/
#media all and (max-width: 980px){
#sidebar{
float: none;
}
}