I can't for the life of me get a set of images to line up on screen horizontally.
#full_image {
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
overflow: hidden;
position: absolute;
}
#full_image ul li img {
display: inline;
margin: 0 auto;
width: 100%;
max-width: 100%
}
<div id="full_image">
<ul>
<li>
<img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" />
</li>
</ul>
<ul>
<li>
<img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" />
</li>
</ul>
<ul>
<li>
<img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" />
</li>
</ul>
</div>
You're creating a new list with each image, for starters; and each list is a block-level (not inline) element. Block elements start on a new line, by default.
Then, your display: inline is applied to the images, not to the li that contains them, which is still at block level.
Finally, list-style: none doesn't make sense on a div. I assume you mean to apply it to a list.
So:
#full_image {
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
overflow: hidden;
position: absolute;
}
#full_image li {
display: inline;
}
#full_image li img {
margin: 0 auto;
max-width: 100%
}
<ul id="full_image">
<li>
<img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" />
</li>
<li>
<img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" />
</li>
<li>
<img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" />
</li>
</ul>
remove tags ul li and try again
Remove the list tags
http://jsfiddle.net/cxfNb/ they line up fine. If you want the bullet points, you'll have to remove the block style of the ul and li tags
<div id="full_image">
<img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" />
<img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" />
<img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" />
</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Some of the layouts I have been tasked with converting utilize the following layout (see image.) I'm wondering what the best way using CSS is to render a list of images accordingly. I don't want to split up the items into different row containers just to make things fit. I'm sure there's a way to create this a list.
The biggest problem I have is rendering the images with the appropriate margins in-between and having the far right image line up with the edge of the layout container (orange lines.)
Ideally, I'd like to maintain the html as something like:
<ul class="gallery-list">
<li class="gallery-list-item">
<img src="..." alt="..." />
</li>
<li class="gallery-list-item">
<img src="..." alt="..." />
</li>
</ul>
Thanks for your time and if there is a better solution, I'd be happy to close this and link to the solution.
This might be a solution, it might not. It makes a few assumptions like there always being four images per row but making them responsive.
The main points are:
We set the image container width a percentage of the parent container to control the number of images per row.
We use a right negative margin on the ul to offset the right margin applied to the li for image spacing.
We use calc to subtract the margin we use for spacing so all elements will fit on a single line and not begin to reflow.
I've used a couple media queries to show how you would change row count for smaller screens to make the grid responsive.
There's also a bit of padding and border applied to .container to demonstrate that the images are taking up the full width of the container.
This is just one way to do things.
body {
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.container {
width: 80%;
margin: 50px auto;
/* following adding for demo purposes */
padding: 50px 0;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
overflow: hidden;
}
ul {
margin-right: -5px;
}
li {
float: left;
margin: 0 5px 5px 0;
width: calc( 50% - 5px );
}
img {
display: block;
width: 100%; /* or max-width: 100%; */
height: auto;
}
#media( min-width: 550px ) {
li {
width: calc( 33.333% - 5px );
}
}
#media( min-width: 750px ) {
li {
width: calc( 25% - 5px );
}
}
<div class="container">
<ul>
<li>
<img src="http://placehold.it/200x200/fc0/&text=1">
</li>
<li>
<img src="http://placehold.it/200x200/ccc/&text=2">
</li>
<li>
<img src="http://placehold.it/200x200/fc0/&text=3">
</li>
<li>
<img src="http://placehold.it/200x200/ccc/&text=4">
</li>
<li>
<img src="http://placehold.it/200x200/fc0/&text=5">
</li>
<li>
<img src="http://placehold.it/200x200/ccc/&text=6">
</li>
<li>
<img src="http://placehold.it/200x200/fc0/&text=7">
</li>
<li>
<img src="http://placehold.it/200x200/ccc/&text=8">
</li>
</ul>
</div>
There are a lot of ways you could go about this. I'm partial to flexbox - this example shows it with a fixed width on the gallery, but you can use a fluid one as well. I'd recommend doing some reading about flexbox, but here's a starting place:
.gallery {
display: flex;
flex-wrap: wrap;
width: 440px;
margin: auto;
padding: 0;
list-style: none;
}
.gallery img {
margin-right: 10px;
margin-bottom: 10px;
}
<ul class="gallery">
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
<li>
<img src="//placehold.it/100x100" alt="Artwork">
</li>
</ul>
You can also use display:flex and flex-wrap for this
I have changed markup from ul li's to div and img's and i have let the last image for every row to grow and fit the container
check this snippet
.gallery-list-item {
display: flex;
width: 100%;
margin-top: 10px;
}
div img:not(:first-child) {
margin-left: 10px;
}
div.gallery-list-item img:last-child {
flex: 1;
}
div.gallery-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 450px;
border: 1px solid black;
padding: 0;
}
<div class="gallery-list">
<div class="gallery-list-item">
<img src="http://shushi168.com/data/out/123/36699123-images.png" alt="..." height=100 width=100/>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
<img src="http://shushi168.com/data/out/123/36699123-images.png" alt="..." height=100 width=100/>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
</div>
<div class="gallery-list-item">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" alt="..." height=100 width=100/>
</div>
</div>
Hope it helps
This is easier to show in an image- http://puu.sh/n8WGw/0b01b020c7.png
I want the flex container to shrink as it's doing now, to match the height of the largest image, but I want the other images to match the height of the flex container. Whenever I try, they just become full height (their original height). Is there a way to accomplish this?
If I've not explained it well enough - I want the images to take up 100% of their li parent height, as shown by the blue box in the image attached.
We do not know what you did really, maybe overused flexbox rules ?
ul {
display: flex;
}
li {
list-style-type: none;
}
img {
height: 100%;/* in flex-child, the tallest will set rythm ... here it's about 200px; + gap height underneath if no reset of display or vertical-align */
}
<ul>
<li>
<img src="http://lorempixel.com/g/400/100/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/400/200/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/300/150/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/400/100/" alt="" />
</li>
</ul>
or if flex set on li
ul {
display: flex;
width: 100%;
padding: 0;
}
li {
flex: 1;
overflow: hidden;
/* img will be cut off */
}
img {
min-height: 100%;/* again , tallest should set the rythm */
min-width: 100%; /* unless one doesn't fit the width */
display: block;
}
<ul>
<li>
<img src="http://lorempixel.com/g/400/100/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/400/200/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/300/150/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/200/50/" alt="" />
</li>
</ul>
I am trying to make a photogallery, the idea is that you have a horizontal(!) slider with all the images (and later on in the script you can click on them, but that is not important). The problem is that all the images do not fit in the layout, so that is why i need some kind of scroll mechanism. This is my HTML:
<section>
<div id="thumbnails">
<div>
<ul>
<li><img></li>
<li><img></li>
.............
<li><img></li>
<li><img></li>
</ul>
</div>
</div>
</section>
And this is my CSS:
div#thumbnails { margin: 0; padding: 0; overflow: auto; }
div#thumbnails * { margin: 0; padding: 0; }
div#thumbnails div { width: 20000px; }
div#thumbnails ul { list-style: none; }
div#thumbnails ul li { display: inline-block; }
section { width: 960px; }
This more or less works like a breeze, except for the fact that the slider is filled with whitespace (obviously due to the width of 20000px;). However, that width of 20000px is nessecary, else the wrapper div wil take the same width as div#thumbnails, and that width is of course 960px (due to the section-tag). The result of that is that the list will get extra rows, and i obvously want only 1 row. So ideally, the wrapper div should get the exact same width as the dynamic list, but i am stuck here. Somebody has an idea how to fix this (preferably without jQuery/JS, it's not very difficult to solve it with javascript)?
Is this what you're looking for?
div#thumbnails {
margin: 0;
padding: 0;
overflow: auto;
}
div#thumbnails * {
margin: 0;
padding: 0;
}
div#thumbnails div {
white-space: nowrap;
}
div#thumbnails ul {
list-style: none;
}
div#thumbnails ul li {
display: inline-block;
}
section {
width: 960px;
}
<section>
<div id="thumbnails">
<div>
<ul>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
</ul>
</div>
</div>
</section>
I am making an image slider and for some reason the parent element is adding whitespace at the bottom of parent div for no reason that I can tell. If there is a better way to set up the css then I would really appreciate a pointer. Here is the code:
HTML:
<div id="imgslider">
<ul class="bxslider">
<li>
<img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-11.jpg" alt="" />
</li>
<li>
<img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-1.jpg" alt="" />
</li>
</ul>
<div class="clear"></div>
CSS:
#imgslider {
display: block;
height: inherit;
}
.bxslider {
position: relative;
}
.bxslider img {
width: 100%;
max-height: 750px;
position: absolute;
}
.bxslider img:first-child {
top: 0;
left: 0;
z-index: 1;
}
There is a not closed div at the end :-)
Maybe this is what causing the issue:
<div id="imgslider">
<ul class="bxslider">
<li>
<img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-11.jpg" alt="" />
</li>
<li>
<img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-1.jpg" alt="" />
</li>
</ul>
</div>
<div class="clear"></div>
Not sure it will help but i have read somewhere "clear:both" cause adding some space at bottom so you may want to add "overflow:hidden" to the parent div (i think it is the div with id "imgslider")
#imgslider {
display: block;
height: inherit;
overflow:hidden;
}
I am attempting to make a simple navigation bar using 4 images, wrapped inside an unordered list.
I am having issues, because the bar is not lining up, it is acting as if the parent div it is nested within has a padding-left assigned to it and pushing the unordered list to the right. Here's a picture of what is happening:
I have a border on the main navigation div to see what is going on.
Here is my code:
<div id="container">
<div id="header">
<h1 class="hidden">Blue Ridge Fencing</h1>
</div>
<div id="navigation">
<ul>
<li><img src="images/website_build/nav_bar/home.jpg" width="208" height="50" alt="Home" border="0"></li>
<li><img src="images/website_build/nav_bar/about.jpg" width="227" height="50" alt="About" border="0"></li>
<li><img src="images/website_build/nav_bar/contact_us.jpg" width="290" height="50" alt="Contact Us" border="0"></li>
<li><img src="images/website_build/nav_bar/quote.jpg" width="235" height="50" alt="Quote" border="0"></li>
</ul>
</div>
<div id="content">
</div>
</div>
And the CSS:
#navigation {
height: 50px;
width: 1000px;
background-image: url(../images/backgrounds/otis_redding.png);
overflow: hidden;
padding: 0px;
border: 1px solid #000;
}
#container #navigation ul {
margin: 0px;
list-style-type: none;
font-size: 34px;
}
#container #navigation li {
float: left;
}
Thank you in advance!
<ul> elements generally have default padding set by the browser (or one of your stylesheets). Just remove it:
#navigation ul {
padding:0;
}
You might want to look into using a CSS reset if you haven't already:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
Why is there the need for browser resets?
You need to remove the padding from the ul element. You can do by adding padding: 0; to #container #navigation ul in your css.