I want to create a photo album with rows of images. Currently all my images are appearing in one row. Say if I upload 15 images, what is the CSS code to break them into 3 rows .. 5 images on each row? Sorry this probably is really easy but I am a beginner in CSS. This is the code I am currently using.
EDIT: Here is another part of the code I am not sure if it is a container.
.flickr-photoset-img{
float: left;
}
.flickr-photoset-box {
padding: 10px;
float: left;
text-align: center;
width: 130px;
height: 130px;
}
The easiest way would be to restrict the container size.
.container {
width: 500px; /* look i'm now showing 5 images per line */
}
.img {
/* height: 100px; width: 100px; */
float: left;
}
<div class="container">
...
<img ...>
<img ...>
<img ...>
<img ...>
<img ...>
<img ...> <!-- I will wrap to a new line -->
...
</div>
Example here
After reading briefly about Flicker and Drupal - I think the css class you want to edit is flickr-photoset
.flickr-photoset {
width: 500px; /* really you can set this to whatever */
}
First of all you should probably have a div wrapping your images.
The important thing to know is that your images will automatically skip to the next row if the sum of your images widths exceeds the with of their wrapping div.
For example if you have a 600px wide wrapping div and four images each measuring 250px in width they will be listed in two rows.
Here you can find a tutorial which explains exactly what you need to do for your gallery.
You can do it with placing <br /> tag after fifth image. With CSS you can add style like this
CSS
.images{
float:left
}
.clear{
clear:both
}
HTML
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=clear ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=clear ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
Related
I hope I use the right terminology (im a very amateur coder)
I have 2 images and I want to apply the same css on them but with minimum work, like when using:
h1, h2 {bla bla code}
So I tried
.btn-app img .btn-app2 img {
margin-left: 10px;
width: auto;
height: 50px;}
but it doesnt work.
can it be done?
Mega thanks and nice to meet you all! =)
You're missing a comma there. The comma needs to be applied between each selector.
Your selectors are
.btn-app img
which selects all child img elements of .btn-app and
.btn-app2 img
which selects all child img elements of .btn-app2.
So your code should be:
.btn-app img, .btn-app2 img {
margin-left: 10px;
width: auto;
height: 50px;
}
If you're completely new to CSS and that wasn't just a typo, I'd also suggest having a read here.
A missing comma. You already showed that in the example you are following
.btn-app img, .btn-app2 img {
margin-left: 10px;
width: auto;
height: 50px;
}
Use this:
/* you were missing some commas and > here */
.btn-app>img, .btn-app2>img
{
position:relative;
float:left;
margin-left: 100px;
height: 50px;
border:10px solid #09f;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Works for images inside containers -->
<div class="btn-app">
<img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img1" height="70" width="70" />
</div>
<div class="btn-app2">
<img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img2" height="70" width="70" />
</div>
<br style="clear:both" />
<br/>
<!-- But it won't work for them -->
<!-- Images with class names -->
<img class="btn-app" src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img3" height="70" width="70" />
<img class="btn-app2" src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img4" height="70" width="70" />
<br/>
<!-- Images without class names -->
<img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img5" height="70" width="70" />
<img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img6" height="70" width="70" />
</body>
</html>
I have the below HTML/CSS, which is then followed by media queries in the file for the various max/min pixel sizes.
<div class="header-flags-wrapper">
<div class="flagbox1">
<img src="https://**********.blob.core.windows.net/flags/014-UK.png" />
<img src="https://**********.blob.core.windows.net/flags/015-spain.png" />
<img src="https://**********.blob.core.windows.net/flags/006-portugal.png" />
<img src="https://**********.blob.core.windows.net/flags/007-brazil.png" />
</div>
<div class="flagbox2">
<img src="https://**********.blob.core.windows.net/flags/002-cuba.png" />
<img src="https://**********.blob.core.windows.net/flags/003-venezuela.png" />
<img src="https://**********.blob.core.windows.net/flags/004-bolivia.png" />
<img src="https://**********.blob.core.windows.net/flags/005-paraguay.png" />
</div>
<div class="flagbox3">
<img src="https://**********.blob.core.windows.net/flags/001-uruguay.png" />
<img src="https://**********.blob.core.windows.net/flags/008-argentina.png" />
<img src="https://**********.blob.core.windows.net/flags/009-colombia.png" />
<img src="https://**********.blob.core.windows.net/flags/010-chile.png" />
</div>
<div class="flagbox4">
<img src="https://**********.blob.core.windows.net/flags/011-peru.png" />
<img src="https://********.blob.core.windows.net/flags/012-ecuador.png" />
<img src="https://*********.blob.core.windows.net/flags/017-angola.png" />
<img src="https://**********.blob.core.windows.net/flags/018-european-union.png" />
</div>
<span class="flagstretch"></span>
</div>
The default view on a screen 1200px wide looks good. What I can't get my head around is how to make this responsive. All other elements shrink closer together until they hit a boundary and then they change shape or wrap etc. What is the best approach to achieve this please? What I would like is that the margin on the flagboxes decreases bringing them closer together until they are touching each other then I hide the wrapper all together. Every attempt to do so has failed and like most things is probably easy when you know how.
.header-flags-wrapper {
float: left;
height: 50px;
width: 1500px;
}
.flagbox1, .flagbox2, .flagbox3, .flagbox4 {
width: 310px;
/*height: 30px;*/
/*vertical-align: top;*/
display: inline-block;
*display: inline;
zoom: 1
}
.flagbox1, .flagbox2, .flagbox3, .flagbox4 a {
float: left;
/*width: 30px;*/
padding: 2px;
margin-top: 5px;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
Example of code can be seen at http://globaleyes.azurewebsites.net
I'm creating a row with a number of images of a specific height and width in HTML and CSS. An example of what I'm doing can be seen here on Imgur.
Each image is simply an <img> tag floated to the left to remove whitespace and overall, it works successfully. However, when the browser is minimised, the end image disappears due to there being inadequate space to display it. An example of this can be seen on the above Imgur link.
Is there a way, in CSS, to crop the overflow so that a cropped version of the image (while maintaining the same height) is shown rather than no image?
Update: My code, at present, is as follows:
<div class="userbar">
<a href="#">
<img src="img.jpg" alt="Image">
</a>
... and so on, about 60 times
</div>
CSS (written in SASS then compiled):
.userbar {
max-height: 64px;
}
.userbar a {
float: left;
}
.userbar a img {
display: inline-block;
height: 64px;
width: 64px;
}
Use a container to wrap your images and make the container flex and hide the overflow-x. Is this you're looking for?
.image-container {
width: 100%;
display: flex;
overflow-x: hidden;
}
<div class="image-container">
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
</div>
I've looked at other questions asking similar things, but the answers for them don't seem to work for my problem. I have a website that contains two divs on either side of a news slider, which is also in a div. The side divs are both floating to their respective sides. The problem is, when I make the window smaller, they (adLeft and adRight) overlap the center sliderDiv and go behind it. I've tried various things like making a min-width, overflow be hidden, or changing padding and margins, but I never see any difference. Any help would be greatly appreciated!
Here's the website: http://thehummingbirdplace.com/
Here's the relevant html:
<div id="adLeft">
<a href="http://www.amazon.com/Kathleen-Ball/e/B007QNUTC8/ref=ntt_athr_dp_pel_1/" target="_blank">
<img src="_images/advertisements/autumn.png" width="200" height="300" alt="Autumn's Hope" />
</a>
<br><br>
<a href="http://www.romancestorytime.com/" target="_blank">
<img src="_images/advertisements/loveCowboy.png" width="200" height="300" alt="For the Love of a Cowboy" />
</a>
</div>
<div class="clear">
</div>
<div id="adRight">
<a href="http://www.jeanjoachimbooks.com/" target="_blank">
<img src="_images/advertisements/lovesLastChance.png" width="200" height="300" alt="Love's Last Chance" />
</a>
<br><br>
<a href="http://www.jeanjoachimbooks.com/" target="_blank">
<img src="_images/advertisements/loversLiars.png" width="200" height="300" alt="Lovers and Liars" />
</a>
</div>
<div class="clear">
</div>
<div class="sliderDiv" id="slider">
<img src="_images/podcast/123013_slider.png" width="851" height="323" alt="Later in Life Romances" />
<img src="_images/podcast/122313_slider.png" width="851" height="323" alt="Christmas Contemporary Romances" />
<img src="_images/podcast/121613_slider.png" width="851" height="323" alt="Christmas Historicals" />
<img src="_images/podcast/120913_slider.png" width="851" height="323" alt="Christmas Novellas" />
<img src="_images/podcast/archive_slider.png" width="851" height="323" alt="Archive" />
</div>
And here is the css that applies to it:
#adLeft {
width: 200px;
margin-right: 50px;
float: left;
margin-left: 20px;
}
#adRight {
width: 200px;
margin-left: 50px;
float: right;
margin-right: 20px;
}
.clear {
float: clear;
}
.sliderDiv {
margin-right: auto;
margin-left: auto;
width: 851px;
position: relative;
z-index: 1;
margin-top: -48px;
}
I believe you were on the right track with using min-width, as you can use it on the body of the page to prevent it from scaling down to the point of overlap.
Adding:
body {
min-width: 1400px;
}
to your styles should do the trick. The min-width needs to be applied to body because that's the overall container which everything else is inheriting width from, and positioning against.
Alternatively, if you do not want your page to get cut off once the screen gets smaller than that minimum width, you can use media queries to hide or move the left and right side images so that they are no longer in a position to cause overlap.
A media query is used like so:
#media only screen
and (max-width: 1400px){
#adLeft, #adRight {
/* Some sort of styles here */
}
}
I hope that helps, let me know if you have any questions,
Cheers!
I'm running into an issue where center aligning a set of images works in the first div I use it in but then doesn't in subsequent calls.
Here's my CSS:
.writingsText {
width: 750px;
margin-left: 50px;
text-align: justify;
}
.floatImageLeft {
float: left;
padding: 10px;
}
.centerImage {
display: block;
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
And my html:
<div class="writingsText">
Text, text, blah, blah
<br /><br />
<div class="centerImage">
<img src="goldengrid.png" width="270" height="170" />
<img src="spacer.png" width="10px"/>
<img src="goldenspiral.png" width="270" height="170" />
</div>
<br />
<div class="floatImageLeft"><img src="kochiteration.png" /></div>
Text, text, blah, blah
<br /><br />
<div class="centerImage">
<img src="mandelbrotgif.gif" width="200" height="200" />
<img src="spacer.png" width="10px"/>
<img src="kochgif.gif" width="200" height="100" />
</div>
<br />
</div>
So the first set of centered images look great, my text wraps beautifully around my left floating image, and then on the second call to the centerImage class (and third, etc) the images do a partial indent (to what looks like the left edge of the first set of centered images) but are not centered. I've also tried using
<div style="clear:both"></div>
above the additional centered divs (this fixed alignment issues for me in a separate project) but it doesn't do anything. What am I missing?
Have you tried adding “clear: both” to your .centerImage CSS declaration?