I would like to know how can i center this box?
HTML Code:
<div id="box"></div>
CSS Code:
#box
{
width : 30%;
height : auto;
overflow : auto ;
border : 1px solid #C5C5C5;
background : #F8F8F8;
position : absolute;
left : 33.6%;
border-top : none;
text-align : left;
display : none;
}
Try the following CSS:
#box
{
margin: 0 auto;
width: 100px; /* Or some other width */
}
Since #box is absolutely positioned, you would center it like so:
#box {
left: 50%; /* centers #box in its containing element */
margin-left: -15%; /* half the element's width (30%) */
}
Those properties are in addition to the ones you've set already.
The idea is to position #box's left edge in the center of its containing element (left: 50%), then move #box left by half its own width by giving it a negative margin (margin-left: -15%).
This works for me:
.Box {
background-color: lightgrey;
width: 400px;
border: 25px solid grey;
padding: 25px;
margin: 25px;
align-content:center;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Related
I want to create a top-right border of a div like the following picture
I am pretty new to css. Could anyone give me a pointer to this?
You can use an absolutely positioned ::after pseudo element ( or an element in your markup ) to create the green area. Setting the upper right border radius and overflow: hidden; will finish the job.
body {
background: #ddd;
}
div {
background: white;
width: 100px;
height: 50px;
}
.funky-border {
border-top-right-radius: 30px;
position: relative;
overflow: hidden;
}
.funky-border:after {
content:'';
background: green;
width: 20px;
height: 60px;
transform: rotate( 135deg );
position: absolute;
top: -20px;
right: 0;
}
<div class="funky-border"></div>
Here is an easy way with one element:
.box {
width:200px;
height:100px;
border-top-right-radius:30px;
background:
linear-gradient(to top right,transparent 49%,green 50%) top right/50px 50px no-repeat,
gray;
}
<div class="box">
</div>
Can someone help me regarding this http://www.alerto24.com/
Why is there a wide space to the right and the horizontal scrollbar is visible?
Both your footer and content section have a right margin of -100% which causes the scrollbar. Disable that CSS property for both elements and the scrollbar is gone.
please change below css
#content::before {
background: rgba(0, 0, 0, 0) url("../images/site-bg-b.jpg") no-repeat scroll 50% 0;
content: " ";
/*left: -100%;
position: absolute;
right: -100%;
top: 0;
bottom: 0;
z-index: -1;*/
}
#footer::before {
background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
border-top: 1px solid #032d34;
content: " ";
/*left: -100%;
position: absolute;
right: -100%;
top: 0;
bottom: 0;
z-index: -1;*/
}
I think there is a structure problem in your #footer and #content.
For example. You put background properties to apply a 100% background in :before and a max-width: 920px combined with width: 100% in footer element, which appears like a contradiction.
I suggest you these modifications :
You remove #content:before and #footer:before properties. You can create a container div in your #content element which contains the width of the website like this :
#content .container {
width: 920px;
margin: 0 auto;
}
And you apply background properties on #content which has width: 100%;
#content {
width: 100%;
background: blue; /* you put your background properties on it */
}
Also, you do the same for footer :
#footer {
position: relative;
z-index: 1;
width: 100%;
/* max-width: 920px; remove this line */
background: blue; /* you put your background properties on it */
margin: 0 auto;
padding: 30px 0 15px;
color: #fff;
}
#footer .wrap {
position: relative;
margin: auto; /* you use this property to center this container as it is on the website */
padding: 0 0 50px;
font-size: 0;
width: 920px; /* you apply width on this container instead of the #footer container */
letter-spacing: -5px;
}
EDIT : I've made a JSFiddle to explain my thoughts
See it here
Why there a difference between setting a value in left and right for a div positioned as absolute.
When i set a value for right it's okey the text fill right in the pseudo class FIDDLE1.
But not with left FIDDLE2.
I have to set a width FIDDLE3.
So how can i use left without setting a width and get result as FIDDLE1 ?
CSS:
div {
width: 100px;
height: 100px;
position: relative;
}
div:after {
content: 'ce champs est obligatoire';
position: absolute;
left: 100px;
}
The issue is that the div which is set to relative has a fixed width of 100px, if you were to make the width of that div wider, such as 300px, so that the content after were to fit, it would not wrap the text.
Give the div after white-space:nowrap; like this: http://jsfiddle.net/jme11/6avYE/ to avoid the problem.
OR,
Another option would be to wrap the div in another div and set the wrapper div to have the position: relative instead of the inner div like this: http://jsfiddle.net/jme11/PhVLj/
div:not(div>div) {
width: 500px;
height: 100px;
position: relative;
}
div>div {
width: 100px;
height: 100px;
background-color: aliceblue;
border: 1px gray solid;
}
div>div:after {
content: 'ce champs est obligatoire';
position: absolute;
left: 100px;
/* right: -167px;
width: 157px;*/
background-color: rgb(230, 122, 38);
color: white;
padding: 8px 10px;
border-radius: 5px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 13px;
}
I looked around for a solution and it seems that there are some around, but I don't seem to make it work, any idea will be greatly appreciated.
I've got three divs into a div container (centered) used as a background (z-index : -10;). I would like to float another div (it will be another container z-index : 5;) on top of the previous ones.
HTML below:
<div class="div-backall ">
<div class="div-backtop">
<p>1111</p>
</div>
<div class="div-backmid">
<p>2222</p>
</div>
<div class="div-backbottom ">
<p>3333</p>
</div>
</div>
<div class="div-main">
<p>Main text goes here</p>
</div>
CSS below:
.div-backall {
width: 90%;
height: 100%;
z-index : 1;
margin-left : auto;
margin-right : auto;
position : absolute;
}
.div-backtop {
width: 90%;
height: 20%;
background-color: #D8E4F8;
margin: -5px 0 0 0;
position : absolute;
margin-left : 5%;
margin-right : 5%;
}
.div-backmid {
width: 90%;
height: 75%;
background-color: #F1EFE2;
margin: 14% 0 0 0;
position : absolute;
margin-left : 5%;
margin-right : 5%;
}
.div-backbottom {
width: 90%;
height: 5%;
background-color: #D8E4F8;
margin: 70% 0 0 0;
text-align: center;
position : absolute;
margin-left : 5%;
margin-right : 5%;
}
.div-main{
width: 70%;
height: 85%;
background-color: #FFFFFF;
margin-left : 10%;
margin-right : 10%;
text-align: center;
z-index : 2;
border : thin solid Black;
position : absolute;
margin-top : 5%;
border-radius: 5px;
}
I can obtain the floating effect using margin-top : -800px; but it's a rubish solution. Also I cannot get the later centered. Is it possible this with CSS only? Shall I look to a js solution?
Thanks,
Lee
z-index is only work with position relative, absolute & fixed. Write like this:
.div-backtop,
.div-backbottom,
.div-main{
position:relative;
}
.div-backtop{
z-index:1;
}
.div-main{
z-index:2;
}
To use z-index you have to use position absolute for every div because the relative position doesn't support z-index
please make sure how the output could be?
i am not able to do how to give answer for your problem...as i understand i given one solution..hope you will get from this
margin-top : -700px;
position:relative;
please make changes in this
.div-main{
width: 70%;
height: 85%;
background-color: #FFFFFF;
margin-left : 10%;
z-index : 5;
border : thin solid Black;
position : relativ;
margin-top : -700px;
border-radius: 5px;
}
I am trying to vertically center one div (containing a search bar) inside another (a top banner). I was under the impression that to do so you did the following:
#banner {
height: 35px;
width: 100%;
}
#searchbar {
height: 15px;
position: relative;
top: 50%;
margin-top: -7.5px; /* half of the height */
}
This works fine until you add the margin-top at which point it is applied to the #banner as well.
Is there an alternative way to do this, or am I just doing it wrong?
Here's a jsFiddle of my actual code.
I use line-height with the value being the same as height of parent div.
As seen here: http://jsfiddle.net/vkJ78/24/
CSS:
#banner {
background-color: #770E17;
height: 35px;
width: 100%;
border-bottom: 1px solid #333;
}
#src {
width: 300px;
height: 15px;
border: 1px solid #333;
padding: 3px;
}
#srcdiv {
width: 308px;
margin: 0px auto;
position: relative;
line-height: 35px;
}
EDIT: Per recommendation from NGLN, this will also fix horizontal centering, #srcdiv and #src having equal widths.
You have to add overflow: hidden to #banner. To clear the float, I guess.
Then, modify the negative margin to margin-top: -11px in #srcdiv (you have to sum the div height, the border, and the padding for the total height)
http://jsfiddle.net/vkJ78/1/
Give margin:0px and padding:0px and remove margin-top
body {
margin:0px;
padding:0px;
}