I am banging my head against a wall trying to add a dropdown menu to an existing menu bar and can't seem to get it to line up right without screwing up the existing menu, can anyone please just add a single dropdown to my menu so I can see what I have been missing? I believe I am not getting the position: absolute/relative correct or maybe it is the paddings?
This is my code:
html {
display: table;
margin: auto;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
max-width: max-content;
margin: auto;
}
td {
background-color: #FFF;
border:1px solid black;
padding: 5px;
}
table {
background-color: #FFF;
width: 100%;
border-collapse: collapse;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
}
hr {
border: none;
border-top: 1px solid #CCCCCC;
height: 1px;
margin-bottom: 25px;
}
#styletwo {
position: relative;
display: block;
height: 24px;
font-size: 11px;
font-weight: bold;
background: transparent url(bgOFF.gif) repeat-x top left;
font-family: Arial,Verdana,Helvitica,sans-serif;
width: 715px;
}
#styletwo ul {
position: absolute;
margin: 0 auto;
padding: 0;
list-style-type: none;
width: 715px;
}
#styletwo ul li {
display: block;
float: left;
margin: 0 1px 0 0;
}
#styletwo ul li a {
display: block;
float: left;
color: #000;
text-decoration: none;
padding: 6px 20px 0 20px;
height: 24px;
}
#styletwo ul li a:hover, #styletwo ul li a.current {
color: #fff;
background: transparent url(bgON.gif) repeat-x top left;
}
.center {
margin: auto;
width: 60%;
padding: 10px;
}
input[type=text] {
width: 100%;
# padding: 12px 20px;
# margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title </title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
</head>
<body align = "center">
<a href='index.php'> <img src='images/simplesmdrlogo.jpg'> </a>
<div id="menucase" align="center">
<div id="styletwo">
<ul>
<li><a href='results.php'>Search All</a></li>
<li><a href='user.php'>Extensions</a></li>
<li><a href='accountcodelist.php'>Account Codes</a></li>
<li><a href='trunk.php'>Trunks</a></li>
<li><a href='pbx.php'>PBX Configuration</a></li>
<li><a href='#'>Help </a>
</ul>
</div>
</div>
Figured it out, was not placing the new dropdown class I had created in the correct entry.
Related
I've been trying with a dropdown menu for a while now and managed to get it to work with overflow being hidden in the navbar, however doing so breaks the rest of the navbar.
The navbar works fine when overflow is set to hidden in .navbar, however this hides the dropdown menu. I've tried to find a solution for this but haven't had much luck.
* {
font-family: Open Sans, Trebuchet MS, Tahoma, Helvetica, sans-serif;
background-color: white;
margin: 0px;
box-sizing: border-box;
}
.darkmode {
background-color: #3d3d3d;
color: white;
}
.navbar {
text-align: center;
background-color: #197053;
margin: 0px;
padding: 0px;
position: relative;
box-shadow: 0px 1px 5px #262626;
}
.navbar a, .navbar p, .dropdown button {
color: white;
text-decoration: none;
font-weight: bold;
font-size: 150%;
display: inline-block;
padding: 14px 12px;
background-color: #197053;
margin: 0px;
border: none;
border-bottom: 5px solid transparent;
}
.navbar-title {
position: relative;
float: left;
margin: 0px;
}
.navbar-current {
float: none;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
ul.navbar-nav {
float: right;
margin: 0px;
list-style-type: none;
padding: 0px;
}
.navbar-nav li {
float: left;
}
.navbar a:hover, .dropdown:hover button {
border-bottom: 5px solid #3aa682;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover button {
border-bottom: 5px solid #3aa682;
}
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
display: block;
color: black;
background-color: white;
padding: 14px 12px;
text-decoration: none;
margin: 0px;
font-size: 150%;
font-weight: normal;
border: none;
}
.dropdown-content a:hover {
background-color: #c9c9c9;
border: none;
}
.title p {
font-size: 250%;
padding: 0px 50px;
padding-top: 20px;
margin: 0px;
}
.subtitle p {
font-size: 200%;
padding: 0px 50px;
margin: 0px;
}
.body p {
font-size: 120%;
padding: 0px 50px;
margin: 0px;
}
.body a:link, .body a:visited {
color: #262626;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: left;
color: black;
}
.darkmode-button {
color: black;
font-size: 80%;
padding: 10px 9px;
margin: 0px;
border: none;
font-family: Open Sans, Trebuchet MS, Tahoma, Helvetica, sans-serif;
background-color: white;
}
.darkmode .darkmode-button {
color: white;
background-color: #3d3d3d;
}
.darkmode-button:hover {
color: #878787;
}
<!doctype html>
<html>
<head>
<title>Home - Title</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "main.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="navbar">
<div class="navbar-title">
<p>Title</p>
</div>
<div class="navbar-current">
Home
</div>
<ul class="navbar-nav">
<li class="dropdown">
<button onclick="location.href='school.html';">School</button>
<div class="dropdown-content">
Biology
Chemistry
Physics
</div>
</li>
<li>Photography</li>
<li>Music</li>
</ul>
</div>
<div class="title">
<p>Introduction</p>
</div>
<div class="body">
<p>---</p>
</div>
<div class="footer">
<button onclick="darkMode()" class="darkmode-button" id="darkmode-button">Dark Mode</button>
</div>
</body>
</html>
.navbar {
width: 100%;
display: inline-block;
text-align: center;
background-color: #197053;
margin: 0px;
padding: 0px;
position: relative;
box-shadow: 0px 1px 5px #262626;
}
Make width 100% and display inline-block. This should do the job.
This is the CSS and HTML for the nav bar which goes:
menu icon (#image), then main text (.red), then search icon (#search), and the search bar that won't stay up, (input [type=text].
My problem is that the search bar won't stay with the rest of the items despite it still having tons of space. It doesn't want to expand to a width larger than 64.2px and then it decides to stay under the rest of the items.
I've tried all sorts of displays and widths, but this is the only one that keeps it on top and it's too small in my opinion.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1-0">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>RED Info Sheet</title>
<style>
ul {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
}
input[type=text] {
background-color: black;
color: white;
margin: 28px 0 0 0;
font-family: bebas neue;
width: 30%;
display: inline-block;
vertical-align: middle;
}
/* this is the css the text box follows */
.nav {
background-color: #db1f1f;
color: black;
display: flex;
positiion: fixed;
top: 0;
font-family: Bebas Neue;
align-items: center;
width: 100%;
float: left;
vertical-align: middle;
}
/* This is the css for the nav */
.red {
background-color: #db1f1f;
color: black;
display: inline-block;
font-family: Bebas Neue;
float: left;
width: 60%;
padding: 10px 0px 0 20px;
text-align: center;
font-size: 55px;
margin: 0 0 0 10px;
}
/* This one (.red) appears before the search photo and text box */
#image {
width: 60px;
height: 100%;
display: inline-block;
float: left;
margin: 0;
padding: 100px 0 0 4ox;
}
/* menu icon */
#search {
width: 7%;
display: inline-block;
float: left;
margin: 25px 10px 0 10px;
padding: 0 0 0 0;
position: relative;
}
/* search image magnifying glass icon everything else after this point is
just part of a dropdown list which i don't think is relevant to the problem */
#image:hover {
background-color: white;
}
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
background-color: #db1f1f;
width: 100%;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #db1f1f;
color: white;
text-decoration: underline;
padding: 5px 5px;
}
li.dropdown {
display: inline-block;
float: left;
width: 10%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9cdd4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 20px;
}
.dropdown-content a {
color: black;
padding: 1px 1px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: black;
color: white;
text-decoration: underline;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="dropdown">
<div class="nav">
<ul>
<li class="dropdown">
<a href="#si">
<img class="dropbtn" id="image" src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png"
alt="menu-icon">
</a>
<div class="dropdown-content">
Home
<br>
Music and Lyric Videos
<br>
Information
<br>
Performances
<br>
Photos
<br>
Song Info
<br>
</li>
</div>
<li class="red">Red Taylor Swift</li>
<li>
<img src="https://image.flaticon.com/icons/png/512/61/61088.png" alt="magnifying-
glass" id="search">
</li>
<li>
<input type="text" placeholder="Search...">
</li>
</ul>
I don’t know what style you want, but I tried to make some modifications. Do you want this Style?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1-0">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>RED Info Sheet</title>
<style>
ul {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
flex-grow: 1;
}
input[type=text] {
background-color: black;
color: white;
margin: 28px 0 0 0;
font-family: bebas neue;
width: 30%;
display: inline-block;
vertical-align: middle;
}
.nav {
background-color: #db1f1f;
color: black;
display: flex;
positiion: fixed;
top: 0;
font-family: Bebas Neue;
align-items: center;
width: 100%;
float: left;
vertical-align: middle;
}
.red {
background-color: #db1f1f;
color: black;
display: inline-block;
font-family: Bebas Neue;
float: left;
/* width: 60%; */
padding: 10px 0px 0 20px;
text-align: center;
font-size: 55px;
margin: 0 0 0 10px;
}
#image {
width: 60px;
height: 100%;
display: inline-block;
float: left;
margin: 0;
padding: 100px 0 0 4ox;
}
#search {
width: 40px;
display: inline-block;
float: left;
margin: 25px 10px 0 10px;
padding: 0 0 0 0;
position: relative;
}
#image:hover {
background-color: white;
}
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
background-color: #db1f1f;
width: 100%;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #db1f1f;
color: white;
text-decoration: underline;
padding: 5px 5px;
}
li.dropdown {
display: inline-block;
float: left;
width: 10%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9cdd4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 20px;
}
.dropdown-content a {
color: black;
padding: 1px 1px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: black;
color: white;
text-decoration: underline;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*
*/
ul>li {
float: left;
}
ul>li:last-child {
width: 30%;
}
input[type=text] {
width: 100%;
}
.fixedWidth {
width: 65px !important;
}
body,
html {
border: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="dropdown fixedWidth">
<div class="nav">
<ul>
<li class="dropdown">
<a href="#si"><img class="dropbtn" id="image"
src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png"
alt="menu-icon"></a>
<div class="dropdown-content">
Home<br>
Music and Lyric Videos<br>
Information<br>
Performances<br>
Photos<br>
Song Info<br>
</li>
</div>
<li class="red">Red Taylor Swift</li>
<li><img src="https://image.flaticon.com/icons/png/512/61/61088.png" alt="magnifying-
glass" id="search"></li>
<li><input type="text" placeholder="Search..."></li>
</ul>
</div>
</body>
I am having an issue with this new website for my local Church. I followed this tutorial to create a burger menu with just HTML and CSS: https://www.youtube.com/watch?v=xMTs8tAapnQ&list=PLu-osytzWPuUXmu5BZTuHNRyMBpZS1bsG&index=4&t=0s
Now after learning how to do it, the issue I am running into is I am trying to put an image in the body under the navigation menus, however, when I make my web resolution smaller and click on the burger menu. It is under the image.
I appreciate any help, I tried to look for it everywhere, or I tried at least. I am new to coding. So thank you for your time spent helping me. I really do appreciate it.
**HTML**
<!DOCTYPE html>
<html>
<head>
<title>Church of Christ</title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<meta name="viewport" contet="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> The Church of Christ </h1>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
Home
Contact
About
<span>Members</span>
</div>
</div>
<h2> location </h2>
<img src="IMG_2597.jpg" alt="Church of Christ">
</body>
</html>
**CSS**
html, body {width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", "sans sherif";
}
.nav {
border-bottom: 1px solid gold;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 10px;
line-height: 70px;
clear: right;
}
span {
color: gold;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
color: gold;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid gold;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
h1 {
text-align: center;
font-size: 50px;
margin: 10px 0px -10px 0px;
color: gold;
}
a {
font-size: 25px;
}
h2 {
text-align: center;
font-size: 45px;
color: rgb(255, 255, 255);
}
img {
width: 100%;
height: auto;
}
body {
background-color: rgb(0, 0, 0);
}
just remove css clear:right and add float:right
.menu {
margin: 0 30px 0 0;
float: right;
}
.menu a {
text-decoration: none;
color: white;
margin: 0 10px;
line-height: 70px;
}
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
html {
font-family: "helvetica neue", "sans sherif";
}
.nav {
border-bottom: 1px solid gold;
text-align: right;
height: 70px;
line-height: 70px;
/* this line changed */
position: relative;
}
.menu {
margin: 0 30px 0 0;
}
/* i advice,that a tag will made bacgraund-color,because when dropdown menu covering image */
.menu a {
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 10px;
line-height: 70px;
clear: right;
/* background-color: blue; */
}
span {
color: gold;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
color: gold;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid gold;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
h1 {
text-align: center;
font-size: 50px;
margin: 10px 0px -10px 0px;
color: gold;
}
a {
font-size: 25px;
}
h2 {
text-align: center;
font-size: 45px;
color: rgb(255, 255, 255);
}
img {
width: 100%;
height: auto;
}
body {
background-color: rgb(0, 0, 0);
}
So I'm building a website in html and css. I have made a navigation bar with the links, but when I zoom out, the links go underneath one another instead of inline. If someone can give me some pointers, that'd be great. Thanks
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrap">
<div class="logo"><img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.wrap {
width: 960px;
margin: auto;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
min-height: 300px;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
"the links go underneath one another instead of inline"
To fix this, you will want to add the float: left; property to your li like so:
ul li {
display: inline-block;
float: left;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
CSS:
body {
background-image: url("../images/ITWorld.jpg");
background-repeat: no-repeat;
background-size: 150%;
font-family: sans-serif;
}
p {
font-size: 22px;
}
#navbar {
display: inline;
text-align: center;
font-size: 25px;
}
a {
text-decoration: none;
font-family: sans-serif;
color: black;
}
.listitem {
padding: 7px;
display: inline;
border: 3px solid black;
}
a:hover {
color: white;
}
.reference {
font-size: 22px;
padding-top: 50px;
padding-bottom: 50px;
}
#overviewpara {
width: 800px;
}
.referenceli {
padding: 5px;
}
HTML:
<ul>
<li class="referenceli"><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm</a></li>
<li class="referenceli"><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011</a></li>
</ul>
My problem is that when i hover over my hyperlinks on my references page they do not react in the correct areas. For example I'll be link 5px above the link and it will not higligh or i will be right over the link, but it will not work. Sorry for messy html.
You should make the padding on your a tag 5px, and not your list item.
.referenceli {
padding: 5px;
}
should be
.reference {
padding: 5px;
text-decoration: none;
font-family: sans-serif;
color: black;
}
Also remove the 50px padding from the a tags: You will be better of applying that size(50px) to the margin of the list items:
.reference {
font-size: 22px;
padding-top: 50px;
padding-bottom: 50px;
}
should be
.reference {
font-size: 22px;
padding: 5px; /*So you will have a hover effect 5px below and above the link*/
}
.referenceli {
margin: 50px 0px;
}
Changed paddings top and bottom to 5px:
.reference {
font-size: 22px;
padding-top: 5px;
padding-bottom: 5px;
}
Fiddle:
http://jsfiddle.net/uNpbk/
Changed paddings top and bottom to 5px:
.reference
{
font-size: 22px;
padding-top: 5px;
padding-bottom: 5px;
}
Give this a try. I think that you need to style div and not the li tags. I added some borders to the reference and referenceli. Add the borders to your code to see your styling impact.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<style>
body {
background-image: url("../images/ITWorld.jpg");
background-repeat: no-repeat;
background-size: 150%;
font-family: sans-serif;
}
p {
font-size: 22px;
}
#navbar {
display: inline;
text-align: center;
font-size: 25px;
}
a {
text-decoration: none;
font-family: sans-serif;
color: black;
}
.listitem {
padding: 7px;
display: inline;
border: 3px solid black;
}
a:hover {
color: red;
font-weight:bold;
}
.reference {
font-size: 22px;
padding:10px 0 10px 0;
border:green solid 1px;
}
#overviewpara {
width: 800px;
}
div.referenceli{
padding:20px 0 0 0;
border:red 1px solid;
}
</style>
<ul>
<div class="referenceli"><!--USE DIV TO FOCUS CSS -->
<li><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm
</a></li><!-- END LI -->
</div><!-- END REFERENCELI -->
<div class="referenceli">
<li><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011
</a></li><!-- END LI -->
</div><!-- END REFERENCELI -->
</body>
</html>