I have a seemingly simple html construct:
<div class="featured-image img-wrapper full-width">
<a href="http://localhost/wordpress/?p=26">
<img ... />
</a>
</div>
Now I want to target the a (which unfortunately does not have its own class), so I use this CSS
.img-wrapper a {
background-image:url(../images/bkgs/stripes_tiny_08.png);
background-repeat:repeat;
}
but nothing happens to this a element! It's certainly not the background image itself, also tried a simple color. The weird thing is: there is another, similar construct further up on the page and there the selector works!
Firebug shows the following CSS paths (the target a is at the end)
working: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content article#post-26.post-26 div.featured-image a.img-link
not wrk: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content aside#yarpp_widget-2.widget div.bloglist article.post div.three div.featured-image a
I'm out of ideas. Haven't found any overriding CSS declarations. Any idea how I can target that a?
EDIT: the target a contains an img which has a :hover opacity set. That way I can see that the background color works, not the background image however
Are you trying to do this effect? http://jsfiddle.net/r48ST/1/
[EDIT]: This is that effect http://jsfiddle.net/r48ST/2/ , just added some opacity on image. Also, put some transition effect on opacity an you have full effect.
remove img (if it's not transparent)
for conflicts:
put !important at the end of css instruction.
or try inline style.
Without specifying dimensions for your <a> tag, it will conform to the dimensions of the <img> tag that it contains. As such, any background image that you apply will be overlayed by the <img>. Putting repeat on only repeats the background image as many times ans it will fit (cropped or whole) within the element. If you give the element a width and a height greater than that of the image that it wraps you should see the background.
I hope this was the issue that you were facing. Otherwise, if you can post a bit more of your code or a demo we will be able to better help you.
EDIT: I just noticed your edit about the :hover opacity. What I suggest is that you change the styling to be more like this: a > img:hover { visibility: hidden; }
Related
I've seen a couple of posts about how to set a title to the MeanMenu jQuery Responsive menu plugin but they do it by editing the js. I was wondering if it's possible to do it through css using :after? I've tried but failed dismally.
It is possible to add text using CSS :after. See Snippet. This is about all of the help I can provide without seeing the actual code you are using. Keep in mind when using :after that the pseudo-element that gets inserted into the html is contained within the element that has the :before or :after applied to it. So, the nav:after pseudo element will be contained in the nav element "after" the rest of the child elements.
nav:after{
display:block;
content:"This is text inserted using :after";
clear:both;
}
<nav><!-- Empty element that gets content added by using :after --></nav>
EDIT: Added screen shot. It may not be working for you due to the specificity of your selector or the location in which you are declaring the styles in your css file. You can try greater specificity by using something like this:
.mean-bar > nav.mean-nav:after {
display:block;
content:"This is text inserted using :after";
clear:both;
color:white;
}
http://jsfiddle.net/Zmpyv/6/
I have a page, where I use <div> to style the sheet. The problem is that it creates a border around the page. How can I remove this border? Check out the jsfiddle to see what I mean. I am using position: static; I do not want to use fixed because then the page won't scroll correctly.
Perhaps you're just talking about the native margin on <body>. Try this;
body {
margin: 0;
}
Check out http://jsfiddle.net/Zmpyv/8 where I added the above CSS to your demo.
To avoid spending time fighting silly things like this, I recommend you have a look at normalize.css which applies this style for you, along with fixing a host of other discrepancies between browsers and in my opinion gives you a better starting point when authoring CSS.
Try setting this in div.
border:none
This will remove the border of any element..
<div class="headerClear" /></div>
see this div has unexpected close the right method is
<div class="headerClear"></div>
replace with this and add this to your css
body{ margin:0px;}
I have elements with this pattern (XML, not HTML, but CSS should still work):
<expan abbr="XX">YY</expan>
Sometimes I want to see "YY" in the output, sometimes I want to see "XX". No problem when I want to see "YY" and not the attribute value: just leave it as is. No problem if I want to see BOTH the element content and the attribute value: this bit of CSS does that:
expan:after {content:attr(abbr);}
will display <expan abbr="XX">YY</expan> as "YYXX".
But: problem if I want to see the attribute value and NOT the element content -- that is, if I want to see just "XX". I can use either CSS display or visibility to hide the element <expan>. But it hides EVERYTHING, including the :after pseudo-element. So, this code:
expan:after {content:attr(abbr);}
expan {display:none;}
Shows nothing at all.
So, good folk... help. This seems a very obvious thing to want to do. Of course, I could do it pretty easily manipulating the DOM with Javascript. But for various reasons, I don't have that option. I'd like to do it with simple CSS. Can I??
You'll have to use some kind of hack where the element is still there but only the pseudo element (:after) is visible to the user. An example of this would be color. If you know it's only text, then you can set the color to transparent on the main element, and set it to a real color on the pseudo. You'll still have a blank space to deal with, but you can fix that with position: relative on the parent and position: absolute on the pseudo element, because the pseudo element is a child of the main element. note that the text is still there, but you only see it if you highlight it with the mouse. That's fixable too, with ::selection, but it would still be copyable by accident, and ::select is only available in modern browsers.
Here is a demo showing what I mean: DEMO
EDIT: This one should work with text around it, but you'll have to increase the width in order to add more text: DEMO
Works for me in Chrome and Firefox.
One partial solution is to set the expan font-size to 0 and the :before content font-size to the desired size:
expan:before {
content: attr(name);
font-size: 15px;
}
expan {
font-size: 0;
}
Trying to set the :before font-size to 100% did not work.
You can only set the 'content:' attribute on ::before and ::after psuedo-elements.
But what you can do is just provide both your texts in two separate attributes, like this:
<div long-text="This is very long text" short-text="Short text">
<!-- this part is empty -->
</div>
Then your CSS can switch between them like this:
.AltText::before { content:attr(long-text); }
#media screen and (max-width:1200px) {
#HeaderTabContainer .AltText::before { content:attr(short-text); }
}
Or you could use a third attribute to toggle between them.
I have a css file that have following css element:
.ms-webpart-chrome {
background-color: white;
}
I want to make it transparent instead of white and same time I want to have this css element like it is beacuse its a global css and some pages are using it.
So I was thinking that I could use inherance it.
This is how it looks in html and this div classes are generated automaticly which means I cant change or do anything.
<div class="ms-searchCenter-main">
<div class="ms-webpart-zone ms-fullWidth">
<div id="MSOZoneCell_WebPartWPQ1" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
So basicly I need to have this one like it is beacuse i dont want to change it or remove it:
.ms-webpart-chrome {
background-color: white;
}
And I need to create a new one and use !important with the inherance.
Any kind of help is appreciated
Note: I tried following:
.ms-searchCenter-main .ms-webpart-chrome
{
background-color: transparent !important;
}
but it didnt work
You can certainly specify a background color to be "transparent," as this is the default value in the CSS specification (see reference page at w3schools.com).
If your goal is to make the background color transparent across all elements with class "ms-webpart-chrome" then try adding more selectors to increase the weight of your new rule:
body div.ms-webpart-chrome {
background-color: transparent !important;
}
Setting "background: none;" is also an option. You could try adding both.
It would be better if your new rule followed the other rule (not directly, just after it in the order). Also, check to see if any of the sub elements are picking up a background.
While IE has developer tools, I strongly recommend Firefox + Firebug + DOM Inspector + Web Developer Toolbar as a standard testing suite. You can easily traverse the DOM to see if any sub elements have backgrounds applied, as well as test different CSS rules live on the page.
You can't specify a background colour to be transparent, as transparent isn't a colour. However, you can achieve it with background: none !important;. Element's don't have background colours by default, so just restore it to the default (none) and it will be transparent.
Look at this demo here. I've set the background to red at the top, but then over-written it with background: none; lower down. This makes it transparent. The red border shows where the element is
does anybody know if there's a way to create an CSS effect which looks like the light effect used for iPhone apps? I mean the upper, brighter part of the box.
Thanks,
Ron
Unfortunately since using :after and :before selectors on img elements is not covered by the specification, a pure CSS solution might not behave correctly:
This specification does not fully define the interaction of :before
and :after with replaced elements (such as IMG in HTML). This will be
defined in more detail in a future specification.
In the current versions of Chrome and Firefox, these selectors appear to be ignored and simply don't work on img elements.
Here's a solution with a small HTML wrapper that will fall back to not rendering when the CSS isn't supported. The container size needs to be specified here, but that could easily be set with JavaScript.
CSS
.shine {
width:223px;
height:223px;
position:relative;
overflow:hidden;
display:inline-block;
}
.shine:after {
width:150%;
height:100%;
position:absolute;
top:-45%;
left:-25%;
display:block;
content:"";
background:rgba(255,255,255,0.1);
border-radius:100%;
}
HTML
<span class="shine">
<img src="" alt="">
</span>
Result
To make this a little fancier, you could add a gradient background to .shine:after, but it works fine without to demonstrate the idea.
Here's a jsFiddle so you don't have to take my word for it.
I have never seen the effect you describe (would never use an iPhone) but I assume it is somehow animated?
Then you can do that in css if you use two images and blend them 'on hover'. You position the 'light icon' above the plain icon (typically using an :after pseudo selector in css) and control it's opacity value using a css :hover selector).