I am using HTML5 and CSS3 to make my website.
My current roadblock: I created a drop down menu on one of the tabs on my Nav Bar, but it goes behind the background image used as a banner. I have tried everything possible and I haven't had any luck.
Any ideas would be greatly appreciated! Thanks.
Here's the Nav Bar HTML Code:
<p>Abelia </p>
<ul>
<li>Home</li>
<li><a href="#">Services<i class="
fas fs-caret-down"></i></a>
<ul>
<li>Electricity</li>
<li>Water</li>
<li>Housing</li>
</ul>
</li>
<li>About Us
<ul>
<li>Vison</li>
<li>Projects</li>
<li>Team</li>
</ul>
</li>
<li><a>Contact Us</a></li>
</ul>
<div class="banner-area">
<h2>Welcome To Abelia Group</h2>
</div>
This is nav bar CSS code
.menu_bar{
background-color: #c0392b;
height: 80px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5%;
position: fixed;
}
.logo a{
font-size: 30px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: beige;
letter-spacing: 4px;
}
.menu_bar ul{
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.menu_bar ul li{
padding: 5px 15px;
position: relative;
}
.menu_bar ul li a{
text-decoration: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
letter-spacing: 2px;
font-size: 20px;
color: beige;
transition:all 0.2s ;
}
.menu_bar ul li a:hover{
color: black;
}
.fs-caret-down{
height: 2px;
width: 1px;
color: rgb(255, 255, 255);
}
.dropdown_menu{
display: none;
}
.menu_bar ul li:hover .dropdown_menu{
display: block;
position: absolute;
left: 0;
background-color: #c0392b;
}
.menu_bar ul li:hover .dropdown_menu ul{
display: block;
margin: 10px;
}
.menu_bar ul li:hover .dropdown_menu ul li{
width: 150px;
padding: 10px;
}
.dropdown_menu2{
display: none;
}
.menu_bar ul li:hover .dropdown_menu2{
display: block;
position: absolute;
left: 0;
background-color: #c0392b;
}
.menu_bar ul li:hover .dropdown_menu2 ul{
display: block;
margin: 10px;
}
.menu_bar ul li:hover .dropdown_menu2 ul li{
width: 150px;
padding: 10px;
}
/*content*/
.banner-area{
background-image: url(image/mypic.jpg);
background-size: cover;
background-position: center;
top: 80px;
height: 680px;
width: 100%;
position: fixed;
}
.banner-area:after{
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 800px;
background: rgb(21, 21, 29);
opacity:.7 ;
z-index: -1;
}
I just copies this code from a tutorial, But I try to open sub menu it disappears. I don't know what to do Please help me.
#nav_wrapper1 {
width: 100%;
}
.nav_wrapper {
border-bottom:1px solid white;
left: 0;
top:0;
position:top;
width: 100%;
transition: top .5s ease-out;
background: #170030;
height:60px;
z-index:99999;
}
.btn {
padding: 10px 1%;
margin: 5px;
color: #fff;
text-decoration: none;
font-family: normal;
transition: all 0.1s ease;
}
.btn:hover {
transition: all 0.1s ease;
}
#search i {color: #fff;
font-size: 22px;}
#search {
float: right;
font-size: 22px;
padding: 20px 25px;
line-height: 0px;
color: #fff;
margin: 0;
font-weight: 700;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#search:hover {
background: #111;
}
.search_box {
clear: both;
width: 40%;
background: #111;
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
transition: all 0.1s ease-in-out;
float:right;
z-index:99999999999;
}
.search_box.active {
height: auto;
padding: 10px 0;
width:40%;
}
.search_box input {
width: 60%;
font-size: 13px;
margin: 0 0 0 10px;
padding: 10px;
border: none;
background: #fff;
}
.search_box input:focus {
outline: none;
}
.search_box input.search_icon {
clear: both;
width: 30%;
height: auto;
padding: 10px;
margin: 0;
margin-right:10px;
border: none;
color: #fff;
cursor: pointer;
background: #6a00de;
opacity: 1;
transition: all 0.1s ease;
float:right;
}
.search_box input.search_icon:hover {
background: #FFF;
color:#111;
}
.menu-link {
display: none;
}
.spinner-master input[type=checkbox] {
display: none;
}
.menu {
width: 100%;
height: auto;
background: #170030;
color:#170030;
transition: all 0.3s ease;
margin-top:5px;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
}
.menu > li > ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #111;
border: 1px solid #fff;
}
.menu ul li {
padding: 0px;
}
.menu > ul > li {
display: inline-block;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #fff;
font-size: 18px;
height:100%;
}
.menu ul li a:hover {
background: #111;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #FFF;
}
.menu ul li > a {
padding: 15px;
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul ul > li {
position: relative;
}
.menu ul ul > li a {
padding: 10px 15px;
height: auto;
background: #000000;
}
.menu ul ul > li a:hover {
background: #111;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
#media all and (max-width: 860px) {
.example-header .container {
width: 100%;
}
#search {
color: #fff;
padding: 0px 20px 0px 5px;
margin-top:25px;
}
.spinner-master * {
transition: all 0.3s;
box-sizing: border-box;
}
.spinner-master {
position: relative;
margin: 15px;
height: 30px;
width: 30px;
float: left;
}
.spinner-master label {
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 5px;
left: 0;
}
.spinner-master .spinner {
position: absolute;
height: 4px;
width: 100%;
padding: 0;
background-color: #fff;
}
.spinner-master .diagonal.part-1 {
position: relative;
float: left;
}
.spinner-master .horizontal {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master .diagonal.part-2 {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {
opacity: 0;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: 10px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: -12px;
}
a.menu-link {
display: block;
color: #fff;
float: left;
text-decoration: none;
padding: 10px 16px;
font-size: 1.5em;
}
a.menu-link:hover {
color: #efa666;
}
a.menu-link:after {
content: “2630”;
font-weight: normal;
}
a.menu-link.active:after {
content: “2715”;
}
.menu {
clear: both;
min-width: inherit;
float: none;
top:0px;
position:relative;
}
.menu, .menu > ul ul {
overflow: hidden;
max-height: 0;
background-color: #39484d;
}
.menu > li > ul.sub-menu {
padding: 0px;
border: none
}
.menu.active, .menu > ul ul.active {
max-height: 55em;
}
.menu ul {
display: inline;
}
.menu li, .menu > ul > li {
display: block;
}
.menu > ul > li:last-of-type a {
border: none;
}
.menu li a {
color: #fff;
display: block;
padding: 0.8em;
position: relative;
}
.menu li.has-submenu > a:after {`
content: ‘+’;
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.55em 0.5em;
}
.menu li.has-submenu > a.active:after {
content: “-“;
}
.menu ul ul > li a {
background:#170030;
padding: 10px 18px 10px 30px;
border-bottom: 1px solid #111;
}
.menu ul li a:hover {
background: #4b5f65;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #fff;
}
.menu ul ul, .menu ul ul ul {
display: inherit;
position: relative;
left: auto;
top: auto;
border: none;
}
.search_box.active {
position: absolute;
top: 63px;
z-index: 10;
width:70%;
right:2px;
}
.search_box input {
width: 50%;
float:left;
}
.search_box input.search_icon {
width: 30%;
float:right;
margin-right:14px;
margin-top:-37px;
}
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
delete display: none
.menu ul ul {
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
or change to display:block;
.menu ul ul {
display:block;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
try it..
I''ve written an app in lua using the Corona SDK, I'm trying to download some images from a google drive folder.
I've used the OAth playground to authroize the scopes I need and I've obtained a refresh token and have a method to obtain a new access token when necessary. This is how I download the images:
network.download(
"https://drive.google.com/uc?export=download&id="..decodedResponse.files[index].id,
"GET",
networkListener,
params,
decodedResponse.files[index].name,
system.DocumentsDirectory
)
where decodedResponse refers to the json obtained that lists all the files in the specified folder. This was working fine a few days ago but now whenever I try it, the image downloaded is invalid and corrupt. I even tried using a new folder in the drive.
I've tried other links such like
https://www.googleapis.com/drive/v3/files/FILE_ID_HERE?alt=media
and some others I've seen online but these give me a
code 403
"Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup."
error. I read somewhere that specifying scope could fix the code 403 error but I'm not sure where exactly to specify this.
I'd appreciate the help, thanks!
Edit: I took a look at one of the images with a text editor, the result was some html that look to be code for a google auth page, some of it is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=300, initial-scale=1" name="viewport">
<meta name="description" content="Google Drive is a free way to keep your files backed up and easy to reach from any phone, tablet, or computer. Start with 15GB of Google storage – free.">
<meta name="google-site-verification" content="LrdTUW9psUAMbh4Ia074-BPEVmcpBxF6Gwf0MSgQXZs">
<title>Meet Google Drive – One place for all your files</title>
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(//fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(//fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
</style>
<style>
h1, h2 {
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0;
}
#-webkit-keyframes fontfix {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
</style>
<style>
html, body {
font-family: Arial, sans-serif;
background: #fff;
margin: 0;
padding: 0;
border: 0;
position: absolute;
height: 100%;
min-width: 100%;
font-size: 13px;
color: #404040;
direction: ltr;
-webkit-text-size-adjust: none;
}
button,
input[type=button],
input[type=submit] {
font-family: Arial, sans-serif;
font-size: 13px;
}
a,
a:hover,
a:visited {
color: #427fed;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font-size: 20px;
color: #262626;
margin: 0 0 15px;
font-weight: normal;
}
h2 {
font-size: 14px;
color: #262626;
margin: 0 0 15px;
font-weight: bold;
}
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
height: 36px;
padding: 0 8px;
margin: 0;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
font-size: 15px;
color: #404040;
}
input[type=email]:hover,
input[type=number]:hover,
input[type=password]:hover,
input[type=tel]:hover,
input[type=text]:hover,
input[type=url]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus {
outline: none;
border: 1px solid #4d90fe;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
input[type=checkbox],
input[type=radio] {
-webkit-appearance: none;
display: inline-block;
width: 13px;
height: 13px;
margin: 0;
cursor: pointer;
vertical-align: bottom;
background: #fff;
border: 1px solid #c6c6c6;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
input[type=checkbox]:active,
input[type=radio]:active {
background: #ebebeb;
}
input[type=checkbox]:hover {
border-color: #c6c6c6;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=radio] {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
width: 15px;
height: 15px;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
background: #fff;
}
input[type=radio]:checked::after {
content: '';
display: block;
position: relative;
top: 3px;
left: 3px;
width: 7px;
height: 7px;
background: #666;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
input[type=checkbox]:checked::after {
content: url(https://ssl.gstatic.com/ui/v1/menu/checkmark.png);
display: block;
position: absolute;
top: -6px;
left: -5px;
}
input[type=checkbox]:focus {
outline: none;
border-color: #4d90fe;
}
.stacked-label {
display: block;
font-weight: bold;
margin: .5em 0;
}
.hidden-label {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
height: 0px;
width: 0px;
overflow: hidden;
visibility: hidden;
}
input[type=checkbox].form-error,
input[type=email].form-error,
input[type=number].form-error,
input[type=password].form-error,
input[type=text].form-error,
input[type=tel].form-error,
input[type=url].form-error {
border: 1px solid #dd4b39;
}
.error-msg {
margin: .5em 0;
display: block;
color: #dd4b39;
line-height: 17px;
}
.help-link {
background: #dd4b39;
padding: 0 5px;
color: #fff;
font-weight: bold;
display: inline-block;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
text-decoration: none;
position: relative;
top: 0px;
}
.help-link:visited {
color: #fff;
}
.help-link:hover {
color: #fff;
background: #c03523;
text-decoration: none;
}
.help-link:active {
opacity: 1;
background: #ae2817;
}
.wrapper {
position: relative;
min-height: 100%;
}
.content {
padding: 0 44px;
}
.main {
padding-bottom: 100px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
.google-header-bar {
height: 71px;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
}
.header .logo {
background-image: url(https://ssl.gstatic.com/accounts/ui/logo_1x.png);
background-size: 116px 38px;
background-repeat: no-repeat;
margin: 17px 0 0;
float: left;
height: 38px;
width: 116px;
}
I can't post the entire thing cause it exceeds the body character limit
I was able to get it to work by using a different url and adding this:
local params = {}
params.progress = true
params.headers = headers
This was the URL I used:
https://www.googleapis.com/drive/v3/files/FILE_ID_HERE?alt=media
I'm working on my first website (I'm a n00b) and on Safari and Chrome it looks exactly the way I want. However, in IE 8 the nav bar does not work at all. In Firefox, once you hover over one of the links it brings the drop down box down but it adds an extra pixel in between the main nav bar and the sub links.
My website's URL is: http://tonerleague.x10.mx/basketball.html
My HTML is...:
<div class="menu">
<nav>
<ul>
<li>Main
<ul>
<li>Advertise</li>
</ul>
</li>
<li>Test
<ul>
<li>Test</li>
<li>TestTest</li>
<li>TestTestTest</li>
</ul>
</li>
<li>Unknown
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</li>
<li>Support</li>
<li>Forums</li>
</ul>
</nav>
</div>
My CSS is..:
.menu
{
left: 50%;
position: absolute;
top: 137px;
margin-left:-500px;
font-family:"Arial", Helvetica, sans-serif;
font-size: .875em;
font-weight: bold;
}
nav ul {
padding: 0;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-block;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
line-height: normal;
-moz-border-radius: 0;
}
nav ul li:hover {
/*background:#C0C0C0; ** Firefox causes another extra pixel when activated*/
line-height: normal;
-moz-border-radius: 0;
}
nav ul li:hover a {
color: #FFF;
}
nav ul li a {
display: block; padding: 5px 35px;
color: #FFF; text-decoration: none;
border-right: 0px solid #FFF;
-moz-border-radius: 0;
}
nav ul ul {
background-color: #C0C0C0; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
line-height: normal;
-moz-border-radius: 0;
}
nav ul ul li {
float: none;
border-top: 0px solid #FFF;
border-bottom: 0px solid #000;
border-right: 0px solid #000;
border-left: 0px solid #000;
position: relative;
line-height: normal;
-moz-border-radius: 0;
}
nav ul ul li a {
padding: 5px 15px;
color: #fff;
}
nav ul ul li a:hover {
background-color: #000000;
}
SELECT boxes are not typical HTML elements. They're closely tied to the OS and can be difficult to style, especially on IE8.
You may opt to wrap the SELECT in a DIV and set the overflow to contain the element, or use an IE8-speficic CSS declaration to tweak the size.
See: How does one target IE7 and IE8 with valid CSS?
Use "\9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.
Example:
body {
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}
I have looked through a tonne of posts which have similar issues, but I just can't figure out my problem. Please could someone help, it is driving me insane.
The below code is for my Site Navigation. I would like the background to be an image rather than just a background colour. I would also like the background image to change on hover. As our Meerkat friends would say...Simples!....but not for me.
<div class="sub-menu" id="sub-menu">
<ul>
<li><a class="on" href="#" title=" You Are Here ">» Overview</a></li>
<li>Endorsements</li>
<li>The Detail</li>
<li>Funding</li>
<li>Apply Online</li>
<li><a class="end" href="graduates-terms.html" title=" Terms & Conditions ">Terms</a></li>
</ul>
</div>
div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0; border-top: solid 1px #FFFFFF; }
#sub-menu ul { list-style: none; padding: 0; margin: 0; }
#sub-menu li { float: left; margin: 0; }
#sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; }
#sub-menu li a:hover { color: #050505; background-color: #f3b607; }
#sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; }
#sub-menu li a.end { width: 89px; }
#sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; }
/* Hide from IE5-Mac \*/
#sub-menu li a{ float: none }
/* End hide */
#sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; }
Thank you, I really appreciate your help.
In your question subject, you said you wish to put background image to "li" tag, but as per the code you have shown, you have given background to "a" tag.
You can put background image and color both together to any of the tag "li" and "a"
Eg.
background: #00ff00 url('smiley.gif') no-repeat fixed center;
For details refer:
http://www.w3schools.com/cssref/css3_pr_background.asp
If you want to put hover effect as well, implement it on anchor "a" tag. Because old browsers like ie6 doesn't have inbuilt support for li hover effect.
Use following pattern.
a{
background: url('img1') no-repeat fixed center;
}
a:hover{
background: url('img2') no-repeat fixed center;
}
Hope it helps you.