How can I center a div horizontally and vertically and adjust height to fit content?
fiddle
Here is my html code:
<div class="sprite">
</div>
<div class="content">
<span>close</span>
<div class="centered">
lorem lipsum.....
</div>
</div>
And css:
.sprite{
position: fixed;
left: 0px;
top: 0px;
z-index: 20;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.6;
}
.content{
border:1px solid red;
z-index:21;
position: absolute;
margin:auto;
padding:10px;
left: 0px;
top: 0px;
bottom:0px;
right:0px;
height:30%;
width:30%;
text-align:center;
}
.content span{
position:absolute;
top:0px;
right:0px;}
.centered{
height:100%;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
This is what I want:
Edit .content class to have following css and remove position absolute
height:auto;
overflow:visible;
In your .content class, remove
position: absolute;
and add
margin-top:24%; to align it in vertically middle while taking the height of the content
absolute positioned attrib are rather difficult to style!
Fiddle : http://jsfiddle.net/logintomyk/Xxfhn/
EDIT
Here you go mate
CSS to ammend :
.sprite{
position: fixed;
left: 0px;
top: 0px;
z-index: 20;
width: 100%;
/* height: 100%; */
background-color: gray;
opacity: 0.6;
border:1px solid #FFF;
text-align:center;
}
.content{
border:1px solid red;
position:relative;
z-index: 21; /* change this to less than 20 to overlay under sprite on scroll*/
margin:auto;
padding:10px;
width:30%;
margin-top:24%;
text-align:center;
}
.content span{position:absolute;right:0;top:0;text-align:right; border:1px solid #F00000}
Fiddle : http://jsfiddle.net/logintomyk/Xxfhn/2/
Trick was to align a absolute <span> in relative content class....
.content{
border:1px solid red;
position:relative;
margin:auto;
padding:10px;
width:30%;
margin-top:4%;
text-align:center;
}
.content span{position:absolute;right:0;top:0;text-align:right;}
.sprite{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
background-color: gray;
opacity: 0.6;
border:1px solid #FFF;
text-align:center;
}
does that help
replace your css with mine...
.sprite{
position: fixed;
left: 0px;
top: 0px;
z-index: 20;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.6;
}
.content{
border:1px solid red;
z-index:21;
position: absolute;
margin:auto;
padding:10px;
left: 0px;
top: 0px;
bottom:0px;
right:0px;
width:30%;
text-align:center;
}
.content span{position:absolute; top:0px; right:0px;}
.centered{
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
You are making this hard on yourself, just change the Position to be Relative in the class content, see below;
.content{
border:1px solid red;
z-index:21;
position: absolute;
margin:auto;
padding:10px;
left: 0px;
top: 0px;
bottom:0px;
right:0px;
height:30%;
width:30%;
text-align:center;
}
Related
This question already has answers here:
Transparent half circle cut out of a div
(8 answers)
Closed 8 years ago.
Does anyone have an idea how to apply a background (in css) as you can see on the picture attached ?
Thanks
div {
background:lightgreen;
width:100%;
height:200px;
position:relative;
text-align:center;
padding:100px 0 0 0;
box-sizing:border-box;
}
div:before {
content:'';
position:absolute;
background:white;
width:100%;
height:100px;
top:0;
left:0;
border-radius:40%;
transform:translatey(-50%);
}
<div>div</div>
Something like this?
#wrapper {
position: relative; /* position:absolute needs a relative parent */
}
#main {
width: 100px;
height: 50px;
background-color: green;
text-align: center;
}
#cutout {
width: 100px;
height: 50px;
border-radius: 50px / 25px; /* half of width / half of height
http://css-tricks.com/the-shapes-of-css/
remember to add vendor prefixes if necessary */
background-color: white;
position: absolute;
top: -30px; /* should be -25px, but a little padding looks nicer */
}
<div id='wrapper'>
<div id='cutout'></div>
<div id='main'><br>div</div>
</div>
Check the DEMO
<div id="wrapper">
<div id="inner"></div>
</div>
#wrapper {
width: 600px;
height: 300px;
margin: auto;
margin-top: 50px;
background-color: green;
overflow: hidden;
}
#inner {
width: 1200px;
height: 1200px;
border-radius: 600px;
background-color: #fff;
position: relative;
top: -1100px;
left: -300px;
}
I am trying to insert a close button on top right of the hover image in CSS.
However the image appear in the middle of the hover image. I am unsure of which area i made a mistake.
jsfiddle
these are my css code , also i have insert them to jsfiddle for my demo
body {
margin: 0;
padding: 0;
background: #EEE;
}
#pagecenter {
background-color: transparent;
width: 1200px;
min-width: 1200px;
height: auto;
min-height: 100%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position: relative;
border-collapse: collapse;
}
.wrap {
overflow: hidden;
margin: 50px;
}
/*20 for 5 box , 25 for 4 box*/
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
color: #FFF;
}
/*border width control*/
.boxInner {
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
overflow: hidden;
background: #66F;
}
.boxInner img {
height: 100%;
width: 100%;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
/*This hover is for small image*/
.thumbnail:hover img{
cursor:pointer;
border: 1px solid transparent;
}
/*This hide the image that is in the span*/
.thumbnail span{
position: absolute;
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}
/*This is for the hidden images, to resize*/
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
width:100%; /* you can use % */
height: auto;
padding: 2px;
}
/*When mouse over, the hidden image apear*/
.thumbnail:hover span{
position:fixed;
visibility: visible;
max-width:600px;
top: 0;
left: 0;
right:0;
bottom:0;
margin: auto;
z-index: 200;
}
.close{
position:absolute;
right:-10px;
top:-10px;
display:none;
z-index:1;
}
.thumbnail:hover span .close{
display:block;
}
you will need to give width and height
JS Fiddle
.thumbnail span .close{
position:absolute;
right:-10px;
top:-10px;
display:none;
width:30px;
height:30px;
z-index:1;
}
I wanted a design like this ;
I wrote my css like this :
text here
.my-title:before,
.my-title:after {
background-color: #CCCCCC;
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 32%;
margin-left: -2%;
}
}
This seems correct in local, but becasue of the final } brace it was giving error in production.
How to do it with simpler CSS, so that i can get the desired design !
DEMO
HTML
<div class="maintext">
<div class="subtext">
<h2>Text Here</h2>
</div>
</div>
CSS
.maintext{
width:100%;
height:1px;
border-top:2px solid #6b6a6a;
position:relative;
margin-bottom:30px;
}
.subtext{
width:auto;
height:auto;
text-align:center;
position:absolute;
top:-15px;
right:0;
left:0;
}
.subtext h2{
padding:7px 12px;
background:#ffffff;
display:inline;
color:#000000;
font-family: 'Georgia';
font-size:30px;
}
Change your code to this
Add position:relative to .my-title
.my-title:before{
background-color: #CCCCCC;
content: "";
display: block;
height: 2px;
width: 100px;
position: absolute;
top:50%;
right:100%;
marging:-1px 0 0;
}
.my-title:after{
background-color: #CCCCCC;
content: "";
display: block;
height: 2px;
width: 100px;
position: absolute;
top:50%;
left:100%;
marging:-1px 0 0;
}
I used 2 div's with fixed positioning, and after resize - opera doesen't redraw elements.
#wrapper{
position:fixed;
z-index:10000;
height: auto;
background-color: transparent;
margin: 0;
}
#label {
position: fixed;
bottom:0px;
left: 50%;
background-color: transparent;
z-index: 9999999;
height: 40px;
width: 200px;
border: 1px solid red;
margin-left:-100px;
}
<div id="wrapper">
<div id="label">content</div>
</div>
U can see this bug here
http://jsfiddle.net/6Cm6J/1/
Just load page in Opera browser and resize window.
Pls help
Write this css
Live Demo
css
#wrapper{
position:fixed;
z-index:10000;
height: auto;
background-color: transparent;
margin: 0;
bottom:0;
left:0;
right:0;
}
#label {
position: relative;
bottom:0px;
left: 50%;
background-color: transparent;
height: 40px;
width: 200px;
border: 1px solid red;
margin-left:-100px;
}
So i have a slideshow, here's the css to start with:
#slideshow {
position:relative;
height:300px;
width: 477px;
border: 1px solid #FFF;
float: left;
margin-bottom: 30px;
margin-left: 20px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
And then i have a box, that i want to be on top of the slideshow.. but right now its under the slideshow, even if its position absolute..
#regForm {
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
opacity: 0.75;
-moz-opacity: 0.75; /* older Gecko-based browsers */
filter:alpha(opacity=75); /* For IE6&7 */
}
How should i positioning it right so the div box comes on top of the slideshow and not under?
Add z-index:11; to the #regForm style declaration.