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:
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 3 hours ago.
Improve this question
I am a new to HTML and CSS.enter image description here
The blue buy button is a paragraph element in the html code. The "From $1999" is known as the class "fourth" in the html code.
Why does the blue buy pseudo-button not move down when I apply margin-top onto the class "button" in style? It only moves down when I apply margin-bottom on the class "fourth". I supposed if I applied margin-top onto the blue buy pseudo-button, it would move the button down, which was the same case if I applied margin-bottom onto the class "fourth". Eager for explanation. Thank you!
Margins take up space. If you want a similar effect without that, try outline
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 2 months ago.
Improve this question
I have a link on homepage to id. I have a fixed navigation, so I add "scroll-margin-top" to that link, so it wouldn't land behind the navigation, and it works ok. But when i go to that id link from another page, it disregards that "scroll-margin-top" , and lands my section under the navigation.
How can i solve this?
<a href="#column"
<span id="column"> text </span>
I tried "scroll-margin-top"
It's probably caused because your "scroll-margin-top" uses some JavaScript/JQuery function to scroll to the element with a specific offset.
When you navigate from another page to your element with this anchor (id/#) so it's the default browser behavior that it navigates directly to the element.
I'd propose setting the element's id to some wrapper element and giving that element some top padding at the height of the navigation or higher.
link
<div id="column" style="padding-top:80px;">
<span> text </span>
</div>
Another solution is using a smooth scroll written in JavaScript. This function has to be loaded on dom/window ready and then to navigate to the element.
E.g.
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
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>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I am working on a (html/css) website to improve my skills but I am not sure if I am doing it the right way, because I have a lot of floats and sizes. I also need help with some css things:
What I have:
What I need:
The red dimensions in the image are the dimensions I've tried to give the objects and which I am not sure if it is the correct way of doing it.
The black words are the things I would like to change, but I am not sure how I can do it in a good way.
All my code:
index.html:
http://pastebin.com/PZZY7bFA
style.css:
http://pastebin.com/HyEdM6qF
reset.css:
http://pastebin.com/gxqWzFHN
I did not post the css code of the navigation menu because it is already working in a correct way.
I would be very happy if anyone can help me.
Regards,
Engin
Well, I don't have that much time right now. But I tell you this:
Your logo is an object wich is an inline element, same as (link) and normal text.
To vertical center inline elements use line-height: ?px; in your css. Set the ? to the height of your header
To vertical center other elements, such as block elements (f.e. div) you can define the parent as a table cell display: table-cell; and assign vertical-align: middle; to your block element. Of course this would also work for inline elements but the first method is easier here, since you don't have to declare the parent as a table-cell.
Anyway, if you really want to design websites you have to get to know all the princeples and behaviors. Check the urls that were just posted and keep learning A LOT!
I hope you can finish the navigation now:)
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
For some reason, when I use inspect element on my file input, it shows where it's supposed to be. But it doesn't behave that way. Go to oceankarma.co and click post at the top. Then try clicking the youtube icon. Please help
All the icons are of different dimensions. Youtube, Vimeo icons are placed in tags while other black icons are used as background. This is causing the different styles.
Use same dimensions.
Same styles(except for background image so that everything is either called as background or everything via <img> tag)
If you do the above, it should give the result you expect.
I believe the issue you're referring to is that the the hidden file inputs are overflowing into the youtube link, try adding this to your CSS to fix it:
#servicetable tr td {
position: relative;
}
#upload_video input, #upload_photo input {
position: absolute;
left: 0;
}
Also note that you cannot set the cursor property for file inputs. you can read this question for more info
Sorry, but none of the existing answers helped me. Kind of like what koala_dev said, the inputs are overflowing. So I added a simple overflow:hidden style to the container and that fixed it.