Edited to show current code and add html:
I'm still learning CSS and I have a bit of a problem. I have a header image on top of a page. Overlaying the image I have a header bar with a home-button.
#header {height:170px; background-color:#f5fdfb; display:block; overflow:hidden; position:relative;}
#header_bild {
padding-top:0px;
height:170px;
z-index:5;
}
#header_bar {
background-image:url(header_bar.png);
position:absolute;
top:0px;
left:0px;
width:151px;
height:31px;
z-index:10
}
But I want people in the CMS to be able to upload a header image that is too large and it will be automatically cropped. I thought I could do this by adding overflow:hidden to the header tag. And it works. But as soon as I add overflow:hidden, the header bar is suddenly behind the header image, instead of on top of it where it belongs. Can anyone tell me what I'm doing wrong?
The stuff in the CMS wasn't actually coded by me. I'm only editing the CSS files. So I can only show you the html that I can see when viewing the source file of the site:
<body>
<div id="siteborder">
<div id="container">
<div id="header">
<div id="header_bar"> </div>
<div id="header_img">
<img src="./files/header_seed.jpg" border="0" title="" alt=""></div>
</div>
<div id="logo"><img src="files/dummy.gif" width="151" height="30"></div>
<div id="linie_header"><img src="files/line_header.png" width="992" height="2"></div>
</div><!-- header end -->
You should consider using z-index in your CSS to specify explicitly what should be "on top" and what should be "behind". There is plenty of good information out there. z-index puts objects with higher value "on top" of objects with lower values. The default if left unspecified is auto, which means it takes this value from its parent, which is (usually) 0. The <html> tag defaults to a z-index of 0, so it follows that nested defaults will also be 0.
.thingone { z-index:10;}
.thingtwo { z-index:5;}
.thingthree { }
In this example, <div class="thingone"></div> will be "on top of" both of the others, and <div class="thingthree"></div> will be "underneath" the others, since it is unspecified and therefore defaults to auto (the z-index of a parent if nested, usually 0). So you should add z-index:10 (for example) to the particular object you want to be on top (if the image you want "on top" is actually defined by header_img):
#header_img {
padding-top:0px;
height:170px;
position:relative;
z-index:10;
}
#header_bar {
background-image:url(header_bar.png);
position:absolute;
top:0px;
left:0px;
width:151px;
height:31px;
z-index:20;
}
As mentioned by Hilgaran in the comment below, you need to explicitly state a position rule for the object you're trying to z-index. The default position is relative for objects not nested underneath parents with alternate positions, so specify it explicitly to make z-index function.
Related
I have a div element inside a main div, which i wanted to put an image tag into it. The problem is, when i positioned the image to absolute, the image didn't show up and the container div didn't take any space on the main div. But when i remove the position:absolute the image is showing just fine. Any help how to show it without removing the position:absolute?
The code is something like this:
<div id="main">
<div id="image_wrapper">
<img style="width:100%; position:absolute; top:0px; left:0px;" src="image.png" />
</div>
</div>
html
<div id="main">
<div id="image_wrapper">
<img src="image.png" />
</div>
</div>
css
#image_wrapper {
position:relative;
}
#image_wrapper img {
width:100%;
position:absolute;
top:0px; left:0px;
}
try this maybe it help....
When you set an element to be absolute-positioned, it is removed from the flow of the document. In this case, it means the container <div> now has "nothing" inside it and therefore collapses to zero height.
Also note that you should almost always give the containing element position:relative to provide an origin for the absolute element.
The main problem, though, is the lack of height on the container. Fix that and your image should show up.
If it doesn't, then try also specifying the image's height.
Right now I have a main div with an id of "wrapper", and inside this div I am trying to make two other divs that take up about the entire width of "wrapper". The first div, "sidebar", is narrow and contains some information I want displayed on the far right of "wrapper". The second internal div I have will be dynamically updated using php and javascript from data inserted by users, id called "maincontent".
I can get them positioned inside "wrapper" fine at first. The problem comes when new content is added in the "maincontent" div. When new content is added the "sidebar" div will move down proportionally to the height of the newly added content.
So, my question is this:
How do I get the two internal divs to maintain their positions on the top of the page while still being able to extend dynamically downward without anything moving around?
you need to float:left your left-content:
see the css below:
.wrapper
{
margin:0;
padding:0;
top:10px;
width:100%;
height:500px;
background-color:yellow;
}
.left-content
{
position:relative;
width:20%;
background-color:red;
height:100%;
float:left;
}
.main-content
{
position:relative;
width:80%;
left:20%;
background-color:green;
height:100%;
}
where your divs are as below:
<body>
<div class="wrapper">
<div class="left-content">
</div>
<div class="main-content">
</div>
</div>
</body>
what's important is, you accurately divide the width of the parent to the child containers
i.e. total width of child containers <= parent width
see, you need to learn about position attribute of css-style
when you do position:relative for any container, css properties like top, left,right,bottom starts working for them.
Check out my fiddle, the Javascript is completely unnecessary. Let me know if it helps you, or if you have any questions left. The most important part is having float: left or float: right in both the maincontent and sidebar.
http://jsfiddle.net/y89zp/
With refrence to this question and the accepted answer, I tried doing something similar.
.Content
{
position:absolute;
top:0;
left:0;
padding-top:75px;
width:inherit;
height:inherit;
}
.Header
{
position:absolute;
top:0;
left:0;
height:75px;
width:inherit;
background-color:Blue;
text-align:center;
}
<form id="form1" runat="server" style="width:100%;height:100%">
<div id="Content" class="Content">
<div id="Header" class="Header">
<h1 style="color:White">Report Portal</h1>
</div>
</div>
</form>
I want the content area to fill the entire page, no more. But vertical scroll bars appear for the web page with the above html. How can I correct that?
You shouldn't make the header absolute also remove the padding-top: 75px.
Consider this fiddle: link
EDIT: Updated fiddle: link
Do you have width and height set to 100% on the body and hmtl?
Also, the padding is creating a vertical scrollbar, remove this and it will work as expected.
http://jsfiddle.net/Kyle_Sevenoaks/MqKXH/
You have put Height > inherit for "Content".
CSS Inheritance (http://dorward.me.uk/www/css/inheritance/)
CSS inheritance works on a property by property basis. When applied to an element in a document, a property with the value 'inherit' will use the same value as the parent element has for that property.
Overall, "Content" height is already 100% of the browser which is inherited from "form" tag. After adding padding from top ie "75px" ..its total height becomes "browser height + 75px". It reasons to scroll the page.
Solution :
1] Avoid the top padding to "Content". Give that padding to its inner container
2] use style
body, html{
overflow:hidden;
}
Using a method I've done before but having issues. Not sure if it's a sprite or what.. Basically you have two versions of an image saved into one file with them stacked on top of each other and use CSS to adjust the margins when hovering. Here's an example of it working successfully: http://minimalpluscreative.com
Trying to do the same thing here, but running into issues with overflow:hidden; not working. Instead, the the full (double) image is shown. Here's what it looks like: http://cl.ly/023p1I1D1W0W3a1T1q1R It should be just the top half of the image with overflow:hidden; preventing the other half from showing.
Help? Some kind of syntax error I'm sure...
HTML:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<img id="show_fire" class="thumbnail sprite" src="images/daniel_gomes_soundoffire_sprite.png" />
</div>
CSS:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite:hover {
margin-top:-61px;
}
I've never seen this done before except with background images, but I don't see why not… it just seems like you need a lot of extra css, and extra html to get it to work as opposed to a background image.
As was said earlier, it's hard to see the problem without seeing your actual code in context, but based on what I see, there could be a few potential things wrong:
You need to wrap the image in a containing element, and assign the width, height and overflow to that. Hidden overflow will hide what's outside of the boundaries that div contains. The image element is the image, it doesn't contain the image, so setting it to overflow:hidden isn't going to hide andything, and assigning it a width will just resize it, not "crop" it (which is the effect you're going for). So you'd need something like:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<a class="sprite" href="#">
<img id="show_fire" class="thumbnail" src="images/daniel_gomes_soundoffire_sprite.png" />
</a>
</div>
with this css:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite img {
margin-top: 0;
}
.sprite:hover img {
margin-top: -61px;
}
I suggest you use 'a' as the containing element, as not all browsers will recognize the hover pseudo-class on tags other than anchor tags.
I know you think using an image instead of a background image is simpler, but using background images, you can accomplish all this with only one element and less css.
In the example site you refer to, the overflow:hidden property is set on the outer 'div#a'
'div#work' in your code should have it's overflow set to hidden.
Thus when you change the margin on your image it will move within the frame of your outer div.
Additionally I had to add a tag name to the hover declaration.
<html>
<head>
<style>
#work{
position:relative;
overflow:hidden;
width:140px;
height:61px;
}
div.sprite {
margin-top:0;
}
div.sprite:hover {
margin-top:-61px;
}
/* instead of an image */
.sprite div{
height:61px;
}
.red {background:red}
.blue {background:blue}
</style>
</head>
<body>
<div id="work">
<div class="sprite">
<div class="red">a</div>
<div class="blue">b</div>
</div>
</div>
</body>
Want to reduce the opacity of page contents container background without reducing the opacity of the contents.
<div id="container">
<div id="page contents">
page contents goes here, like amazing articles and all that.
</div>
</div>
Needs to be able to expand with the content, thus can't have a fixed height.
Absolute positioning it underneath the content will mean there will be no relationship between the two divs and it wont expand with the contents, so I think this is a dead end, feel free to say otherwise.
Can't use Jquery as could be too laggy and not instant. Other options preferred please.
May have to use 'png' background images but were hoping not to as it is a template and needs to be able to change colour based on colour schemes.
Could generate images on demand but not ideal.
Oh and to top it off cant use CSS3 as wont work in IE! of course!
Any suggestions?
My first impulse is a transparent PNG.
But looking further and especially with your comment on variable colour schemes, perhaps hooking into RGBA support would work for you. There's a nice post on it (including how to hack around IE - which doesn't support it at all) here:
http://css-tricks.com/rgba-browser-support/
not tested yet, but you get the idea.
<div id="container">
<div id="page contents">
<div id="opacity"></div>
page contents goes here, like amazing articles and all that.
</div>
</div>
#page {
position:relative;
}
#opacity {
position:absolute; z-index:-1; height:100%; width:100%; background-color:#eee; opacity:.7;
}
All content of an element will receive it's opacity value, even if you set the content's opacity to 0, you'll stile have the problem... here's a simple solution that I use:
HTML
<div id="menu_bg"></div> <!-- BG FOR LEFT MENU -->
<div id="menu_header">
<span class="menu_title2">MENU PRINCIPAL</span>
<div id="menu_opts">
<ul id="menu">
<li id="menu_home">HomePage</li>
<li id="menu_home">Company</li>
</ul>
</div>
</div>
The CSS:
div#menu_bg {
position:fixed; top:10px; left:10px; z-index:20000;
width:200px; height:50px;
background:#000000;
/* for IE */ filter:alpha(opacity=60);
/*CSS3 standard*/ opacity:0.6;
}
div#menu_header {
position:fixed; top:10px; left:10px; z-index:20001;
width:200px; height:50px; overflow:hidden; cursor:pointer;
}
div#menu_opts {
position:absolute; top:60px; left:10px;
width:200px; height:275px; overflow:hidden;
}
The trick is simple, have a div behind you content and use position and z-index to place it. Then draw another div with the content, over the last one, and use same position but set z-index above. This way, you'll have a background with the desired opacity, and your content since it's on another div, will get just right!