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
Related
I want to create responsive popup banner with close button here is my simple scenario:
<div class="banner">
<img src="...">
X
</div>
And my CSS:
.banner img{
max-width:100%;
max-height:100%;
position:absolute;
}
.close-btn{
position:absolute;
right:0;
z-index:2;
color:red;
background:#000;
padding:4px;
}
As you can see I stretch image depending on width and height.
Problem: I want close-btn to stick to the right side of the image and overlap it. To solve this the banner must be the same width as the image. If banner has position:absolute its width and height of course is 0.
Is it possible to achieve only with CSS?
Here is fiddle: http://jsfiddle.net/fjckls/qq590xz5/
I need image to be responsive to width and height
To make your image fully width AND height responsive, first off, you need to alter your units. You're currently using %'s which is all well and good, but for the 'fully height responsive' concept, the % units aren't much help.
Instead, you should look into using vh (view-height) and vw (view-width) units, since these are for the actual viewport that the user can see currently.
In order to position your 'x' over the top right of your image, you're going to have to alter your css slightly.
You could possibly include a css rule for your banner, first off. Something like:
.banner {
position:relative;
display:inline-block;
}
Whilst removing the 'position:absolute' rule from your image, since now your banner div will be the size of your image (not the default '100% of screen' that divs are set to originally).
This leaves us one problem, you haven't actually set where abouts you want the 'x' to appear vertically, so it will default to 'where it would position normally', which, in this case, would be below the image. To tackle this, you would need to add a top: or bottom: declaration to your 'x' class, and in my case, i've chosen to set it to the top (top:0;).
The overall fiddle can be shown here
or here:
.banner img {
max-width: 100vw;
max-height: 100vh;
}
.close-btn {
position: absolute;
right: 0;
top: 0;
z-index: 2;
color: red;
background: #000;
padding: 4px;
}
.banner {
position: relative;
display: inline-block;
}
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg" /> X
</div>
I have updated the link
http://jsfiddle.net/qq590xz5/3/
<div class="banner">
<div style="position:abolute;">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
</div>
.banner img{
max-width:50%;
max-height:100%;
}
.close-btn{
position:absolute;
z-index:2;
color:red;
top:1%;
background:#000;
padding:4px;
}
Have a look
Thanks
try this..
Html
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
CSS
.banner{
position:relative;
width:200px;
}
img{
max-width:100%;
}
.close-btn{
position:absolute;
right:0;
top:0;
z-index:1;
color:red;
background:#000;
padding:4px;
}
Fiddle Demo
I found a solution that keeps the image centered horizontally and the x button on the top right of the image. It involves:
1) Making the .banner absolutely positioned, with margins from each window edge. This centers the entire .banner, however you might want to use fixed position if you need it to scroll along with the user's viewport.
It'll work as long as there aren't any other positioned elements as its parents.
.banner {
position: absolute;
top: 5%;
left: 25%;
right: 25%;
bottom: 5%;
}
2) Making a thing that sticks around the image, which will serve as a positioning guide for the little X.
<div class="shrinkwrap">
<img src="...">
X
</div>
.shrinkwrap {
/* shrink-wraps this div around its content;
as a side-effect, lets this div be centered with text-align: center; */
display: inline-block;
/* new positioning context! */
position: relative;
/* keeps the responsiveness */
max-width: 100%;
height: 100%;
}
3) Positioning the shrinkwrapper to always be in the center of the .banner.
.banner {
/* ... */
text-align: center;
}
.close-btn {
/* ... */
top: 0;
}
The finished version of this is here: http://jsfiddle.net/boxmein/qq590xz5/5/
good afternoon,
I'd like to create an area placed in the center of the screen using floats with fixed values for both width and height. this area must be centralized even when the screen is resized. my objective is to centralize on the screen the field Password, the buttom Login and an image. these elements must be placed within a float which must be centralized on the screen.
I'd appreciate your help.
thanks,
Here is something I just whipped up:
The position:absolute; div will ALWAYS be center, no matter what browser height/width.
The form I just threw in to prove that it works.
JsFiddle
HTML:
<div>
<form>
<input style='width:45%;float:left;' placeholder='Username'/>
<input style='width:45%;float:right;' placeholder='Password'/>
<input style='width:45%;float:left;' placeholder='email'/>
<input style='width:45%;float:right;' placeholder='favourite color'/>
<p style='clear:both;'></p>
<input type='submit' value='Go'/>
</form>
</div>
CSS:
html,body{
margin:0;
border:0;
}
div{
height:500px;
width:500px;
background:red;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
Apply this to the div,
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
Updated:
See demo
i think this is what you are expecting Here for jsfiddel
all i did is to balance height/width with margin and since it is % and not in px it will always stay in center
<div class="center"><input type="text"><input type="password"></div>
and css
.center {
background: none repeat scroll 0 0 #444444;
height: 50%;
margin: 25%;
position: absolute;
width: 50%;
}
.center input {
display: block;
margin: auto;
width: 100px;
}
I have a really difficult CSS problem. I have the following layout (this is just a fast mockup in Paint):
I need to float the red box to the bottom of it's container. Normally I would use position: absolute; bottom: 0; but that results in the text overlapping with the div, which I don't want. I want the box to behave like in the second image (same situation, but with more text)
Is this even possible? I don't mind dumping support for very old browsers.
Don't abandon position: absolute. Simply add padding to the bottom of the container equal to the height of the footer div.
#outer{
position: relative;
padding-bottom: 55px;
}
#foot{
position: absolute;
height: 55px;
width: 100%;
bottom: 0;
left: 0;
}
Without padding: http://jsfiddle.net/cG5EH/2
With padding: http://jsfiddle.net/cG5EH/1
Try this. calc allows you to make calculations within your css. In the example I am forcing the height to be 100% but this can be any value it could even be height: calc(100% + 80px). Note the spaces around the maths operator.
see http://css-tricks.com/a-couple-of-use-cases-for-calc/ for more details
<html>
<header>
<style type="text/css">
.container{
height:100%;
padding-bottom: 80px;
box-sizing: border-box; //ensures the padding is part of the 100% height.
position:relative;
background-color: blue;
}
.base{
position:absolute;
top:calc(100% - 80px);/*80px arbitary height of the element*/
height:80px;
width:100%;
background-color: yellow;
}
</style>
</header>
<body>
<div class="container">
<div class="base">
sdfgsdfg
</div>
</div>
</body>
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.
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;
}