I have a gallery container which has two columns. I append multiple photos to the container using jQuery. When I attempt to use nth-child(n) on the div container or img tags, nothing happens. I'm not too sure what I'm doing wrong.
I've tried to use nth-of-type too, selecting image tags, div tags, adding classes and IDs trying to get it to access the elements, but I've failed each time.
HTML:
<body>
<div class="photos"></div>
</body>
Javascript:
$( ".photos" ).append(`<img class=\"diaryImage\" src=\"..url\">`);
CSS:
.photos {
line-height: 0;
-webkit-column-count: 2;
-webkit-column-gap: 0px;
-moz-column-count: 2;
-moz-column-gap: 0px;
column-count: 2;
column-gap: 0px;
margin-top:.5%;
background-color: transparent;
width: 80%;
margin-left: 16%;
height: auto;
overflow: auto;
}
.photos img {
width: 100% !important;
height: auto !important;
vertical-align: top;
}
.photos img:nth-child(even) {
width: 10%;
/* grid-column:2;*/
}
I have also tried:
div.photos img:nth-child(even) {
width: 10%;
/* grid-column:2;*/
}
.photos:nth-child(even) {
width: 10%;
/* grid-column:2;*/
}
And a couple of other tags. I'm new to using nth child selectors so not 100% sure what I'm doing wrong.
I just want any impact to be had on every second photo. Once I can see the selector working, I can continue working on the problem. My ultimate objective is to have every second photo placed into column 2, but just testing with width:10%; to see if the code is having any impact.
I can't see a problem with :nth-child(even), see below, it works as expected, Your issue is coming from the use of !important as stated in the other answer from #Trevin Avery.
Futhermore why are you escaping this:
.append(`<img class=\"diaryImage\" src=\"..url\">`);
This
.append(`<img class="diaryImage" src="${dynamic_url}" />`);
should work with issues, no?
.photos img:nth-child(even) {
outline: 1px solid red;
}
<body>
<div class="photos">
<img src="https://via.placeholder.com/300x200?text=1" alt="" />
<img src="https://via.placeholder.com/300x200?text=2" alt="" />
<img src="https://via.placeholder.com/300x200?text=3" alt="" />
<img src="https://via.placeholder.com/300x200?text=4" alt="" />
<img src="https://via.placeholder.com/300x200?text=5" alt="" />
<img src="https://via.placeholder.com/300x200?text=6" alt="" />
<img src="https://via.placeholder.com/300x200?text=7" alt="" />
<img src="https://via.placeholder.com/300x200?text=8" alt="" />
</div>
</body>
The problem is that you have !important in .photos img. Remove that and it will work as expected.
!important will override all other styles that are trying to set that attribute, even if they are more specific, unless they also have an !important. This is preventing the new style in .photos img:nth-child(even) from being applied.
Here's the docs and here's a helpful tutorial.
Related
Struggling to change the size of an image.
<div class="mypage">
<div class="mypage-block">
<div class="mypage-image">
<a href="/mylink">
<img alt="" src="mypic.jpg" style="width: 180px; height: 180px;"></a></div>
This is what I have tried
.page .page-block .page-image img {
width: 140px;
height: 140px;
}
When I inspect in Chrome it shows this img value as "element.style" set at 180px, this is the value I am having problems overriding.
Remove the inline styling...it will normally win as it comes after the CSS sheet as it will therefore have priority.
If absolutely necessary you can force the stylesheet to 'win' by adding !important statements but it's not recommended.
img {
width: 140px;
height: 140px;
}
<img src="http://lorempixel.com/output/city-q-c-180-180-5.jpg" style="width: 180px; height: 180px;" alt="">
<img src="http://lorempixel.com/output/city-q-c-180-180-5.jpg" alt="">
The inline style on the img element is overriding your CSS styling.
In order to undo this (assuming you have no ability to remove the inline style from the img element itself) you need to add an !important deceleration to your CSS attributes.
Your classes in your CSS file also do not match up those declared in your HTML
.mypage .mypage-block .mypage-image img {
width: 140px !important;
height: 140px !important;
}
I have a image gallery with a 2 column layout. The image gallery can contain 1 column full width images between the 2 column images.
See my Codepen Example:
<div class="gallery">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img class="large" src="http://nosrc.io/400x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img class="large" src="http://nosrc.io/400x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
</div>
http://codepen.io/anon/pen/JdgBOb
Why does :nth-child select the wrong gallery items after the second full width image? Normally all left column images should have margin-left: 0; and all right column images should have margin-left: 2%;.
P.S. I can not use JavaScript.
To really get this working properly (assuming your image sizes may be dynamic) you'll need to use .large:nth-of-type(...) ~ img and it will get pretty complicated (not to mention it may not work on some older browsers). An easier solution would just be to use 1% margin on all images: http://codepen.io/Godwin/pen/MwNBMK.
check it out. That says:
.gallery img:nth-child(2n+1) {
margin-left: 0;
}
and:
.gallery img.large ~ img:nth-child(2n+1) {
margin-left: 2%;
}
the (2n+1) changes in what position uses the attribute
Wouldn't this suffice? I know but that theres unnecessary right margin in each line of images, but..
http://codepen.io/anon/pen/qdeyzP
I also took the liberty of refactoring that weird float clearing.
.gallery {
width: 400px;
overflow: hidden;
}
Insetad of the bloaty:
.gallery::before,
.gallery::after {
content: " ";
display: table;
}
.gallery::after {
clear: both;
}
`
Since overflow: hidden is a pretty good clearfix on its own.
I don't think nth-child is doing what you think it's doing. It's not the nth-child relative to the .large element; it's relative to all the img children of .gallery. If you use the style inspector and examine the styles being applied to each img, you should be able to see what I mean.
You could try a rule like this:
.gallery img {
float: left;
width: 48%;
margin-right: 2%;
margin-bottom: 2%;
}
.gallery img.large {
width: 98%;
}
See http://codepen.io/anon/pen/NqQLYx.
I am having css3 dock menu panel which contain 8 images.If click on particular image, I want to increase it's size/change background color, vise-versa while clicking on another image previous image should be re-size or background color remove....how can I do this..?
Try this - DEMO
HTML
<img id="zoom1" src="http://lorempixel.com/100/100" alt="" />
<img id="zoom2" src="http://lorempixel.com/100/100" alt="" />
<img id="zoom3" src="http://lorempixel.com/100/100" alt="" />
CSS
#zoom1,
#zoom2,
#zoom3 {
background: #e3e3e3;
display: block;
float: left;
padding: 20px;
margin-right: 5px;
width: 100px;
-webkit-transition: all 1s;
}
#zoom1:target,
#zoom2:target,
#zoom3:target {
background: #555;
width: 200px;
}
try js if you can
<script>
document.getElementById("wantedelement").attribute_size="newvalue";
</script>
http://www.w3schools.com/js/js_htmldom_css.asp
I've trying to do something that I'm sure is simple, but I can't do it.
All I want to do is have an image and then some text after that image, and be able to control accurately the amount of space between the image and the text.
Here's my code:
<div class="wrap"><div style="width:189px;""position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189">
</div>
In my style sheet, wrap has these attributes:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
I want my text to look like this directly below the image:
Username
Age
Location
Currently, I just add loads of break tags to control where I have the text, but that's messy and there must be a better way.
Thanks in advance for any help.
<div class="wrap">
<div style="width:189px;position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189" />
</div>
<br clear="all" />
<div id="bottomText">
Username
<br /><br />
Age
<br /><br />
Location
</div>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
#bottomText{
margin-top: 10px;
}
Change margin-top: 10px to the desired distance.
Change bottomText to a class rather than an id, if you plan on having more than one.
(Note: I removed your "" from the second div because I'm not sure why that was there.
Check this solution jsfiddle. Personally I will not use inline style, because it becomes more messy. I have used <ul> for the text. This can give you better control over the position of the text.
Just use an Unordered List for the text since it is a list. ul are "block level elements" so they will self-clear. And definitely use an external stylesheet vs. inline styles. External is much cleaner and easier to work with and make changes to. Example: http://jsfiddle.net/codeview/Fk3EK/
HTML:
<div class="wrap">
<img src="30000000_1.jpg">
<ul>
<li>Username</li>
<li>Age</li>
<li>Location</li>
<ul>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: yellow;
color: black;
padding: 10px;
margin: auto;
}
ul { list-style-type:none; }
li { padding:5px 0; }
I can't get it to work. Probably because you guys can't see the other code I have going on. But maybe I was approaching the problem in the wrong way.
Here's my code before I started fiddling with css positioning:
<br><br>
<div class="imgleft">
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<span style="font-weight: bolder;font-size: 12px;"></br><br><br></br>
<font color="green"> User69 </font> <img src="online01.gif" alt="" border="0" style="float:center"><br>
Location:
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_region_name());</script></span>
</script></br>
<br><br>
The problem is, the images have a set width, but vary in height, so sometimes I'll use 8 break tags, other times 7, but the exact distance beneath each image (where the text goes) is different. And it looks bad.
There are 3 images on the page, so it goes image, text (well, there's an image as well, flashing gif) below image, then another image with text below it, and so on. From top to bottom on the left of the page.
Here are the relevant bits from my css:
.imgleft {
float: left;
width: 120px;
}
.imgleft img {
clear: both;
width: 175px;
padding-bottom: 0px;
}
I'm certain I'm making this way more complicated than it needs to be! Sorry.
I've put a link to my code in the comments to the first answer, if someone could take a look. Thanks.
I have a strange bug when looking at my homepage in Chrome. The bug doesn't seem to appear when I try to edit it with CSSEdit:
I attached the pictures to show you what I mean. Those "points" next to the icons are linked as well.
What could be causing this error?
Thanks for the help!
EDIT sure here's the code (the page isn't online):
<div class="rss">
<p>
<a href="http://linkto">
<img src="/images/facebook.png" alt="Find me on facebook" />
</a>
<a href="http://linkto">
<img src="/images/twitter.png" alt="Follow me on twitter" />
</a>
<a href="http://linkto">
<img src="/images/rss.png" alt="Subscribe to RSS Feed" />
</a>
</p>
</div>
which is wrapped in a div class called footer. And the CSS
.site .footer {
font-size: 80%;
color: #666;
border-top: 4px solid #eee;
margin-top: 2em;
overflow: hidden;
}
.site .footer .rss {
margin-top: 0em;
margin-right: -.2em;
float: right;
}
.site .footer .rss img {
border: 0;
}
Sorry for the strange formatting.
Those "points" are the text-decoration:underline portion of your CSS being applied to <a> tags. The reason you only see part of it is because the image you are using is covering the majority of it.
Try putting this in your CSS:
.rss a { text-decoration:none }
.rss a img { border:none; outline:none }