I'm trying center a Block grid inside of a div, but when I apply my CSS class the Block grid is not affected.
I have this visually (The outline is made with a Firefox extension):
Block grid alligment
and I wanna make look like this:
Block grid alligment
As you can see, I need align te Block grid content and the div content also, but I don't know how I can do it.
This is my current code:
<div class="sitios-amigos">
<div class="wrap row small-up-1 medium-up-4">
<div class="column column-block tarjeta-material">
<a src="http://www.conacyt.gob.mx/" target="_blank"><img alt="Página web Conacyt" src="img/conacyt.png"/></a>
</div>
<div class="column column-block tarjeta-material">
<a href="http://www.concytep.pue.gob.mx/" target="_blank">
<img alt="Página web de Concytep" src="img/concytep.png"></a>
</div>
<div class="column column-block tarjeta-material">
<a href="http://www.viep.buap.mx/" target="_blank">
<img alt="Página web VIEP BUAP" src="img/VIEP.png"></a>
</div>
</div>
</div>
CSS:
.sitios-amigos{
background: red;
max-width:11000px;
width: 100%;
margin: 0 auto;
}
.wrap{
width:90%;
max-width:11000px;
margin: 0 auto;
}
.tarjeta-material {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
margin: 15px 10px;
text-align:center;
}
.tarjeta-material:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.tarjeta-material {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
margin: 15px 10px;
text-align:center;
}
.tarjeta-material:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
If the div you want to align center is a child of another div. Here is what you can do.
.parent-div {
text-align: center;
.child-div {
display: inline-block;
}
You can also try without referencing the parent div.
.child-div {
margin-left: auto;
margin-right: auto;
}
center it in the absolute middle try:
.parent-div {
position: relative;
.child-div {
position: absolute;
top: 50%;
/* this will put the left edge at 50%. not the image */
left: 50%;
/* do a negative margin-left of half the width of your block so you have to find that.*/
margin-left: -halfthewidth;
margin-top: -halfthelength;
}
have you tried using bootstrap grid system ? they have so much sample and much easier to use ..
basically my website looks like this: http://i.imgur.com/6xcWTxR.png
I want to put that container with text in it next to the image. How can I do that, and keep it centered? I'll put my code below.
<body>
<div style="width:200px; height:516px; opacity:0.8; margin: 0px auto;"><img style="-webkit-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); -moz-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4);" src="media/images/logo.png"></div>
<div id="nav_menu" style="display:none; background: rgba(0, 0, 0, 0.72); width:300px; margin: 0px auto;">
<center>Endless Void></center>
</div>
</body>
You will more than likely have to use:
margin: 0 auto;
width: /* your width here */
to center your content along with either floating your two DIVs or absolutely positioning them.
When using margin: 0 auto; you need to supply a width value or it will not work as once the browser has a width to work with it can auto calculate the margins for you. You can apply margin: 0 auto to the <body> tag or a another wrapping element like a <div> that contains your image and text DIVs.
A <div> is a block level element that will try to take up the whole width of the page by default. That is why you need to float them or use some kind of positioning that changes that behavior and get the two elements to line up next to one another.
Here is a basic example in a jsFiddle: http://jsfiddle.net/vn34bw84/
Simply by adding inline-block and using a container:
#container {
text-align:center;
}
#container > div {
display:inline-block;
}
<div id="container">
<div style="width:200px; height:516px; opacity:0.8; margin: 0px auto;"><img style="-webkit-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); -moz-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4);" src="media/images/logo.png"/>
</div>
<div id="nav_menu" style="background: rgba(0, 0, 0, 0.72); width:300px; margin: 0px auto;">
Endless Void
</div>
</div>
Put this in your CSS file:
#container {width: 200px;}
#left { border: 1px dotted red; float: left; padding: 0px; margin: 0px;}
#right { border: 1px dotted red; float: right; padding: 0px; margin: 0px;}
/* I have added the border it usually helps to know where each boxes during development then later remove it. Also use padding and margin to get what you want */
And this in your HTML body
<div id='container'>
<div id='left'>
</div>
<div id='right'>
</div>
</div>
Whenever I put in the HTML for my webpage; the #content div is below the widget/sidebar and I already tried position:absolute- and that causes my images to not re-size.
#content {
background: #fff;
margin: 2px 0 2px;
padding: 20px 62px;
width: 68%;
display: block;
float: left;
margin-left: 25%;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-moz-box-shadow: 0px 0px 0px 0px #000000;
-webkit-box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #000000;
}
/************************************************************************************
SIDEBAR
*************************************************************************************/
#sidebar {
width: 25%;
float: left;
margin: 2px 0 2px;
}
.widget {
background: #0b2d7e;
margin: 0 0 0px;
padding: 0px 20px;
/* rounded corner */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
/* box shadow */
-moz-box-shadow: 0px 0px 0px 0px #000000;
-webkit-box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #000000;
}
Same lesson I tried to teach you earlier. You're stuff doesn't add up to 100% because of the paddings. You have 68% + 25% + 25% + more padding = way more than 100%.
If a box is 50% wide and it has a padding of 10px on the left and right, and a 1px border, then you have 50% +20px+2px.
If you have two divs exactly the same as above you have 100% +40px +40px +2px +2px = more than 100%.
Use box-sizing: border-box; to solve your padding and border problem above. Then you just have to take into account the margins.
See the Can I Use It for box-sizing.
Here is a JS Fiddle fixing your code... You also had a stray </aside> that wasn't needed.
http://jsfiddle.net/a2YSa/1/
Note that in the code I provided, box-sizing: border-box; tells the div to calculate its width including padding and borders. Then I have 25% sized left column, and a 50% right content column with a 25% margin = 100%.
Here is a fiddle with 25% sidebar and 75% main with 0 margins.
http://jsfiddle.net/a2YSa/3/
Screenshot of my last fiddle:
Have you tried using firebug to visualize the problem ? I think you should remove your 25% left margin on your #content...
i think the problem is here:
content width: 68%
content margin-left: 25%
sidebar width: 25%
you currently use more then 100%.
if that isn't the problem, please post html code too or check the width AND paddings / margins with Firebug. it's the easiest way.
Any way to get box-shadow on left & right (horizontal?) sides only with no hacks or images. I am using:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
But it gives shadow all around.
I have no borders around the elements.
NOTE: I suggest checking out #Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.
You can get close with multiple box-shadows; one for each side
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
http://jsfiddle.net/YJDdp/
Edit
Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
http://jsfiddle.net/LE6Lz/
I wasn't satisfied with the rounded top and bottom to the shadow present in Deefour's solution so created my own.
inset box-shadow creates a nice uniform shadow with the top and bottom cut off.
To use this effect on the sides of your element, create two pseudo elements :before and :after positioned absolutely on the sides of the original element.
div:before, div:after {
content: " ";
height: 100%;
position: absolute;
top: 0;
width: 15px;
}
div:before {
box-shadow: -15px 0 15px -15px inset;
left: -15px;
}
div:after {
box-shadow: 15px 0 15px -15px inset;
right: -15px;
}
div {
background: #EEEEEE;
height: 100px;
margin: 0 50px;
width: 100px;
position: relative;
}
<div></div>
Edit
Depending on your design, you may be able to use clip-path, as shown in #Luke's answer. However, note that in many cases this still results in the shadow tapering off at the top and bottom. This taper is subtle and depending on your colour scheme and blur radius you may find it acceptable. In this example I have added a 2nd box to make the taper easy to see:
div {
width: 100px;
height: 50px;
background: #EEE;
box-shadow: 0 0 15px 0px #000;
clip-path: inset(0px -15px 0px -15px);
position: relative;
margin: 0 50px;
}
<div>1</div>
<div>2</div>
Negative spread and Masking shadow
CSS box-shadow uses 4 parameters: h-shadow, v-shadow, blur, spread:
box-shadow: 10px 0 8px -8px black;
The blur parameter adds the gradient effect, but adds also a little shadow on top and bottom borders. To get rid of this side effect we can use:
Negative spread reduces the shadow on all borders: you can play with it trying to remove that little vertical shadow without affecting too much the one obn the sides (it's easier for small shadows, 5 to 10px.)
Masking shadows of the same color of the background (white in this case), which allows for ticker shadows. Note that this masking shadow needs to have blur = 0 to fully cover the side effects.
Here two examples, the second one uses Masking shadow:
div{
width: 100px;
height: 100px;
border: 1px solid green;
margin: 10px;
float: left;
}
#example1{
box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black;
}
#example2{
box-shadow:
0 -6px white,
0 6px white,
-7px 0 4px -3px black,
7px 0 4px -3px black;
}
<div id="example1"></div>
<div id="example2"></div>
If none of these approaches suit your needs, you can also add an absolute div on the side of any existing divs.
Just remember to set the container div as position: relative so this absolute div will stay inside.
#example3 {
position: relative;
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid green;
}
.shadow {
position: absolute;
height: 100%;
width: 4px;
left: 0px;
top: 0px;
box-shadow: -4px 0 3px black;
}
<div id="example3">
content here
<div class="shadow"></div>
</div>
Try this, it's working for me:
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
clip-path is now (2020) the best way I have found to achieve box-shadows on specific sides of elements, especially when the required effect is a "clean cut" shadow at particular edges, like this:
.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px -15px);
/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}
<div class="shadow-element"></div>
...as opposed to an attenuated/reduced/thinning shadow like this:
.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);
/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}
<div class="shadow-element"></div>
Simply apply the following CSS to the element in question:
box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
Where:
Apx sets the shadow visibility for the top edge
Bpx right
Cpx bottom
Dpx left
Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the combined result of the blur radius + spread values - Xpx + Ypx) to any edges where the shadow should be displayed.
Another way is with overflow-y:hidden on the parent with padding:
body {
padding: 30px;
}
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}
<div id="wrap">
<div></div>
</div>
You must use the multiple box-shadow; . inset property makes it look nice and inside:
div {
box-shadow: inset 0 12px 15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
<div></div>
This works fine for all browsers:
-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
For a nice inset shadow in right and left sides on images, or any other content, use it this way (the z-index:-1 does a nice trick when showing images or inner objects with insets):
.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}
.innercontent{
z-index:-1
}
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>
In some situations you can hide the shadow by another container. Eg, if there is a DIV above and below the DIV with the shadow, you can use position: relative; z-index: 1; on the surrounding DIVs.
Another idea could be creating a dark blurred pseudo element eventually with transparency to imitate shadow. Make it with slightly less height and more width i.g.
You can use 1 div inside that to "erase" the shadow:
.yourdiv{
position:relative;
width:400px;
height:400px;
left:10px;
top:40px;
background-color:white;
box-shadow: 0px 0px 1px 0.5px #5F5F5F;
}
.erase{
position:absolute;
width:100%;
top:50%;
height:105%;
transform:translate(0%,-50%);
background-color:white;
}
You can play with "height:%;" and "width:%;" to erase what shadow you want.
I tried to copy the bootstrap shadow-sm just in the right side, here is my code:
.shadow-rs{
box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}
This worked for me:
box-shadow: 0 5px 5px 0 #000;
If you want your div to have an arrow on top of it, use this:
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
For horizontal only, you can trick the box-shadow using overflow on its parent div:
.parent{
overflow:hidden;
}
.box-shadow{
box-shadow: box-shadow: 0 5px 5px 0 #000;
}
<div class="parent">
<div class="box-shadow">content</div>
</div>
I want to know how you can set the width of a DIV to span to the size of the text in the div element. Note that the text must be in a div, I cannot put it in a span, and using Display:inline-block messes with my javascript function. The other problem is that the DIV element has a background (see classes flying-text) and that background spans with the parent element width and not the text width inside the div. How to do that?
My code:
CSS:
<style>
.container{
width:910px;
height: 380px;
background: url(http://v4m.mobi/php/images/home_back.jpg) center no-repeat;
margin:0 auto;
color:#FFF;
background-color: #000;
}
.flying-text{
margin-left:-100px;
color: #fff;
font-size: 20px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 0px 10px 10px 10px;
border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
text-align: left;
vertical-align: middle;
padding: 5px 0px;
}
</style>
HTML:
<div class="container">
<div class="flying-text active-text">Text1</div>
<div class="flying-text">Text2</div>
<div class="flying-text">Text3</div>
</div>
Thank You
A couple of suggestions:
Float the divs. e.g. if you gave the .flying-text elements a float:left declaration then they would 'shrink wrap' to their contents. (You would also need a clear:left declaration to clear floats).
Wrap the text in an inline or inline-block element (such as a span), and set your background color on the span. e.g. <div class="flying-text active-text"><span>Text1</span></div>
you are trying to get your to fill the container's width, but you want them to be wrapping the contained text. these are two opposite behaviours.
keep the div as they are, and wrap the text in a (semantically correct) <p> tag. then your css will become:
.flying-text{
margin-left:-100px;
color: #fff;
font-size: 20px;
height: 50px;
text-align: left;
vertical-align: middle;
padding: 5px 0px;
}
.flying-text p {
float: left;
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 0px 10px 10px 10px;
border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
}