i have athis code it is toggle the name after click on icon, i want to open drop down menu when click on this icon, i must to enter 2 times one to open the icon name and second to dropdown menu
`
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.dropbtn {
background-color: #3498db;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980b9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
</style>
<link rel="stylesheet" href="./inside.css">
</head>
<body>
<div class="positioner">
<div class="menu">
<div class="menu_item">
<input
class="toggle"
name="menu_group"
id="sneaky_toggle"
type="radio"
/>
<div class="expander">
<label for="sneaky_toggle"
><i class="menu_icon fa fa-user"></i>
<span class="menu_text">المفتش</span>
</label>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches(".dropbtn")) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
}
}
}
};
</script>
</body>
</html>
`
I JUST can add an select menu but i must click 2 times
i need to belick this picture when click on iconenter image description here
I have searched endlessly for a solution to centering my drop-down navigation bar on my website.
I have tried removing the code float: left code from my CSS and added the code display: inline-block: but nothing seems to be working. I have tried several solutions but they have either moved my navigation bar from the top or removed the background I have set for the navigation bar.
If I could get some help on centering the navigation bar without removing the navigation bar's background or displacing it, that would be great.
html {
background-image: url(../images/RL_bg.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rocket League</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<header>
<ul>
<li class="dropdown">
Homepage
<div class="dropdown-content">
What is Rocket League?
Gameplay
Platforms
</div>
<li class="dropdown">
Cars
<div class="dropdown-content">
Standard
Downloadable Content
Platform Exclusive
</div>
<li class="dropdown">
Online Content
<div class="dropdown-content">
Multiplayer
Competitve
</div>
<li class="dropdown">
Maps
<div class="dropdown-content">
Standard
Experimental
</div>
<li class="dropdown">
Crates
<div class="dropdown-content">
Item Customization
Trading
</div>
<li class="dropdown">
About Me
<div class="dropdown-content">
Purpose of This Site
About The Creator
</div>
</li>
</ul>
</header>
<body>
<h1></h1>
</body>
</html>
Your going to want to make a create a id for your ul's that does this tag around your entire list. Then you can use this for css.
#navmenu {
margin: 0 auto;
width: 500px;
}
#navmenu a {
width: 100px;
text-align: center;
}
So this will work if your using an inline list. Let me know if this solution is helpful at all, because we can custom taylor it to your css/html specifically.
I have a website that is primarily html5 and css3, and the pages look good when I run them locally from my pc on chrome and internet explorer 11.0.47, but when I put it on the Linux server and run the page from there on my own pc, the page loses the css in IE but is fine in chrome.
I don't have a lot of experience with html5/css3. What's going on here? I tried googling it, but don't see any online help.
The web page is start of web site. As you can see, in IE, Map Home isn't shown as a button in nav to the left, and nav lost it's brown background. It also lost the header background. If you look at the link in chrome, it has those.
Any ideas? Could there be a directional issue with use of the media folder when IE pulls it from Linux but not chrome?
**Added:
I see this on the server log, but when I list the location on the server, the file exists there. The css file (catvStyles.css) referring to the globe file is in the same dir as index.html, and the media dir is in the dir of index.html.
File does not exist:
/opt/apps/html/catv/media/globe_transp_gradation.png), url(..,
referer: http://ltrkarkvm391.mgmt.windstream.net/catv/index.html
**
This looks similar to other web page if you can't reach the link. The problem is my linux hosted site isn't showing the brown nav to the left, it's not showing the metal header globe, and windmill pictures, and it's not showing Map Home in a button (it's as a link without the button), and it's not showing the picture in the right side to the right (it's in the body now).
This is the index.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="FunStuff/catvStyles.css">
<title>CATV Monitoring</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Wi">
<meta name="keywords" content="catv, cmts, snmp, modem, dhcp, rf, status, map">
<meta name="author" content="Wi, Michele, Adam">
<style type="text/css">
</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header role="banner" class="bgFun">
<h1>Wi</h1>
<h2 id="headerH2Pos">CATV Monitoring System</h2>
</header>
<div id="page">
<nav role="navigation" id="navBakImg">
<ul>
<li>Map Home</li> <!--MapHome.html-->
</ul>
</nav>
<main role="main" id="middle">
<h2>Purpose</h2>
<p>To provide CATV Monitoring to our internal customers</p>
</p>
<h2>Mapping </h2>
<p>Click the "Map Home" link on the left to see how the network is doing </p>
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
</p>
</main>
<aside role="complementary">
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
<h2>How To Start</h2>
<p>See directions</p>
</aside>
</div> <!-- end of flex container -->
<footer role="contentinfo">
<img class="tree" src="media/Tree_Branches_And_Roots_clip_art_small.png" height="50" width="50" alt="Tree" title="Created by Michele " >
<br>Copyright © 2017
<script>
document.write('Last Modified: ' + document.lastModified);
</script>
<br>
</footer>
</div>
</body>
</html>
This is the css catvStyles.css:
body {font-family: Verdana, Arial, sans-serif;
background-color: #330000;
background-image: url(../media/green.gif);
}
#middle{}
header, h1, wrapper { margin-top: 0; }
#wrapper { background-color: #F4E8BC;
/*background-color: #00ffff;*/
width: 90%;
margin: auto;
color: #003300;/*color: #330000;*/
}
h1, h2 { color: #003300; }
header {
background-repeat: no-repeat;
background-color:transparent;
}
.bgFun{background-image: url(../media/globe_transp_gradation.png),
url(../media/windmill_transp_gradation.png),url(../media/MetalGalvanized0014_M.jpg);
background-position: left, right;
/*width: 80%;
height:80%;*/
background-size:45%,30%,cover;
background-repeat:no-repeat;
background-color:transparent;}
h1 { text-align: center;
font-size: 300%;
padding: 5% 0;
text-shadow: 3px 3px 3px #F4E8BC;
}
nav, main, aside { padding: 0 1em;
}
.imgFix { width: 25%;
height: auto;
}
nav ul { list-style-type: none;
font-size: 1.2em;
padding-left: 0;
}
/*nav a { text-decoration: none;}*/
nav a {
text-decoration: none;
background-color: #666666;
display:block;
text-align:center;
width:100%;
margin:1em auto;
border:solid .08em #339900
}
nav a:link { color: #330000; }
nav a:visited { color: #003300; }
nav a:hover { color: #996600;
background-color:#000000;}
footer { text-align: center;
font-size: 80%;
font-style: italic;
color: #003300;
padding: 2.5%;
}
#page{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#navBakImg{border: .1em solid #000000;
padding-right:1em;
background-image: url(../media/CardboardPlain0016_2_M.jpg);
font-size:90%;}
nav{-webkit-flex: 1;
flex: 1;
}
main{-webkit-flex: 7;
flex:7;
}
aside{-webkit-flex: 2;
flex: 2;
}
.tree { width:3em;
height: auto;
float:right;}
#media only screen and (max-width: 1024px) {
body { margin: 0; padding: 0; }
#wrapper { width: auto; margin: 0; }
h1 { font-size: 200%; }
nav li { padding: 0 0.5em;
font-size: 1.2em;
}
#page{-webkit-flex-direction: column;
flex-direction: column;
}
nav ul{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
webkit-justify-content: center;
justify-content: center;
}
.imgFix { width: 30%;
height: auto;}
}
#media only screen and (max-width: 768px) {
nav{-webkit-order: 1;
order: 1;
}
nav ul{-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section{display:none;}
.imgFix { width: 35%;
height: auto;}
}
header, main, nav, footer, figure, figcaption { display: block; }
#headerH2Pos{position:relative;
left:26%;
}
EDIT: Looks like it's something else, as Michele says it works in Chrome but not IE when served from Linux.
Judging by your filenames, you may have just encountered a Windows => Linux gotcha:
The Linux filesystem is Case Sensitive, Windows is case insensitive.
You'll need to double check that you're using the right casing in your URLs, else the file won't be found when Linux goes to look for it.
I had to add this line and it was fixed:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Okay guys, so here's the problem, I have a set of links (3 in total, titled "News", "About" and "Contact", I wish to perfectly center these, allowing them to stay directly in the center of the users screen beneath my logo. Here's my code;
HTML;
<!DOCTYPE html>
<html>
<head>
<title>BHD - BlackHawk Drift</title>
<!--Scripts-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="scripts/fadein.js"></script>
<script src="scripts/buttonfade.js"></script>
<link rel="stylesheet" type="text/css" href="css/stylemain.css">
<!--end scrpts-->
<!--setting the basic styles-->
<style>
a:link {
color: #FAFAFA;
}
</style>
</head>
<body>
<!--Providing the text-->
<img class="displayed" src="img/text.png" alt="#blackhawk drift">
<!--end-->
<!--basic mainpage links-->
<div class="link">
<p1>About</p1>
<p1>News</p1>
<p1>Contact</p1>
</div>
</body>
</html>
CSS;
html {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 400px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 23%;
position: relative;
}
.link {
display: block;
padding: 2px;
letter-spacing: 6px;
position: relative;
margin-left: auto;
margin-right: auto;
}
And here's a visual image of what I am trying to accomplish...
EDIT: I have managed to do this!:) I just added "text-align: center;" to my class in CSS.
Just add text-align: center; to the css class ".link"
I am having some issues with z-index that I can't seem to be able to iron out. I've made sure that the relavant position atributes are set to relative, but my elements just won't play nicely.
HTML:
<!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>
<div class="container" id="top">
<h1>Top</h1>
<div class="slideshow">
<ul class="nav">
<li class="prev">Previous</li>
<li class="next">Next</li>
</ul>
<ul class="slides" id="slides">
<li><img src="images/top_blue.gif" alt="Harley Davidson Sportster" /></li>
<li><img src="images/top_brown.gif" alt="Harley Davidson Sportster" /></li>
<li><img src="images/top_vanilla.gif" alt="Harley Davidson Sportster" /></li>
</ul>
</div>
</div>
</body>
</html>
And here my CSS:
body, h1, ul, li {
margin: 0; padding: 0; border: 0;
}
.container {
width: 800px; margin: auto;
position: relative;
}
.slideshow {
width: 800px; height: 50px;
position: relative;
}
.slideshow ul.nav {
list-style: none;
position: relative;
z-index: 100;
}
.slideshow ul.nav li.prev {
float: left;
}
.slideshow ul.nav li.next {
float: right;
}
.slideshow ul.nav li a {
display: block; width: 32px; height: 48px; text-indent: -9999px;
}
.slideshow ul.nav li.prev a {
background: url(images/arrow_prev.gif);
}
.slideshow ul.nav li.next a {
background: url(images/arrow_next.gif);
}
.slideshow ul.slides {
list-style: none;
position: relative;
top:0px;
height:50px;
}
Here my JSFiddle: http://jsfiddle.net/XPsn7/1/
Basically, the main images under have z-index of 5, and the arrow image should position in front of the slides, with z-index of 15. However, the navigation arrows cause the slides images to move right to make room for them.
What's going on?
The problem is your relative positioning. If you create a relative container with child elements that are absolutely positioned, you should be able to float the images as intended.