So I have this very simple HTML page. All I want is to display images in one long row. What is the simplest way, that would work on all browsers?
<html>
<head>
<title>My title</title>
</head>
<body>
<div id="images">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</body>
</html>
If you want #images to be a single row, you can turn off word wrapping.
#images {
white-space: nowrap;
}
JSFiddle
Look this jsbin
I think this is the simplest way:
HTML:
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
<li><img src="5.jpg"></li>
<li><img src="6.jpg"></li>
</ul>
CSS:
ul {
white-space: nowrap;
}
ul, li {
list-style: none;
display: inline;
}
Updated: For no wrap!
Make your container div wide enough to handle all of your images.
Let's say all your images are 300px by 300px;. if you have 6 images, your div would be 1800px wide
Just make the container div wide enough to accommodate all of your images and they won't wrap. Then float each image left.
<style>
#images {
width: 1800px;
height: 300px;
}
#images img {
float: left;
}
</style>
I'm suspecting somebody with much more CSS knowledge will have a better way?...
With bootstrap:
<div class="row">
<div class="column">
<img src="1.jpg">
</div>
<div class="column">
<img src="2.jpg">
</div>
...
</div>
See How To Place Images Side by Side
Here's a Fiddle
#images {
width: 2000px; /* Increase if needed */
}
#images img {
width: 300px;
height: 200px;
float: left;
}
Related
I am attempting to implement three images horizontally into a HTML website. However when i format it using CSS nothing is happening, I am very confused as it should theoretically work. I would greatly appreciate if anyone could help me out, thank you.
HTML page image part:
</p>
<div class="row">
<div class="column">
<img src="gosportSunset.jpg" alt="Sunset" style="width:33%">
</div>
<div class="column">
<img src="gosport.jpg" alt="Gosport" style="width:33%">
</div>
<div class="column">
<img src="gosportRace.jpg" alt="Race" style="width:33%">
</div>
</div>
</p>
CSS image formatting part:
/* Three image containers */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
If the grid is not working try to add box-sizing: border-box; in .column
.column {
float: left;
width: 33.33%;
padding: 5px;
box-sizing:border-box; // important
}
Instead of using div structure you can try something with ul & li, also make use of "column-count" property using which you can define the number of columns you want in a horizontal row.
Refer link for more understanding about "column-count" property:
https://www.w3schools.com/cssref/css3_pr_column-count.asp
<!DOCTYPE html>
<html>
<head>
<style>
ul {
column-count: 3;
list-style: none;
}
</style>
</head>
<body>
<div class="row">
<ul>
<li>
<img src="gosportSunset.jpg" alt="Sunset "/>
</li>
<li>
<img src="gosport.jpg" alt="Gosport" />
</li>
<li>
<img src="gosportRace.jpg" alt="Race" />
</li>
</ul>
</div>
</body>
</html>
Hi I'm trying to create an image gallery that centers rows of images with fixed dimensions. The issue is the number of images in each row will change depending on the window size so I can't use mutiple containers and margin: auto them. Here is an example page that does what I'm after:
http://inspire-gwen.tumblr.com/
You'll notice that as you change the size of the window, the image rows change, but each one is still centered on the page. Is it possible to implement this with purely CSS? This is the code I have written, with some random images:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<div><img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg"></div>
<div><img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg"></div>
<div><img src="http://i.imgur.com/ElxvqJK.jpg"></div>
<div><img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg"></div>
</div>
</body>
CSS
.img_container img {
max-height: 300px;
display: block;
width: auto;
height: auto;
vertical-align: bottom;
}
.img_container div {
padding: 5px;
}
Images are by default inline items, wrapping them in 'div' tags is currently causing them to be block items. You could get by with simpler with this:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
<img src="http://i.imgur.com/ElxvqJK.jpg">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</body>
CSS
.img_container {
text-align: center;
}
.img_container img {
max-height: 300px;
width: auto;
height: auto;
vertical-align: bottom;
margin: 5px;
}
Yes, this is very possible..
so far you have been using px to define the image width... what you need is %.
Here is the JSFIDDLE: http://jsfiddle.net/uh1wvaev/2/
Here is my code:
HTML
<div class="img_container">
<div class="img_wrapper">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
</div>
<div class="img_wrapper">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
</div>
<div class="img_wrapper">
<img src="http://i.imgur.com/ElxvqJK.jpg">
</div>
<div class="img_wrapper">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</div>
CSS
.img_wrapper {
width: 25%;
float: left;
}
img {
width: 100%;
}
What I did was, I gave each <DIV></DIV> a class of "img_wrapper". Then I gave each img_wrapper a width of 25% of the page. Therefore whenever the page is resized, the img will be given a width of 25% of the new window size.
If you have any questions, or need further assistance please leave a comment below
My image won't be positioned next to the slider.. instead it's just stacked underneath it. It's like there isnt room for the image because the slider takes up too much space, however it doesnt seem like that is the case when I look at the code, unless I missed something :)
This is my HTML:
<div id="content">
<div class="bx.wrapper">
<ul class="bxslider">
<li><img class="photo" src="IMG/pic_0001.jpg"></li>
<li><img class="photo" src="IMG/pic_0012.jpg"></li>
</ul>
</div>
<div id="hours">
<img src="IMG/hoursdk.png"/></div>
</div>
And my CSS:
#hours{
position:relative;
right:150px;
width:20%;
height:10%;
}
.bx-wrapper {
position: relative;
width:100%;
margin-left:-30px;
}
ul.bxslider {
margin-top: 60px;
padding: 0;
}
.bx-wrapper img {
min-width:30%;
max-width: 40%;
display: block;
}
I got the CSS from the BXslider, and I removed some unnecessary things, such as controls and pager, already.
Do you mean something like this? Check here
<div id="content">
<div class="bx-wrapper">
<ul class="bxslider">
<li><img class="photo" src="http://placehold.it/350x150"></li>
<li><img class="photo" src="http://placehold.it/350x150"></li>
</ul>
</div>
<div id="hours">
<img src="http://placehold.it/350x150"/></div>
</div>
CSS
.bx-wrapper, #hours{
display:inline-block;
}
.bx-wrapper{
float:left;
}
#hours{
float:right;
}
.bxslider{
list-style: none;
}
I'm new to HTML and CSS. For one of my projects, I need to put 16 images into a 4x4 grid of tiles on a webpage. These tiles cannot have gaps between them, and they need to stretch to fill the browser from side to side. They also should only scroll vertically. We are only allowed to use JavaScript or JQuery so I can only use HTML and CSS.
I wrote 4 div elements, each represents a row; inside each div, a span element holds 4 images - that's how I made the 4x4 grid. A code snippet looks like this:
/* One row in a div*/
<div class="map">
<span>
<img src="map_images/1.png">
<img src="map_images/2.png">
<img src="map_images/3.png">
<img src="map_images/4.png">
</span>
</div>
I also wrote a navigation bar that should float above the background images in the upper right corner:
/* 4 div elements of 4 rows before this code*/
<div id="nav">
<div>Foo</div>
<div>Boo</div>
</div>
For the above code, my stylesheet looks like this:
.map{
margin:0;
padding:0;
}
#nav {
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
However, I've encountered several problems at this point.
First, I still have column gaps and row gaps between all 16 images. No matter what values I set map margin and padding to, nothing changes. I even tried negative values, still nothing changed. Can someone tell me how to go about this problem, eliminating all gaps?
Secondly, I googled and learned that z-index can be used to make div float above background; however, this is no working here and it seems that div #nav stays in the upper right corner as a separate div that does take up space, instead of floating above. Any suggestions on this?
Float left and set the width to 25%. Also I show below how to create a floating menu using the :hover pseudo-class.
.map div img {
width: 25%;
float:left;
display: inline-block;
}
#nav {
width: 50px;
background-color: grey;
}
#nav ul {
margin: 0;
padding: 0;
width: 50px;
background-color: grey;
position: absolute;
display:none;
}
#nav:hover ul, #nav ul:hover {
display:block;
}
<div id="nav">
Menu
<ul>
<li>Foo</li>
<li>Boo</li>
</ul>
</div>
<div class="map">
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
</div>
I think you are looking for something like this? See fiddle http://jsfiddle.net/DIRTY_SMITH/q12bh4se/4/
Snippet :
body {
margin: 0px;
}
div {
width: 50%;
float: left;
}
img {
width: 50%;
float: left;
}
.top-left {
z-index: 9999;
position: absolute;
top: 0;
left: 0;
color: white;
}
.top-right {
z-index: 9999;
position: absolute;
top: 0;
right: 0;
color: white;
}
<h1 class="top-left">Top Left</h1>
<h1 class="top-right">Top Right</h1>
<div class="row-1-col-1">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-1-col-2">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-2-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-3-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
All I had to do was set float: left and width: 25% on the images in CSS
.map img{
float: left;
width: 25%;
}
DEMO
I'm having a thumbnail with imgs in divs, so when a img press its shows big in the same window.
I wish to scroll horizonal to see them, instead of vertical as the default.
I mannaged to hide the y scroll bar using:
overflow-x: auto;
-ms-overflow-x: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
now how do i make the imges run out of horizonal limit rather then vertical limit.
my pics are serrunded by:
<div class='item'>
<img src='picaddress.jpg' alt='picDescription' />
<p>'picDescription'</p>
additonal code:
<div id="imagegallery">
<div id="items">
<div class='item'>
<img src="images/img1.jpg" alt="Test Image">
<p>'Test Image'</p>
</div>
<div class='item'>
<img src="images/img2.jpg" alt="Test Image">
<p>'Test Image'</p>
</div>
<div class='item'>
<img src="images/img3.jpg" alt="Test Image">
<p>'Test Image'</p>
</div>
<div class='item'>
<img src="images/img4.jpg" alt="Test Image">
<p>'Test Image'</p>
</div>
<div class='item'>
<img src="images/img5.jpg" alt="Test Image">
<p>'Test Image'</p>
</div>
</div>
</div>
</div>
CSS:
#imagegallery{
background:#F2F2F2;
padding:10px 10px 10px 10px;
}
#imagegallery #items{
width: 100%;
border: 1px solid #DFDFDF;
background:white;
height: 100px;
overflow: auto;
}
#imagegallery #items .item {
float: left;
padding:5px;
position: relative;
width: 102px;
height:77px;
margin: 10px;
background-color: #fff;
cursor: pointer;
border: 1px solid white;
display: inline;
}
#imagegallery #items .item:hover{
border: 1px solid #ddd;
}
#imagegallery #items .item img {
max-width:100px;
max-height:75px;
width:100px;
}
#imagegallery #items p{
display:none;
}
it's a dynamic page so number of pics changes.
I hope I understand you right and you want to have the images displayed next to each other instead of under each other.
To make that work you could use the float property on the div with class "item", like so:
div.item {
float: left;
width: 100px;
}
Don't forget to clear after the items.
If the width of all the items is bigger then the width of the surrounding div (with overflow-x: scroll) you'll get what you want.
Example created at http://jsfiddle.net/deCube/Ctja7/.
You can use an "ul" in your div and display as manu "li"s in the "ul" as you want on one line. Then to show another line of images below, just repeat the "ul & "li"s
Exmaple:
<div id="images">
<ul>
<li><img src="images/rings/thumbnails/image1.jpg"></li>
<li><img src="images/rings/thumbnails/image2.jpg"></li>
<li><img src="images/rings/thumbnails/image3.jpg"></li>
<li><img src="images/rings/thumbnails/image4.jpg"></li>
<li><img src="images/rings/thumbnails/image5.jpg"></li>
</ul>
</div>
You can then just style the "div", "ul" and "li" with css. See an example page I have here. Each line of images is an "ul" with 5 "li"s in it. You are more than welcome to copy the code if you think it's useful.