Here is my problem :
I've try to add a "link" into another one. Explanation :
I have an image, which is inside a link, so when I click anywhere on this image I'm redirected to the page I want. What I'm trying to do is, to add a small "edit icon" at the top right corner of this image, so I can edit its properties on another page dedicated to this.
The fact is that I want to have this "edit icon" as a link, when I click on it I want to be redirected on another page, not the page which is the url of the main image container link...
so the code looks like this :
<a href...>
<span ... with style : size and background image so it looks like a clickable picture...>
<a href...>
<span... the second span with another background (edit icon), FLOAT RIGHT (to get it in the corner of the container span) and small sized...>
</span>
</a>
</span>
</a>
If I do things this way, the second block (edit icon) appears OUT OF the container...
and if I change my order. It sometimes appears but it's not clickable. What am i doing wrong? is it impossible to make links into links? or is it a special way to do that?
You can't place a link into an other one. You should place the links each after like this:
<div id="container">
<a id="show" href="link1.html"><div></div></a>
<a id="edit" href="edit.html"><div></div></a>
</div>
Here is an example for you :
http://jsfiddle.net/gXV73/1/
You can use two different images, one for the edit icon and one will be your main big image.
Put both the images in two different divs, and use position:absolute; and z-index:100; left:/*something*/; right:/*something*/ for the small edit image div.
or show me the code so that i can help better.
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 have the following image of a trophy on my main page and I would like to make a small description appear when a user hovers over it just as on this site. When I hover over the icons on the top right, I can see some description. Is this done through onclick? It looks neater than just having a paragraph description....
It would be done using onMouseOver to call the function to display or update the element that shows the description. See below example
<a href='link.html' onMouseOver='showDescription();'><img src='icon.png'></a>
Hope this helps
You can do this with the title attribute.
<img src="https://unsplash.it/50" title="some text">
I would like to add a picture in my code that is not from my computer, but from the web. Let's say that the link of the image is "www.image.test", how would the code be written? And, what if I want to hide a link behind that image?
Simple. The code would look like this. The <a href> will add a link to the image when clicked on, and the <img> tag will add the image from the appropriate image URL that you would specify.
<img src="http://www.image.test">
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 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