i'm displaying menu hover on image .These all image generated dynamically.
while mouse hover on first image menu will display but problem on menu items background items displaying. how to hide behide elemets while displying hover ?
a {
text-decoration: none;
}
.menu {
font-family: Arial;
color: #515151;
height: 40px;
position: relative;
text-align: left;
width: 15px;
margin: 0 auto;
}
.menu li a {
color: #515151;
display: block;
cursor: pointer;
font-size: 14px;
padding: 6px 15px;
}
.menu li a:hover {
background: #f44141;
color: #fff;
}
.sub {
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
padding: 40px 0 3px;
}
a.hover-link {
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
height: 8px;
cursor: pointer;
border-radius: 5px 5px 0 0;
font-weight: 700;
border: 1px solid #ddd;
padding: 10px 0 1px 10px;
}
.sub-options {
list-style: none;
font-size: 11px;
margin: 0;
padding: 0;
}
Working example : This is just z-index's issue CSS:
.sub{
background: #fff;
position: absolute;
z-index: 1000;
width: 200px;
margin: 0px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none; top:38px; left:0;
}
Related
I'm trying to add the triangle pointer directly in the middle of the anchor element. I tried using the transform property but its not working for the x coordinate:
.navigation-bar > a {
float:right;
display: inline-block;
vertical-align: top;
margin-right: 15px;
height: 60px;
color: white;
line-height: 70px;
font-weight: bolder;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
position: relative;
padding: 3px;
}
.navigation-bar > a:hover:before {
content: "";
position: absolute;
transform: translateX(350px);
transform: translateY(40px);
width: 0px;
height: 7px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
}
You can do this like that way....
.navigation-bar>a {
display: inline-block;
vertical-align: top;
margin-right: 15px;
height: 60px;
color: #000;
line-height: 70px;
font-weight: bolder;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
position: relative;
padding: 3px;
background: red;
}
.navigation-bar>a:before {
content: "";
position: absolute;
transform: translateY(-10px);
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid red;
}
<div class="navigation-bar">
html
</div>
I have the following drop down:
CSS:
.third-menu{
position: relative;
top: -50px!important;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: block;
width: 100%;
position: absolute;
height: 30px;
}
.mn-sidebar {
margin-left: 40px;
display: block;
position: relative;
vertical-align: middle;
padding-bottom: 1px;
background: #333333;
width: 250px;
z-index: 2;
}
#mn-cont {
display: block;
vertical-align: top;
position: relative;
padding: 10;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
border-left: 5px solid #CCFFFF;
border-right: 5px solid #CCFFFF;
}
.mn-vnavigation li a {
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/*height: 590px; */
width: 300px;
background: #333333;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: list-item;
}
.dropdown-submenu > a:after {
display: list-item;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
Javascript in the fiddle.
Here's the jsfiddle:
http://codepen.io/anon/pen/LpxVdv
Now, when I hover over the items, say on Central Compliance, then the remaining items below it (Control Room, Wealth Applications etc.) disappear. And if I over over Control Room, then Orchestria comes in the white space.
How can this be fixed??
add this to your css:
.third-menu{
position: absolute;
right:0;
top:0;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
position:relative;
}
It doesn't disapeare, the active item expands to have enought height to contain menu from next level. Try using position:absolute for next level container.
My links are not Start Class and Center class for my website I am building. I have gone over this several times and can not see what I have done wrong. Can someone please assist me with this?
My html
<DIV class="outline">
<DIV class="navigation">
<ul>
<li class="orange start">Home</li>
<li class="orange center">Forum</li>
</ul>
</DIV>
</DIV>
My Css class
/*Start Links*/
a:link {
color: #FFFFFF;
text-decoration: none;
margin: 0;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
.navigation ul li {
margin: 0px auto;
display: inline-block;
}
/*End Links*/
/*Start Button*/
.start {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em 0 0 .5em;
-moz-border-radius: .5em 0 0 .5em;
border-radius: .5em 0 0 .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2pxrgba(0,0,0,.2);
margin: 0px;
}
.center {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2pxrgba(0,0,0,.2);
margin: 0;
}
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2pxrgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
/*End Button*/
/*Start Website*/
body {
background-color: #393939;
color: #FFFFFF;
padding: 0;
margin: 0;
}
.header {
display: inline-block;
width: 100%;
text-align: left;
border:solid 2px red;
}
.circle {
float: left;
width: 100px;
height:100px;
display: inline-block;
background: #FF5A09;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.header h1.first {
margin-top: 30px;
margin-left: -92px;
margin-right: 5px;
display: inline-block;
color: #FFFFFF;
}
.header h1.last {
display: inline;
color: #FF5A09;
}
.header .right {
display: block;
height: auto;
float: right;
padding: 10px 10px 10px 10px;
border-left: solid 2px red;
}
.navigation {
margin: 0 auto;
display: inline-block;
width: 100%;
text-align: center;
}
.outline {
display: block;
margin: 0 auto;
width: 980px;
border: solid 2px red;
}
.content {
display: inline-block;
width: 60%;
border: solid 2px red;
margin: 0 auto;
}
.footer {
display: block;
width: 100%;
border: solid 2px red;
padding: 10px 0 10px 0;
text-align: center;
}
/*End Website*/
/*Start slider*/
/*End slider*/
It is because the whitespace between the <li> elements is significant. If you remove all whitespace, the elements will be right next to each other. Either you just do this:
<li class="orange start">Home</li><li class="orange center">Forum</li>
Or, if you want to keep the line breaks in code, which I usually think is a good thing, you can insert an HTML comment like this:
<li class="orange start">Home</li><!--
--><li class="orange center">Forum</li>
It's a matter of taste, but I tend to favor the latter because I find it more readable.
i am not getting vertical scrollbar...
jsfiddle link -> http://jsfiddle.net/QNuzb/2/
css is
/* Navigation */
#nav-bar {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 45px;background: #F5F5F5;}
#nav {width: 800px;margin: 0 auto;height: 48px;text-align:center;}
#nav > li { display: inline-block;width: 15em;}
ul{list-style-type: none; display:inline-block;margin:0 auto; padding:0; position:relative;font-weight: bold; }
ul li{display:block;display:inline-block; position:relative;margin-right:5px;margin-left:5px}
ul li a{text-align: center;font-size: 18px;margin: 5px;padding: 8px;text-decoration: none; text-transform: capitalized;height: 35px; color:#222; font-size:18px; line-height:48px;}
ul li a:hover, ul li a.active{text-align:center;border-bottom:3px solid #800000; color:#800000}
/* Tabs */
.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
It's because of the position: fixed; in your nav-bar class. remove it.
#nav-bar {
position: fixed; /* remove */
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 45px;
background: #F5F5F5;
}
I feel like this is a stupid question, but I honestly cannot figure this out. I can't align an image to the text.
kissoff.weebly.com/account-page.html
The box in the center that has
"ID:78490
Bank:" etc.
should have the image to the right of it. The problem is the image keeps putting itself in the last header on the page and aligning to that instead (it's a picture of a cat with a green border).
Main CSS used for this page:
/*ACCOUNT PAGE!*/
#content-container {
padding-left: 300px;
padding-top: 70px;
height: 200px;
width: 500px;
}
#stats {
background-color: #FCFCFC;
width: 500px;
margin-top: 20px;
margin-left: 100px;
border: 1px solid rgba(125,180,18,0.8);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-top: 18px solid rgba(125,180,18,0.8);
}
img.stat-img {
margin-top: -45px;
margin-left: 370px;
height: 100px;
width: 100px;
border: 1px solid rgba(125,180,18,0.8);
}
#box-container {
width: 200px;
}
.box {
background-color: #FCFCFC;
margin-top: 100px;
margin-left: 1px;
padding: 5px;
float: left;
width: 180px;
line-height: 5px;
border: 1px solid rgba(125,180,18,0.8);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-top: 18px solid rgba(125,180,18,0.8);
}
.box2 {
background-color: #FCFCFC;
margin-top: 20px;
margin-left: 1px;
padding: 5px;
color: #C2BAAF;
float: left;
width: 180px;
line-height: 5px;
border: 1px solid rgba(125,180,18,0.8);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-top: 18px solid rgba(125,180,18,0.8);
}
.last-box {
background-color: #FCFCFC;
margin-top: 20px;
margin-left: 1px;
margin-bottom: 50px;
padding: 5px;
color: #C2BAAF;
float: left;
width: 180px;
line-height: 5px;
border: 1px solid rgba(125,180,18,0.8);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-top: 18px solid rgba(125,180,18,0.8);
}
.box-title {
margin-top: -15px;
z-index: 900;
color: #FFF;
}
.box a:link {
font-size: 13px;
color: #000;
text-decoration: none;
}
.box a:visited {
font-size: 13px;
color: #000;
text-decoration: none;
}
.box a:hover {
font-size: 13px;
color: #000;
text-decoration: underline;
}
.box a:active {
font-size: 13px;
color: #000;
text-decoration: underline;
}
.box2 a:link {
font-size: 13px;
color: #000;
text-decoration: none;
}
.box2 a:visited {
font-size: 13px;
color: #000;
text-decoration: none;
}
.box2 a:hover {
font-size: 13px;
color: #000;
text-decoration: underline;
}
.box2 a:active {
font-size: 13px;
color: #000;
text-decoration: underline;
}
.last-box a:link {
font-size: 13px;
color: #000;
text-decoration: none;
}
.last-box a:visited {
font-size: 13px;
color: #000;
text-decoration: none;
}
.last-box a:hover {
font-size: 13px;
color: #000;
text-decoration: underline;
}
.last-box a:active {
font-size: 13px;
color: #000;
text-decoration: underline;
}
/*ACCOUNT PAGE END!*/
Possible CSS issues (the main text containers):
#container {
margin-left: 30px;
padding-left: 210px;
padding-top: 70px;
}
#text {
width: 800px;
border: 0 solid #000;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
Thanks for looking, I appreciate it.
First add position:relative to the .stat-container class (the container of the img)
then add this css to your .img.stat-img class
.img.stat-img
{
position: absolute;
right: 0;
top: 0;
}
If you want the img to the far right of the box then add position:relative to the id="stats" div instead, and in your .img.stat-img class use
.img.stat-img
{
position: absolute;
right: 40px;
top: 25px;
}
Here is the corrected HTML and css sturcture. Please follow the following css and HTML.
CSS Chagnes
#stats {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #FCFCFC;
border-color: rgba(125, 180, 18, 0.8);
border-image: none;
border-radius: 5px 5px 5px 5px;
border-right: 1px solid rgba(125, 180, 18, 0.8);
border-style: solid;
border-width: 18px 1px 1px;
/*margin-left: 100px;
margin-top: 20px;*/
width: 500px;
float:left;
}
#content-container {
height: auto;
margin-left: 30px;
/*padding-left: 210px;*/
padding-top: 70px;
}
#stat-container {
padding:10px;
}
}
img.stat-img {
border: 1px solid rgba(125, 180, 18, 0.8);
height: 80px;
margin-left: 10px;
margin-top: 5px;
width: 100px;
}
HTML changes
You need to put cat image outside the div id="stats" not inside it.
Hope it will work for you.