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.
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;
}
Please take a look at the attached image, it makes it easier to understand.
In general the question is just how to absolute position an element left:100% while making it appear a bit less than 100%. Margin doesn't seem to work in absolute positioning.
I created a resizeble element with jQuery, and there is a right 'bullet' for the user to resize the element. I don't want to bullet to be on top of the container's border, so I set its position to absolute, and left: 98%.
Problem is - resizing the element takes the bullet to the left or right of the container's end, depending on its size (because the position of the bullet is set in percentages). Only 'solution' is to set its 'left' to 100%, but then the bullet is on top of the div. Adding a non breaking space after the bullet also didn't work since I had to set the left to 98% to contain both the bullet and the space.
What do you think? Is there a simple solution I didn't come up with?
Thanks in advance,
OmerImage
Edit: Jila here offered a simple solution of using calc:
#myContainer {
position: relative;
display: inline-block;
box-sizing: border-box;
}
#bullet-right {
position: absolute;
left: calc(100% - 16px);
margin-right: 10px;
top: 40%;
color: blue;
z-index: 5;
}
I tried 100% - 10px without the calc before and it didn't work obviously
Hope it can help others and thanks Jila
left only works on a positioned element. That is to say, any element that does not have the default static positioning. In addition to this, you should never set left: 98%; you should set right: 2% to prevent any confusion.
If you want to set a left offset on a dynamic element, you're looking for margin-left.
This can be seen in the following:
.container {
border: 1px solid black;
padding: 20px;
}
.text {
border: 1px solid black;
margin-left: 5%;
padding: 5px;
display: inline-block;
width: 85%;
}
input {
margin-left: 2.5%;
}
<div class="container">
<input type="radio">
<div class="text">Text</div>
</div>
how to absolute position an element left:100% while making it appear a bit less than 100%.
Don't use left: 98%;. Use right: --;. Since, as you state, percentages are dynamic, decide on a fixed value for the element offset. For example if you choose 10px the element on the right would be right: 10px and the element on the left would be left: 10px;.
If you really really want to use left for the one on the right use left: calc(100%-10px);, but there's no real reason for doing that when you can use right.
As can be seen here (please make it wider): http://jsfiddle.net/CZayc/1368/, I wanted to make my navbar width 100% of browser width, and place some links (First Second Third Fourth) in the centered, 1200px wide space.
I do not know why, but the middle container just overlaps the navbar.
Changing position: absolute; on navbar caused it to shrink to 1200px size (not desired).
What can I do about it? There is also a problem with link container, because I couldnt center First Second Third Fourth in the desired 1200px space (probably due to overlap).
Thanks!
Using absolute position on an element takes it out of the content flow: meaning that other elements in the flow act like its not there. The elements overlap because there is nothing to push the middle content down below the header.
There are 2 things you could do:
stop using position absolute. as #NendoTaka suggests, relative should be fine. If there is some reason for absolute positioning you haven't explained, then
add a margin to the middle content area.
Example CSS
.middle {
background-color: #7f7f7f;
height: 1050px;
margin: 74px auto 0; /* height of nav plus its borders*/
}
You can move .middle out of the way by adding margin-top: https://jsfiddle.net/CZayc/1371/
Be sure to set margin-top to the height of .nav. This includes borders, too.
Change your nav class to
.nav {
background-color: #34384A;
height: 70px;
width: 100%;
border-top: solid;
border-bottom: solid;
}
Note: You don't need the width: 100% but just in case.
You need to apply position:relative to both the .nav and the .middle
Your problem before was that .nav had an absolute position which caused the overlap. the relative positioning keeps that from happening because it formats each div relative to the previous div as written in your HTML.
.nav {
position: relative;
background-color: #34384A;
height: 70px;
/* position: absolute; */
left: 0;
right: 0;
border-top: solid;
border-bottom: solid;
}
.middle {
position: relative;
background-color: #7f7f7f;
height: 1050px;
margin: 0 auto;
}
You’re trying to solve the wrong problem with your question. The example below is a cleaned up version of your code.
* { margin:0; padding:0 }
nav {
background-color: #34384A;
height: 70px;
border-top: solid;
border-bottom: solid;
text-align: center;
}
<header>Test test</header>
<nav>
<a>First</a>
<a>Second</a>
<a>Third</a>
<a>Foruth</a>
</nav>
<div class="middle">
11111<br>22222<br>33333<br>44444<br>55555<br>66666
</div>
<footer>Test</footer>
Be mindful of the HTML you use. The HTML tags you choose should provide meaning to the content they wrap. Also you should avoid using position: absolute for general layout concerns such as this one.
Hope that helps.
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.
Hello i am looking for solution to do that:
http://www.delightfulwoman.pl/depilacja-laserowa/
When you click on the link on the left, the text changes inside right box...
I just want to know how to make that CornerRounded SemiTransparent div background, with scrollbar NEXT to it, not inside it.
You would say i can look into source file, but i am not that good at CSS, and i cant see transparency or opacity there :s or anything similar.
This website is using an image as the background for that DIV. They are using a PNG file which supports transparency. So in the CSS for the DIV (.o_right_cont) they are using an image of a rounded and translucent box instead of any fancy CSS.
On the inside of that DIV they have another DIV (.ofe_desc). They set the overflow to auto so that way the scrollbar would appear when the content is larger than the DIV.
.o_right_cont {
background: url(gfx/cennik_bg.png) no-repeat;
width: 670px;
height: 420px;
float: left;
margin: 10px 0px 0px 30px;
text-align: left;
padding: 10px;
}
.ofe_desc {
width: 662px;
height: 400px;
text-align: left;
overflow: auto;
line-height: 15px;
padding: 8px 30px 8px 8px;
}
Let me know if you have any questions.
Kind Regards,
- Chris