how to make the blue box always displays in the middle of the red box. when I resize the window, the blue box is in a wrong position.
online sample: http://jsfiddle.net/NVjPF/
. Thanks
<div id="box1">
<div id="box2"></div>
</div>
#box1{
display: block;
background:red;
background-size: 100%;
position: relative;
padding-bottom: 60%;
}
#box2{
display:block;
background:blue;
position:absolute;
height:70px;
width:70px;
right:50%;
top:50%;
}
As stated by the others, you need to add
margin:-35px -35px 0 0;
for the box to be centered correctly. It doesn't matter what the screen size is, it will never be truly centered to the middle of the box. The reason for this is because the browser is taking the upper right corner of the box, and putting that in the middle of the box. So in some sense, the box is centered. If you were to have the box set to left:50%; instead of right:50%;, then the box would be centered by the upper left hand corner. So to fix this problem, you take half the width and height, because that will equal the center of the box.
Also, to account for the box breaking out of the red box, I added overflow:auto; to create the scrollbars when needed. If you don't want the scrollbars, then you can change it to overflow:hidden. Either one will work if you don't want any protrusion.
http://jsfiddle.net/burn123/NVjPF/3/
You can use negative margins to account for the difference. In this case, you can add:
margin-right: -35px;
margin-top: -35px;
The 35px stems from half of the size of the inner element. See http://jsfiddle.net/NVjPF/1/ for the live demo.
Try this. Basically, you move the box half way over inside the parent and then bring it back dead center using negative margins equal to half of the box's width and height.
#box2 {
display:block;
background:blue;
position:absolute;
height:70px;
width:70px;
right:50%;
top:50%;
margin:-35px -35px 0 0;
}
Try that, works well for me:
#box2 {transform: translate(-50%, 0%);}
Related
I am in the process of creating a simple placeholder page to announce a new website. The page consists of nothing other than
a centered background logo image
a "catch phrase" immediately below that image
I thought this would be easy - I place a positioned background image with its size specified and then place an absolutely positioned h1 header to get the "catch phrase" right below the background image.
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5%;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5%;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
This is working to the understanding that
background-origin:border-box;
background-position:center 37.5% with
background-size:auto 25% would
yield an image with
The background image centered horizontally with its top left hand corner at 37% of its container height (set to 100vh)
The absolutely positioned h1element is at (37.5 + 25)% from the top
For good measure I set padding:0and margin:0on everything. However, the end result is not quite as expected - there is still way too much space between the bottom of the logo image and the top of the h1header. Clearly, I am misunderstanding some aspect of background positioning and/or size here. I'd be much obliged to anyone who might be able to put me on the right track
When using percent for background images, it doesn't work at all as one first think.
When you set background position using percent, that positions the image such that X% of the way across itself aligns with X% of the way across the element. This article at CSS Tricks shows it quite well: percentage-background-position-works
Use viewport height units vh instead
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5vh;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5vh;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
I want a border on the right hand side of a div.
I do:
<div class="span6" style="border-right: 2px solid #727272;">
the things is I'd like my border not to run to the top and bottom of the div. Maybe 5px from the top and 5px from the bottom. Or 90% of the height of the div. How do I do this?
Thanks
You can use a pseudo element to hold the border. The following would make the "border" be 90% of the height of the parent element:
http://cssdeck.com/labs/kyrvt8hf
div {
position: relative;
}
div:after {
display: block;
content: '';
position: absolute;
top: 5%;
bottom: 5%;
right: 0;
border-right: 2px solid red;
}
I could be wrong, but I don't believe there is any way to really make this happen that you would probably want to roll with. In fact, I thought of three "hacky" ways that might work, but all three can't get you to the desired state, assuming a variable height.
Assuming a fixed height, you could create a 2px wide by 90% div height image of the color you want, then set it as the background image of the div. Something like:
.span6 { background: #fff url(bgBorder.png) no-repeat right center; }
Update
A variation based on what Tyblitz said in the comments. This allows for dynamic height. I am still inclined to go with the :after option, as it keeps your DOM cleaner, but in case that is not possible:
http://jsfiddle.net/designingsean/bsbgX/1/
HTML:
<div class="span6">The content div<div class="border"></div></div>
CSS:
.span6 {
width:50%;
height:400px;
background-color:#ddd;
position:relative;
padding:10px;
}
.border {
width:2px;
background-color:#222;
position:absolute;
top:5%;
bottom:5%;
right:0;
}
Note that to make it a fixed distance (say, in pixels), just change the top and bottom from a percentage to the px you want. See http://jsfiddle.net/designingsean/bsbgX/2/ for the example.
This picture show's how border's work
You can either set margin to curtail the border or set padding to extend the border. Currently there is no option in CSS to target the border and make it bigger or smaller(not talking about width obviously). You can however use padding, margin, another div or pseudo element's to reach the desired effect.
Tried to make a floating div, with a -1 z-index to be in the background all the time, but when I make it's position absolute, then it disappears. Also want to place it in the middle with y-repeat image.
.perchament{
position:absolute;
margin:0 auto;
height:100%;
background: url("image_assets/parchment.png") repeat-y;
margin-top:25px;
z-index:-1;
}
It disappears because there is no content in it and no width specified.
Add this to your CSS:
left: 50%;
width: 100px;
margin-left: -50px;
The width needs to be set and the left margin is always half of that.
DEMO
As others have said, why not just do a background image on the body?
body {
background: url("image_assets/parchment.png") center repeat-y;
}
In this particular case, you'll need to add a width to your div (since it's absolutely positioned).
However, what's wrong with a background rule on the body element or something similar?
Absolutely positioning elements should us "top" and other such positioning controls instead of margin etc and set a width and height.
.perchament{
position:absolute;
top: 0;
left: 0;
width: 500px;
margin:0 auto;
height:100%;
background: url("image_assets/parchment.png") repeat-y;
margin-top:25px;
z-index:-1;
}
Does that help?
I'd also avoid using a minus z-index. Instead, you could set this item to z-index: 1 and then set the container above it (with everything else inside) to z-index: 2.
OR, if it's just a background image you want, you could simply put that onto the BODY tag of the document instead of a div. The BODY or HTML element is always the bottom of the stack.
I know this has probably been asked a million times, but how do I center a div that has absolute positioning.
I have tried this and it does not center it.
You can view the site here password:springy88
#logo{ position:absolute; width:243px; left: 50%; margin-left: 121.5px; }
Centering a div is very easy of you know the width and height of the Div.
Assuming that your div has 100width and 100 Height
div {
position:absolute;
left:50%;
top;50%;
margin-left:-50px;
margin-top:-50px;
}
if you are not sure about the dimentions , then probably you can go for a jquery method.
You need to use negative margins - margin-left:-121px. That will center the logo. After that you'll need to properly position your nav...
You could set the % value half of 50%, ie: left: 25% or right: 25%; Providing the wrapper is twice the width of the element.
Test Here..
How do I display a div over other content of webpage? This div must be centered vertically and horizontally as in this example:
I tried this:
<div style = "position: absolute; top: 50%; left: 50%;">DIV content</div>
In this example only the left corner is centered and not div itself.
The following should work.
div{
position:fixed;
width:500px;
height:600px;
margin:-300px auto auto -250px;
top:50%;
left:50%;
text-align:center;
}
The -300 pixels and -250 pixels are the negative half of the height/width of the div respectively.
There may be a better way of doing this, but this is a method I used a while back.