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 7 years ago.
Improve this question
I designed a page and put a hyperlinked image in the header.
In the picture above, I want the entire image 'Vivo city' to be clickable and to go to a certain hyperlink. But actually only a small part of it is clickable.
I am not sure why the entire image is not clickable.
<a href="index" >
<img src="../../assets/img/logo_white.png" width="110px" height="51px" /></a>
You can check my website here - http://107.167.189.78/codeigniter/index.php/web/
The image link is inside a Bootstrap navbar. Please help me find the issue. Thanks!
It's because its sister element .navbar-collapse is positioned partially above it:
Edited: To be fair, this is the answer to the question "what is wrong?". The follow-up question "...and how do I fix it?" is answered by Serlite in this answer
(Note: I know the initial question of "what is wrong" has been answered - but felt it would be of value to explain a bit and show a solution too.)
As noted by danielaKay, your navigation menu next to the logo is causing the overlapping issue. Currently you're using relative positioning to move the menu to the right:
{
position: relative;
top: 0px;
left: 55px;
}
In combination with your float on the logo, this is causing the menu to partially cover the logo and make it unclickable. Consider floating the menu in the same direction the logo is already floated, and just add a margin to the left instead (replacing your relative positioning):
{
margin-left: 55px;
float: left;
}
Hope this helps! Let me know if you have any questions.
Unfortunately, it's difficult to demonstrate this fix without recreating your entire site, since you haven't provided a minimal, complete, and verifiable example in your original question. Please be sure to do that in the future, as it would be a great benefit to readers of this question.
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 4 years ago.
Improve this question
My Blogger Soho theme main page has two columns listing the posts complete with pictures. The gaps between the columns are too close. May I know if there is a css code to improve that?
Sorry if this question has been answered as I could not find one after searching and I am a newbie in css.
https://retireby50sg.blogspot.com
Thanks in advance for advice!
Actually your image width is going out of div so try to reduce the width of image. here is the css try this
.snippet-thumbnail img {
width: 95%;
}
If you don't post your code is so hard to give you a proper answer, but I could say you that you should open the CSS code about your theme and find the two columns tag or id or whatewer the theme uses, then you could use margin or padding property to make the gap between both bigger.
Use of margin and padding (Because you said you're a newbie hahahaha)
Margin: https://www.w3schools.com/css/css_margin.asp
Padding: https://www.w3schools.com/css/css_padding.asp
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'm having a difficult time isolating a 1-pixel edge that appears on the right-hand side of my site. It happens at different window sizes on Chrome and Safari, and I can't seem to figure out what's causing it, or whether it's actually something completely unavoidable with my setup.
Website: www.husamelfaki.net
Thanks very much if you can help in advance, really appreciate it.
Husam
EDIT: Removed sensitive password detail, now that the question's been answered. Thank you.
Your issue comes from every element on the right side like this one:
<div style="line-height: 0 !important;
font-size: 0px !important;
position: absolute;
left: 49.93055555555556%;
top: 0px; opacity: 1;"
class="thumb grid-item masonry-thumbs-item masonry-content_4qnsts4j5-item masonry-content_4qnsts4j5-item-1 remove-gutter-yes masonry-span6"
data-thumb-src="http://www.husamelfaki.net/wp-content/uploads/2016/11/ntc5_thumb_2.jpg">
Its width is 50% but the element's left side isn't placed at 50%. Set the left to half the width with the CSS style rule left: 50%;.
And I suggest you to use flex-boxing which is perfect for this kind of pages.
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 7 years ago.
Improve this question
I am developing a website where I have a top menu and a background image with some text on the home page. This covers the whole screen. BUT at the bottom of the screen there have to be 3 blocks who show up at the bottom of any screen or device. I am able to to this for Chrome but for Firefox for example the blocks are way far down at IE the same... What I want:
I am currently doing applying following code on the div containing the 3 blocks:
position: relative;
top: -150px;
But as mentioned above in another browser this div shows up to low so the user won't see it until he scrolls...
Any solutions here?
Simple change:
position: fixed;
bottom: 0;
Better idea to wrap it inside another <div class="bottom-stuff"> and give the rules to .bottom-stuff.
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 8 years ago.
Improve this question
I building a website with HTML and CSS as part of an exercise. However, I have stumbled across some odd space I need to get rid of. Inspecting the webpage, it seems like there is extra empty content being displayed above my images. This happened after I added navigation arrows.
If anyone have any suggestions on how to deal with this situation I'd be very happy.
The website is as following: http://folk.ntnu.no/nikolahe/gloshaugen/gloshaugen.html
html: http://pastebin.com/micJCBq1
css: http://pastebin.com/WW9i52qc
Suggestions towards layout and good practices are also much appreciated.
This happens because you use position:relative on the #previous and #next elements. Like this they are repositioned but still use up the space they would originally occupy.
Use the following css instead:
.block-wapper {
position:relative;
...
}
#previous {
position: absolute;
left: 10px;
...
}
#next {
position: absolute;
right: 10px;
...
}
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 8 years ago.
Improve this question
I made some changes to my Tumblr so that it can match my Wordpress blog. I swapped the header out, but now I have a huge space between the header and the nav bar. Any ideas about how I can get rid of it?
You can see my Tumblr here.
I am trying to replicate my blog as much as possible.
Thanks for any tips.
You have an empty container div.
Either delete the container, or put the following in the CSS;
#container {
display: none;
}
or you could set the padding on the #container rule to 0.
Hope this helps.
EDIT: On closer look, you do need to delete your entire container. Delete all this code;
<div id="container">
<div class="blogtitle">
</div>
<div class="description"></div>
</div>
and then delete the styles for #container, .blogtitle, and .description (unless you think you might need them later).
After reviewing you web site I found the issue: Just you need to make following change in CSS:
div#page{
margin: 0px;
}
#masthead{
margin-top: -15px;
}
That's it.