Consider this page # http://www.bloodbone.ws/screwed.html
I need to be able to have the a.grow element expand to the dimensions of the div.column-header so that if you target anywhere in the div the whole area is clickable.
It works in Firefox + Safari, but I can't get it to work in any IE browser.
The h2 and img elements always break the a.grow so there are areas that aren't clickable.
I've tried everything I can think of, adding zoom: 1 etc. to no avail.
The h2 and img have to be visible, but any mouse hover over the area should be clickable.
To have it "SEO compatible", you have 2 options:
Aplly several anchor tags to cover all your div;
Use a framework like JQuery to make the div clickable (and when clicked follow the anchor href), and mantain the anchor inside the div for SEO purposes.
will
<div class="column-header">
<a class="grow" href="http://www.google.com">Google</a>
<h2>What's On</h2>
<a href="http://www.google.com">
<img src='http://www.bloodbone.ws/images/mainHeader.jpg' alt='boo' />
</a>
</div>
do?
Related
To make a span into a clickable link.
I have made a span that contains only a background image (as part of a Gilder/Levin image replacement technique) into a clickable link, and it seems to work fine -- but, so far, that is only on my own desktop computer, and on Chrome, Opera, and IE 11.
Is this viable?
<div id="logo">
<a href="[absolute url]">
<span></span>
</a>
<h1>page name</h1>
</div>
It works on my computer, with Chrome, IE11 and Opera. Will it work universally?
While it might look okay in most browsers, you're using the <a> element incorrectly, as what goes inside it should be a meaningful label. The proper thing to do would be to wrap the entire <h1> in the link, or to put the <a> within the <h1> (both are valid HTML5).
<a href="[absolute url]">
<span></span> <h1>page name</h1>
</a>
But judging from your comments, it's probably too early for you to start worrying about image replacement techniques an web semantics when you're still figuring the syntax out.
What's the point of image replacement techniques and why using an empty <a> tag is bad?
The Gilder/Levin image replacement technique involves adding non-semantic elements to a page (such as <span> elements) and using CSS to replace them with icons, so that these elements are ignored by screen readers. After all, an icon next to a menu button might make the button more visible for someone who can see, but the icon becomes redundant when you're blind and are using a screen reader which will read the text of the button out loud anyway. This also might make your website easier to parse by search engines.
However, in the original code, you didn't put any label on the link (actual text between the <a> and </a>), therefore making it especially confusing for screen readers and robots to know what this link is supposed to be. The entire title should be within the <a> element in this case, allowing the whole line to be clicked to follow the link. It's definitely not a good practice to use an empty <a> element, and the fact that there is a <span> within it changes nothing.
And since the idea of leaving an <a> element is semantically absurd, I haven't found any reliable place documenting the behavior of such an element across browsers.
wasn't pretty sure what you are asking for:: or trying to achieve.
3. wrap span in a href tag.
2. span onclick() function with javascript
1. span:hover with css.
<div id="logo">
<a href="[absolute url]">
<span>this span is now like link text.</span>
</a>
<h1>page name</h1>
</div>
<div id="logo">
<span onclick="myFunction()">this span is now like link text.</span>
<h1>page name</h1>
</div>
<style>
span:hover{color:red;}
span:active {color:green}
</style>
The css one isn't really click stuff.
Yes, it's a reliable way to put <span> or <img>(or any element you want to be a link) in a <a> tag.
click here for Definition and Usage
The tag defines a hyperlink, which is used to link from one page
to another.
The most important attribute of the element is the href attribute,
which indicates the link's destination.
I have a div for the header, and then I have 4 divs nested inside of it for:
A Logo of the Brand
The Menu
Social Media Logo #1
Social Media Logo #2
Now I'm trying to link the logo to the homepage, and the social media logos to the corresponding profiles.
The problem is that the image doesn't show up. When I delete the the image link from HTML code and put it inside of CSS of that div it does show the image but it's still not clickable.
HTML:
<a href="">
<div id="fb">
<img src="face.png"/>
</div>
</a>
CSS:
#fb {
float:right;
width:90px;
height:90px;
margin:20px;
}
EDIT: Sorry if I did anything wrong. Im new here and Im learning to code.
EDIT #2: Formating
I'm unable to comment as I've rarely used this account, but the html you have above should work as is. What is currently being shown in your browser window?
For future reference, these types of posts are well received here. You've not included specifically what the problem is, or what you've tried to fix it, or even what is being shown. Not trying to be rude, just speaking from experience.
Look, we can make link on our page with this symbol # as I remember or we can just add name of our page.
If you want to make clickable only image we can make it in this way
<img src="pass to your image" />
If you want to create button with image we can add properties to element a, code is above, width and height to our element a and make the image in the center of our "button" in real it will be a e
lement.
Or we can create element button and put inside of him image. And style button with height and width. Here is code
<button onclick="location.href='link to another website'"><img src="pass to image" /></button>
If your image didn't visible. It can be mistake in your path to your image from html file, try to use ../ to return to previous folder. Use developer tools in Chrome. And in tab Console you will see your error why is it didn't show.
If you want to make a image that is also a link, wrap the image in an a tag this you can wrap in a div.
<div>
<img src="your_image_path" alt="alt_name">
</div>
I am working on tabbing through the whole web page using the keyboard(tab key, shift+tab key) and everything is working fine and smooth. Also when i keep pressing the tab key, the focus cycles through all the elements(address bar, elements, back to address bar and so on).
Now in some cases, i have an modal and an transparent overlay on top of my content. Now when this happens, when i use tab key, i move from the left menu to the overlay and from the last focusible element on the overlay, i have to force the focus to the body element(or the address bar). So Basically when there is an overlay, i want to ignore the element below the overlay from tabbing. Is there any way i can achieve it cleanly?
I was thinking of setting tabindex=-1 for all elements under the overlay but any other better approach would be the most welcome
Thanks
This is an oldish question, but I just ran into this issue today, so I thought I'd share my solution.
As long as you know the tab order of items in your overlay, you can just add a blur event listener on the final item and use it to move the focus back to the first item in your overlay:
lastElementInOverlay.addEventListener('blur', function()
{ firstElementInOverlay.focus(); });
It strikes me that this would be easier than changing the tabIndex of all the elements under the overlay (and then having to change them back when the overlay is gone.
The 'modern/future' solution to this problem seems to be the inert attribute...
So taking the example above, it would look like this with overlay opened
<div id="menu" inert>
<a>
<a>
<a>
</div>
[...other code with tabindex]
<div id="overlay">
<a>
<a>
<a>
</div>
Now since inert is still a work in progress; you'll need to use the following polyfill (for now): https://github.com/WICG/inert
I was thinking of setting tabindex=-1 for all elements under the overlay but any other better approach would be the most welcome
This is what i usually do when fixing the tabbing of elements.
There is one other solution i can think of:
Setting the overlay tab-element lower then that of the rest.
Eg:
<div menu>
<a tabindex="10">
<a tabindex="11">
<a tabindex="12">
</div>
[...other code with tabindex > 10]
<div overlay>
<a tabindex="1">
<a tabindex="2">
<a tabindex="3">
</div>
The downside of this will be that after you have tabbed trough the overlay you will go to the menu again.
You could assign an id like "lastFocusableOverlayElement" to the last focusable HTML-element of your overlay and assign the focus to your trigger element (for example "menu-button") when leaving the last element's focus:
$('#lastFocusableOverlayElement').on('blur', function(){
if ($("body").hasClass("overlay-is-open")){
$('#toggleOverlay').focus();
}
});
In my case the last focusable element is always visible, regardless of whether the overlay is open. For this reason i needed an if query. It can be omitted if not necessary.
I have an image that, when clicked I'd like to take the user to the top of the page (it's a "back to top" link.)
I have linked the image using an ID to my 'navigation' div using the code below, as I have been told is the correct way to do so, but it does nothing.
Live site
HTML
<div id="navigation">
stuff in here
</div>
and
<!-- Back to top link -->
<div class="bottom">
<a href="#navigation">
<img src="images/back_top.png" />
</a>
</div>
This doesn't seem to do anything though, I thought the name attribute was deprecated and thus id's should be used instead but this doesn't do anything?
Since your #navigation element is positioned with position: fixed it is always on screen. You need to link to an element that will stay at the top of the document.
You could add in another element, or add an id to the body. Alternatively, change the position of the navigation so it stays in flow. Or, you could use JavaScript to animate a scroll to the top (e.g. with jQuery .animate and the scrollTop property).
Put this:
<a name="top"> </a>
right after/before your navigation div.
Then, change
<a href="#navigation">
to
<a href="#top">
P.S.: After looking at page-source, I'd suggest you put it just after the <body> tag.
you have linked it to something which stays already on the screen(Fixed positioned). link it something which is not fixed positioned .
Just to throw this out there for people coming along reading this... Linking to an A NAME is deprecated and not a best practice... Linking to an ID is the best way to go in the long run.
http://www.w3.org/TR/html4/struct/links.html
<div class="dashboard-icon">
<a href="./structure/">
<img class="admin-icon" src="<?=inc_path;?>images/icons/home.png" alt="" /></a><br />
<p>Dashboard</p>
</div>
This is part of a menu, do you think it would be better in a UL > LI? I want a label underneath the icon.
Trying to think of reasons if this is bad or not. :)
Is using <img> for a menu item wrong?
Not if it is a content image (e.g. an icon).
This is part of a menu, do you think it would be better in a UL > LI?
Menus are, typically, lists of links, and using <ul> and <li> would be appropriate. That won't prevent you from using an <img> though.
<p>Dashboard</p>
A text description for an image probably doesn't deserve its own paragraph though. I'd set display: block on the image if I wanted to force a line break, and put the text inside the <a> so the entire thing is clickable. I certainly wouldn't use a line break and a paragraph. Use margin for spacing.