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.
Related
I am still learning and trying to get my text to wrap around two images, one left and one right, but nothing seems to be changing. I'm not sure what I'm doing wrong! :( Any suggestions are very appreciated!
Here is what it looks like.
.skill-row {
display: inline-block;
width: 50%;
margin: 100px auto 100px auto;
text-align: left;
line-height: 2;
}
.layout-pic {
width: 25%;
float: left;
margin-right: 30px;
}
.phones-pic {
width: 25%;
float: right;
}
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="circular" "layout-pic" src="images/layout.png" alt="website-layout-pic">
<h3>Create Your Vision</h3>
<p>I create using a complementary focus on color palettes, typography, and quality content. All of these elements help to bring your vision to life and really make it SHINE.</p>
</div>
<div class="skill-row">
<img class="circular" "phones-pic" src="images/seo.jpg" alt="phone-screens">
<h3>Fine Tune Your Vision</h3>
<p>As a developer, I know how to fine tune your website to give your audience the best functionality and visual appeal across devices.</p>
</div>
</div>
Multi classes should be wrapped in one string like :
<img class="one two three"/> ✔
and not like <img class="one" "two" "three"/> this is wrong
I am trying to align these four separate spliced images from an original image. I am doing this because each portion of the image has a separate link.
I have the images align. Now all I want to do is shrink the size of the images via width: #%;
For some reason this just isn't seeming to work.
Any help would be appreciated.
Here is a link to the CodePen: http://codepen.io/anon/pen/pvGgdp
.split,
.split2,
.split3,
.split4 {
display: inline-block;
margin: -2px;
}
.spliter {
margin-top: -3px;
}
<div class="splitWrapper">
<div class="split">
<a href="#">
<img src="http://i.imgur.com/Jnah8Y0.png" title="source: imgur.com" />
</a>
</div>
<div class="split2">
<a href="#">
<img src="http://i.imgur.com/mGftOCN.png" title="source: imgur.com" />
</a>
</div>
<div class="spliter"></div>
<div class="split3">
<a href="#">
<img src="http://i.imgur.com/ZooSwpU.png" title="source: imgur.com" />
</a>
</div>
<div class="split4">
<a href="#">
<img src="http://i.imgur.com/sMsHX14.png" title="source: imgur.com" />
</a>
</div>
</div>
You could use background images and assign them to the a tags. I have amended your codePen here > http://codepen.io/anon/pen/YPBwJX
However, it may be better to just use one image, and overlay transparent a-tags, set them to display block and then you don't have to worry about the image lining up! Anyways, please see the code below for the question asked =)
.splitWrapper {
width: 850px;
margin: auto;
}
a.split1 {
background: url('http://i.imgur.com/Jnah8Y0.png');
}
a.split2 {
background: url('http://i.imgur.com/mGftOCN.png');
}
a.split3 {
background: url('http://i.imgur.com/ZooSwpU.png');
}
a.split4 {
background: url('http://i.imgur.com/sMsHX14.png');
}
a.split{
width: 417px;
height: 300px;
float: left;
margin: 0;
padding: 0;
display: block;
background-size: 417px 300px;
}
.clear { clear: both; }
<div class="splitWrapper">
<div class="clear"></div>
</div>
I don't think you quite understand how % works in CSS. % means that percentage of the parent element. Also, for it to work, the parent element has to have a defined width. Here's the CSS changes you need:
.splitWrapper {
width: 100%;
}
.split, .split2, .split3, .split4 {
display: inline-block;
margin: -2px;
width: 25%;
}
.split img,
.split2 img,
.split3 img,
.split4 img {
max-width: 100%;
}
.spliter {
margin-top: -3px;
}
http://codepen.io/anon/pen/KwJVGQ
You'll need to adjust your margins accordingly. You should use percentage margins since you're working with percents. Just divide the width of the margin by the width of the element and multiply it by 100 to get your margin percentage.
I have some pseudo code like this:
<div class="container">
<div class="hiddenatfirst">
<img>
<img>
<img>
</div>
</div>
and css like so:
.hiddenatfirst{
display:none;
}
.container:hover .hiddenatfirst{
display:block;
}
.hiddenatfirst:hover{
display:block;
}
The problem is - I have a design website and a lot of visitors have the pinterst extension installed. When someone hovers over the pin-it button that gets added to the images inside the .hiddenatfirst div the div gets hidden again.
I don't want to remove the pin-it buttons from the images but I don't want them to get in the way of the :hover events.
Any ideas?
Apologies for the pseudo-code, the real code is pretty messy and in staging! Hopefully this explains what I need.
Thanks
PS - if you look at the .third-level-menu in the navigation here you'll see it in action (note you'll need the pinterest chrome extension installed)
http://smith-hoyt.myshopify.com/?preview_theme_id=12397927
PPS - this is a crappy GIF but I think shows what's happening too:
http://recordit.co/anNtu8W1Vo
PPPS - you can see the pin-it button that pinterest adds to each image in this image: https://twitter.com/tomcritchlow/status/573920066124836864/photo/1
Most probably the problem is that 'Pin it' button is absolutely positioned on top of the image, but it's not the container's child, so hover on it hides the image like on the following sample:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
</div>
</div>
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
What you can do is using JavaScript or jQuery find all the 'Pin it' buttons and move them to the appropriate containers with the positions recalculation, so the result HTML will be like the following:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
</div>
</div>
Rather than use the javascript solution above, since these images are small and in the navigation I found a way to remove the pin-it button, simply add to each image:
nopin="nopin"
As per the documentation here:
https://developers.pinterest.com/on_hover_pin_it_buttons/
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.
Say I have a small transparent gif I want to align and scale over an image that can scale as the browser changes size. You might have guessed that yes, I want a seamless little animation over photograph such that a small portion of the photo seems to be animated.
Is this just too difficult for pure CSS? I'm already starting to do it in js, just seems complicated with CSS. So while I move on and do it with code, anyone have a funky CSS methodology by chance?
Tried something like this but for some reason the floater image scales with the browser (visible) percent, not the parent div containing the bg image.
<div id="bg-image">
<div class="bg-container">
<img class="photo" src="../images/bg_artist.jpg" alt=""/>
<img class="floater" src="../images/twitter.png" alt="" />
</div>
</div>
just pretend i want the child image to show in the lower right:
#bg-image .container
{
width:102%;
margin-left:-10px;
}
#bg-image .photo
{
width:102%;
margin-left:-10px;
}
#bg-image .floater {
position:fixed;
left:90%;
top:90%;
}
Well, after futzing around, the js solution is pretty simple:
var floater = document.getElementById("floater");
var photo = document.getElementById("bg-photo");
floater.style.left = photo.width * .9 +"px";
floater.style.top = photo.height * .5 + "px";
Sorry, I'd put it in a jsfiddle, but it's hard since it deals with the whole browser.
I'm a little unclear what you want the final behavior to be, but this has the images scaling and staying located in relation to each other.
HTML
<div id="bg-image">
<img class="photo" src="path/bkgimage.png" alt=""/>
<img class="floater" src="path/floatimage.png" alt="" />
</div>
CSS
#bg-image {
position: absolute;
width:100%;
left: 0;
top: 0;
}
#bg-image .photo {
width:100%;
}
#bg-image .floater {
position:absolute;
width: 10%;
height: 10%;
bottom: 0;
right: 0;
}