I have a series of images I want to distribute evenly across a div. I've seen many questions similar to this with very good answers, but many use padding/margins to achieve this, which leaves empty gaps on the left and right edges of the containing div.
Right now I'm applying a margin-right to each image, which works except for the very last image, which has an ugly empty gap on its right side. I could just apply a different class to the last image with no margin, but I'm hoping for a cleaner solution. What other options do I have?
#photo_bar {
margin-bottom:15px;
width:785px;
}
#photo_bar a {
margin-right:7px;
}
.photo_bar_image {
border-radius:9px;
background-size: 125px;
display: inline-block;
width: 125px;
height: 125px;
text-decoration: none;
transition: background-size 0.2s, background-position 0.2s;
}
.photo_bar_image:hover {
background-size:140px;
background-position: -5px -5px;
}
<section id='photo_bar'>
<a class='photo_bar_image'></a>
<a class='photo_bar_image'></a>
<a class='photo_bar_image'></a>
</section>
What about this one?
img:last-child {
// change the margin here!
}
This will be applied to the last image element in the container!
For more: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
Related
This is my first question here on Stackoverflow so be kind :3 i'm having a problem with a website in which i cannot manage to make a div get the outer li height. I cannot link directly the website because u would need a private VPN access but i will try to give more information possible. This is the code i'm dealing with:
#boxdocenti ul.elencodocenti li div {
margin: 15px auto;
border-radius: 50%;;
max-width:90%;
height: auto;
/*background-color: #ff6319;*/
transition: all 0.5s ease 0s;
}
#boxdocenti ul.elencodocenti li div img {
max-width: 85%;
}
#boxdocenti ul.elencodocenti li div:hover {
background-color: #ff6319;
}
The circle div has an img inside it and i don't know why but the circle div becomes an OVAL! when i go in hover it gives to the image a strange oval border instead of a perfect circle. any suggestions? sorry for the lack of links but it's in a VPN network.
I can't see more relevant CSS and HTML so there are some options.
Option 1. Show <li> as a block element, expand <div> height and add more border-radius. Try adding this properties:
#boxdocenti ul.elencodocenti li {
display: block;
}
#boxdocenti ul.elencodocenti li div {
height: 100%;
border-radius: 100%;
}
Option 2. Absolute positioning. This will stretch the <div> to the <li> border.
#boxdocenti ul.elencodocenti li {
display: block;
position: relative;
height: 200px; //fixed height
}
#boxdocenti ul.elencodocenti li div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
With your css, what will determine whether #boxdocenti ul.elencodocenti li div is a circle or an oval is the height of your image. If your image is a square, it will produce a circle. If your image is a rectangle, it will produce an oval. Your containing div will take on the height of your image.
This is the closest that I could come to the behavior your talking about:
Link to demo
Your code is somewhat lacking since its only the CSS.
Yet what you describe seems like an display: issue.
What I think is happening: your element is by default an inline or inline-block element but when you hover the display property changes.
So I think adding (or removing) the display property should help.
Summary
Add a display:inline-block; on the hover so that it keeps its size and not extends to the full length possible of its parent.
If I wrote this:
#element {
margin-top: -50px;
}
By general rule, it would move the element upwards by 50 pixels.
Recently, I accidentally used this bit of code instead:
.elements {
margin: -50px;
}
So I had these <div> tags, one beneath the other, and by writing margin: -50px; they all somehow got closer together.
But thinking in retrospect, I don't really see how this worked. The size of the elements didn't change (as far as I know, as they contained child elements, and the child elements were closer together as well), and they didn't seem to zoom in size or anything.
I did some research online, but all I could find was for negative margins on one or two sides at most.
Is there an explanation to this? What actually happens? Maybe it's because I'm using Google Chrome, and maybe nothing happens in other browsers?
Tha margin is not added to the appearance of the element but rather to its bounds, so basically your element looks e.g. 200x200 but its bounds are equal to that of an element of 100x100 since you substract 50px from every side. Try it for yourself:
Fiddle here.
HTML:
<div class="e1"><div></div></div>
<div class="e2"><div></div></div>
CSS:
body {
padding: 100px;
}
div {
width: 200px;
height: 200px;
float: left;
margin: -50px;
}
.e1 {
background: red;
}
.e2 {
background: yellow;
}
.e1>div, .e2>div {
width: 100px;
height: 100px;
outline: 1px solid blue;
margin: 50px;
}
I've added a padding to the body to make the elements be pushed down so you can see the overlap they cause. Updated so you can see the bounds of the squares that result.
I have some images on a page that I want to turn into links for projects that I have done but they don't seem to want to lay flush with one another.
.projectimage {
transition: 2s;
background-color:#FFF;
margin:0px;
padding:0px;
width:25%;
}
.projectimage:hover {
-webkit-filter: blur(4px) contrast(1.5) grayscale(0.4) sepia(0.2);
}
And here's the HTML.
<a href="#">
<img class="projectimage" src="../images/projects/texmex.png" width="25%" /></a>
I took all the margins and padding out so I have no idea on why it has spacing...
add display: block to your images. They are default to display: inline causing them to have an extra few px around them.
If you comment out the display: block, you can see the extra px at the bottom of the top images (even with display: block on the a tags).
DEMO
a {
width: 40%;
float: left;
}
img {
display: block;
width: 100%;
}
This is due to the nature of inline-block element surrounding whitespace. See the followinjg for an explanation and a number of solutions.
http://davidwalsh.name/remove-whitespace-inline-block
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Using bootstrap and trying to do a little simple css animation on hover, expanding the element to highlight it.
.text-block {
background-color: white;
min-height: 400px;
text-align: center;
transition: .1s;
margin: 1em;
}
.text-block:hover {
margin: 0em;
transition: .1s;
z-index: 99;
}
This almost looks right, as the element appears to be expanded since the margin is animated away, but it moves up the page so it appears only 3 sides of the element grow.
Is it possible to set the height on hover to the non-hover height+2em to make it appear to grow 1em in all directions within CSS?
Change margin to padding. Margin adds blank space outside of your element. Padding should give you the effect you want :D
Good Morning,
I am developing a four column footer using pure CSS, but I have ran into some issues:
1) I can't institute a vertical 1px white rules alongside each colum
2) The background does not cover the entire four colums
3) In Chrome, the columns do not appear across a single width, the fourth one being bumped below.
Here is my code: http://jsfiddle.net/eLzPk/
If you know the exact width of the footer you can do this with pure css. I just added a right border to the first 3 columns. FYI you forgot to declare the color of the border in your css. I also changed the width of the columns to 235px which is 940 / 4. First 3 have a 1px border so it's width: 234px plus the border. Here is the fiddle http://jsfiddle.net/eLzPk/7/
#footer dl {
background: black;
float: left;
margin: 0;
padding: 10px 0 5px 0;
width: 234px;
border-right: 1px solid #fff;
}
#footer dl + dl + dl + dl {
width: 235px;
border-right: none;
}
EDIT
To further explain one of the problems with css is that with borders and margins are added to the declared width, so if you have four columns with a width: 25% and a border of 1px to create a dividing line, it's actually 100% + 3px, which of of course larger than 100% so it causes the css to wrap.
There are 2 new solutions to this in css, one of them is fairly supported, it's called box-sizing, here is a good article to reference. http://css-tricks.com/box-sizing/ Basically it sizes the box to the declared width and adds the borders and margin inside of that. The downside is that it's not supported by IE7 and back. So to use it properly it's best to use an IE conditional statement and implement some css/js hack for just those browsers.
The other solution is the flexbox model, and it has very little support yet. But it's worth taking a look at. It allows you to have a container of any size, and size the children inside of it using ratios, to place them vertically or horizontally with ease, etc. It solves the box model issues as well as positioning and centering issues of all kinds.
How about something like this? Adding another Div Container with a fixed size inside of one that will adjust to the size of the browser. The Background can then be stretched using the commented code in #footer. You have to be aware of your margins, padding & borders when creating div sizes.
Every pixel counts ;)
Anywho hope this helps! Link for jsFiddle at bottom
#footer {
background: black
/* This would be your Background Image code for whole Footer.
background: url(FOOTER IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
*/
padding-right: 15px;
position: relative;
min-height: 250px;
text-align: center;
width:100%;
margin-left:auto;
margin-right:auto;
} /*IE6*/
#footerContainer {
width:940px;
height:250px;
display:block;
}
#footer dl {
display:inline-block;
background: black;
float: left;
text-align: left;
margin: 0px;
padding: 10px 0 5px 10px;
width: 224px; /* Take into account the 1px Border & padding*/
height:inherit;
border-left: 1px solid white;
}
Something like this: http://jsfiddle.net/GFargo/eLzPk/1/
As ACJ mentioned:
The border width (1 pixel) is added to the width, so four times 25%
plus 4 pixels is always more than 100%
You're better off defining a few set values to solve this.
Your shorthand border property was not working because although you defined a width (1px), its type (solid), you were missing (color).
If you're also working in HTML5, you can use the tag too...
Roughly, with some tweaking:
http://jsfiddle.net/eLzPk/8/