I am having a menu before each menu, and I am having an image before each li to illustrated the menu.
My code: http://jsfiddle.net/dtjmsy/7UHxa/2/
<div>
<ul>
<li><a href="">
<img width="40" height="14" src="http://img11.hostingpics.net/pics/902607libkgd.png" alt="li_bkgd">Example menu 1</a></li>
</ul>
</div>
My question is how would I do to position the text over the top of the image ?
Thanks for your help
Use image as the Background-Image of the list elements.
As per your comments I got your requirement. So here is the solution and its explanation.
1- You need to show the image beneath the text. So there should be some space at the bottom of li element. For that we have to use the padding bottom.
2- As you also need to use the background image so that image but the position of background image is not by default set as you want. So you also need to play with it.
Here is your css
#menu li
{
background :url('http://img11.hostingpics.net/pics/902607libkgd.png') no-repeat;
background-position:0px 10px; // 0px from the left and 10px from the top
padding:0px 0px 10px 10px; // 10px padding from the left and bottom to shift the text according to image position
}
Js Fiddle Demo
Just change you style as below
#menu {
list-style-type:none;
}
#menu li {
background :url('http://img11.hostingpics.net/pics/902607libkgd.png') no-repeat;
background-position:bottom left;
height:30px;
padding-left:15px;
}
Hope this should work..
Your HTML:
<div id="menu">
<ul>
<li>Example menu 1</li>
</ul>
</div>
And CSS example:
#menu li
{
background :url('example.png') no-repeat;
background-position: left 1px top -1px;
}
Also you can use different background for each item:
#menu li:first-child
{
background :url('example.png') no-repeat;
background-position: left 1px top -1px;
}
Also :last-child and nth-child(2) selects every <li> element that is the second child of its parent
Related
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
I have a JSFiddle that I've made here:
http://jsfiddle.net/agzF5/
If you hover over the menu items that aren't the first of type you'll notice there is some strange margin appearing after where the border would be if it were set, I was wondering as to how I can remove that?
Matt
JSFiddle here
You had your list items as display:inline-block;
I've floated them left, added display:block; and changed some properties on the wrapping element. so it still contains the floated elements, see below.
#menuNav-ul {
background: lightgrey repeat-x;
list-style-type: none;
padding: 0;
margin: 0;
border-bottom: 2px solid darkgrey;
display:block;
overflow:hidden;
}
#menuNav-ul li {
display: block;
border-right: 1px solid #bfbfbf;
margin: 0px;
padding: 0px;
float:left;
}
add
html, body{margin:0;}
to the top, body alone should probably work as well..
Others have answered with good solutions.
I wanted to leave this here in case it helps someone though.
The reason for this is that there is whitespace in your markup (totally fine), which inline-block renders as spaces.
If you are working with inline-block elements, you can to set the font-size of the parent to 0, then explicitly set the font-size of the child elements as a workaround for this.
You're setting your LI elements to be display:inline-block which means they will have a inline whitespace space between them (usually ~4px).
3 solutions:
1. LIVE DEMO
add font-size:0; to the UL
reset the font size to px for the LI elements
2. don't add display:inline-block; but float:left; your LI elements
3. (not recommended) add a -4px margin-left to your LI elements
P.S: an additional suggestion is not to style (colors, borders etc) you LI elements. Treat them like simple positioned containers for your styled <a> elements.
Well the simple solution is to add comment between your li items:
<div id="menuNav">
<ul id="menuNav-ul">
<li>Home</li><!--
--><li>Page 1</li><!--
--><li>Page 2</li>
</ul>
</div>
Check it in action: http://jsfiddle.net/agzF5/7/
I'm making a menu with floating menu items.
What I want is to always have 10 px padding in top, on hover and not hovering.
My HTML:
<div id="menu">
<div class="menuitem">
Home
</div>
<div class="menuitem">
Item2
</div>
<div class="menuitem">
Item3
</div>
<div class="menuitem">
Item4
</div>
</div>
My css:
#menu
{
margin:0 auto;
background-color:#B89470;
height:50px;
text-align:center;
}
.menuitem
{
font-weight:bold;
padding-top:10px;
height:50px;
width:100px;
float:left;
}
.menuitem:hover
{
background-color:#abca9e;
}
So I have made this.
But for some reasing the padding is only showing while :hover is active.
But I have set the padding in
.menuitemn
and not in
.menuitem:hover
so why isn't there any padding when hover isn't active?
It is because the padding-top: 10px; is adding 10px to the height of the menuitem making it 60px in height. Yet the #menu still remains at 50px with an overlap of 10px. I changed the height of #menu to show you.
DEMO http://jsfiddle.net/6w5kz/1/
height:60px;
Another solution to the proposed ones would be to add:
#menu {
overflow: hidden;
}
The problem is that the child .menuitem is bigger than the #menu, so it overflows it. This happens because of the box model, which I really recommend you to read. So there are several ways to solve it, one is the one I pointed out, other is #Vector's and another is not setting the height of #menu so it's as high as needed.
I've also added cursor: pointer; when you hover the .menuitem to show properly that it's a clickable item.
http://jsfiddle.net/franciscop/6w5kz/3/
I have the unorder list like so...
<div class="social">
<ul>
<li>Find Me <img src="images/facebookGrey.png" width="50" border="0" style="vertical-align:middle;" class="facebook" /></li>
</ul>
</div>
and what I am trying to do is setup a hover so when the user hovers over that list item the image changes.
here is the css I have tried..
.social ul img.facebook a:hover{
background-image:url(images/facebook.png);
width:50px;
}
any ideas?
It should be:
.social ul a:hover img.facebook
since the image is inside the anchor.
However, it may be better to remove the img tag all together and just use the anchor and set it's background-image property.
The image is inside the link, not the other way around. Also, you can't change the source of the image via CSS. Setting the background will work, but the source will be on top of it. From the looks of your image names, you won't see any effect.
Try something like this:
<div class="social">
<ul>
<li>Find Me</li>
</ul>
</div>
.social ul a {
background-image: url(images/facebookGrey.png);
background-position: center right;
background-repeat: no-repeat;
padding-right: 60px;
}
.social ul a:hover {
background-image: url(images/facebook.png);
}
You are confusing background images with actual images.
Set the background image of the <a> to images/facebookGrey.png, and then change the background image on hover.
I'm trying to make a CSS/javascript dropdown menu (based on this example. This works. But I want to have a background color for my whole menu. I tried to place the <ul> inside a div and give this div a background color. However, the actual menu items do not appear inside the div when I view the page, they are under it. After some experimenting, I found out that this was caused by setting float: left; on the li elements that comprises the main menu items. (of cause, taking float: left; away means that the menu items are stacked on top of eachother in stead of side by side).
Does anyone know how to fix this?
If you are just trying to get a background color for your main menu items, you can add overflow:auto; or float:left; to the containing div tag.
If you want to set the background color of the sub-items, add it to the li ul rule.
Brief example here: http://www.danfsmith.com/so/css/suckerfish/menu.html
try adding the CSS property overflow: auto; to your <div/> or <ul/> which has the background.
I think what you are asking is how to set a background color for each link in your dropdown menu. If you create the menu with:
<ul class="navigation">
<li id="youarehere">Home</li>
<li>Blog</li>
<li>Papers</li>
<li>Programs</li>
<li>Activities</li>
<li>Contact</li>
<li>About</li>
</ul>
Then the CSS to set the background color is:
ul.navigation li a {
width: 111px;
padding: .5em 1em;
background-color: #993333;
color: #fff;
text-decoration: none;
text-align: left;
float: left;
border-bottom: solid 0px #fff;
border-top: solid 0px #fff;
border-left: solid 1px #000;
}
If you want the background colour for the div to show you'll need to clear the floats.
<div style="background-color: red">
<ul>
<li>asda</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
<span style="clear: both"></span>
</div>
Notice the span with the "clear: both" style in. That should do it.
Heres a link to a nice quirks mode post about it
http://www.quirksmode.org/css/clearing.html
I have a 'main_menu' div which contains a background-image that is repeating on the y-axis. Above this div I have another div which is used for a header. The problem is that the header div has an image which is about 75px in height. I would like to start the text in main_div about 50 px higher from where main_div's background-image actually starts.
I was thinking of something like:
position:absolute; top:-50px;
This doesn't really work.
The question is how do I move the text up, while keeping the background-image at the normal spot.
Thanks
{EDIT}
Here's the CSS
.menu_main
{
background-image:url('../menu_main.jpg');
background-repeat:repeat-y;
width:173px;
padding:5px;
}
.menu_header
{
background-image:url('../menu_header.jpg');
text-align:center;
width:173px;
height:65px;
padding:5px;
}
This is the html
<div class="menu_header">Some Header</div>
<div class="menu_main">
<ul>
<li>Educational Objective</li>
<li>Projects</li>
<li>Class Preparation</li>
<li>Testimonials</li>
</ul>
</div>
So as you can see the header is pretty tall. So I'd like to start the text in the menu_main div about 50px higher up
Use a negative top margin.
.menu_main ul {margin-top:-50px;}
You could move it like you were doing with absolute positioning and move the background down like so:
background:url(someimage.png) repeat-y left 50px;
this will move your bg image so it starts 50px down.
I might be able to help more if you provide a screenshot or more code or a live example...
You could style your UL specifically:
.nav
{
position: relative;
top: -50px;
}
and
<ul class="nav">
...
Or perhaps put the UL in another DIV class="nav".
But you can move the background down (for example by 5 pixels):
background-position: top 5px;