I made style for a tag in my wordpress as a bottom-dotted border, so that I can tell users there's a clickable link.
However, in Wordpress, an image in post is inside a tag, which means that a border would show in the bottom of an image. This can't be changed in edit mode since the p which encloses a is automatically generated.
<p>
<a href="">
<img src="">
</a>
</p>
Is there a better way to deal with this? Maybe it's Javascript code to take the dotted border off from a, but I wonder if there's a better way.
You'll need Javascript because you want to search for a tags which are parent to img tag and in CSS, there are no parent selectors.
Related
I'm using images inside div containers with css(background images). Not just for presentation, they have meanings. I want to provide alternatives to users with disabilities, but not sure how to do this right. I also use them inside links sometimes, this is also needed to be addressed somehow.
With case one(images inside div with css, but without link), I thought of using hidden text inside of div, but not sure if I should specify that this is the image and not just a text. Because when text alternative provided for images, disabled user will see that this text is belong to the image(with aria-labelledby for example), so how should this be done with div and css image?
With the second case, I also not sure how to make it right. I want to use title for the link, so the normal users will also benefit from this by hovering mouse for icons, for example, but I'm not really sure if title will suffice for disabled people.
That's clearly what role=img is for:
<a href="...">
<div role="img" class="css_classename"
aria-label="This information is provided to a screen reader"
title="This is a tooltip">
</div>
</a>
I modified a code I found online for spoilers to:
<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';" class="link">
<img src="{link1}" alt="Stats">
</a>
<span id="spoiler_id" style="display: none;position:absolute;top:5px;left:5px;">
<a onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';" class="link">
Hide
</a>
<br />
<iframe src="{link2}" width="600" height="175" frameborder="0"></iframe>
</span>
What this should do: Display a picture with alt code "Stats" on page load. When the picture is clicked, the picture will disappear and a span with Hide {iFrame} should appear hovering 5 pixels from the left and 5 pixels from the top.
This works correctly when left by itself. However, I want to put it online through a source that breaks this code (the picture will show up, but it will not change when clicked.) If I iFrame the element, then it works, except the span stays inside the iFrame. What I want to know is if there is a way to break the span out of the iFrame. The other option would be to break the iframe in that code out of the iframe it is in.
Thank you for any help you can provide. Note: I do realize that there is an incredibly high chance this is impossible. If so, a confirmation of that is much appreciated.
Edit: Turns out the place I want to put it on does not support Javascript.
The iframe acts as a nested browser window. You aren't able to position elements outside an iframe just like you aren't able to position them outside your browser.
You could try to hide the span inside the iframe and build a new span in the parent window with the same contents.
Is there any way to have a custom-shape image container? To use something instead of <div />?
The problem appears when I need to add corners on top of the #content-box ( http://img855.imageshack.us/img855/8343/screenshot20111027at163.png ). The corner-images are using only half of the block element, the rest (the pink alpha-background) are blocking the active-elements underneath it.
Is there any workaround for this?
To answer my own questions:
It is not possible to have a custom shape HTML element without parent block element holding it anyway, e.g. in case of SVG.
However, the one workaround that I've managed to come across is magic CSS pointer-events rule, which, as you might have guessed already, helps to click through the element.
pointer-events: none;
That did solve my issue.
It's not possible to have custom shaped containers. You could do this though using <div> wrappers, each containing a different background image. For example:
html
<div id="content-wrapper">
<div id="content-box">
<!-- Upload photo content box --->
</div>
</div>
css
#content-wrapper,
#content-box{
width:500px;
height:500px;
}
#content-wrapper{background:url('images/four-corners.png') no-repeat}
#content-box{background:url('images/octagon.png') no-repeat}
This way the images won't block any active elements on the page.
I find that images floated right won't sit alongside a heading tag such as H3. The H3 tag wants to have its own line so it will always appear below the image.
If I put the image also inside the H3 tag then it works but I would prefer to correct this in the CSS somehow as some of our editors aren't used to delving into the html.
Is this a standard way that H tags behave? Or is it a quirk of my CSS that I can tweak?
I'm doing this in Wordpress using a child theme based on the Thematic theme.
This is a normal behaviour as H tags are block level elements. See this explanation for more information.
Also note that you can make a block level element not to expand all the width (as it's normal for a block element), for example if you make it float (and decrease its width), changing its display propery, etc. See this fantastic tutorial for more information.
try putting the h3 tag after the image tag.... they should appear side by side.....
like this:
<img src="path/to/some/image" style="float:right;" />
<h3>some heading</h3>
All you should need to do is add float:left; to your h3 tag.
See this fiddle.
I am trying to create a div on my site that is supposed to work like the descriptions on Ebay where all the css styles of the main site are stripped off and then whatever styles are in the div are what style the div (if you can understand what I mean). I've been trying to use a reset stylesheet, but my problem is that the reset is also resetting anything I put into the div. For example the following:
<div class="reset_this_div">
<font color="red">This is reformatted</font>
</div>
should reset the css in the div, then make the text "This is reformatted" red with the font tag. However, the reset seems to be overriding the font tag and the text just stays black. Does anyone know how I can fix this?
Thanks!
Have you considered using one div inside another instead of using the tag?. Something like this:
<div class="reset_this_div">
<div style="color: red !important;">This is reformatted</div>
</div>
Regards