I am trying to place a image above my menu background.
I have tried list-style-image and background image (on li and a tag). How do I do this?
Image with the menu: image from menu
orange background: this is the background of the menu (the a tag)
gray box: This is the image I want above my menu backround. (the 'A' is where the menu background is.
#nav ul li{
font-weight: bold;
float: left;
margin-top: -5px;
position: relative;
padding: 6px 5px 0 15px;
z-index: 99;
height: 50px;
background-position:left center;
background-image: url(../images/bussel/menu-blad1.png) !important;
background-repeat: no-repeat;
}
#nav ul li a{
background-color: #feb24e;
display: block;
width: 153px;
height: 35px;
color: #fff;
text-align: center;
text-decoration: none;
margin: 10px 0px 0px 0px;
position: relative;
z-index: 98;
}
I've done this (the div way):
The link:
<li><span class="blad"></span>Groepen</li>
The css:
#nav ul li{
font-weight: bold;
float: left;
margin-top: -5px;
margin-right: 5px;
position: relative;
padding: 6px 5px 0 15px;
z-index: 99;
height: 50px;
}
#nav ul li a{
background-color: #feb24e;
display: block;
width: 153px;
height: 35px;
color: #fff;
text-decoration: none;
margin: 10px 0px 0px 0px;
}
#nav ul li span.blad{
width: 35px;
height: 43px;
background-position:left center;
background-image: url(../images/bussel/menu-blad.png);
background-repeat: no-repeat;
float: left;
margin: 4px 5px 0px -15px;
}
So it works, thanks!
Can you go with something like this ? (roughly) : jsFiddle demo
Just create another div with float:left and give it correct margin. Then you can place your image inside this floated div.
Use z-index
Example:
<div style="position: relative;">
<div style="position: absolute; left: 10px; top: 30px; z-index: 1;"> ONE </div>
<div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> TWO </div>
<div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> THREE </div>
</div>
The second div would be in the front, and the first div on the background.
u can try this
a{
position:absolute;
background:red;
width:10px;
height:10px;
}
li{
position:relative;
bacground:url(../);
padding:20px;
}
Related
I am trying to add a ghost button on a bootstrap carousel here: http://oarvoredo.businesscatalyst.com/
It's the first slide the white button.
.a_banner a {
color:#FFF !important;
font-size:22px !important;
text-decoration:none;
position:absolute;
top: 75% !important;
text-align:center;
margin-left:40%;
margin-right:40%;
border:1px solid #FFF;
border-radius:16px;
padding-left:1%;
padding-right:1%;
}
I am not being able to center it properly with position:absolute;. How can I make this work?
Set left to 50% and margin-left to minus half of button width.
.a_banner a {
display: inline-block;
position: absolute;
top: 75%;
left: 50%;
width: 200px;
margin: 0 0 0 -100px;
color: #FFF;
font-size: 22px;
text-decoration: none;
text-align: center;
border: 1px solid #FFF;
border-radius: 16px;
padding-left: 1%;
padding-right: 1%;
}
Try:
left: 50%;
transform: translateX(-50%);
I want to build a menu where every single <li> hovers out. But weirdly the whole menu always hovers out. Here is the fiddle code.
I have the following css code:
body {
background-color: #eee;
margin: 0;
padding: 0;
overflow: hidden;
}
.tabs {
width: 80%;
position: fixed;
bottom: -20px;
left: 100px;
}
.tabs ul {
display:block;
}
.tabs li {
width: 60px;
height: 80px;
margin-bottom: -20px;
padding: 10px;
float: left;
list-style: none;
display: inline;
background-color: #ccc;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
font-family: verdana;
text-align: center;
}
.tabs li:hover {
margin-bottom: 20px;
}
Reason is that when you give margin to it then it's push whole ul. It's better give bottom instead of margin. write like this:
.tabs li:hover {
bottom: 20px;
}
Check this http://jsfiddle.net/X96KE/17/
using jQuery will solve your problem if you are familiar with it try this
jQuery("li").mouseover(function() {
jQuery(this).css("margin-bottom","20px");
}).mouseout(function(){
jQuery(this).css("margin-bottom","0px");
});
It's because you haven't specified what to do with the margin-top. Here's an updated example: http://jsfiddle.net/X96KE/18/
.tabs li:hover {
margin-bottom: -40px;
margin-top: -40px;
}
SEE LIVE MENU HERE.
I am trying to figure out why the drop-down disappears after you attempt to rollover it. Can someone see the problem in my code? Thank you.
HERE IS MY HTML MENU
<div id="menu">
<ul>
<li><span>Needs Assessment</span> </li>
<li><span>Knowledge Acquisition</span>
<ul>
<li>Administer Knowledge<br>Pre-Test</li>
<li>Assign Asthma<br>Article </li>
<li>Administer Knowledge<br>Post-Test</li>
<li>Discuss Asthma<br>Case Study</li>
</ul>
</li>
<li><span>Skills Proficiency</span> </li>
<li><span>Simulation in Teams</span>
<ul>
<li>Perform Asthma<br>Simulation</li>
<li>Facilitate<br>Debriefing</li>
</ul>
</li>
<li><span>Performance</span></li>
<li><span>Resources</span></li>
</ul>
</div>
HERE IS MY CSS
#menu {
position: relative;
top: 10px;
left: 0px;
width: 940px;
height: 47px;
}
#menu ul {
position: relative;
top: -15px;
left: 0px;
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
#menu ul li {
position: relative;
display: inline;
float: left;
list-style: none;
margin-right: 0px;
border: solid 0px #4981a8;
width: 156px;
background-image: url ('http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png');
background-repeat: no-repeat;
}
#menu ul li a {
display: block;
width: 156px;
padding: 12px 0px 10px 0px;
border: solid 0px #fff;
font-family: 'Cabin', sans-serif;
font-size: 14px;
font-weight: lighter;
text-align: center;
text-decoration: none;
}
#menu a span {
float: left;
display: block;
padding: 3px 5px 4px 6px;
color:#fff;
float: none;
}
#menu a:hover span {
color:#ffdd00;
}
#menu li ul {
position: absolute;
top: 47px;
left: 0px;
background-color:#4981a8;
border: solid 1px #4981a8;
display: none;
}
#menu li:hover ul {
display: block;
z-index: 999;
}
#menu li li a {
font-family: 'Cabin', sans-serif;
font-size: 14px;
color: #000;
font-weight: lighter;
height: 38px;
background-color:#eee;
margin-bottom: -9px;
}
#menu li li a:hover {
color: #065389;
}
You have another element on your page that's partially covering up the navigation:
#textbox {
position: relative;
top: -30px;
}
This is blocking the :hover. To solve this, give your #header a z-index:1. Any positive value should work, you just need to set it to something so the element stays on top.
Ok, I give up - I can't work it out; the wrapper seems to go from the top to the bottom while I want it to leave a gap at the top and bottom so the background appears through. I can't seem to work it out. I am very novice to this. Any help & ideas very welcome.
Code
body {
background: #ffffff url(bgfin.jpg) repeat;
font-family: Tahoma,arial, sans-serif;
font-size:12px;
color:#666666;
height: 100%;
margin:0;
padding:0;
}
#wrapper {
background: url(body-line.png) center repeat-y;
padding-top: 65px;
padding-bottom: 65px;
}
#wrappertop{
background: url(header.png) top center no-repeat;
}
#wrappertbtm{
background: url(footer-new.png) bottom center no-repeat;
padding-bottom: 65px;
}
#container{
width: 959px;
margin: 0 auto;
}
.title{
width: 959px;
height: 56px;
padding: 15px 0px 10px 0px;
font-size: 30px;
color: #bd7821;
}
#navigation{
position: relative;
width: 959px;
height: 40px;
z-index: 2;
}
#navigation li{
float: left;
z-index: 2;
padding: 0px 34px 0px 0px;
}
#navigation li a{
display: inline-block;
position: relative;
outline: none;
height: 28px;
color: #e3e3e3;
z-index: 2;
font-size: 12px;
padding: 15px 0px 0px 0px;
text-decoration: none;
}
#navigation li a:hover, #navigation li#active a{
color: #bd7821;
text-decoration: none;
}
#header{
position: relative;
width: 959px;
height: 196px;
z-index: 1;
margin: 20px 0px 0px 0px;
}
Try:
body { padding:20px 0; }
Or:
#wrapper { margin:20px 0; }
That is shorthand for:
#wrapper {
margin-top:20px;
margin-right:0;
margin-bottom:20px;
margin-left:0;
}
Remember:
Padding is rendered inside of the element
Margin is on the outside
This might help as a reminder:
How to remember in CSS that margin is outside the border, and padding inside
Hey all, i am trying to get my bottom bar to center on the screen but i am unable to do so.
<style type="text/css">
body {
background: #fffff;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
#bottomBar {
position: fixed;
bottom: 0px;
left: 0px;
z-index: 9999;
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-bottom: none;
width: 500px;
min-width: 500px;
margin: 0px auto;
-moz-opacity:.90;
filter:alpha(opacity=90);
opacity:.90;
}
*html #bottomBar {margin-top: -1px; position: absolute; top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));}
#bottomBar ul {padding: 0; margin: 0;float: left;width: 100%;list-style: none;border-top: 1px solid #fff;}
#bottomBar ul li{padding: 0; margin: 0;float: left;position: relative;}
#bottomBar ul li a{padding: 5px;float: left;text-indent: -9999px;height: 16px; width: 16px;text-decoration: none;color: #333;position: relative;}
html #bottomBar ul li a:hover{ background-color: #fff; }
a.PDF{background: url(http://www.xxx.com/img/pdficon.png) no-repeat center center; }
</style>
<div id="bottomBar">
<ul id="mainpanel">
<li style="padding-top:5px; font-family:Arial, Helvetica, sans-serif; padding-left: 5px;">First time here? Be sure to check out the "this" button above or download the PDF here -></li>
<li>Download PDF <small>Download PDF</small></li>
</ul>
</div>
Thanks!
David
Ok i got it by adding this to my CSS:
left:0;
right:0;
I think the only thing you need to change is to remove the left: 0px; line. This line forces the div to be at the very leftmost pixel of its containing element. Since you just want it to be centered, the margin: 0 auto; should do that for you with that one line removed.
Try this:
#bottomBar {
position: fixed;
bottom: 0px;
z-index: 9999;
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-bottom: none;
width: 500px;
min-width: 500px;
-moz-opacity:.90;
filter:alpha(opacity=90);
opacity:.90;
margin-left:auto;
margin-right:auto;
left:25%;
right:25%;
}