I have the following code:
<!DOCTYPE html>
<html>
<head>
<style>
img
{
position:absolute;
right:50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="logocss.gif" width="95" height="84" />
</body>
</html>
from http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_right
If I change the style of h1 to:
h1
{
position:absolute;
right:50px;
}
then both the h1 and img overlaps.
Now I didn't mention the top position for img or h1. So in the first case when h1 didn't have any style, the img left h1 alone and occupy the next available space after the h1 and was aligned to the right side (50 px apart). But when I mentioned h1 to be 50px apart (with absolute positioning), both the img and h1 overlapped. Now as I didn't mention the top position then why is not img leaving h1 alone and follow it (instead of overlapping it)? I understand that we are using absolute positioning which leaves top position ambiguously specified so why is it automatically assuming that the img has to occupy the top:0 position? If h1 occupies top:0 position then it is fine because it is the first element. But img should respect the space of h1.
Thanks in advance for help.
This is because position:absolute removes the element from the flow of the document - they don't stack anymore because they are position absolutely.
I think a better way to do this would be:
h1, img{
float:right;
margin-right:50px;
clear:both;
}
jsfiddle: http://jsfiddle.net/R7bXZ/
Even better way for you:
Just give the h1 text-align:right;.
jsfiddle: http://jsfiddle.net/KvMLb/2/
yeah, you could also just change the top tag in the css like so:
img
{
position:absolute;
right:50px;
top:100px;
}
h1
{
position:absolute;
right:50px;
top:75px;
}
The reason that img is occupying the top: 0 position is because, by specifying h1 as position: absolute, you're taking it out of the page flow. img attempts to calculate it's position and doesn't see the h1 there. There's not a great way around this using only position: absolute although this JSFiddle might work for you.
Read here on absolute positioning: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning
When using absolute positioning, the element you apply it to, in lamens terms, becomes disconnected from the page and teh rest of the elements. It is essentially making that element behave on its own with 0 influence from other. From what I have read you want position:absolute img to detect where the h1 is and avoid it. This is simply not possible using position:absolute, it is in itself designed to NOT do that.
How do you want these to actually appear so I can assist in achieving that without using position: absolute?
Related
Have a look at, http://thomaspalumbo.com
I have this CSS for my website's container:
.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}
Then I have a container on top of that to center that info.
The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?
Is there a fix for this?
While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.
You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer
#footer{
position:relative;
z-index:999;
}
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
EDIT
Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?
EDIT
If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:
HTML
<div class="container">
<div>lorem ipsum....</div>
</div>
CSS
.container{
background:red;
}
.container div{
width:400px;
margin:0 auto;
background:yellow;
}
See JSFiddle here: http://jsfiddle.net/HxBnF/
Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.
in the div style, just assign a z-index value greater than any other z-index such as
.divClass{
position: absolute;
z-index: 1 //if other elements are still visible chose a higher value such as 20 or even higher.
}
Take a look at the following code, which is a simplified version of a bigger problem I'm having:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {border-width:0px 5px; border-style:solid; border-color:black; width:400px; margin:0; padding:0; background:red;}
div:nth-child(2) {background:green;}
p {color:yellow; text-transform:uppercase; font-size:40px;margin:0;padding:0;}
</style>
</head>
<body>
<div><p>Hello World</p></div>
<div><p>Hello World</p></div>
</body>
</html>
It should create something like this:
What the client has asked for is for the black left border and black right border to be the exact same height as the yellow text. That is, the height of the black bars should not include the extra space between the top+bottom of the yellow text and top+bottom of the container.
One way I can think of doing this is to set a fixed height on the containing div, then give the div an overflow:hidden. Next I will use a negative margin-top on the p tag.
Can anyone think of a better approach? I really don't like the approach I mentioned because my client is a design nazi and will expect things to be pixel perfect across all the different operating systems, different browsers, and different screen resolutions. From my experience, if I try to position elements by hard coding pixel values into my CSS, and those elements still need to be relative to elements that vary in size (due to dynamic content), it can be a night mare.
Are my concerns warranted? If so, is there a better way to make the borders exactly the same height as the text?
Is this what you are looking for:
jsFiddle
Just set the line-height below the height of the container so that the font occupies it without any left over space.
p{
font-size:40px;
line-height:30px;
}
You could do something like this using pseudo-elements (no <= IE8 support). Note that the border is a little larger than the font, that is just the nature of the font allowing a little space above and below (notice that both are set to 40px). This can't really be helped cross-platform/browser/etc. unless you want to make an image that is pixel perfect.
jsFiddle
HTML
<div><p class="fancy-border">Hello World</p></div>
CSS
.fancy-border {
position:relative;
}
.fancy-border:before {
content:"";
display:block;
z-index:-1;
position:absolute;
height:40px;
width:100%;
border-width:0px 5px;
border-style:solid;
border-color:black;
top:50%;
margin-top:-20px;
left:-5px;
}
give borders on P tag and set the line height of p so that there remains no space between lines then give margin between them
I am creating a webpage, And I have two divs, A and B for instance.
A's position is fixed and it's on top of the page, but B's position is absolute and is somewhere in the middle of the page. When they Overlap, B comes on top of A, But I want this to be the other way around. I want A to come on top of anything, but I don't know how to do that.
Please note that changing their positioning is not an option.
Thank You in advance. :)
You can use z-index css setting to modifiy non-static positioned element order:
div#A { z-index: 2; }
div#B { z-index: 1; }
A will be displayed over B.
use z-index value to adjust them accordingly to layer.
its a style property: style="z-index:200"....
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
<html>
<div id="divA" style="width:100%; height:50px; z-index:2; position:fixed; background-color: red">
</div>
<div id="divB" style="width:100%; height:50px; z-index:1; position:absolute; top:30px; left:20px; background-color:green ">
</div>
</html>
divA will come on top of divB now(due to z-index property). But make sure to define position property for divs. This wont work if we remove position: fixed for divA.
Give A a larger z-index property than B.
div.a {
z-index:2;
}
div.b {
z-index:1;
}
You can read about what z-indexes do over at the MDN, but in a nutshell, "When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one."
You can use css media queries and change the property values if the overlapping is in fact.
Or use javascript to test if it overlaps. Here's an approach u wrote someday: https://github.com/yckart/jquery.overlaps.js
Use CSS to give Div A a high Z-Index.
#a{
z-index: 100;
}
This will mean that Div A will definitely stay over all/most other elements, the higher the value the more likely it will be above everything else depending on how many other elements are on the page. If you need more precise overlap control for multiple elements, assign specific z-index values to your elements, the higher the value the more on top the element will be. You can also use minus values.
I read this artical http://css-tricks.com/implied-block/.
I test it in my own chrome browser, yes, using float style generate the display:block style.
As I known display:block means that the element becomes the block-level element, and it occupies the whole line. Next element should starts in a new line.
But I test the float property. Although it generate the display:block, the next element(also float) is still in the same line. So what's the matter with it?
<style type="text/css">
span
{
width: 30px;
margin: 0 10px;
background-color: Red;
float:left;
}
</style>
<body>
<span>222</span><span>323</span><span>dd</span>
You need to clear the float in order for the "floated" element to break to the next line. You can replace the span element with a div and you will see the same effect.
You can try this blog, this might help you to understand more about float
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
If you just want each of the spans to occupy a new line then give them each:
span { display:block; }
And remove:
span { float:left; }
A div would also accomplish this without css.
All,
I have a page which is suppose to take up only the available screen space in the browser.
I have a 'top bar' and a 'bottom bar', both of which are fixed positioned at the top and bottom of the page. I want to have a div which will consume (take up) the remaining of the space inbetween the two bars mentioned above.
Its crucial that the middle div is not overlapped by the top and bottom bars. Is this at all possible with CSS or do I need to make use of js.
Also, if I do go with js, considering the browser loads up the CSS first before the js code, how is the above work out using js for centre positioning?
Many thanks,
You can use relative and absolute positions. Here an example:
css
html,body,#wrapper {
height:100%;
margin:0;
padding:0;
}
#wrapper {
position:relative;
}
#top, #middle, #bottom {
position:absolute;
}
#top {
height:50px;
width:100%;
background:grey;
}
#middle {
top:50px;
bottom:50px;
width:100%;
background:black;
}
#bottom {
bottom:0;
height:50px;
width:100%;
background:grey;
}
html
<div id="wrapper">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
Demo: http://jsfiddle.net/jz4rb/4
This demo works for me in Chrome12 but YMMV depending on which browsers you need to support. For example position:fixed does not work correctly in IE6.
Use absolute positioning on the body tag. position:absolute with zero top and bottom will "stretch" body to be the same size as the browser window. Alternatively, setting height: 100% also works but I remember it works wierd for certain old browsers.
Then use absolute positioning on the center div, with enough top/bottom offsets to avoid your header and footer bars. The header bar is absolutely positioned with top and the fotter is absolutely positioned with bottom.
Note: This won't work on mobile browsers. You'll need to use JS to get the window's height and manually set the center div's height.