I have a background on an div element with position top. Now this background spans across multiple li floats (progress indicator).
div.myListingProgressWrapper{
width: 807px;
height: 39px;
background: url(background.png) top no-repeat;
}
ul.fiveStepProgress li a{
float: left;
}
Now I would like to apply an active state to the a class and move the background of the parent container to bottom as the background contains a different colour and a progress arrow.
My question is, can I move the parent container background to bottom by applying the active class on the child a link?
Cheers
You cannot select a parent from within CSS. There have been several suggestions to the W3C on how to do this over the past few years, but the performance concerns have shot everything down. Plenty of reading on this, here's a link: http://css-tricks.com/7701-parent-selectors-in-css/
You're best off setting the a class on the parent, which affects the child... since you can't do it the other way around without javascript anyway.
Related
I want to ask about CSS that cause my image stacking each other.
I can't give the fiddle because too many code and css, but I give my web page in here
As You can see there are thumb image for the slideshow, but they stacking each other. I have try to use margin or padding for the img, but nothing happened, except if I change the size of image to 100, it will run nomrally. I've try to change position to absolute, relative, etc, but the image being worst, full stacking.
So what must I do to create this image not stacking each other?
Sorry for my bad English.
From what I can see, you are setting each parent element to have a width of 69px, whilst each child image is 180px wide. This will cause overlapping, as the size of the image does not affect it's parent size.
applying these rule fixed the problem for me:
.es-carousel ul{
width: auto;
}
.es-carousel ul li {
width: 180px;
}
ensure you remove the 'width:69px' from each li element, too.
As I understand it, CSS can be used to change the content of an element on :hover in a basic way. I am using this code
HTML:
<button><span>3 replies</span></button>
CSS:
button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}
but when I hover over the button, it twitches very badly
I want mine to be smooth like the music player at this link
When you hover over one of the buttons under lease, premium, or trackout price, they switch over to the +add text
here is part of my player http://djwckd.com/test
The important thing is to make sure that your layout does not change on hover. The easiest way to achieve this would be to allocate some space in your layout for all of the parts even when not hovering. I'm not sure what sort of layout you are trying to achieve but here is an example:
button { width: 6em }
button:hover span {display:none}
button:before { width: 100px; content: ""; }
button:hover:before {content: "Reply!"}
By giving the :before pseudo-element a size even when it's not hovered the layout shouldn't change when the content changes. You may need to adjust this for the specific layout you want but the general principle is to make sure all of the size-related properties are specified without :hover and then only adjust non-layout properties (that is, properties that don't affect any box sizes) in the :hover state.
As you provided the link is hovering the background images but in your test link you have given background images before to <a> elements, if you want exactly same as link use background-image: url('image1'); to a and background-image: url('image2'); to a:hover.
You can still use positioning the background-images, for this you should have like this.
+--------------+
| | position this background to a
+--------------+
| + Add | position this background to a:hover
+--------------+
Ok! for this make your background 64px width and 32 px height.
then position your background to
a{background-image: url('image') left top no-repeat; background-position: 0% 100%;}
now position your background to
a:hover{background-position: 0% 0%;}
I think I have a solution. The trick was one main thing: setting the width of the text's container. I also used onmouseenter instead of onmouseover for faster text change (my theory that onmouseenter is faster then onmouseover). Here is an example:
var videoplayer = {
text: "<b>Hello World</b>",
author: "(you)"
}
<div onmouseenter="this.innerHTML = videoplayer.text;" onmouseleave="this.innerHTML = '<b>(hover over me)</b>';" style="background-color: red; padding: 10px; width: 110px; text-align: center; color: white;">(hover over me)</div>
Just make sure you set the div's width to the width you need. (If you don't want a background, just change the part that says background-color: red to background-color: transparent). One more thing: you have to use a div or other container with display:block set as its default. I suggest using div. Hope this helps!
I have a div classed content.
Inside the div, is a h1 tag.
Inside the h1 tag is a span tag, with its' class set to regTalker.
Here is the tag:
<h1><span class="regTalker">Not Listed? Register here</span>Browse Listings</h1>
The regTalker class looks like this:
.regTalker {
text-align: left !important;
font-family: GoodDog;
font-size: 0.7em;
color: #000;
}
The container div has text-align value set to center.
The main string inside of the h1 tag displays centered.
The string inside of the span tag is also centered, not aligned to the left, as i would presume it to be...
What gives? Surely !important should override the content div text-align value?
There are two different css files in question, the main one, and the seconary one, which houses the regTalker class... These files are linked one after each other, so incase this comes up in an answer, it is not due to the instance of inclusion.
I have also cleared my cache and reloaded the css file directly. So its not that either.
I am using firefox 8.0.1, have not tried it on other browsers yet.
If anyone has any advice, or input regarding this issue, or how to solve the problem, it would be greatly appreciated, thank you!
The text-align applies to the content of the element it's applied to, not the element itself. The text inside the span is left-aligned, but the span itself is centre-aligned within its parent. As the span is an inline level element, it's only ever as wide as its content and as the span is centre aligned, its content will also appear to be centre-aligned...
If the span was as wide as its container, then the text in it would appear left-aligned, but you have to apply a display: block or display: inline-block to it before you can assign it a width.
Also, never use !important. It'll just lead to tears and gnashing of teeth in the long run.
You're slightly misunderstanding how text-align works. You can't use text-align to change the alignment of a span within its container; text-align affects the contents of the element it's applied to, and cannot affect its context. (If your span were a block element, your declaration would make its contents align left within it, but would still not make the span itself align left within its container.)
I have used this to answer the problem most described in comments for the answer from GordonM:
.regTalker {
position: relative;
top: -5px;
left: -20%;
margin-right: -10%;
font-family: GoodDog;
font-size: 0.7em;
color: #000;
}
This was used to keep the main text within the h1 tag roughly centered, while applying positioning to the span element within it.
I´ve a litle problem with a website.
jn-racing.de
The "Banner" bar under the navigation in the background is an .png image with gras but the sliding images are in the front of the png.
Z-index of the sliding images are 3 and the css class "banner" are 99.
The background must be in front of the sliding images.
Thanks
The childs of #slider and #slider itself are positioned (relative), which means they belong each to their own stacking context and the z-index will have no effect.
A)
You'll need to remove the position-property. But that might conflict with your positioned images, so that's not really an option.
B)
You'll need the grass-background to reside in the same stacking context as #slider, which means is has to be on an element, which is a direct child of #banner too (a sibling to #slider).
Example:
#slider:after {
content: '';
height: 10px;
width: 1024px;
background: url(images/banner.png) no-repeat left bottom;
}
You should put your grass .png your html under the #slider div and give it (the new img) an ID. As long as it is a background, it will be harder to move it to the front via css. Does that help?
I need to place an icon of 48x48 as background. I have this icon in my image sprite where of course there are many other images.
Is there a way to show as background only a porition of the image?
thanks
EDIT: Is there a way to do this without setting width-height of the backgrounded element? (I am not sure if acutally i can set a width-height)
Edit2: this is what i need: http://jsfiddle.net/pdxnj/
Thanks
Set the width and height of the element to 48px.
.element{
width: 48px;
height: 48px;
}
Set the background of the element to your image
.element{
background-image: url('image.png');
}
Move the background so that the top left corner of the icon is positioned correctly.
.element{
background-position: 20px 94px;
}
The two numbers in background-position are the X and Y coordinates (respectively) where the top left corner of your 48px by 48px is in your sprite image. So maybe it's actually 96px 0px or something.
EDIT
If you can't control the width and height of the element you are trying to put the background in, but you can add new DOM elements, you can try adding a span inside the element you really want to put the image as a background for.
It would look something like:
<div id="noControl">
<span id="justCreated">
</span>
</div>
and the CSS would look exactly the same as above, except you would need to treat the inline span as a block element:
#justCreated{
display: inline-block;
}
EDIT 2
If you have control over new DOM elements, and want to make your sprite the background without messing with a span, just add another div inside your original one.
Would wind up looking like:
<div id="noControl">
<div id="justCreated">
ALL of the content that used to be inside #noControl
</div>
</div>
and the CSS for it would be
#justCreated{
width: 48px;
height: 48px;
background-image: url('image.png');
background-position: 96px 0px;
z-index: -200;
/* z-index of all the contents needs to be not set, or set to larger than -200 */
}
This is all theoretical, but it SHOULD work.
This way, you can apply the sprite sizing to a block element without messing with the inline stuff. This may affect CSS if it addresses elements by child status (like #noControl > a), because you are inserting a div between the parent and the child.
I am still researching whether you can do this at all if you have no control over the DOM at all.
simple answer no, but by using html elements you can. Html element hight and width should match the background portion of image.
You can if you're not going to be setting a repeating background. Otherwise no.
To do this, you need to play around with the background offset, and width/height of the actual element that you're setting the background on.
it will depend on how much whitespace is around it in the sprite whether it will fit where you need it to without showing parts of other images.. however you could e.g. put a span where you want the image and crop the span to 48x48 so that it only shows the icon itself. it kind of depends what you want to use it for and how the sprite is built
It's better using ::before or ::after so you can easily define your image size without having overflow problems!
This is possible. You need to display that in a 48x48 div then set position: absolute style for the div and define left and top too for it. Also set z-index: 0 for the div so that it appears under everything.