Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I'm quite new to HTML/CSS and I've just started a new webpage. I'm trying to add a hyperlink to my image which is in my style sheet. However, when I've added the redirect url to my div element, the redirect is not appearing on the intended element, but the element adjacent to it. Can anyone see where I've gone wrong?
Here is my JSFiddle:
https://jsfiddle.net/Syed213shah/bcnu8f21/1/
HTML:
<div class="item1"></div>
CSS:
.item1 {
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
width: 100%;
height: 200%;
}
First of all you do not close your link tag, so any content after it is clickable as link.
Also your link does not have any content and you do not set any dimensions for it, so it's width becomes 0 and you can't click on it.
Make your link as item1:
<a class="item1" href="https://www.bbc.co.uk/sport/football"></a>
You placed the anchor tag inside the div, it's supposed to be the other way around. And you didn't close the anchor tag, that's why it's applying to the element next to it
Change <div class="item1"></div> to <a href="https://www.bbc.co.uk/sport/football"><div class="item1"></div>
The mistake is in your HTML.
You forgot to close the <a> element and also you need to take it outer of the <div>.
Here's the edited version:
<div class="item1"></div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 12 months ago.
This post was edited and submitted for review 12 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I wanted to adjust an "a" tag in a "span" text so that when I touch the text it takes me to the web page, but I get what comes out in the image:
the "a" tag is too long
Does anyone know how to make the "a" tag the same size as the text?
but the "a" tag has to adapt to any text, it has to be dynamic
It seems that you wrapped with you a-Tag a block element. If you dont like this behavior put the a tags inner your div or p tag. I dont know what you are using (div, p, etc) because i didnt see your code. but the behavior would be come from this.
abstract example
Change this:
<a href="">
<div>link</div>
</a>
To this:
<div>
link
</duv>
a{
background: pink;
}
span{
background-color: lightblue;
padding: .5rem;
max-width: fit-content;
}
<span>
Link
</span>
Please check following.
span, span a{color:#000; text-decoration:none; font-size:20px;}
<span>page</span>
just use this style:
<a style="width: auto;"> <span> your text </span> </a>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have button on my website. But it is clickable not only on the button itself but anywhere to the right outside of the button border. What should I do?
You have an <a> tag around the <div> tag of the button, which is very large. This <a> tag is the reason, such a large area is clickable. It would be best to format your button in an <a> tag instead of the <div>. This would resolve your problem. In general, it is best to avoid wrapping semantically block elements like div, p etc. inside inline elements like a or span.
<a href="#show-works" class="works">
Make sure, that the <a> tag is properly marked as display: block or display: inline-block, to prevent having it inline.
Here is a screenshot of your website's inspected elements and the reason of your problem:
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am not sure how to fix this and I know this question is kind of basic. A random object that is blocking my navigation bar is appearing on the browser side but not in the code, here:
image http://img571.imageshack.us/img571/9861/s4oa.png
But then in the code:
Please help me rectify this.
The issue on your page is that the following element seems to be created automatically and it is altering the spacing for you:
<a original-title=""></a>
If you can use a style sheet you should be able to adjust just the home link as follows:
<a class="home-link" href="/index.php">...</a>
And add the following style rule:
a.home-link {
margin-top: -18px;
}
This isn't particularly pretty or flexible so I would still strongly consider trying to determine where the element is injected and see if you can prevent it from happening. Good luck!
try moving the clearfix above <ul> tag as a separate div.
<div class="clearfix"></div>
<ul>
<!--- all list -->
</ul>
EDIT
Though i doubt it would affect, but still, your <a> tag is not closed in below line :
<a heref="cashcapacity.com"><center><img src="{$theme['logo']}"/></center><a>
and
<div class="navigation_menu">
<div> <!-- either this div is uselessly mentioned or you forgot to close this div -->
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
<div id="tagline">
<h1>Around The World In 80 Clicks</h1>
</div>
Above is a code snippet from my HTML code. Problem is <a> tag is auto-generated around "tagline" div and consequently <h1> is converted into a link.
I am using CSS too but no style is applied on <div id="tagline">.
Why is it generated by itself? How can I remove it?
You must have missed a closing anchor tag </a> somewhere above the code that you have posted.
<a>......</a>
<div id="tagline">
<h1>Around The World In 80 Clicks</h1>
</div>
This must solve the problem !
Or
You may have mistaken the property cursor:pointer to a link ! Check this out too. not sure though!
Try using these validators. Maybe you committed typo errors.
For HTML.
http://validator.w3.org/#validate_by_upload
For CSS.
http://jigsaw.w3.org/css-validator/#validate_by_upload
Is there link higher up in your code? If so then close it off with This:
<a></a>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have an image inside a link like this:
<img src="img/post.png">
all I want is the image to change to "post_light.png" when user places mouse hover link. Any idea which is the easier way to do this?
Pure HTML
<img src="img/post.png" onmouseover="this.src='img/post_light.png'" onmouseout="this.src='img/post.png'">
You have already asked this. Please do not ask twice, instead edit your first question if needed.
With only HTML and CSS, it is not posible to change the source of image. If you change the IMG tag to a DIV tag, then you can change the image that is set as the background.
div {
background: url('http://www.placehold.it/100x100/fff');
}
div:hover {
background: url('http://www.placehold.it/100x100/000001');
}
Be aware of the possible SEO and screen reader complications that can arise from this.
You can do something like this:
<a class="switch-image" href="start_post_job.php">
<img class="main-img" src="img/post.png">
<img class="caption-img" src="img/post-light.png">
</a>
The styling:
.main-img{
z-index; // This might not be required
}
.caption-img{
z-index:10;
display:none;
}
.swith-image:hover > .caption-img{
display:inline-block; // either this or block
}
.swith-image:hover > .main-img{
display:none;
}
This should switch the images. Just you play around with it, I think you should beable to do this just by changing the display property of the two or just by changing the z-index.