I have a site I am building and I'd like the content to be in a div with a border, and I'd like that div's border to be 20 px away from all edges no matter what is going on with the sizing of the window. I have been trying to use right: left: right-margin: and left-margin: with little success. Here is the css code as it currently is:
#content_div {
border-radius: 15px;
border: 2px solid #E07A1A;
padding: 20px;
color: LightGray;
font-family: var(--global-font-family);
font-size: 1.5rem;
position: absolute;
top: 130px;
left: 20px;
right: -20px;
margin-top: 0px;
margin-left: 0px;
width: 100%;
height: 90%;
}
This is the result:
The top border is behaving because I hard coded the position for it at 130 px, which honestly, I am fine with. The left: attribute seems to be working at keeping the border 20 px away from the left edge of the browser. The right: not so much.
The bottom just disappears off the page (actually I gave up trying to get it to work and removed bottom: and margin-bottom from the code for now).
Any suggestions would be appreciated :)
In response to the comment below, having just top, bottom, right, and left and nothing else results in the left and right being glues to the browser's edge, and the bottom glued to the bottom of the text, like so:
Related
my border is moving when you have the download file ?tab? open on chrome (haven't tested it with any other browser). This completely destroys the look of my website, the text is still in the same position but the border and background moves up a bit.... I have tried every position but it didn't work... I'm really annoyed at this problem, any help would be appreciated.
here is the css code
.classA {
border: 5px solid;
text-align: left;
line-height: 0.5;
position: fixed;
height: 11%;
top: 110px;
right: 5px;
left: 5px;
}
This is simply how Chrome works when you start a download. You can work around this with css, but please provide us with some code or a demo with what you've already tried.
A quick thought:
The first thing that comes to mind is to not use percentage for your height property, since it takes 11% of the current height, which depletes when you get the download bar in your screen, since the download bar takes up space of your screen.
If you give the class a fixed height, for example 100 pixels, you will see the class won't decrease in height.
So the code will be:
.classA {
border: 5px solid;
text-align: left;
line-height: 0.5;
position: fixed;
height: 100px; /* just an example, does not need to be 100px */
top: 110px;
right: 5px;
left: 5px;
}
I am learning how to make a website and have hit a bump.
The website is here, and as you can see, it's possible to scroll to the right, which I don't want to happen.
I think the problem is with the following element:
.logo_bg {
background-color: #FFFFFF;
box-sizing: border-box;
padding: 40px;
padding-bottom: 130px;
text-align: center;
width: 100%;
position: relative;
top: 0px;
}
which relates (I hope) to the container that holds the logo and the text at the top of the page. I think width being 100% is the problem, but I'm not sure why; it seems to span more than 100% at the moment.
Any help is appreciated.
Remove
.logo_text width: 100%
.logo_image position: relative
Remove left from the logo_image class to center it and fix the overflow.
Also add left: 0; to your logo_text, because it has padding 40px from parent plus 100% width (100% + 80px [overflow]) or just remove the width and position it relative
I'm working on a school assignment where I'm getting weather data and displaying the output, in the background I wanted some clouds moving around.
I coded the cloud movement with a CSS3 key frame, my problem is that the clouds always stay on the top even though the element I want on top have an higher z-index.
I was able to get it working correctly setting .forecast to position: absolute; but that element should stay in the middle of the screen and therefore I cant use absolute on that one.
The site: beta2.sampettersson.com.
Try position: relative; for the .forecast div
.forecast {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px 5px 5px 5px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
max-width: 300px;
padding: 2%;
position: relative;
width: 80%;
z-index: 3;
}
If you just move the #clouds div to higher in the source order (i.e. before the forecast div) it will automatically fall behind the forecast div.
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.
I'm trying to place a button. I have its position set to absolute, so I can't figure out how to place it properly.
Its the button that says "Is this your product?"
See an example here: (removed)
I want it to be placed right on top of the widget in the right sidebar with 5px spacing all around. How do I do that?
I originally took the button from here: http://cssdeck.com/t/uHhhprW6
Appreciate the help.
if your Button will be always in same place so you can do it with:
.but {
position: absolute;
width: 80px;
height: 25px;
background-color: #DEDEDE;
right: 0;
margin: 5px;
}
And just edit your right or top whatever you want. little example
The quickest way I could get it to work was remove the top, left, float, and margin-left declarations from your .email rule, and change its position to relative.
.email {
position: relative; /* not absolute */
width: 220px;
height: 30px;
font: .75em "lucida grande", arial, sans-serif;
margin: 0 0 5px 0;
}
I would imagine there are much cleaner/simpler ways to make this particular button - there seems to be a lot of absolute positioning going on with the containing element and its children. But the changes I have suggested seem to work as a quick fix.
When an element has position: absolute, you have to position it using left, right, top and bottom. The values you use on this properties should be relative to the closest positioned ancestor (a "positioned" element being one with a position value other than blank or static).
Consider, for example, the following HTML:
<div id="container">
<div id="position_me"></div>
</div>
And the following CSS:
#container {
width: 500px;
height: 500px;
position: relative;
border: 1px solid green;
}
#position_me {
width: 20px;
height: 20px;
position: absolute;
left: 100px;
top: 100px;
border: 1px solid red;
}
The red box will be 100 px from the top border of the container, and 100px from the left border of the container.
See working example.
If you use position: absolute on the button, you can specify it's location using the top, right, bottom and left properties. For example, to position an element with the id button to the top right of a page, with 5px spacing both on top and at the right, you could use this CSS code:
#button {
position: absolute;
top: 5px;
bottom: 5px;
}
If you just want the element to go to the right side of the parent element, you should use float: right. Then you can use margin-top, margin-right, margin-bottom and margin-left to make sure the element gets some margin around it.
See my example Fiddle for the difference. Note that both 'buttons' are within the same div in the HTML code, but the absolute positioned one appears to be outside of that block.
Have a look at this article for more information on CSS positioning.