I am trying to link a image, this is the ID in html:
<div id="testimage">
As you can see my id is "testimage" in css I have added a background image.
How do I make this image as a link. currently its not working,.
Put the link around the image, you should make sure the anchor is displayed as a block, because prior to HTML5, a block element wrapped inside an in-line element is invalid:
HTML
<div id="testimage"></div>
CSS
a{ display:block; }
JSFiddle
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>
is it possible to set an anchor on a div in which is no text?
I have this div:
<div class="greentotal">
<div id="green-bottomright"></div>
<div id="green-mid"></div>
<div id="green-topleft"></div>
</div>
Styling with css, it shows me this:
The green ribbon is created with CSS only.
How can i set an anchor on this ribbon?
You already have 3 anchors: green-bottomright, green-mid and green-topleft.
Simply doing doing a href or changing your url to http://example.com#green-mid
If you would want to add a new anchor, simply create a new id with an anchor name on the wanted element.
If you somewhere in your page want to add a link to a anchor element on your page, simply do the following:
Click me and go to anchor
If you click that link, you will be scrolled to the specific element.
I've made some links within an <ul> <li>. I made images clickable, linking to a new HTML file. I've got four of those, and I wanted to put two beside each other so I used float:left;.
However, when I create a new <h2> after those images, this <h2> becomes clickable and linking to the HTML file used in the last picture.
I've already used clear:both; but that doesn't work. Any idea about what may be happening here?
Put float: left; on H2 aswell or overflow: hidden; on li elements.
I have begun writing a CSS and HTML collapsing menu system (AKA an accordion). I followed the tutorial posted here, however, I had to change it slightly. Instead of using <a> and <p> tags, I had to use <div> tags because I will be adding images to both 'sections' at a later stage. After I change the <a> and <p> tags to <div> tags, the slide-out content does not display when the mouse is hovering over the box. It is only when the mouse is moved away does the content briefly display before the 'drawer' retracts. I have posted my code bellow and any help would be very much appreciated.
Link to my CSS: http://cl.ly/Cuoe
Link to my HTML: http://cl.ly/Cuhf
Many Thanks.
I think the problem is that your #accordion div:hover CSS rule is now catching both the item div AND the itemTitle and itemContent divs inside the item.
In your CSS file, try replacing both instances of #accordion div:hover with #accordion div.item:hover. This will cause the rule to only apply to divs with class item.
Edit: You could also just change it to #accordion .item:hover
Check this fiddle: http://jsfiddle.net/ufPrF/
The problem was that you were setting a height property on #accordion div:hover which affected all <div>s inside the accordion (including title, content etc..). You should have either done #accordion > div:hover OR #accordion .item:hover (like in the fiddle)
I wanted to create a box that you could click on and be forwarded to "#" so I thought this would be a good idea:
But unfortuneatly areamaps couldn't be used in div or p tags :/
Anyone have an idea what a good solution would be?
This is not php related, because its happening in the navigator.
Use javascript instead :
<div style='background:url(image.jpg)' onclick='function(){document.location.replace="#"}'> </div>
You could create tags inside the div. You can give these subtags and id or you apply the style in the tag's style attribute. Set the tags style to display:block and position the link via position:absolute or position:relative and the attributes top:5px and left:5px. Set width and height and top and left appropriately.