I am new to css my dropdown menu is hiding behind the div please help me to find out the problem. my HTML and CSS code is:
<style>
*
{
margin:0px;
padding:0px;
}
body
{
background-color:mintcream;
}
#header
{
height:260px;
width:auto;
margin:5px;
}
#headerimg
{
height: 260px;
width:100%;
}
#wrap #menu
{
width:550px;
margin:0 auto;
padding:10px;
}
#wrap
{
height:50px;
background-color:lightsalmon;
border:1px solid white;
border-radius:5px;
}
#wrap #menu ul li
{
background-color:black;
border-radius:5px;
width: 120px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
list-style-type:none;
margin-left: 3px;
}
#wrap #menu ul li a{
color:white;
text-decoration:none;
display:block;
}
#wrap #menu ul li a:hover
{
background-color:mistyrose;
color:orangered;
border-radius:5px;
}
#wrap #menu ul li ul li
{
display:none;
}
#wrap #menu ul li:hover ul li
{
display:block;
}
#content
{
width:100%;
height:500px;
background-color: teal;
margin:5px;
}
#content1
{
width:50%;
height:500px;
background-color: yellow;
float:left;
}
#content2
{
width:50%;
height:500px;
background-color:red;
float:left;
}
</style>
<body>
<div id="header">
<img id="headerimg" src="doc.jpg" />
</div>
<div id="wrap">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Services
<ul>
<li>Food</li>
<li>Hospital</li>
<li>Medical</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="content1"> </div>
<div id="content2"> </div>
</div>
</body>
I am new to css. My dropdown menu is hiding behind the div. Please help me to find the problem.
Please add below css
ul {position: relative; z-index: 99999; }
Just add position:relative in "#wrap #menu ul li" . I think your problem was solved. If you have any other problem then put it here.
Thanks for asking.
Related
I currently have a Header in my HTML which is a Unordered List with List Items display = inline. What I am try to accomplish is to spread each of the 5 items into an equaled space (20% Width for each) and step them centered in their respective spaces. I was able to accomplish this with a lot of ease on the Footer, but instead of List Items, I used Divs for each of the Options. Can anyone help me do the same with list? I can redo it as Divs, but I'd like to at least know how to make the list work.
How it should be
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
}
#header li {
display:inline;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I hope I was able to illustrate what I am trying to accomplish, but if it is still unclear please let me know. Thanks in advance for any help.
You can try like this ,I hope it will helps you.
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
}
#header .holder {
width:100%;
float:left;
}
#header ul {
display: table;
margin: 0;
padding: 0;
width: 100%;
}
#header a {
color: #ffffff;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#header li {
display: table-cell;
padding: 5px 0;
position: relative;
text-align: center;
vertical-align: middle;
width: 20%;
}
#header li:after {
border-left: 1px solid #2f477a;
content: "";
height: 20px;
position: absolute;
right: 0;
top: 8px;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
ul {
display: flex;
}
#header li {
...
flex: 1;
display: flex;
align-items: center;
justify-content: center;
...
}
https://jsfiddle.net/234zzgn7/
Add this css. Ofcourse this is using flexbox which is something that I found to be extremely awesome. But you should investigate whether your users support it or not.
http://caniuse.com/#search=flexbox
Here try this. Changes are on #header li and #header a
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
display:block;
width:100%;
box-sizing:border-box;
}
#header li {
display:inline-block;
box-sizing:border-box;
width:20%;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
i am using ul an li as menu list.I am able to change color of menu item in hover and visited link but on active state color is not changing, would you tell me what could be the solution for that problem?
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chandan</title>
<link rel="shortcut icon" href="../Resources/favicon.png" />
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="menu_line">
<img src="../Resources/Logo.png" alt="logo" id="logo">
<ul>
<li value="home"><b>Home</b></li>
<li value="services"><b>Services</b></li>
<li value="portfolio"><b>Portfolio</b></li>
<li value="blog"><b>Blog</b></li>
<li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>
</li>
</ul>
</div><!--menu line end here-->
</div><!--header end here-->
</div><!--container end here-->
</body>
</html>
#css FIle*
#charset "utf-8";
/* CSS Document */
#logo
{
margin:0 auto;
float:left;
height:55px;
width:60px;
margin-top:0px;
margin-left:0px;
}
ul
{
margin:17px auto;
float:right;
}
li
{
list-style-type:none;
display:inline;
display: inline-block;
padding-left: 25px;
}
.menu_line{
margin:0 auto;
margin-top:60px;
margin-left:120px;
height:55px;
width:730px;
float:left;
border-style: solid;
border-width: 2px;
}
.container {
margin: 0px auto;
width: 998px;
background-position:center;
}
.header
{
margin:0 auto;
background-color:#f82424;
margin-top:-8px;
margin-left:-8px;
height:660px;
width:1007px;
background-position:center;
}
li a
{
color:#fcb1b1;
text-decoration:none;
}
li a:hover
{
color:#fff;
text-decoration:underline;
}
li a:active
{
color:#fff;
text-decoration:underline;
}
This might help
#menu_line .active a {
background-color:#FFD700;
}
here is my solution in css :
I have edited your code at styles and menu items
simply you must set class="active" to each li element you want to show active
I have added the class="active" to the service menu item.
HTML
<div class="container">
<div class="header">
<div class="menu_line">
<img src="../Resources/Logo.png" alt="logo" id="logo">
<ul>
<li value="home"><b>Home</b></li>
<li value="services" class="active" ><b>Services</b></li>
<li value="portfolio"><b>Portfolio</b></li>
<li value="blog"><b>Blog</b></li>
<li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>
</li>
</ul>
</div><!--menu line end here-->
</div><!--header end here-->
</div><!--container end here-->
CSS
#logo
{
margin:0 auto;
float:left;
height:55px;
width:60px;
margin-top:0px;
margin-left:0px;
}
ul
{
margin:17px auto;
float:right;
}
li
{
list-style-type:none;
display:inline;
display: inline-block;
padding-left: 25px;
}
.menu_line{
margin:0 auto;
margin-top:60px;
margin-left:120px;
height:55px;
width:730px;
float:left;
border-style: solid;
border-width: 2px;
}
.container {
margin: 0px auto;
width: 998px;
background-position:center;
}
.header
{
margin:0 auto;
background-color:#f82424;
margin-top:-8px;
margin-left:-8px;
height:660px;
width:1007px;
background-position:center;
}
li a,
li a:hover,
li a:active {
color:#fff;
text-decoration:underline;
}
li.active a,
li.active a:hover,
li.active a:active {
background: #323637;
}
I really need help on alignment of navbar in fixed header
I want the text above the nav bar to be to the left of the nav bar in the menuTop and the navbar to be to the very right in menuTop
JS Fiddle: http://jsfiddle.net/g2Sr9/
HTML:
<div class="myMenuTop">
<span class="myFont1">Company™</span>
<ul id="navmenu">
<li>1</li>
<li>2</li>
<li>
3<span class="darrow">👇</span>
<ul class="sub1">
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
<li>
4<span class="darrow">👇</span>
<ul class="sub1">
<li>4.1</li>
<li>4.2</li>
<li>
4.3<span class="rarrow">👉</span>
<ul class="sub2">
<li>4.3.1</li>
<li>4.3.2</li>
<li>4.3.3</li>
</ul>
</li>
</ul>
</li>
<li>5</li>
</ul>
</div>
CSS:
.myMenuTop {
height:40px;
width:100%;
min-width:536px;
background-color:#000;
position:fixed
}
.myLogo {
height:300px;
width:100%;
min-width:536px;
border-bottom:1px solid #000;
border-top:1px solid #000;
align:center;
text-align:center
}
* {
margin:0;
padding:0
}
.img1 {
height:211px;
width:550px;
min-width:500px
}
/* RULES FOR NAVIGATION MENU*/
/* ================================================ */
ul#navmenu,ul.sub1,ul.sub2 {
list-style-type:none;
font-size:9pt
}
ul#navmenu li {
width:100px;
position:relative;
text-align:center;
float:left;
margin-right:4px
}
ul#navmenu a {
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
background-color:red;
border:1px solid #CCC;
border-radius:5px
}
ul#navmenu .sub1 a {
margin-top:5px
}
ul#navmenu .sub2 a {
margin-left:10px
}
ul#navmenu li:hover > a {
background-color:grey
}
ul#navmenu li:hover a:hover {
background-color:#FA07AD
}
ul#navmenu ul.sub1 {
display:none;
position:absolute;
top:26px;
left:0
}
ul#navmenu ul.sub2 {
display:none;
position:absolute;
top:0;
left:101px
}
ul#navmenu li:hover .sub1 {
display:block
}
ul#navmenu .sub1 li:hover .sub2 {
display:block
}
.darrow {
position:absolute;
top:5px;
right:4px;
font-size:11pt
}
.rarrow {
position:absolute;
top:6px;
right:4px;
font-size:13pt
}
You just need to set the float element to be left for the left aligned content and right content to the right.
.myFont1{
float: left;
margin-top: 20px;
}
#navmenu{
float: right;
margin-top: 5px;
}
really all you need is a float: left applied to .mylogo, and a float: right applied to #navmenu to accomplish exactly what you asked.
.mylogo {
float: left;
}
#navmenu {
float: right;
}
I have changed it please check and revert back, Please expand the result window a bit so that both can be accommodated in the bar.
Changed some css
myMenuTop -> float:left; display:inline block;
navmenu -> float:right
Fiddle
HTML:
<div id="navbar">
<div id="container">
<ul style="height:40px">
<li><p id="navtext">Home</p></li>
</ul>
</div>
</div>
CSS:
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
}
#navtext {
color:#FFFFFF;
padding-bottom:-50px;
}
#navbar {
width:100%;
height:40px;
background-color:#3498db;
}
#container {
margin-right:15%;
margin-left:15%;
vertical-align: middle;
}
I would like to have the "Home" text centered within the <ul> tag that is 40px tall. I have tried looking around for an answer but nothing I try seems to work. I'm trying to make a navbar for my site.
Add in your css:
#container ul li {line-height:10px;}
http://jsfiddle.net/PWTcL/
Try:
li {
float:left;
height:100%;
display:table;
}
#navtext {
color:#FFFFFF;
padding-bottom:-50px;
display:table-cell;
vertical-align:middle;
}
Fiddle here.
If you only have a single line, use line-height: 40px, and remove margin on <p> :
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
line-height: 40px;
margin: 0 5px;
}
.navtext {
color:#FFFFFF;
margin: 0;
padding-bottom:-50px;
}
#navbar {
width:100%;
height:40px;
background-color:#3498db;
}
#container {
margin-right:15%;
margin-left:15%;
vertical-align: middle;
}
<div id="navbar">
<div id="container">
<ul style="height:40px">
<li><p class="navtext">Home</p></li>
<li><p class="navtext">Link</p></li>
<li><p class="navtext">Contact</p></li>
</ul>
</div>
</div>
I am pretty new on css and I want to learn use css effectively but I have now couple of problems/questions, I want to make grey border under my menu but when I zoom in and out border behave so strangely? Sorry my code is not very clean. And how can I retouch my code for better standing?
HTML
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:#d00000;
text-decoration:underline;
}
#home{
background-color:#0000CC;
}
span{
font-style:italic;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul>
<li>sub</li>
<li>sub2</li>
</ul>
</li><!---End of DropDown Videos menu--->
<li>link4</li>
<li>link5</li>
</ul><!---End of nav elements--->
<br class="clearFloat">
</div><!---End of header--->
</div><!---End of wrapper--->
<div id="grey">
</body>
</html>
CSS
#wrapper{
float:center;
}
#grey{
border-bottom:250px solid #a0a0a0;
padding:0px;
margin-left:203px;
margin-right:387px;
}
#header{
margin:auto;
padding:0px;
clear:both;
}
#header ul{
margin:0px;
padding:0px;
line-height:30px;
}
#header li{
margin:0px;
padding:0px;
list-style: none;
float:left;
position:relative;
background-color:#000099;
border:1 solid #0000CC;
top:px;
right:-15%;
}
#header ul li a{
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#header ul ul li a{
color:#0000cc;
}
#header ul ul li{
right:0%;
}
#header ul ul{
margin:0px;
padding:0px;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
}
#header ul li:hover ul {
visibility:visible;
opacity:1 ;
}
#header ul li:hover {
background-color:blue;
}
#header ul li:hover a {
color:black;
}
#header ul ul li:hover a {
color:#d00000;
}
.clearfloat{
clear:both;
margin:0px;
padding:0px;
}
Without completely reworking your code, just think of added a bottom border per 'li'...
Remove your id='grey' and add your border-bottom to your #header li {}. Refresh but note how your 'sub' menus then each have a bottom border now. They inherited it, so you then need to turn those off...hence add border-bottom: none to the #header ul ul li declaration.
Now...if we did a quick rework of your code...
HTML
<div id="wrapper">
<div id="header">
<div id="navwrapper">
<ul id="nav">
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul class="sub">
<li>sub</li>
<li>sub2</li>
</ul>
</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</div>
CSS
html, body { margin:10px;padding:0; }
#wrapper, #header, #navwrapper { margin: 0 auto 0 auto; }
#nav {
padding:0;
margin: 0 auto 0 auto;
line-height:30px;
height:30px;
list-style:none }
#nav li {
border-bottom: solid #a0a0a0 10px;
margin:0;
padding:0;
float:left;
background-color:#000099;
}
#nav a {
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#nav li:hover { background-color:blue; }
#nav li:hover .sub {
visibility:visible;
opacity: 1;
}
#nav .sub a { color:#00c; }
#nav .sub {
margin:0;
padding:0;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
list-style: none;
}
#nav .sub li { clear:both; border-bottom: none; }
Using more naming conventions with your sub menus is safer than just drilling down through the css. You also need to note that any top-level CSS declaration is inherited by all the children within. Such that if you declare #nav li as being black but want all the 'sub' list elements to be blue, that needs to be stated explicitly...AFTER the initial declaration in the CSS document.
Hope this helped...