I'm trying to give pictures a really smooth shadow, that doesn't touch the pictures corners.
I tried this by giving the pictures parent div a border-radius and a box-box shadow, but now the parent div is higher than the picture.
I would also appreciate if you got a better solution for a smooth shadow.
JSFiddle
.box {
margin:20px;
border-radius:20px;
box-shadow:0 0 30px rgba(0,0,0,0.7);
}
.box .box-preview {
width: 100%;
border-radius:5px;
}
<div class="box">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">
</div>
That's because the image is an inline element, so it is placed on a text line inside the div. The image is placed on the baseline of the text line, so there is some more space between the image and the bottom of the text line.
Make the image a block element to get rid of the space:
.box {
margin:20px;
border-radius:20px;
box-shadow:0 0 30px rgba(0,0,0,0.7);
}
.box .box-preview {
display: block;
width: 100%;
border-radius:5px;
}
<div class="box">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">
</div>
DEMO : http://jsfiddle.net/ajffyafm/
.box {
margin:20px;
border-radius:10px;
box-shadow:0 0 30px rgba(0,0,0,0.7);
}
.box .box-preview {
display: block;
width: 100%;
border-radius:5px;
}
I think this is doing what you want :
JSFiddle
Here is the entire CSS :
.box-preview {
margin:20px;
border-radius:20px;
box-shadow:0px 0px 30px rgba(0,0,0,0.9);
width: 100%;
border-radius:0px; // Edit here to change the image border radius.
}
Related
I have a link and an inline div next to it (to the right). I want the div to occupy the rest of the space to the right. Is there a way to do that?
what<div style="display:inline-block;width:200px;border:1px solid red">hello</div>
If you can wrap a span around the div, like:
what<span><div>hello</div></span>
jsFiddle example
You can apply this CSS to get what you're after:
a {
background: #ccc;
float: left
}
span {
display: block;
overflow: hidden;
padding: 0 4px 0 6px
}
div {
width: 100%;
display:inline-block;
border:1px solid red
}
You could wrap everything within a div and give it table and table cell to children:
http://jsfiddle.net/T4Qcd/
.inner{
border:1px solid red;
display:table-cell;
width:100%;
}
a{
display:table-cell;
}
.wrapper{
display:table;
}
You can do so by applying width to both anchor tag as well as the div.
a{
width:10%;
}
div{
width:90%;
}
Your html would be.
what
<div style="display:inline-block;border:1px solid red">hello</div>
I seem to have a difficulty in putting the button i made in the center of the screen. Here's the source code.
View Products
Here are the styles
/*header button styles*/
a.header-button {
display: inline-block;
background-color:#
}
a.header-button:hover {
color: #e8ddc8;
text-decoration: underline;
}
.header-button {
background-color:#031634;
color:#e8ddc8;
padding: 10px 5px 10px 5px;
border-radius: 5px;
text-align:center;
}
You see, even though I put text-align:center in the .header-button, the button does not position itself at the center. (See image below)
Can anyone help me?
Try this. Working Fiddle
a.header-button {
display: block;
background-color:#;
margin:0 auto;
width:100px;
}
One solution: http://jsfiddle.net/xzY5j/
css:
.header-button {
background-color:#031634;
color:#e8ddc8;
padding: 10px 5px 10px 5px;
border-radius: 5px;
}
.container {
text-align:center;
width: 100%;
padding: 50px;
background-color:#ccc;
}
}
HTML
<div class="container">
View Products
</div>
Other suggestion is:
Binita Tamang solution she wrote it before I had a chance so I will let her get the credit for it :)
You should give the container or the parent element text-align:center
jsfiddle
HTML
<div class="parent">
View Products
</div>
CSS:
.parent{
text-align:center;
}
If you want to put a button or any element on middle of the screen,then use position absolute an give the top 50% and left 50% now,give margin just half of its width and height in minus :
Something like this :
CSS
button{
position:absolute;
top:50%;
left:50%;
width:100px;
height:30px;
margin:-15px 0 0 -50px;
}
And if only middle from left then :
button{
position:absolute;
top:some_top_in_px;
left:50%;
width:100px;
height:30px;
margin:0px 0 0 -50px;
}
Fiddle DEMO
I'm currently learning HTML. I'm trying to add 3 images inside a div, the images need to have the same amount of space between them. How to do this?
Example: https://docs.google.com/drawings/d/1WZdL0WVz-VndX2qP0Ig0S8fZnCGW2k37RHvWXLdgWz0/edit?usp=sharing
The code I currently have:
<style type="text/css">
.maindiv{
position: relative;
width:90%;
height:50%;
border-style:solid;
border-color:Red;
border-width:2px;
}
.imgbott{
height:auto;
width:auto;
max-width:200px;
max-height:200px;
float:left;
text-align: center;
}
</style>
<body>
<div class="maindiv">
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
</div>
</body>
Code runing: https://script.google.com/a/macros/itcld.com.br/s/AKfycbyjeAIFhKnAXzvXd8lS3S-ND4H0n63i-FBxr-i9Z1omeFmBYtA/exec
Thank you.
Change your css to:
.imgbott{
margin: 0px 10px;
height:auto;
width:auto;
max-width:200px;
max-height:200px;
float:left;
text-align: center;
}
The margin: 0px 10px means 0px margin to the top and bottom, and 10px margin to the left and right. Maybe one would expect 20px margin between the divs then, but there is a effect called "margin collapsing" which prevents that.
is this what you looking for
http://jsfiddle.net/Gfnjz/
.box {
display:table;
table-layout:fixed;
min-width:900px; /* some minimum width is a good idea. */
border-spacing:20px 0; /* note that spacing is also applied to right and left ends */
background-color:#666;
margin:0 auto;
}
.box div {
display:table-cell;
width:33%;
vertical-align:middle;
border:1px solid #bbb;
background-color:#eee;
padding:30px;
}
You can do something like this:
.divName{
width:300px;
display: inline-block;
margin: 0 20px 0 0;
float: left;
}
Then for the last box, apply a .lastBox class as well to force no margin, that way they are perfectly centered, assuming your parent container is centered that is:
.lastBox{
margin-right: 0;
}
The HTML:
<div class="divName">
<p>stuff</p>
</div>
<div class="divName">
<p>stuff</p>
</div>
<div class="divName lastBox">
<p>stuff</p>
</div>
if you only want the same space between the "imgbott" divs, set their margin instead of width attribute.
Your class will looks like
.imgbott{
margin: 0px 10px;
float: left;
text-align: center;
}
.imgbott a
{
display:block;
}
Then doesn't matter what is the width of the images inside, the space will always be 20px between the images.
In additional you can remove the margin-left of the first image using the first-child selector
.imgbott:first-child {
margin-left:0px;
}
You can achieve this result by using inline-blocks and text-align: justify, with adding some fake content before and after the divs to be aligned via pseudo-elements:
.maindiv{
width:90%;
border: 2px solid red;
text-align: justify; /* turns on justification 'magic' */
line-height: 0; /* removes extra space below divs because of extra line */
}
.maindiv:before {
font-size: .1px;
content: 'i'; /* adds nearly invisible fake content in the beginning of the line */
}
.maindiv:after {
font-size: .1px;
content: 'i i'; /* adds nearly invisible fake content in the of the line */
word-spacing: 99in; /* huge word-spacing assures that the 2nd 'i' wraps to the next line making 'justify' work */
background: #ccc;
}
.imgbott{
display: inline-block;
line-height: 1; /* restore the normal line height inside divs */
}
JSFiddle
Optionally, you can prohibit the wrapping of the divs if the container is narrower than the sum of their widths by adding white-space: nowrap to the container and normal to its :after: see edited JSFiddle
This solution may look a bit tricky, but it works for arbitrary number of blocks of arbitrary (possibly different) widths.
I know there is like 100 of topics made and I've tried all 100's of them and I just can't get it to work, Aligning the image in the middle, if you check in to
http://one1.no-ip.org/index.php?hitta=tanto&page=search
you'll see that the logo is at the top of the screen and whatever I do I just can't make it align correctly. I'm sure something is interfering but I just can't find out what, I even made a fiddle to check if the method im using is working and it is
http://jsfiddle.net/UJATF/
Working example with the image in the middle of the div element
CSS
.logo{
background:white;
position:absolute;
width:105px;
height:90px;
line-height:90px;
left:180px;
margin-top:20px;
line-height:90px;
text-align:center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0px 0px 0px 1px white,inset 0px 0px 10px -4px black;
z-index:1000;
overflow:hidden;
}
.logo img{
vertical-align:middle;
max-width:90px;
max-height:40px;
}
HTML
<div class="logo">
<img src="http://www.tantobil.se/images/logo.png">
</div>
so all help would be very much appreciated
Define your anchor link display : inline-block and give to margin-top
as like this
.logo > a {
display: inline-block;
margin-top: 22px;
}
Results is
--------
Is your are using dynamic with of img than used to this
Second option is
.logo > a {
display: table-cell;
height: 90px;
text-align: center;
vertical-align: middle;
width: 105px;
}
Since you're using fixed heights in your css, why don't you just use simple math to determine the top position of the logo?
.content is 121px high,
.logo is 90px high
The difference is 31px, which means you need a top offset of 15.5px
Also, set the .content to position: relative so you position the logo relatively to .content's top.
Looking at my attached image, I am trying to get the darker rectangle shape, containing an image (with red border), to be aligned at the bottom center of the lighter grey square.
I have tried setting the dark rectangle to position:absolute with a 0px bottom but then I lost my center alignment using margin:0 auto. I've also tried just using a vertical-align:bottom but still won't play ball!!!
What is the CORRECT way of doing this? One thing to bare in mind is that where I have used the sizes 170 x 105, these are actually unknown as they are dynamically produced elements, size is variable.
This is my code so far:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; vertical-align:bottom; }
.item_preview_img_wrap img { margin:0 auto; border:solid 5px #FF0000; }
<div class="gallery_item">
<div class="item_preview">
<div class="item_preview_img_wrap">
<img src="asf.jpg">
</div>
</div>
<div class="item_options">
options
</div>
<div class="item_info_header">
<div class="date">Date</div>
<div class="item">ID</div>
<div class="clear"></div>
</div>
<div class="item_info_main">
<p class="caption">Caption here</p>
<p class="subject"><strong>People:<strong> People here</p>
</div>
</div>
If you want to display image at bottom of light grey box then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Note: -halfofimagewidth is half of size of your image for example if your image is 100px and border is 5px then it should be -55px
If you want to display image at bottom of dak grey box at center then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; position: relative; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Let me know if you still find any issue
Is the width of the inside box always going to be relative to the outer box? If so you could use a percentage for your left value like so...
http://jsfiddle.net/hcharge/zYprr/
Write like this:
.item_preview_img_wrap {
width:170px;
height:105px;
position:absolute;
left:50%;
margin-left:-85px;
bottom:0;
background:#CCC;
}