Here's the deal. I need a lot of pictures in one line. Too many to be on whole width of the site. So i need to apply horizontal scrolling. The problem is the header and footer. I need it to be fixed.
<div style="background-color: green; height: 80%">
<div style="background-color: purple; height: 100%; width: 1000px; white-space: nowrap">
<img style="max-height: 100%" src="Barum/01.jpg">
<img style="max-height: 100%" src="Barum/02.jpg">
<img style="max-height: 100%" src="Barum/03.jpg">
<img style="max-height: 100%" src="Barum/04.jpg">
<img style="max-height: 100%" src="Barum/05.jpg">
<img style="max-height: 100%" src="Barum/06.jpg">
<img style="max-height: 100%" src="Barum/07.jpg">
</div>
</div>
<div style="background-color: red; height: 10%"></div>
thanks,
I'm assuming what you want to do is have a sticky/fixed header and footer, with the images appearing 100% vertically in-between.
Nothing scales 100% height unless you have each previous element (each successive parent) stretching 100% height from the html tag. Or you can use the measurement vh. My example below does not use the vh measurement.
Here's a JSFiddle of the following: http://jsfiddle.net/fxxgb85f/6/
For the following structure:
<body>
<div class="header"></div>
<div class="content">
<ul class="imglist">
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
<li><img src="http://sifatit.com/wp-content/uploads/2012/07/dummy-500x337.jpg" /></li>
</ul>
</div>
<div class="footer"></div>
</body>
You will have the following CSS:
html, body { width: 100%; height: 100%; }
body {
margin: 0;
padding: 50px 0;
overflow: hidden;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
position: fixed;
top: 0;
left: 0;
z-index: 5;
width: 100%;
height: 50px;
background-color: #f00;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
z-index: 5;
width: 100%;
height: 50px;
background-color: #f00
}
.content {
position: relative;
margin: 0;
display: block;
width: 100%;
height: 100%;
max-height: 100%;
overflow-x: auto;
}
ul.imglist {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
list-style-type: none;
overflow-x: auto;
overflow-y: hidden;
}
ul.imglist li {
margin: 0 5px 0 0;
padding: 0;
display: block;
float: left;
width: 100%;
height: 100%;
}
ul.imglist li img {
display: block;
width: auto;
height: 100%;
}
jQuery:
$(document).ready(function(){
horScoll();
// On Load and On Resize
$(window).on('load resize', function(){
horScoll();
});
});
function horScoll(){
var parentSel = $('ul.imglist');
var listSel = $('ul.imglist li');
var liCount = $('ul.imglist li').length;
var imgWidth = $('ul.imglist li img').width();
parentSel.css({ width: liCount * imgWidth });
listSel.css({ maxWidth: imgWidth });
}
Related
I am trying to achieve the following:
But what I am getting is this:
Here is my HTML (react JSX but is the same thing):
<div className="snavbarcontainer">
<div className="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>
And my (S)CSS:
body {
//! background-color: red; - DEBUGGING ONLY!
margin: 0
}
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
li /* Adds property to EACH LI, not the UL itself. */{
margin: 1em 0;
}
}
.icons_ul {
justify-content: center;
}
.toplefticon {
justify-content: flex-start;
}
I cannot find out for the life of me how to do this, whether with flexbox or something else!
Thanks for your answers,
Henry
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.icons_ul li{
margin: 1em 0;
}
.icons_ul {
justify-content: center;
}
.toplefticon {
position: absolute;
top: 0;
left: 5px;
transform: translateX(-50%);
margin-top: 25%;
}
<div class="snavbarcontainer">
<div class="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div class="mainIcons">
<ul class="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>
Try this:
//JSX
<div className="snavbarcontainer">
<div className="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /</a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
//added this
<div className="bottomlefticon">
<a class="test" href="#"><img src={bottomLeftIcon} alt="Testing Logo" /</a>
</div>
</div>
//CSS
body {
//! background-color: red; - DEBUGGING ONLY!
margin: 0
}
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
//added this
justify-content: space-between;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
li /* Adds property to EACH LI, not the UL itself. */{
margin: 1em 0;
}
}
I added the bottom left icon at the bottom of the code so there can be proper space between them.
I would like 3 images on the first line and 3 images on the second line and want them in the middle of the page
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li { display: inline-block; padding: 10px;}
li:nth-child(1), li:nth-child(4) {
width: 50%;
}
li:nth-child(4) { text-align: right; }
li:nth-child(2) { text-align: left; }
<ul>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
</ul>
there are many ways to do it, for example:
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
https://jsfiddle.net/d6wn79pv/4/
or
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
text-align: center;
}
ul li {
flex-grow: 1;
width: 33%;
}
https://jsfiddle.net/d6wn79pv/9/
with use of flexbox:
* {
box-sizing: border-box;
}
ul {
list-style: none;
padding: 0;
display: flex;
justify-content:center;
flex-wrap: wrap;
}
li{
width:30%;
margin:3px auto;
}
<ul>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
</ul>
check this out.
<!DOCTYPE html>
<html>
<style>
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li {
width: 31%;
display:block;
float:left;
margin:3px;
}
</style>
<body>
<ul>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
</ul>
</body>
</html>
You can do it simply by using flex
<ul class="here">
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
</ul>
.here{
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.here li {
width: 32%;
}
.here li img{
width: 100%;
}
Change the .here width to auto resize the content
I want to have 3 images on the first line and 2 on the second. I have this code but it has 2 on top and 3 on the bottom.
<ul>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
</ul>
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li { display: inline-block; padding: 10px;}
li:nth-child(1), li:nth-child(4) {
width: 50%;
}
li:nth-child(4) { text-align: right; }
li:nth-child(2) { text-align: left; }
I want the two bottom images to be centred with the three images at the top.
Expected Result - 3 Images on first row and 2 on second row
Actual Result - 2 Images on first row and 3 on second row
Use Flex:
#container{
width: 550px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#container > img{
margin: 10px;
}
<div id="container">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
</div>
You could also do something like this which is an amazing CSS tool. Use CSS grid.
//HTML
<ul class="grid">
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
</ul>
//CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Like this:
Just adjust the widths and use the appropriate nth-child
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
text-align: center;
width: 33.3%;
border: 1px solid red;
}
li:nth-child(4),
li:nth-child(5) {
width: 50%;
}
<ul>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
</ul>
How do I put the text beside these images? I've tried everything but I can't seem to figure out how? I'd like it to appear BESIDE the image.
jsFiddle using random image: https://jsfiddle.net/0z1pfbs7/
HTML
<section class="pdc">
<div class="moreproduct">
<div class="bigimg">
<img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" />
</div>
<ul>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
</ul>
<div class="producttext">
<h3>New Balance</h3>
<h1>Men's MX608v4</h1>
<p>SGF</p>
</div>
</div>
</section>
CSS
.pdc{
display: inline;
}
.moreproduct img {
position: relative;
border: 1px solid #93a2ad;
margin-top: 4px;
}
.moreproduct ul{
list-style: none;
}
.moreproduct ul li img{
width: 100px;
height: 100px;
margin-left: 80px;
}
.bigimg{
margin-top: 2em;
position: absolute;
width: 450px;
height: 450px;
margin-left: 240px;
}
.producttext{
position: absolute;
overflow: hidden;
}
Here's the code, you don't need to use position absolute to do this see the code.
.pdc{
display: inline;
}
.moreproduct img {
position: relative;
border: 1px solid #93a2ad;
margin-top: 4px;
}
.moreproduct ul{
list-style: none;
float:left;
}
.moreproduct ul li img{
width: 100px;
height: 100px;
}
.bigimg{
margin-top: 2em;
float:left;
width: 400px;
height: 450px;
margin-left: 20px;
}
.producttext{
float: left;
overflow: hidden;
margin-top: 20px;
}
.clear{
clear:both;
}
<section class="pdc">
<div class="moreproduct">
<ul>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
</ul>
<div class="bigimg">
<img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" />
</div>
<div class="producttext">
<h3>New Balance</h3>
<h1>Men's MX608v4</h1>
<p>SGF</p>
</div>
<div class="clear"></div>
</div>
</section>
As others already mentioned: Don't use absolute positioning to layout your page.
Note: You need to view the example in full-screen to see that everything is aligned "in one line".
Do you mean something like this:
.pdc{
display: inline;
}
.moreproduct img {
position: relative;
border: 1px solid #93a2ad;
margin-top: 4px;
}
.moreproduct ul{
list-style: none;
display: inline-block;
}
.moreproduct ul li img{
width: 100px;
height: 100px;
}
.bigimg{
margin-top: 2em;
display: inline-block;
height: 300px;
}
.producttext{
display: inline-block;
overflow: hidden;
height: 450px;
}
<section class="pdc">
<div class="moreproduct">
<ul>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
</ul>
<div class="bigimg">
<img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" />
</div>
<div class="producttext">
<h3>New Balance</h3>
<h1>Men's MX608v4</h1>
<p>SGF</p>
</div>
</div>
</section>
<style>
.pdc{
display: inline;
}
.moreproduct img {
position: relative;
border: 1px solid #93a2ad;
margin-top: 4px;
}
.moreproduct ul{
list-style: none;
}
.moreproduct ul li img{
width: 100px;
height: 100px;
margin-left: 80px;
}
.bigimg{
margin-top: 2em;
position: absolute;
width: 636px;
height: 450px;
margin-left: 240px;
left: 11px;
}
.producttext{
overflow: hidden;
float:right;
padding-top:25%;
}
</style>
<section class="pdc">
<div class="moreproduct">
<div class="bigimg">
<img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" />
<div class="producttext">
<h3>New Balance</h3>
<h1>Men's MX608v4</h1>
<p>SGF</p>
</div>
</div>
<ul>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
</ul>
</div>
</section>
I have a site where I am displaying products. I want the products to fit as many on one line as the set width and margins will allow. I want it to have the items float left (at least have the last items float left), however I also want them centered.
Code (fiddle):
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
li {
list-style-type: none;
float: left;
width: 150px;
height: 150px;
margin: 20px;
padding: 3px;
background: #CCCCCC;
text-align: center;
}
li img {
max-width: 144px;
}
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
As shown on jsfiddle, this is what I essentially have but want the products (represented by the boxes) to also be centered in the page.
You can try display: inline-block instead of float: left:
ul {
text-align: center;
}
li {
display: inline-block;
}
ul {
margin: 0px;
padding: 0px;
text-align: center;
}
li {
display: inline-block;
width: 150px;
height: 150px;
margin: 20px;
padding: 3px;
background: #CCCCCC;
}
li img {
max-width: 144px;
}
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
Try this, I changed your css:
<style type="text/css">
ul { list-style-type:none; margin:0px; padding:0px; overflow:hidden; text-align: center;}
li { list-style-type:none; display: inline-block; width:150px; height:150px; margin:20px; padding:3px; background:#CCCCCC; text-align:center; }
li img { max-width:144px; }
ul { text-align: center; }
</style>
My solution, trying to preserve your code, is wrapping everything inside a div with a fixed width and margin set to auto:
HTML
<div>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
</div>
CSS
ul { list-style-type:none; margin:0; padding:0;overflow:hidden;}
li { list-style-type:none;float:left; width:150px; height:150px; margin:20px; padding:3px; background:#CCCCCC; text-align:center; }
img { max-width:144px; }
div{margin: auto;width: 590px;}
FIDDLE
http://jsfiddle.net/33baohc7/1/