I have a weird li issue I just can't figure out. I have an image set for the li on this page's content, but it's not against the text but behind the image! Confused on how to solve this. Any help would be greatly appreciated.
http://staging.liquor.com/wind-at-your-back/
Add
overflow: hidden;
to the #single_content ul. (overflow: auto will also work). If it needs to work in IE6 too, make sure the list has layout (e.g. by adding zoom: 1).
The lines inside a block box following a float are pushed aside by the floated element. But the block box itself doesn't move, keeping the background images at its left edge, covered by the floating element.
You can stop the block box from overlapping a float by having it establish a new block formatting context. One way to do that is to set the overflow property. That forces the entire list next to the float, instead of just pushing its text aside.
See the CSS2 specification section about floats for more details.
The background images of your list are behind the cocktail image. You could either make the list floating right like this
#single_content ul {
float:right;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
width:280px;
}
or give the lis a margin-left of your image's width+margin like so
#single_content ul li {
background:transparent url(images/ulliarrow.png) no-repeat scroll 0 0;
margin:0 0 0 310px;
padding:0 0 3px 15px;
}
to make the reappear behind the floating image.
To get the background images to show up from outside of the image you can add a margin to the style
add
margin:0 0 0 ~300px;
to
#single_content ul li
Immediate solution is to add the following rule to #single_content ul
margin: 0 0 0 295px;
I don't like that because it's fairly absolute, though your site looks glued together well and it shouldn't hurt. I'll look for something more elegant, and if I find it, post it here.
EDIT 1: Not much better, but you could add the following rule to the li elements instead:
background-position: 295px 0;
Related
I want to move link a bit down when clicked, but when I try to do that using :active state everything below that button moves a bit too. What's the easiest fix to that (I don't want to mess too much with my HTML code, so maybe something css-related?).
HTML:
Test
<p>This paragraph moves when I click button above. I want to prevent that.</p>
CSS:
a { display: inline-block; }
a:active { margin: 5px 0 0 0; }
position:relative & top: 5px sounds like a good idea, but this doesn't work either (button moves 1px down for ever :/).
http://jsfiddle.net/JyZLF/
This may suit your needs:
a {
display: inline-block;
margin: 0 0 5px 0;
}
a:active {
margin: 5px 0 0 0;
}
http://jsfiddle.net/JyZLF/3/
personally, I wouldn't use margin for this, I would use:
a:active {
position:relative;
top:5px;
}
http://jsfiddle.net/seemly/jFrCj/1/
Much cleaner, less code and less likely to effect the rest of your layout, improving the future-proofing of your site.
Margin moves the element box itself, where as position relative leaves the box of the element where it is, but takes the element out of the flow of the document, allowing the movement of it anywhere you want without effecting anything else.
You could add position:relative to the a, then in the a:active, change it to top:5px. So your code will look like
a{display:inline-block; position:relative;}
a:active{top:5px;}
http://jsfiddle.net/JyZLF/7/
A positioning of relative basically says "You can move this element wherever you want on the page, but the space will stay where the element originally sat." The link had a default positioning of static, which means it follows in the normal flow of elements. So if you moved the margin down 5px, then everything below it will change
You could wrap the a in a div and then give that div a specified height, while also giving the a absolute positioning.
see below:
http://jsfiddle.net/8P93R/1/
EDITED
So basically I was able to create the drop down shown above in html css, but when i converted it into a wordpress theme the drop down didnt work anymore,can someone help me out? Thank!
`homeabout
work
by client
by category
clients
contact
`
I did it here using a pseudo element that is positioned absolutely to the left of the li element. This then butts it up right up to the border on the parent UL element. In order to get the line on the bottom li to align with the bottom of the border I had to bump the li's down with a top position property, so I added some margin so it wont overlap with anything underneath it.
ul{
padding:16px 8px 0px 0px;
border-left:1px solid #000;
}
li{
display:block;
padding-left:12px;
position:relative;
top:9px;
height:20px;
}
Other then using images, this is probably the easiest way involving the least amount of css.
http://jsfiddle.net/PfChj/4/
EDIT
Here's the modified fiddle. I pretty much redid your css because it was a little hard for me to follow with all those sub ul and li children. Sometimes it's better to use a class for readibility, so you're going to have to redo your styles a bit. The sub menu is positioned in the center of the top li which has a set width now. If you don't want it at the center and what your top li's to flex with the link widths, you can modify this.
http://jsfiddle.net/FYnS4/2/
It's amazing how can't I just pull out such a simple task.
We wish to have a menu (ul list) displayed inline, where, on top we have an image and, at the bottom, we have an anchor.
Something like the above:
<iimg> <iimg> <iimg>
<anchor> <anchor> <anchor>
The solution must be valid for IE 7 too.
I've tried text-align centered the image. No luck;
I've tried display:block; on the li, on -img on both...
I've also defined widths here and there (but the images could have variable widths (not sure));
I've tried margin: 0 auto; but it centers on the page, but not on the LI. :///
Can I have a help here plz ?
http://jsfiddle.net/4E7Lu/
ul li {
display: block;
float: left;
text-align: center;
}
Just be sure to do a clearfix after the ul. As in:
<div style="clear: both;"></div>
If you make the ul display as inline-block, and set the anchor and image to display as block, you can center them via margin: 0 auto;.
http://jsfiddle.net/4E7Lu/1/
I would apply the image as a background image to each li element. It's easy to position using background-position and keeps your HTML markup clean for SEO. You can then use CSS sprites to make loading the images faster.
Just saw this, could help.
http://css.maxdesign.com.au/listamatic/horizontal01.htm
I need the menu (home, portfolio, services, about) is aligned in the middle and left.
The div#header-login should be flush right
How can I accomplish these tasks?
To solve the first problem, I put the divs with display: inline; but for some reason the ul#header-menu is leaving a space at the top
To solve the second problem, I tried to put the div#header-login with 100% width and thus align the text to the right but failed.
Here is the complete code:
The easiest way to achieve this is to make sure you float everything in the header. With the current mix of some float and some non-float (plus some elements with display:inline), this will be tricky to manage and potentially problematic if you need this to work in older versions of Internet Explorer.
I've made a few small modifications to your jsFiddle. This now floats the 3 elements in the header and applies float clearing to the header div itself so that the content after the header clears properly (there are also commented examples of how you'd need to do this for the IEs with conditional stylesheets).
http://jsfiddle.net/y4Qyw/1/
I've not tweaked the spacing specifically, but it should be a formality now to position everything where you want with some padding and/or margin. Automatic vertical positioning in this situation isn't possible unless you're working with display:table-cell (which isn't entirely cross browser), so you'll just need to vertically offset your menu downward to get it centre-aligned.
Here is the deal:
div#header
{
clear:both;
overflow:hidden;
}
div#header-login
{
text-align: right;
overflow:hidden;
float:right;
margin-top:-30px;
}
img#header-logo
{
display: block;
float:left;
}
ul#header-menu
{
margin: 0 auto;
padding: 15px;
display: block;
list-style-type: none;
overflow:hidden;
}
I have an image slider that is positioned over a background image but I can't seem to get the image slider to position dead center inside and have the background image not be cut off. Also its got some strange behaviour where the first slide is always further over then the rest!?!?
#slider {
background:url("../images/bg-slider.gif") no-repeat scroll 0 0 transparent;
height:389px;
width:590px;
}
#slider ul { padding:25px;}
#slider ul, #slider li { width:590px; height:389px; overflow:hidden; list-style:none; }
http://fluroltd.com/clients/harveys/
ah okay, think I see what you mean. Try getting rid of this line:
#slider ul { padding:25px;}
this is increasing the width of your ul and li's by 50px. The other option is to reduce the width declaration to 540px...
EDIT
a third option would be to modify the js you are using. Currently it is using .width() to get the element size. This does not include the padding values.
Use .outerWidth() to include the padding in the calculation.
I found the issue earlier in my CSS I had a more generic declaration on the CSS for ul. Made it more specific and viola.