I have 5 images and I want them to float left and stay on one line without images being moved to the next line, I also want a border right of 100% I have successfully done this with display: flex, however flex does't work properly in IE 11
Here is my HTML
<div class="col-md-12 award-logos">
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
</div>
And the CSS
.award-logos { border: 1px solid #ccc; }
.award-logos .wrapper {padding: 10px 30px;margin:5px 0;text-align:center;border-right:1px dotted #000; float: left;}
.wrapper img {max-height:150px; padding;}
https://jsfiddle.net/5sw538t7/
Related
Couldn't find an answer to this so..
It's probably a very simple solution but I've been tunnel visioning for the past 20 minutes and it's frustrating me.
The padding of an image, which I'm trying to give a circle background element, is really annoying.
Margin doesn't work either.
My image is 120 px large, and the padding of 2em just makes it smaller, but I want it to stay the same size, but have a bigger background size.
Here's the code:
<div class="row">
</div class="container-fluid">
<div class="col-md-4 img-icon-pad">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
/* Boxes */
.img-icons {
height: 120px;
width: auto;
background-color: #f8f8ec;
border: 2px solid #e97117;
padding: 2em;
border-radius: 50%;
}
.img-icon-pad {
}
And a screenshot of what I mean:
No padding
https://i.gyazo.com/745896ad418274f70e8189f6b84c7b6d.png
Padding:
https://i.gyazo.com/b2a264d8a361a426cc43992d90352e79.png
I think it is ok
<div class="row">
<div class="container-fluid">
<div class="col-md-4 ">
<div class="thumbnail">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
<div class="col-md-4">
<img src="img/icons/html.png" class="img-responsive img-icons" />
</div>
</div>
<style>
.thumbnail {
height: 150px;
width: 150px;
border: 2px solid #e97117;
background-color: #f8f8ec;
padding: 2em;
}
</style>
Did you increase the height of .img-icons class from 120 to 150px or bigger if you want.
If that doesn't work then you have probably restricted size of the div containing the img.
I was going to say that in .img-icons class you have width set to auto. This may be causing resizing. If you set it to a fixed width it may not resize.
i think this is what are you trying to do :
<div class="row">
<div class="col-md-4">
<div class="img-responsive img-icons" >
<div class="img">
</div>
</div>
</div>
</div>
css:
.img-icons {
height: 120px;
width:120px;
background-color: #f8f8ec;
border: 2px solid #e97117;
border-radius: 50%;
padding: 2em;
}
.img{
text-align:center;
height:120px;
width:120px;
background-color: #f8f8ec;
border: 2px solid #e97117;
}
you can see the result here https://jsfiddle.net/nt0zqc1t/3/
I am stuck on how to arrange images for my gallery.php page so that there are 4 images per line. My first thought was to use 2 divs, one as column 1 and one as column 2, and then have two spans inside the divs labeled left and right, and float the span left float left, and the other span right. I made sure two make the widths of each of the column divs 50% and each image width 25% however it still did not work.
Here is the HTML portion of my code, and below the HTML is CSS.
<p id="service">Gallery of Completed Sabers</p>
<div class="col1">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
<div class="col2">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
CSS
div.col1 {
width:50%;
}
div.col2 {
width:50%;
}
span.left {
float:left;;
}
span.right {
float:right;
}
img {
width: 25%;
}
I am going to keep messing around, and see, maybe I will try 4 different columns.
Thank you
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
*{
margin: 0px;
padding: 0px;
}
.column{
width:100%;
min-height:200px;
background:red;
border-bottom:1px solid blue;
}
.image-container{
width: 25%;
height: 200px;
float: left;
}
.image-container img{
max-height: 200px;
width: 100%;
}
I have this on my page. i wanted the container divs to align at the center. so i gave display:inline-block. but it didn't work. why is this happening? is there a way to display the containers as inline-block elements so that they appear exactly at the center?
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
css
#container {
vertical-align:top;
}
#image {
height:30%;
width:30%;
position: absolute;
overflow: hidden;
}
#definition {
width: 30%;
height: 30%;
position: absolute;
background-color: red;
}
Using display: table and display: table-cell this code will centre the divs on the page: Fiddle. Hopefully this is the effect you want.
Does anyone know how to place two repeating elements side by side in following example:
.thumbnail {
float: left;
width: 30px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}
.clearboth { clear:both; }
<!-- repeating element -->
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">
<!-- repeating element -->
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">
The trick is I am already using float and clear properties to style each repeating element individually. But when nesting floated elements within floated elements it does not work.
jSFiddle
check out this
<!-- repeating element -->
<div id="first">
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">
</div>
<!-- repeating element -->
<div id="second">
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">
</div>
css goes
.thumbnail {
float: left;
width: 30px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}
.clearboth { clear:both; }
#first{float:left;}
#second{float:left;}
So, I have this gallery function that just shows images in a grid. I am currently using TABLE, but I want to move over to CSS in order to use width 100% on the images, so it scales nicely.
Right, so best explained by looking at this page: http://sandman.net/test/css_gallery.php
The blue border is on the outer DIV and the images are kept within to layers of DIV's. The code looks something like this:
<div class="thumbs">
<div class="thumb">
<div class="inner">
<img />
</div>
</div>
<div class="thumb">
<div class="inner">
<img />
</div>
</div>
</div>
And so on. And the stylesheets are currently this:
<style type='text/css'>
.thumbs {
width: 400px;
border: 1px solid blue;
overflow: hidden;
}
.thumb {
width: 25%;
float: left;
}
.thumb > .inner {
padding: 0 10px 10px 0;
}
</style>
SO - to my problem. As you can see, the padding is currently 10px, which it should be. But not on the fourth column!! Basically, I want the images to be four columns with three whitespace columns in between. As they are now, each .thumb contains an image with 90px width calculated and 10px padding to the right. But, they should instead be 92.5 pixels wide and be evenly spaced.
Because - one problem is that I can't sett different margins on the first three and the fourth column since then the 100% width image would change size, which is not desirable. So the padding has to somehow be applied uniformly over all the images.
So, do you have a good way to do it? :)
You can also add a container div in tumbs div that contains all the tumb divs and give this container a negative margin to compensate for the padding on the edges of the thumb divs, not a beautiful solution but it works in all browsers, even that one that rhymes with nternet xplorer. :)
<div class="thumbs">
<div class="container">
<div class="thumb">
<div class="inner">
<img />
</div>
</div>
<div class="thumb">
<div class="inner">
<img />
</div>
</div>
</div> <!--container-->
</div>
<style type='text/css'>
.container {
margin: 0 -10px 0 -10px;
}
</style>
Okay, so the simplest fix that I can see is to use just 1 more div and a tiny CSS tweak. Wrap the div.thumbs in another div, like this:
<div class="thumbs-wrapper">
<div class="thumbs>
<!-- same content here as before -->
</div>
</div>
and move the border off the div.thumbs, onto the new wrapper:
.thumbs-wrapper {
border: 1px solid blue;
overflow: hidden;
width: 390px; /* cuts off the pesky extra padding */
}
.thumbs {
width: 400px;
}
The rest of the CSS is unchanged. The result:
No point in using esoteric pseudo-classes... just make your own!
First of all, I'd just set a class to the image directly... no need to have a container on each image. I also think 'margin' is a smarter choice than 'padding,' so the HTML I end up with looks like:
<div class="thumbs">
<div class="thumb">
<img class="inner first" src="" />
</div>
<div class="thumb">
<img class="inner" src="" />
</div>
<div class="thumb">
<img class="inner" src="" />
</div>
<div class="thumb">
<img class="inner last" src="" />
</div>
<div class="thumb">
<img class="inner first" src="" />
</div>
<div class="thumb">
<img class="inner" src="" />
</div>
<div class="thumb">
<img class="inner" src="" />
</div>
<div class="thumb">
<img class="inner last" src="" />
</div>
</div>
etc...
Your math I assume is: (400px wide) - (3 x 10px margin) = 370px / 4 columns = 92.5 px per column... but typically you don't want to work with half of a pixel so I'll use 92px per column, with 368px total width after margins. So then, since you're setting up your own classes for first and last--your stylesheet should look something like:
.thumbs {
width: 398px; // 368px + 30px for margin
border: 1px solid blue; // 1px for each side, results in a total width of 400px
overflow: hidden;
}
.thumb {
width : 92px;
float : left;
}
.inner {
width : 92px;
margin : 0 10px 10px 10px;
}
.first {
margin : 0 10px 10px 0!important; //important should make sure it overrides .inner
}
.last {
margin : 0 0 10px 10px!important; //important should make sure it overrides .inner
}
Now, I haven't tested this but I think it should work... if nothing else, hopefully my strategy is insightful so that you could tailor it to your needs. You could apply the same theory of manually assigning and stacking classes to make sure the top and bottom rows both have 10px on top and bottom respectively.
Hope this helps!