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 2 years ago.
Improve this question
I just want to make an image float at the bottom left of the screen, across the entire website.
The image is about 200x200px and links out to another part of the website.
There is quite simple solution for this. As you want to float the image and link it to to some other part, you need to put img in anchor tag.
For e.g.
<img src="image-source-link" height="200" width="200">
css
a{
position:fixed;
bottom:0;
left:0;
z-index:111111;
}
"position:fixed" will fix the a element but you need to tell where it should be fixed.
For that we have bottom:0;left:0; i.e., fix on the bottom left of the page.
z-index is very important for this element as it will be overlapping with a number of other elements on the page. The one with the higher z-index will have better visibility.
I hope this solves your problem.
Related
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 7 years ago.
Improve this question
With responsive designs, I heard we should use "%" instead of fixed measurements like "px" .
But it doesn't work how it should with margin?
I have a logo and links underneath it.
I added margin-bottom: 2% underneath it and it looks perfect from pc
But the links still overlap kinda in mobile.
What to do?
You have a negative margin on #page-header of -16px which is pulling the links back up...
Float your logo to force margin-bottom to work or use padding-bottom instead.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
My website is http://boasish.com
I would like to know how I can move my "Submit" Button up like it is on this site http://www.theminimalists.com
Facebook
Twitter
Pinterest
RSS
change padding for to what you see below
.feature-area .feature-area-bottom {
padding: 0 0 9px;
}
Without any code in your question, this is a general answer.
You can change the position: attribute in css to either absolute or relative, and then use positioning commands such as top and left to relocate it.
Note that absolute elements are positioned in relation to their nearest position:relative; or position:absolute; div.
$('#sub1').css({'position':'absolute','top':'20px','left':'150px'});
jsFiddle Demo
References:
Is it possible to use position relative more than once in the same html page?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have this weird white line on my front page that wont be removed. I loocked and cant find what it is. the site is responsive and it looks even weirder on on the cellphone. Can someone help me?
Well you have a couple issues. The quickest and easiest fix is to update the css class
gdlr-header-inner
add background-color:transparent;
That is the first issue is the background is white.
The next fix I would do as an easy fix is to look at the div right after the closeing header tag it should have the class content-wrapper.
To that div I would add margin-top:-95px;
At the end of the day the issue is your header is larger then the top part of the image. I wonder if you should merge the two images and set the background color and the background image to the body tag. Then you wouldn't have to worry about it. You then could still push the top down x pixels
http://www.w3schools.com/cssref/pr_background-position.asp
For starters, the div your logo is in along with its padding are too big for the header.
So it's pushing the rest of the page down.
Try changing the top and bottom padding on the gdlr-logo div.
You have a problem with the height of some elements, like:
.gdlr-logo {margin-top: 26px;}
Try to remove some margins and review the height of elements on the header.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to place a DIV at the bottom of its containing DIV. The solution I've used seems a bit tricky.
First of all, my component drops to the very bottom of the page, not the bottom of its parent. Second of all, I worry that if I fill out the space inside the parent DIV, something will be overwritten and look ugly in the future.
So, the question is if it's the best recommended way to place a child DIV at the bottom of its parent DIV. And if not, what's a better way?
This can be done very easily with jQuery:
$("#child").css({"position" : "absolute",
"top" : $("#child").parent().height() - $("#child").height()});
Fiddle.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Blogger has this new fancy theme that I see a lot of people using, but it seems to me to have an obvious CSS bug as the link gadget overlaps the scrollbar. Are you seeing this problem as well?
The gadget div has it's CSS set to right:0px and z-index:3000, which causes it to overlap the scrollbar on Chrome for Windows. I would think that browsers shouldn't allow overlapping of scrollbars in the first place? And if they would allow that, isn't it still a usability bug from Google?
UPDATE: Here is a link with a blog where this happens: http://www.judegomila.com/2012/10/how-to-name-your-company.html
And here is the same theme, but without that problem: http://googleblog.blogspot.jp/
you have set the overflow-y in the <div class="viewitem-inner"> remove this its on line no 1648
and try the
html {
height: 100%;
overflow: scroll;
}
also remove the position:fixed; from <div class="viewitem-panel"> on line no 1589
working
I would say this is a usability bug in the Blogger theme. A scrollbar always belongs to some element and elements can be overlapped with other elements – thus the scrollbars could get hidden.