I have a slideshow that is imported with a shortcode in WP.
I'm trying to add custom css to each 4th image that is displayed, but with no luck.
Any help would be awesome, thanks.
.thumb-res .ngg-gallery-thumbnail:nth-child(4) img { border: 1px solid #000 !important; }
HTML:
<div class="thumb-res">
<div class="ngg-galleryoverview" id="ngg-gallery-97131261c1bb7b3c15f04e8ef0f97c77-1">
<div class="slideshowlink">
<a href='url'>[Show as slideshow]</a>
</div>
<div id="ngg-image-0" class="ngg-gallery-thumbnail-box">
<div class="ngg-gallery-thumbnail">
<a href="url" title=" " data-image-id='48' class="ngg-fancybox" rel="97131261c1bb7b3c15f04e8ef0f97c77">
<img title="slide4" alt="slide4" src="url" width="174" height="150" style="max-width:none;"/>
</a>
</div>
</div>
<div id="ngg-image-1" class="ngg-gallery-thumbnail-box">
<div class="ngg-gallery-thumbnail">
<a href="url" title=" " data-image-id='46' class="ngg-fancybox" rel="97131261c1bb7b3c15f04e8ef0f97c77">
<img title="slide2" alt="slide2" src="url" width="174" height="150" style="max-width:none;"/>
</a>
</div>
</div>
Your ngg-gallery-thumbnail elements are all single children of their respective parents, so the selector never selects anything. You should select based on elements with the class ngg-gallery-thumbnail-box, which are all siblings:
.thumb-res .ngg-gallery-thumbnail-box:nth-child(4) img { ... }
That said, this is still not going to work exactly as expected because it looks like there are also siblings that are not thumbnail boxes.
This:
$(".thumb-res .ngg-gallery-thumbnail-box:nth-child(4n+1)").addClass("fourth");
FIDDLE
try
.thumb-res .ngg-gallery-thumbnail-**box**:nth-child(**4n**) img {
border: 1px solid #000 !important;
}
with your code you're selecting just the 4th image. you need 4n for each 4th:D
You need to use nth-child(an+b) for direct siblings.
.thumb-res .ngg-gallery-thumbnail-box:nth-child(4n+1) img { border: 1px solid #000 !important; }
Also for add custom css to each 4th image that is displayed you need to use argument in format of "an+b".
For example 4n+1 select 4th, 8th, 12th element etc.
Related
I have used the code below to attempt to select this line of code:
body >div first-child + div + div > img {
}
<body>
<div id="container">
<div class="profilebartr">
<div class="login">
<a href="google.com">
<img src="images/login.png" width="40" height="40" onmousedown="return false;" alt="Login" />
</a>
</div>
</div>
I'm still learning something in CSS, sorry.
And my preview box no longer shows the previews for anything after running code snippets, sorry.
http://jsfiddle.net/tmbwk27c/
The > operator only refers to the immediate children and, in this case, you img is not direct child of the div. This is the reason it is not working. Once go through: http://www.w3schools.com/cssref/css_selectors.asp
body > div:first-child > div > div img {
background-color:black;
padding:10px;
border: 1px solid black;
}
Hi all I just want to allow user to download image on click of button .
I have used tag in my project and its download attribute which is provided in html5. My following code working fine on Chrome but in Firefox Mozilla when I click on button it just redirecting me on the specified path.
Please tell me what is going wrong .
<div style="display:inline-block; position:relative; ">
<img src="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" title="" alt="">
<a href="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" download="image.png">
<input type="button" style="position:absolute;bottom:0;right:0; " value="Download">
</a>
</div>
Thanks in advance.
According to the HTML5 definition of the a element, it must not contain “interactive descendants”, and input elements are by definition interactive. The markup is thus invalid. All bets are off. The nesting rules are set to avoid complications in event handling.
So if you want to have the download attribute and some button appearance, you need to use just an a element and style it to look like a button. Here’s a sketch, to be tuned according to your preferences for button style:
.dbutton {
position:absolute;
bottom:0;
right:0;
color: #000;
background: #ddd;
border: #333 outset 2px;
border-radius: 3px;
text-decoration: none;
padding: 0.1em 0.2em;
font: 90% sans-serif;
}
<div style="display:inline-block; position:relative; ">
<img src="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" title="" alt="">
<a href="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" download="image.png"
class="dbutton">Download</a>
</div>
<div class="text-wrap"><img src="your img.jpg" alt="">
<a href="download.jpg" class="myButton" download="img name" title="Download">
<img src="/path/to/image" alt="Download">
</a></div>
Can you please try like this..
Consider this html:
<div>
<img src="http://s9.postimg.org/lqikvh05r/black_shirt.jpg" />
<h3>Some text here but if this gets long it will pass the image and not wrap</h3>
</div>
So without knowing the image size ahead of time, is there a CSS way to contain the text to as wide as the image and wrap if it gets longer?
Here is a fiddle of the issue -> http://jsfiddle.net/qRGM5/
Mhhh I don't know if there is a workaround with CSS, but you could try Javascript (using jQuery):
$(document).ready(function(){
$('div').css('width', $('img').width()+'px');
});
UPDATE:
No-javascript workaround (you will need image width):
<div style="display: inline-block; border: 1px solid red;">
<img src="http://s9.postimg.org/lqikvh05r/black_shirt.jpg" />
<h3 style="width: 300px;">Some text here but what if this text gets really long and passed the image</h3>
</div>
i know its probably obvious and maybe not what you're looking for.
but it would work if you were willing to set a max width on the image.
#picture img {
max-width:100px;
}
#picture {
max-width:100px;
}
#text{
max-width:inherit;
}
<div id="picture">
<a href="#" title="image">
<img src="http://s9.postimg.org/lqikvh05r/black_shirt.jpg" /></a>
<h3><div id="text" >Some text here but if this gets long
it will pass the image and not wrap</div></h3>
.games_box
{
width:575px;
margin:8px auto;
background:#f8f7f7;
padding:8px;
border-bottom:#000000 1px dotted;
}
<div class="games_box">
<a href='#'>
<img src='$host_name/staff/game-$row[0].gif' width='78' height='75' alt='games' />
<div id='staff' style='position:relative; top:-50px;z-index:1; left:29px'>
<img src='images/staff_picks.png' alt='staffpick' width='50' height='51' /></div>
</a>
</div>
I put staff div.. the games-box div is large..
i use 'clear:both'.. but no use..
1 st
2 nd
place staff pick image
3 rd
finally, z-index used staffpick image, under image more space
Hi you can give parent position relative and child give absolute as like this
Css
.games_box
{
width:575px;
margin:8px auto;
background:#f8f7f7;
padding:8px;
border-bottom:#000000 1px dotted;
position:relative;
}
HTML
<div class="games_box">
<a href='#'>
<img src='$host_name/staff/game-$row[0].gif' width='78' height='75' alt='games' />
<div id='staff' style='position:absolute; top:-5px;z-index:1; left:29px'>
<img src='images/staff_picks.png' alt='staffpick' width='50' height='51' /></div>
</a>
</div>
Live Demo http://jsfiddle.net/rohitazad/grE5A/
To 'suck up the space' you can use margin-top:-50px; or use position:absolute like in this example http://jsfiddle.net/grE5A/2/.
Notice I've given the <a> tag the relative position as it is the 'parent' that #staff needs to be positioned absolutely in.
The reason you had the space under the image is because position:relative; top:-50px moves the staff pick up relative to it's original position, but the parent still behaves like the element is in its original position. (Z-index has no effect what you are trying to do.)
Ok, I have code like this:
<div id="header"> (yeah, have to use div instead of header tag, don't ask me why)
<img src="image1.png" alt="image1" />
<img src="image2.png" alt="image2" />
<img src="image3.png" alt="image3" />
</div>
And I want to select the first image after div (first link image) and two last links in css.
I know I could do it by nth-child or first/last child selectors. But I want to use "+" and "~". But they doesn't seem to work!
For example:
#header + a {
border: solid 1px red;
}
Gives border to... Nothing!
This one also doesn't seem to work:
#header a + img {
border: solid 1px red;
}
What's wrong?
Same effect with "~". Tested in all major browsers....
You've got it wrong. The selector you're looking for is
#header > a:first-child
This will select the first anchor that are direct decedent of #header. The > is the direct decedent selector, while :first-child gets you the... well, first child. To get the image, you would need
#header > a:first-child > img
The direct decendent selector is not supported in IE6. You can choose not to use it if there are no non-direct decedents you would not want to select, like with the structure you have above, which doesn't have any other anchors other than the ones you want to select.
The + is the adjacent sibling selector: http://meyerweb.com/eric/articles/webrev/200007a.html. The following HTML structure is what you would need for your selector to work:
<div id="header"></div>
<img src="somewhere" alt="" /> <-- Selects this one for #header + a
<img src="somewhere" alt="" />
<img src="somewhere" alt="" />