On my site I am working on a new page. When I view it it on a bigger screen the box is to the left. I am trying to make it left to align with everything.
CSS:
.contactbox {
width: 200px;
height: auto;
margin-left: 400px;
left: 400px;
padding: 12px
background-color:#F5F5F5;
border: 1px solid #9C9C9C;
text-align: left;
box-shadow: 2px 2px 7px 2px #DBDBDB;
-moz-box-shadow:2px 2px 7px 2px #DBDBDB;
-webkit-box-shadow:2px 2px 7px 2px #DBDBDB;
}
Instead of using margin-left: 400px; use margin: 0 auto;. This will automatically make the left and right margins equal, centering the div.
EDIT:
Move it 400px left like so:
.contactbox {
margin: 0 auto;
// Allow it to be moved relative to its original (centered) position
position: relative;
// Move to the left (left means the left edge not the direction of movement)
left: -400px;
}
Related
I have this page https://apoerin.github.io/crepes-burgers/
As you can see, all images are nicely rounded.
But on mobile Safari images from About section are displaying like this
I have this on img-container
.details .img-wrapper {
height: auto;
}
And this on image itself
.preview{
width: 350px;
border-radius: 50%;
border: 2px solid #8281815e;
margin: 20px auto;
-webkit-box-shadow: 1px 5px 22px -4px #000000;
box-shadow: 1px 5px 22px -4px #000000;
}
I tried set width:350px to img-container, and width:100% to image but it cause change of width in desktop mode in Chrome( only for 2 images of 3)
make .preview fixed height to make it square:
add:
.preview {
width: 350px;
height: 350px;
object-fit: cover;
}
I have centered 3 divs beside each other in the center, however the one on the right seems to be vertically higher than the other 2 divs. Check it out
.x-gallery-center {
width: 100%;
text-align: center;
}
.x-gallery-container {
display: inline-block;
margin: 10px;
width: 250px;
height: 370px;
position: relative;
}
What's the culprit?
Thanks!
If you make the text in the link in the center shorter it seems to fix the problem, make "Konferencia Rozvoj ľudských zdrojov" -> "Konferencia" and the div's will all appear side-by-side.
inline-block default alignment is baseline. Add vertical-align:top to your x-gallery-container class.
.x-gallery-container {
-moz-box-shadow: 0 3px 5px rgba(0,0,0,.1);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.1);
box-shadow: 0 3px 5px rgba(0,0,0,.1);
background-color: #FFFFFF;
display: inline-block;
margin: 10px;
width: 250px;
height: 370px;
position: relative;
vertical-align:top;
}
DEMO
i have a box whose width is variable because it depends of the size of a container. The box has no content so im using margins to define its width relatively but it is not working. This is my code:
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
content:"";
border-top: 2px solid red;
margin: -20px 0 7px -7px;
position:absolute;
width:auto;
}
This is my fiddle http://jsfiddle.net/x7rrj/3/
Please notice how the red border goes outside of the box without honoring the right margin and if i set the width to auto then the red border wont display at all. Is it possible to solve this using CSS only?
Thank you.
I looked at the fiddle and noticed the top red border wasn't showing.
It had a line with the padding: 0 100%;
Removing that line seem to fix your issue.
Is this the final result you wanted?
http://jsfiddle.net/z5952/
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
border-top: 2px solid white;
content: "";
margin: -9px 0 7px -7px;
position: absolute;
width: auto;
}
Is this something you are looking for?
http://jsfiddle.net/x7rrj/16/
since you are using position:absolute to position the line, you may also use top, right and left to control the position and width as well:
.box:before {
border-top: 2px solid red;
content: "";
padding: 0 100%;
position: absolute;
top: 3px;
right: 3px;
left: 3px;
}
Okay, i found the answer thanks to an idea given to me by Edward. The problem was solved by replacing margins with top, left and right.
.box {
background: url("back.jpg") no-repeat scroll 0 0 / cover transparent;
border: 4px solid black;
box-shadow: 0 0 0 5px #826200;
outline: 3px solid white;
overflow:hidden;
}
.box:before {
border-top: 2px solid white;
content: "";
width: auto;
position: absolute;
top: 3px;
right: 3px;
left: 3px;
}
Is there a way to make my #inner_div stop appearing behind the #main_div if it exceeds a certain width? I tried removing the overflow:hidden from #main_div in css but that causes the background of the #main_div to load very slowly, so I would like to find another solution if possible. Thanks
Main div css:
#main_div {
-moz-border-radius:5px;
-moz-box-shadow: 0 3px 3px rgba(255, 255, 255, 0.1), 0 3px 0 #BBBBBB, 0 4px 0 #AAAAAA, 0 5px 3px #444444;
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #FFFFFF;
margin: 20px auto;
overflow: hidden;
padding: 10px;
width: 970px;
}
Inner div css:
.inner_div{
font-size:12px;
font-weight:normal;
font-style:normal;
margin: 5px 0px 0px 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
z-index: 0;
visibility: hidden;
position: absolute;
/* white-space: nowrap;*/
text-align: left;
padding: 5px 5px 5px 5px;
width:200px;
}
Instead of using overflow:hidden, you should use the new "micro clearfix".
Go here: http://nicolasgallagher.com/micro-clearfix-hack/
In your markup, you simply just add the class "cf" on #main_div
How would you achieve an 10px high oval blurry shadow below a 200px box?
.box {
width:200px;
height:200px;
background: #c00;
position:relative;
}
.box:before {
content:'';
position: absolute;
bottom: -20px;
left:20px;
width: 210px;
height: 10px;
background: none; /*This cuts off some portion of the box shadow*/
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
-webkit-box-shadow: 0 15px 10px #000000;
-moz-box-shadow: 0 15px 10px #000000);
-0-box-shadow: 0 15px 10px #000000);
box-shadow: 0 15px 10px #000000;
}
http://jsbin.com/uqugob
The above code is almost perfect, except that I want a more thin oval blurry shadow, and remove the disturbing white background of :before.
Thanks, finally I got it as expected, almost, except that the left and right should be more blurry:
http://jsbin.com/uqugob/4
Thanks
removed the styles with vendor-prefixes (they were annoying, you can add them back using what i provided) but here's the shadow's code:
.box:before {
content:'';
position: absolute;
bottom: -50px;
left:20px;
width: 210px;
height: 30px;
background: #333;
border-radius: 200px / 30px;
box-shadow: 0 0 10px 10px #333;
}
I always like a challenge. Here's what I came up with: http://jsbin.com/uqugob/3/edit
Like #Joseph, I got rid of the vendor prefixes.
.box:before {
content:'';
position: absolute;
bottom: -10px;
left:20px;
width: 210px;
height: 8px;
background: transparent; /*Without a color, the box shadows fails*/
border-radius: 100px / 5px;
box-shadow: 0 25px 25px #000000;
}
I try to change the code for showing shadow after 'hover' event , doesn't work
try using:
margin:0 auto;
to make a shadow in the center and want to reduce the shadow from both left and right sides. Tried assigning it width less than the width of the div/box.