In all the posts I've been able to find a deal with either centering a div inside another div or putting a div at the bottom of another div, and the advice has been great but I haven't been able to find anything to do both.
My code is:
<body style="text-align:center; margin:0; padding:0;">
<div style="width:100%; height:100px; background-image:url(header.png);position:relative;">
<div>
<div style="height:75px; width:950px; background-image:url(formtop.png); bottom:0; position: absolute; margin-left:auto; margin-right:auto;">
<div style="float:left; position:relative; left:30px; top:15px">
<img src="logo.png" width="88" height="38">
</div>
<div style="margin-top:15px">
<h1>Product Form</h1>
</div>
</div>
</div>
</div>
</body>
All I want to do is to put the formtop.png div at the bottom and center of the containing div. I can do one or the other but I can't do both. If I change position:absolute to position:relative then the image centers itself but its too high. When I change it back to absolute then it sits nicely at the bottom of its containing div but in IE it's way off the right and in firefox it's at the left side of the page.
Any advice?
You can do it by setting the formtop.png <div> to 100% width and centering the background image using CSS:
<!-- div with the formtop.png background -->
<div style="
height:75px;
width:100%;
background:url(formtop.png) no-repeat 50% 0;
bottom:0;
position: absolute;">
As an aside, if you move all your inline styles into a .css file, your code will be a lot easier to work with and maintain:
<div class="formTop">
.formTop {
position: absolute;
bottom: 0;
left: 0;
height: 75px;
width: 100%;
/* Set the background image to centered in this element */
background: url(formtop.png) no-repeat 50% 0;
}
Have you tried left:0; right:0; trick for absolutely positioned elements? It does not work for IE7 nor IE6, but it does for the rest of the browsers and later versions.
This is an example http://jsfiddle.net/6w6VR/
Try to avoid html elements that are only used for style, because you might wish to change your style later.
See this example, which uses the :after pseudoclass:
div {
width:100%;
position: relative;
background-image: url(header.png);
}
div:after {
display: block;
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 20px;
background: url(http://upload.wikimedia.org/wikipedia/commons/3/38/Wiktionary-ico-de.png);
background-repeat: no-repeat;
background-position: center 0px;
}
You can set your header.png as background for div.
Related
I am trying to put a ribbon that is as wide as my content but 'spill' the sides over to the body. Example here. This is the HTML I have so far. There are three images: the middle part of the ribbon and then two sides. I put the middle part in the h1 and now I am trying to line up the sides.
<body>
<div id="container">
<div id="leftside">
</div>
<div id="rightside">
</div>
<div id="content">
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
My shot at the CSS. I've been experimenting and this does what I need it to but I am sure there are a million better solutions. I want to know what the best practice would be for this since I am sure I'm kind of breaking a lot of rules here.
#container {
width: 825px;
min-height: 960px;
margin: 0 auto;
}
#left {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: -58px;
}
#right {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: 825px;
}
#content {
width: 825px;
min-height: 700px;
margin: 0 auto;
background: url(other.jpg) repeat;
margin-top: 20px;
margin-bottom: 20px;
top:0;
overflow: auto;
}
h1 {
text-indent: -9999px;
background-image: url(banner.jpg);
background-repeat: repeat-x;
margin-top: 0;
height: 48px;
}
There definitely are a million ways to accomplish this. The best approach will depend greatly on how your site progresses.
What it comes down to is relative and absolute positioning.
One way to accomplish this is to structure your site something like so:
<body>
<div id="header">
<div id="ribboncenter"></div>
<div id="ribbon1"></div>
<div id="ribbon2"></div>
</div>
<div id="content">
Your content
</div>
<div id="footer">
Your footer
</div>
</body>
That's very loose frameworking for a typical site. The CSS would be something like so:
#header{
width:800px; //Subjective to however big you want your site
margin:0 auto; //Positions the header in the center
position:relative; //Tells nested absolute elements to base their positions on this
}
#ribbon1, #ribbon2{
position:absolute; //Position is now based on #header and is pulled from the regular DOM flow
width:50px; //Subjective to whatever the width of your "ribbon" is
top:10px; //Subjective to how far down from the top of #header you want it
}
#ribboncenter{
width:100%; //Sets width to the width of #header
background:url(ribboncenter.png); //Subjective to image
#ribbon1{
left:-50px; //Subjective to the width of the image, moves it 50px left of #header
background:url(my-ribbon1.png); //Subjective to whatever your image is
}
#ribbon2{
right:-50px; //Subjective to the width of the image, movesit 50px right of #header
background:url(my-ribbon2.png); //Subjective to whatever your image is
}
Here's the example http://jsfiddle.net/NZ8EN/
This is all very loose but hopefully gives you an idea of the direction to take.
There are definitely other ways to solve this as well.
Try putting the #right and #left divs inside the #content div, give #content a position of relative (so that it becomes the parent reference for the children #left and #right) and position absolutely the #left and #right:
HTML:
<body>
<div id="container">
<div id="content">
<div id="leftside"></div>
<div id="rightside"></div>
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
CSS:
#left {
position: absolute;
top: 0;
left: -59px;
}
#right {
position: absolute;
top: 0;
right: 59px;
}
Unless you're supporting IE7, I'd probably go with something like this:
http://jsfiddle.net/G5jkt/
This is the CSS you'd need to add:
h1 {
position: relative;
}
h1:before {
content: '';
height: 100%;
left: -59px;
top: 0;
position: absolute;
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
}
h1:after {
content: '';
width: 59px;
height: 100%;
background-image: url(side.jpg);
background-repeat: no-repeat;
right: -59px;
top: 0;
position: absolute;
}
And you've have to change your HTML like so:
<div id="container">
<div id="content">
<header>
<h1>Hello Here</h1>
</header>
<div>
</div>
Using :before and :after helps remove design specific HTML from the document and gets the job done.
The key is using absolute positioning. In your example, you have your ribbon ends at the top of the page -- they have no relationship with the H1 you're trying to base their position off of.
The easiest way to do this would be dropping the HTML responsible for this ribbon ends within the H1. This, however, is not semantically the best. You could add a wrapper around the ribbon ends AND the H1, but that's extra markup.
By using :after and :before, you're using the H1 as the parent since it has a position of relative, and absolutely positioning the pseudo :before and :after elements relative to that H1. This is ideal since the pseudo elements can now inherit things like the height, background color, etc.
I want my Div id="b" to be on the other Div id="a", but instead I get the Div id="b" under Div id="a", What need I change in the Css?
Html:
<div class="picad30">
<div class="pic_sin30" id="a">
<img width="110" border="0" class="pic_sin30" src="SMALLAD.png"/>
</div>
<div class="picgar30 p" id="b"></div>
<div >
<div >upload</div>
<div ></div>
</div>
</div>
Css:
.picad30{
width:130px;
float:right;
display:table;
margin: 20px 0 0 0px;
position: relative;
}
.pic_sin30{
border: 1px solid #ccc;
height: 87px;
overflow: hidden;
width: 130px;
position: relative;
z-index:1;
}
.picgar30{
background-position:-5px -244px;
cursor:pointer;
height: 20px;
width: 20px;
float:left;
z-index:20;
position:absolute;
}
.p {
background-image: url("PIC/icon.png");
background-repeat: no-repeat;
}
Try this
.p {
background-image: url("PIC/icon.png");
background-repeat: no-repeat;
z-index:2;
position:absolute !important;
top:0;
left:0;
}
It can be helpful to you Read this
Edit
Working Fiddle
So I've made a few updates to your code and I hope I've interpreted your question correctly. Am I right by saying you want to stack .pic_gar30 or id=b on top of .pic_sin30 or id=a? And then on top of .pic_gar30 you want to add an icon?
If this is correct I've done the following, I've wrapped your 2 image divs in a parent div called pic-container which has the height you wish to use on your images and position relative so you can absolutely position your images inside without the upload text hiding in behind also.
You want to use the same css on both your image holders so I've given both of them the class img-holder and applied styles that position absolute, since .pic-gar30 comes after .pic_sin30 it will automatically be positioned on top. But if you like you can add a z-index to .pic_gar30. I've then used the ::after psuedo class selector http://css-tricks.com/pseudo-class-selectors/ on .pic_gar30 in order to position your icon above the image.
Please see my example which I hope helps http://jsfiddle.net/LXaCT/
I'm finally trying to do away with tables and use CSS.
I have 3 DIVs that make up a three layered layout: header, body and footer. I'm now trying to overlay a 900px wide DIV on top of these layers, center aligned, which will hold some of my content and navigational buttons.
These are the 3 layers:
And this (done in Photoshop), is what I am trying to achieve but transparent to the eye:
My 3 base layers are coded like this:
<div id="main" style="width:100%; z-index:1; position:relative;">
<div id="header" style="width:100%; height:175px; text-align:center; background:#151515; z-index:1;"></div>
<div id="contents" style="width:100%; height:400px; position:relative; background:#FFF; z-index:1;"></div>
<div id="footer" style="width:100%; height:200px; position:relative; background:#151515; z-index:1;"></div>
</div>
I did manage to get a new layer to sit on top but it wasn't center aligned. Could somebody please point me in the right direction?
Somehting like this could help:
JSFiddle: http://jsfiddle.net/DSH5J/
Add:
<div id="square"></div>
#square {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:0 auto;
margin-top:50px;
width:80%;
height:100%;
background-color:#333;
z-index:10;
}
Set the width and set margin-left and margin-right to auto. That's for horizontal only, though. If you want both ways, you'd just do it both ways.
margin-left:auto;
margin-right:auto;
Easiest way that I know of to centre a div of known width is to give it the following styles:
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
"Putting my money where my mouth is": http://jsfiddle.net/YVmBU/2/
HTML:
<div id="main">
<div id="header"></div>
<div id="contents-box">
<div id="contents">
<p>Some text</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
</div>
</div>
<div id="footer"></div>
</div>
CSS:
#main {
}
#header {
position: relative;
height:100px;
background:#151515;
z-index: -1;
}
#contents-box {
border: dashed grey 1px; /* for understanding only, remove it in the end */
z-index: 1;
margin-top: -30px;
margin-bottom: -30px;
/* TODO: address min-height; try only one line of text. */
/* fixed height would work too, but would not let the box stretch dynamically */
}
#contents {
width: 75%;
height: 100%;
margin: 0 auto;
background: grey;
z-index: 1;
}
#footer {
position: relative;
height:75px;
background:#151515;
z-index: -1;
}
The only problem is with few text content: if min-height is used on #content, then the grey background does not stretch when there is few text; if a static height of N px is used, then the box does not stretch dinamically.
But if the two black bars merging when there is few content is not important, then ignore it.
Remove the grey dashed border and grey background; those are helpers - to know where each box is and understand what is happening.
By the way, the position: relative needs to be there on the z-index: -1; layers, otherwise the background does not go under. Read on position: this is because things in html have position: static by default, and z-index relies on position for its behaviour.
You can read about this in this page: http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
The only problem is with few text content: if min-height is used on #content, then the grey background does not stretch when there is few text; if a static height of N px is used, then the box does not stretch dinamically.
But if the two black bars merging when there is few content is not important, then ignore it.
I have been strugglign for the last few horus trying to make it so that the background class will be centered in the website, but i have absolute position and fixed in my css for the inside of it because i need it done for a changing fading background image. But my problem is i cant get it centered in the site for example see in div.background i have margin 0 and it still isnt centered it just stays to the left i even tried but it doesnt work... How cani get the background div i made to be centered...
<div class="background">
<img src="images/back_1.jpg" width="990" height="660" alt="pic1" />
<img src="images/back_2.jpg" width="990" height="660" alt="pic2" />
<img src="images/back_3.jpg" width="990" height="660" alt="pic3" />
</div>
style
div.background {
margin:auto;
width: 990px;
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
div.background img {
position:fixed;
list-style: none;
left:0px;
top:0px;
}
div.background ul li.show {
z-index:500
}
I think you want this:
div.background img {
position: fixed;
list-style: none;
left: 50%;
margin-left: -495px;
top: 0px;
}
left: 50% moves the left edge of the img to the center of the page, then margin-left: -495px; shifts it back to the left exactly the right amount so that it's centered.
This wouldn't work. What you should have is something like:
div.background {
position: absolute
top: 0;
left: 0;
width: 100%;
height: 100%;
background: no-repeat center center url('images/back_1.jpg');
}
and eliminate the individual <img> tags inside the div.
You can then use some javascript to swap the background images whenever, since CSS1 only allows a single background image (CSS3 allows multiples).
Did you try
#background {
margin: 0 auto;
width: 990px;
position:absolute;
top:0px;
z-index:-1;
}
I have 2 images that I need to slightly overlap. My first image is logo.png, and my second image is form.png
My html is:
<body id="wrapper">
<div id="main" method="post" action="">
<img src="images/logo.png" align="middle" id="Smarty" />
</div>
<div id="box" method="post" action="">
<img id="Form" src="images/form.png" />
</div>
And my CSS is:
#wrapper #main {
margin-top: 8%;
margin-right: auto;
margin-left: auto;
text-align:center;
display:block;
z-index: 1;}
#wrapper #box{
margin-top: 8%;
margin-right: auto;
margin-left: auto;
position: relative;
text-align:center;
top: 8%;
display:block;
z-index: -1;}
Basically I need both images to be centered relative to screen size, and I need the 2 to overlap. With this code, both images center, but my form seems to be 8% down from my logo, rather than 8% down from the top of the screen. Is this how I am supposed to be overlapping the 2, or am I way off?
Thanks!
How about something like this?
Live Demo
Or using position: absolute, if that's what you want:
Live Demo
CSS:
#main {
margin: 8% auto 0 auto;
text-align:center;
/*
only include this next rule
if you want the first image to be over the second
*/
position: relative
}
#box {
text-align: center;
margin: -12px 0 0 0;
padding: 0
}
HTML:
<div id="main" method="post" action="">
<img src="http://dummyimage.com/200x80/f0f/fff" align="middle" id="Smarty" />
</div>
<form id="box" method="post" action="">
<img id="Form" src="http://dummyimage.com/200x40/f90/fff" />
</form>
Use the following CSS code to do it. The 2 images will overlap each other and will be centered to the screen both horizontally and vertically.
#main, #box{
position:absolute;
left:50%;
top:50%;
margin-left:-150px; /* negative half the width of the image */
margin-top:-150px; /* negative half the height of the image */
}
Check working example at http://jsfiddle.net/gVQc3/1/
If you want the images to overlap each other by certain amount of pixels, then see the following link.
Check working example at http://jsfiddle.net/gVQc3/2/
for the #wrapper #box change the position: relative; to position: absolute;. This should fix the issue
As far as I can see, you’re not doing anything that would make the images overlap each other.
For that to happen, you’d need to apply position: absolute; to them, and position them at the top of the page:
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
}
To horizontally center them when positioned absolutely, I think you’ll need to know their width. If they were both 100 pixels wide, you’d need:
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
}
I wouldn’t recommend a z-index of -1 either, I don‘t think that makes sense. If you want #main to be on top, then I’d suggest:
#wrapper #main {
z-index: 2;
}
#wrapper #box {
z-index: 1;
}
Note also that in your HTML, you’ve got method and action attributes on <div>s. These won’t have any effect: those attributes go on the <form> tag.
You should play around with fixed, static and absolute positions instead of relative.
See this link http://www.w3schools.com/Css/pr_class_position.asp