I have recently put together a working navigation bar.
I'm pleased with it, but unfortunately it isn't accessible.
When images are OFF, I would like to show replacement text in its place.
Is this easy to achieve with my example: http://pastebin.com/hXth7FSK ?
Many thanks for any pointers.
Michael
You can absolutely position a span inside the element so that it covers the text as this post from Dave Shea explains:
<h3 id="header" title="Revised Image Replacement">
<span></span>Revised Image Replacement
</h3>
/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
The only limitation is this will not work for partially transparent images.
If you want to use background-images (I prefer background-images as well for navigations) you could absolutely position a blank image over it by adding this CSS: position: relative; z-index: 100; to all of the navigation elements with background images and then putting this in them:
<img src="pixel.gif" alt="Text to display when images are off" style="width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 50;" />
Then, when the images are off, the alt text of the blank image will show. This image will be under the element, but when images are off, you will be able to see the image's alt text. Also, this will work for partially transparent background images.
You can use this pixel.gif image.
Hope this helps.
Related
I'm trying to set "pointer-events: none" to a semi transparent PNG, in order to be able to navigate the iframe (it's a Google Map) placed beneath that PNG. I tried giving "pointer-events: auto" to the iframe, and also "pointer-events: none" to the parent div, yet none of it allows to click through.
For info, the iframe is absolutely positioned, whereas the png and parent div are both relative.
The HTML is dead simple:
<div class="wrapper">
<iframe class="map" src="https://www.google.com/maps/d/embed?mid=zZ48oPOpCSZo.khyS2koft-Ss"></iframe>
<img src="http://thehermitcrab.org/wp-content/uploads/manual-uploads/the-story/hey-there-bottom-1366.png"/>
</div>
and here's the css:
.wrapper {
position: relative;
}
.wrapper img {
pointer-events: none;
display: block;
position: relative;
}
.map {
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
and here's the website:
www.thehermitcrab.org
(scroll down a tiny bit and you'll see the map)
Thank you so much in advance!
The iframe has an z-index of -1, which seems to cause it to ignore mouse events despite the pointer-events setting. Change it to at least 0 and let the image have a z-index that is bigger.
So I'm trying to customize a slider that came in my wordpress theme with CSS. Right now, it displays three post thumbnails side by side. Unfortunately my featured images all have different aspect ratios, so I'm trying to create a kind of letterbox effect by giving the div that contains the image a fixed size (202px by 138 px) and a black background, and then centering the image within the div.
This is what I want it to look like:
Right now, all my images are aligned with the top of their container, so it looks like the shortest/fattest image just has a black bar at the bottom.
This is what it looks like right now:
I'm SO close. I've read up on vertical-align (I've already seen that "How Not to Vertically center Content" blog post [which I can't link to because of my awful reputation], which was useful and informative but didn't solve my problem), but at this point I'm just stuck.
My html looks something like this:
<ul class="slider">
<li>
<figure class="slide-image">
<a href="blogposturl">
<img src="blogimage" />
</a>
</figure>
//and then some other stuff//
</li>
</ul>
And then there's the CSS! My CSS looks like this right now:
.slider {
position: relative;
}
.slider li {
position: absolute;
}
figure.slide-image {
border-radius: 0px;
width: 202px;
height: 138px;
position: absolute;
background-color: #000;
}
.slide-image img {
border-radius: 0px;
position: absolute;
left: 0;
max-width: 202px;
top: 50%;
margin-top: -69px;
}
I basically followed phrogz's instructions. And yet, my image is still sitting there happily at the top of its container. I think the problem is that the image is inside a link tag? Or maybe it has to do with the container? I don't know. Can anyone help me?
I removed some of the absolute positioning on the img. Try this approach instead:
It uses display:table-cell, and vertical-align:middle for vertical centering.
Working example here - as you can see, it works for varying heights. I didn't change any HTML either.
figure.slide-image a {
display: table-cell;
vertical-align: middle;
height: 138px;
}
.slide-image img {
border-radius: 0px;
max-width: 202px;
vertical-align: middle;
}
I'm trying to set images in this style: one on top and other below this.
Actually I do something wrong and in my result images are one under other. Here is jsFiddle.
The second image is hidden by overflow:hidden in slider class.
Question:
Where I make mistake? I'm sure there is easy solution but I lost some time and can't find it.
P.S. If is it possible I'm looking solution with css changes only.
Change the css for your images to simply this:
img{
display:block;
}
that does the trick.
EDIT after comments:
img{
position: absolute;
z-index: -1;
top: 0px;
left:0;
}
That staples all your images over each other in the top left corner.
i think your img must
img
{
display:block; /*if you want top to bottom use display:inline;*/
}
I see you already marked an answer, but I already typed this up so here ya go :)
You can simplify your CSS a bit here as well by removing the floats and if you're only using images for your slider (no text beside the images), you can even simplify the HTML by removing the whole .photo div.
Simplified code:
<div class="slider">
<img src="http://lorempixel.com/754/453/" alt="Bottom Image" />
<img src="http://placehold.it/754x453" alt="Top Image" />
</div>
.slider {
overflow: hidden;
position: absolute;
top: 1px;
left: 371px;
width: 754px;
height: 453px;
}
img{
position: absolute;
z-index: -1;
top: 0px;
left:0px;
}
http://jsfiddle.net/daCrosby/MP6qN/8/
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
I need to make white stripes on an image Like this on header image there are children's and there is some white stripe. same white stripes can be show on below sustainability report image.Although they are using image which had these stripes. Any idea how it can be implement in css or css3 with any image.
This or some variant of it ought to work:
HTML:
<div class="image"><img src="whatever-you-like.gif"><div></div></div>
CSS:
.image { position: relative; }
.image div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(stripes.png); }
Stripes.png must be a 24-bit PNG image with a low alpha value.
Note that in this implementation you don't have to use your original image as a CSS background, you can use the image tag as normal (just with some extra HTML around it).
You can use your original image as a background, and on top of it use .png image with these stipes and transparency.