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
Related
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 having a problem with what seems like it should have a simple solution.
I have anchor links set up in a html page and am having a problem with one of the links.
Here is the code I am using...
<div class="top-menu">
About</br>
Jersey</br>
SocialMedia</br>
Art</br>
</div>
The links
<a id="about"></a>
<a id="jersey"></a>
<a id="social"></a>
<a id="art"></a>
The anchors
The problem I am having is that 'About','Jersey' and 'Art' work perfectly fine, but 'social' keeps linking to 'jersey'.
I am using nice scroll, and a scroll to anchor script, however I have removed these and get the same effect.
As said previously I have also tried linking with name="" and id="".
The anchors were not inside a div, but I have tried that also.
EDIT: Also just tried using div tags instead of a.
It means you have multiple element having same Id also there is another possibility that Id is in scroll limit
I am still unsure as to this problem however I have found a solution. I have placed the anchor inside the div below it.
I always see websites that has a link that says #top or #bottom that takes you to the top or bottom of the page. Can someone please tell me how I can use it on my website. I already tried saying <a href="#top"> or <a href="#bottom"> but it did not work.
This depends on what exactly you would like to be treated as top and bottom. To link to the very start of the page, you can use the URL #, as in Start of page. To link to some specific element near the start, assign an id attribute to it, e.g. <h1 id="top">Main heading</h1>, and use that attribute value in a link, e.g. Start of page.
The bottom is a bit more tricky, since there is no predefined URL for it, and although you can use the id technique, the URL will refer to the start of the element. You could deal with this using an empty element at the very end of document body:
Last piece of real content.
<div id="bottom"></div>
</body>
</html>
Then you would use e.g. End of page.
However, normally links to start of page are worse than useless, and links to end of page are no better. Every browser provides a simple way of getting to the start or to the end of any page.
Hashing with an id will take you to the equivalent element with the id on the page.
So if you have a div like so:
<div id="top"></div>
and an anchor as such:
Go to top div
Clicking the anchor will take you to that divs place in the DOM.
Quite simple if a user is at the bottom of the page show them
Go to the top
Or if they are at the top of the page show them
Go to bottom
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
I have a long one-page HTML webpage with anchored links (llorch.org). But I want links to the blue border instead of h2.
<h2><a name="AboutMe">Sobre mí</a></h2>.
In order to make that possible, I tried to link to div instead of h1. So.
<a name="expositio1"><div class="expositio"></a>
<h2><a name="AboutMe">Sobre mí</a></h2>
And it works: http://jsfiddle.net/jv4cK/
But it's not validated.
Is there another way to link to a border? Oh, I forgot to say: it works in every browser, except IE. IE makes this weird border above the blue one.
Where you currently have:
<div class="expositio"><a name="expositio2"></a>
Adjust it to use:
<div class="expositio" id="expositio2">
The existing bookmark for #expositio2 should jump to an element with this id. Using the name attribute is actually deprecated, so using an id is the correct way to do this.