I am using uislider and it works great, but it sends the image across the entire width of the page. I attempted to change the javascript with no help. Finally I was able to get the right side of the page to pad properly using max-width: size of the image;
I've tried using min-width for the left side of the page, but it just doesn't seem to work.
CSS:
.banner {
float: center;
padding-top: 70px;
padding-left: 160px;
width: 100%;
max-width: 895px;}
.banner ul li {
float: left;}
.banner li {
list-style: none;}
Site is: mydiscountman.com if you want to see it functioning broken. I tried posting an image, but I do not have a reputation of 10 yet.
Thanks!
Banner code:
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//mydiscountman.com/mdm-content/themes/clipper/js/unslider.js"></script>
<div class="banner">
<ul>
<li>
<img src="http://mydiscountman.com/mdm-content/themes/clipper/images/bannertest.png" width="895" height="294" title alt="social-facebook-color">
</li>
<li>
<img src="http://mydiscountman.com/mdm-content/themes/clipper/images/bannertest2.png" width="895" height="294" title alt="social-facebook-color">
</li>
<li>
<img src="http://mydiscountman.com/mdm-content/themes/clipper/images/bannertest3.png" width="895" height="294" title alt="social-facebook-color">
</li>
</ul>
<script>
$(function() {
$('.banner').unslider();
});
</script>
float: center; is not a valid css property
padding is also considered as the width
eg if width is 100% and padding is 10% so the total width will be 110%
if you want to add some space to the left use margin which will give space without effecting the width
Related
i've been looking around a lot on how to do different carousels, but i'm struggling to find a resource that teaches me what it actually does instead of just throwing code at me. Time wasted on misleading videos where you have to download their special script at the end! :-(
i want to understand it first in vanilla JS/Css first, and then work towards understanding Pug/Scss.
i have the below:
.MenuContainer {
position: relative;
width: 300px;
height: 175px;
background-color: black;
border-radius: 10px;
}
.Imagebox {
height: 150px;
margin-top: 15px;
margin-bottom: 27px;
bottom: -17px;
width: 260px;
margin-left: 20px;
margin-right: 15px;
background-color: lavender;
align-self: center;
position: absolute;
border-radius: 5px;
}
.ListReel {
position: inherit;
height: 120px;
background-color: white;
width: 217px;
bottom: 8px;
margin-left: 20px;
display: flex;
flex-direction: row;
overflow-x: hidden;
justify-content: space-evenly;
}
.fa-chevron-left {
position: inherit;
left: 30px;
bottom: 93px;
font-size: 1.5em;
}
.fa-chevron-right {
position: inherit;
left: 236px;
bottom: 93px;
font-size: 1.5em;
}
.MenuItem {
position: inherit;
height: 85px;
width: 85px;
top: 1px;
position: inherit;
border-color: lawngreen;
border-style: solid;
border-width: 1px;
display: table-row;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a427ef628d.js" crossorigin="anonymous"></script>
<script src="../Scripts/JQuery"></script>
<script src="../Scripts/jquery-ui.min.js"></script>
<link rel="stylesheet" href="../Scripts/jquery-ui.min.css">
<link rel="stylesheet" href="Test.css">
<title>TESTING</title>
</head>
<body>
<h1>Hello!</h1>
<div class="MenuContainer">
<h5 style="text-align: center; margin-top: 5px; color: white;">Select Item</h5>
<div class="Imagebox"></div>
<ul class=ListReel>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
</ul>
<i class="fas fa-chevron-left"></i>
<i class="fas fa-chevron-right"></i>
</div>
</body>
</html>
I tried going my own way but i'm completely stuck - i envision that the green boxes will need to be spaced evenly, and in a straight row, the items that fall outside the box, won't be visisble and the scroll will cycle the items "Carousel" style..
Ive tried a lot of things so far and i cant even seem to be able to flex my container/green boxes across let alone make a start on the animation!
Does anyone have any tips or resources or code ideas that can point me in the correct direction? preferably well explained tutorials? please?
Many Thanks
Let's start by thinking what the carousel should do. It should roll new images / items from the sides of the viewing container, right?
This means we want our carousel items to be full width of the carousel container, so the items fill the container and rest are left hanging out. Now we don't want to see the other carousel items outside the carousel and for that we can use overflow: hidden on the carousel container. This CSS declaration means that everything that doesn't fit inside the carousel container is hidden.
The other crucial thing is to lay out the carousel items next to eachother, so that when we move them they appear from the sides.
There are of course multiple ways to achieve this but here's what I would've done.
<div class="carousel">
<div id="carousel-item-wrapper">
<div style="background-color: red" class="carousel-item"></div>
<div style="background-color: blue" class="carousel-item"></div>
<div style="background-color: yellow" class="carousel-item"></div>
</div>
</div>
We have a container for the carousel (class: carousel) and the items within it (class carousel-item). Here I have added also a "carousel-item-wrapper" element here. Its job is to contain all the carousel items so we can just slide this bad boy around and the displayed carousel item will change.
Now for the CSS of this mf.
.carousel {
width: 600px;
height: 200px;
border: 3px solid #333;
overflow: hidden;
}
#carousel-item-wrapper {
display: flex;
flex-direction: row;
position: relative;
left: 0;
transition: left 0.5s;
}
.carousel-item {
display: inline-block;
min-width: 600px;
height: 200px;
}
Let's start with .carousel and .carousel-item.
We set defined width and height attributes for the carousel container according to our needs. We want the same width and height to be applied to carousel-item so they fill the carousel window. We also want to set the aforementioned overflow: hidden on the .carousel container so the other items are not displayed when they don't need to.
Now I have set the width of the carousel items with min-width: 600px. The reason is that the carousel-item-wrapper where we have the items uses flexbox layout display: flex. If the items don't have a min-width attribute set, the flexbox would shrink all of them until they all fit side by side inside the carousel container. We don't want that!
Now we get to talk about the mystical #carousel-item-wrapper element. Firstly, it has flex properties needed for horizontal layout: display: flex to actually use flexbox and flex-direction: row (which is default actually..) which tells flexbox to align the items next to eachother.
Then I have set the wrapper element position to relative which means that if no other settings (left, right, top, bottom) is set the element will be where it would naturally go. The reasoning for relative positioning is that we can then change the left (or right) value to move the long horizontal list of carousel items so that the element we want will be aligned with the .carousel element (the "display window" so to speak).
Lastly, it has transitition: left 0.5s which tells the browser that any time the left attribute is changed (usually by JS), the browser will animate the change of the value. That is, if we first have left: 0px and change it to left: -600px (sliding the carousel one item over, as my carousel has width of 600px) the change will be animated (0.5s refers to the time you want it to take)
Now we have all of the HTML and CSS set up and if you change the left property of #carousel-item-wrapper it will move and animate the carousel.
Only thing we need is to create some JS to move it around. I have opted for a button which just moves the carousel one item.
I wasn't going to explain the JS but seeing that this answer got so long, I might as well do that as well.
function moveCarousel() {
const carouselWrapper = document.getElementById("carousel-item-wrapper");
let left = carouselWrapper.style.left.slice(0, -2);
left = (left - 600) % 1800;
carouselWrapper.style.left = left + 'px';
}
First we start by getting a reference to the wrapper element with document.getElementById. We can use this to read the current value of left attribute on the element and change it. carouselWrapper.style.left is the value of the left property and slice(0, -2), well you can read up on it on your own but here it just strips the "px" from the value (because the value of left is a string of <value>px. Next we want to subtract carousel width from this (so the items slide up correctly). I also used the modulo operator, which is just remainder division. This will mean that once I have subtracted too much, it will wrap over. Now the only thing left is to apply this new value of left to the wrapper.
All in all the implementation would look a bit like this:
(EDIT: I change height to be 100px instead of 200px to make it fit inside the run code snippet window)
function moveCarousel() {
const carouselWrapper = document.getElementById("carousel-item-wrapper");
let left = carouselWrapper.style.left.slice(0, -2);
left = (left - 600) % 1800;
carouselWrapper.style.left = left + 'px';
}
.carousel {
width: 600px;
height: 100px;
border: 3px solid #333;
overflow: hidden;
}
#carousel-item-wrapper {
display: flex;
flex-direction: row;
position: relative;
left: 0;
transition: left 0.5s;
}
.carousel-item {
display: inline-block;
min-width: 600px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="carousel">
<div id="carousel-item-wrapper">
<div style="background-color: red" class="carousel-item"></div>
<div style="background-color: blue" class="carousel-item"></div>
<div style="background-color: yellow" class="carousel-item"></div>
</div>
</div>
<button role="button" onclick="moveCarousel()">Move carousel</button>
</body>
</html>
One quick thing before I answer your question: try and post Minimum Working Examples (MWEs) on stackoverflow, because a) this will make your answer more useful to others; b) because it will help you isolate and debug. To go from full website to MWE, remove stuff until only the problem remains, and none of the other stuff.
Now:
I'm not sure whether you understand the implications of display:flex on .ListReel. This is a flexbox, a web technology that allows simplified formatting of things, and you may have seen it around a few tutorials. But flexbox setups require a bit more than just display:flex. You can read more here: CSS-Tricks post on Flexbox (not mine but i regularly use it)
For starters, try adding flex: 0 0 100% to your .MenuItem, which tells the browser that you want your carousel menu items to take up 100% of the width of the .ListReel. Then, for the moment, set overflow-x to auto, which will show the scrollbar.
Later you might not want the scrollbar; so you can set overflow-x back to hidden. I will assume that you know some javascript - the next step would be to add some javascript to make it work:
<script>
function moveTheListItems(){
var listReel = document.getElementsByClassName("ListReel")[0]; // get a reference to the listReel
listReel.scrollBy(listReel.clientWidth,0); // scroll it to reveal the next frame
}
setInterval(moveTheListItems,500); // run this function every 500ms = half a second
</script>
Hope it helps!
I am trying to do an overview page on my website so that when I hover over a div on the overview page different sections of that div show different images. Essentially a slideshow but the image changes depending on where the cursor is.
I have managed to find some code that does what I want but it uses an a href to pull in the images which means if you click it, it goes to the link of the image.
Currently I just have placeholder images in but when finished each one will have specific project images in. As each div will just be one project the whole div should go to one html link and not just a specific image link of the image the user is hovering over.
All I want is the user to click and it go to a html link and not an img link.
Here is the code I am using:
The coding savvy people out there will probably have a much better solution for what I would like to achieve, I am interested to see any better solutions.
HTML
<div class="multi">
<ul class="rotator-nav fifth clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="imgcontent">
<ul class="rotator-icons fifth">
<span class="img1 active"></span>
<span class="img2"></span>
<span class="img3"></span>
<span class="img4"></span>
<span class="img5"></span>
</ul>
<img src="/img/FoI.jpg" class="currentimg">
</div>
</div>
CSS
.multi {
display: block;
float:left;
position: relative;
width: 30.8%;
height: 20%;
padding: 0px;
margin:0% 1% 2% 1%;
overflow: hidden;
}
.multi .imgcontent {
display: block;
position: absolute;
top: 0px;
}
.imgcontent img {
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.rotator-nav {
display: block;
position: relative;
width: 100%;
height: 100%;
z-index: 9;
}
.rotator-nav li {
display: block;
float: left;
height: 100%;
}
.rotator-nav.fourth li {
width: 25%;
}
.rotator-nav.fifth li {
width: 20%;
}
.rotator-nav li a {
display: block;
float: left;
width: 100%;
height: 100%;
border-bottom:0px solid #fff
}
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
JS
$(function(){
var $rotators = $('.multi');
var $imglinks = $('.rotator-nav a');
$imglinks.on('mouseenter', function(e){
var imgclass = '.'+$(this).attr('class');
var imglink = $(this).attr('href');
// update main image src
$(this).parent().parent().parent().find('.currentimg').attr('src',imglink);
// update current rotator icon
var $rotators = $(this).parent().parent().parent().find('.rotator-icons');
if($rotators.children(imgclass).hasClass('active')) {
// already active icon -- do nothing
} else {
// remove active class then add to new icon
$rotators.children('span').removeClass('active');
$rotators.children(imgclass).addClass('active');
}
});
});
Any help would be greatly appreciated!
Thanks,
Mark
I think you could best use a data attribute for this instead (if I understand the intention correctly) :
var imglink = $(this).data('image');
<div class="multi">
<ul class="rotator-nav fifth clearfix">
<li>
<a data-image="/img/FoI.jpg" href="#" class="img1"></a>
</li>
<li>
<a data-image="/images/card.jpg" href="#" class="img2"></a>
</li>
<li>
<a data-image="/images/amareal.jpg" href="#" class="img3"></a>
</li>
<li>
<a data-image="/images/edeva.jpg" href="#" class="img4"></a>
</li>
<li>
<a data-image="/images/amacover2.gif" href="#" class="img5"></a>
</li>
</ul>
...
If you'd still like to see the image over the original div, a pseudo element could be used. Advantage there is that they are not actual DOM elements and will not register clicks :
Demo
Now it would be great if the data attribute could be directly used for the content of the pseudo element as well but that doesn't seem possible. And you can't target them with JavaScript so each image would have to be defined with nth-of-type() in the stylesheet additionally.
You don't need to use .parent().parent()
Just use the parent's class to find the item.
Your $(this).parent() * 3 is the $(".multi")
So your $rotators can't find .rotator-icons,
you need to use one more parent or use siblings
And I suggest do not use class if there are no need to do one thing to lots of items.
I'd like to make my navigation menu align itself so it doesn't overlap on page load but overlap when scrolling down (Dynamic nav bar)
What I currently have is here: https://m.omegarealm.tk/
As you can see on the page's initial load the bar overlaps the text, I'd like the nav bar not to overlap the text when the page is loaded but overlap on scroll.
My current CSS is here: https://files.omegarealm.tk/mobile.css
Quick note: The CSS is one line when you access it because cloudflare compresses it. It's indented on the server.
Thanks!
No need for any JavaScript here. Your "navbar" element seems to be a fixed height so you can achieve what you want simply by setting the top margin of your body to be equal to that height, plus a little extra so your content is sitting right on the edge of the fixed element.
body{
height:5000px;
margin:52px 10px 10px;
}
#navbar{
background:red;
left:0;
position:fixed;
top:0;
width: 100%;
}
#navbar img{
float:left;
margin:5px;
}
#navbar p{
font-weight:bold;
line-height:42px;
margin:0;
text-align:center;
}
<div id="navbar">
<img alt="Menu" height="32" src="//files.omegarealm.tk/images/menu_mobile.png" width="32">
<p>OmegaRealm</p>
</div>
<h1>Under construction</h1>
<p>Sorry, please come back later</p>
Because the element is fixed is has no relevance to the content below it. Wrap the body content and apply a margin to the top:
var navHeight = $('#navbar').height() + 30;
$('section').css('marginTop', navHeight);
#navbar {
background-color: red;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navbar">
<img width="32px" height="32px" align="left" style="padding: 5px;" src="//files.omegarealm.tk/images/menu_mobile.png">
<font size="5">
<b>
OmegaRealm
</b>
</font>
</div>
<section style="height: 2000px">
<h1>Under construction</h1>
<p>Sorry, please come back later</p>
</section>
Currently I have four images side by side. When the window is resized or viewed on a smaller device it does a line jump (three images and the fourth one beneath it). However what I want is for all four images to just shrink relative to the window size. To make it clear, I've included some images and my code. Here's the jsfiddle as well: http://jsfiddle.net/hxeJb/
^ That is what I currently have.
^ That is what I want to achieve.
HTML:
<div id="headerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>
CSS:
#headerline {
width: 100%;
overflow: hidden;
margin: -10px auto 20px auto;
}
#menu {
max-width: 700px;
text-align: center;
margin: auto;
}
#menu img {
width: 150px;
}
http://jsfiddle.net/hxeJb/2/
#menu img {
width: 20%;
}
See if this help you, just don't provide a fixed width, let image width relative to its parent width
Observing your CSS part in jsFiddle, I think assigning width in percentage rather than fixed pixels will resolve your problem.
You can try this instead of current CSS.
#menu img {
width: 31.33%;
}
Hope this might help you.
The other answers are probably all correct but you may want to add a max-width: 150px; so that hte image does not expand too big and lose quality.
#menu img {
width: 30%;
max-width: 150px;
}
Fiddle: http://jsfiddle.net/hxeJb/4/
Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
#menu img {
width: 25%; //give the width as per the requirement
}
Hope this will solve your problem :)
I have a layout where images "float" within a certain area. The layout looks like this:
The source like this:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<!-- EDIT: I am aware that I can put the badge here. See the edit notes and image below. -->
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
The CSS looks like this (in SCSS):
div.free_tile { width: 176px; height: 206px; float: left; margin: 0 20px 20px 0; position: relative;
&.last { margin: 0 0 20px 0; }
a.img_container { display: block; width: 176px; height: 158px; text-align: center; line-height: 156px; margin-bottom: 10px; }
img { margin: 0; border: 1px solid $dark3; display: inline-block; vertical-align: middle; #include boxShadow;
&.canonical { border: 1px solid $transect; }
}
.location, .taxonomy { width: 176px; }
.location { font-weight: 700; }
.taxonomy { line-height: 10px; font-size: 10px; text-transform: uppercase; height: 20px; overflow: hidden; }
}
div.transect_badge { height: 20px; width: 20px; background: url('/images/transect-badge.png'); }
So, basically the images are sitting vertically-aligned middle and text-aligned center, and they have a maximum width of 176 and max height of 158, but they're cropped to maintain the original aspect ratio so the actual top corner of each image falls differently depending on which image it is.
I have a badge that I'd like to put in the top corner of certain images (when the image is "canonical"). You see the style for this above (div.transect_badge).
The problem, of course, is I don't know where the top corner of the image will be so I can't hardcode the position via CSS.
I assume that I'll need to do this via jQuery or something. So, I started with a jQuery method to automatically append the badge div to any canonical images. That works fine, but I can't figure out how to position it over the top left corner.
How can this be done? (ideally using just HTML and CSS, but realistically using JS/jQuery)
--EDIT--
Here's the problem: The image is floating inside a container, so the corner of the image might fall anywhere inside the outer limits of the container. Here's an example of what happens if I try to use position:absolute; top:0; left:0 inside the same container the image is bound by:
It took some tryouts, but here it is: the size independent image badge positioner.
HTML:
<div class="tile">
<span class="photo">
<img src="/photos/10.jpg" alt="10" /><ins></ins>
</span>
<p class="location">Houston</p>
<p class="taxonomy">T6 | Conduit | Infrastructure</p>
</div>
CSS:
.tile {
float: left;
width: 176px;
height: 206px;
margin: 0 20px 20px 0;
}
.photo {
display: block;
width: 176px;
height: 158px;
text-align: center;
line-height: 158px;
margin-bottom: 10px;
}
a {
display: inline-block;
position: relative;
line-height: 0;
}
img {
border: none;
vertical-align: middle;
}
ins {
background: url('/images/badge.png') no-repeat 0 0;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
}
Example:
In previous less successful attempts (see edit history), the problem was getting the image vertically centered ánd to get its parent the same size (in order to position the badge in the top-left of that parent). As inline element that parent doesn't care about the height of its contents and thus remains to small, but as block element it stretches to hís parent's size and thus got to high, see demonstration fiddle. The trick seems to be to give that parent a very small line-height (e.g. 0) and display it as an inline-block. That way the parent will grow according to its childs.
Tested in Opera 11, Chrome 11, IE8, IE9, FF4 and Safari 5 with all DTD's. IE7 fails, but a center-top alignment of the photo with badge at the right position isn't that bad at all. Works also for IE7 now because I deleted the spaces in the markup within the a tag. Haha, how weird!
EDIT3: This solution is very similar to my original solution. I didn't really look at your code much so I should have noticed this earlier. Your a tag is already wrapping each image so you can just add the badge in there and position it absolute. The a tag doesn't need width/height. Also you must add the badge image at the beginning of your a tag.
Demo: http://jsfiddle.net/wdm954/czxj2/1/
div.free_tile {
width: 176px;
height: 206px;
float: left;
}
a.img_container {
display: block;
margin-bottom: 10px;
}
span.transect_badge {
display:block;
position: absolute;
height: 20px;
width: 20px;
background-image: url('/images/transect-badge.png');
}
HTML...
<a class="img_container canonical" href="/photos/10">
<span class="transect_badge"></span>
<img class="canonical" src="path/to/img" />
</a>
Other solutions...
In my code I'm using SPAN tags so simulate images, but it's the same idea. The badge image, when positioned absolute, will create the desired effect.
Demo: http://jsfiddle.net/wdm954/62faE/
EDIT: In the case that you need jQuery to position. This should work (where .box is your container and .corner is the badge image)...
$('.box').each(function() {
$(this).find('.corner')
.css('margin-top', ( $(this).width() - $(this).find('.img').width() ) / 2);
$(this).find('.corner')
.css('margin-left', ( $(this).height() - $(this).find('.img').height() ) / 2);
});
EDIT2: Another solution would be to wrap each image with a new container. You would have to move the code that you use to center each image to the class of the new wrapping container.
Demo: http://jsfiddle.net/wdm954/62faE/1/
$('.img').wrap('<span class="imgwrap" />');
$('.imgwrap').prepend('<span class="badge" />');
Technically you can just add something like this to your HTML though without using jQuery to insert it.
Use an element other than <div>, e.g. <span> and put it inside your <a> element after the <img> element. Then, give the <a> element position:relative; and the <span> gets position:absolute; top:0px; left:0px;. That is, if you don't mind the badge also being part of the same link - but it's the easiest way. Also, the reason for using <span> is to keep your HTML4 valid, <div> would still be HTML5 valid, however.
I did find one solution using jQuery. I don't prefer this because it noticably impacts page loading, but it is acceptable if nothing else will work. I'm more interested in NGLN's idea which seems promising but I haven't entirely figured out yet. However, since this thread has picked up a lot of traffic I thought I'd post one solution that I came up with for future readers to consider:
Given this markup:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<span class="transect-badge"></span>
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
Same CSS as in question except:
span.transect-badge { display: block; height: 20px; width: 20px; position: absolute; background: url('/images/transect-badge.png'); }
Then this jQuery solves the problem:
$(function() {
$('img.canonical').load( function() {
var position = $(this).position();
$(this).next().css({ 'top': position.top+1, 'left': position.left+1 });
});
});
Like I said, though, this incurs noticeable run-time on the client end, so I'd prefer to use a non JS solution if I can. I'll continue to leave this question open while I test out and give feedback on the other solutions offered, with hopes of finding one of them workable without JS.