I want to make an image slider with thumbnail images to select from, my idea is allign all images horizontally and hide overfolwn than with javascript i will just change the left postion to display the needed thumbnail, but I couldn't figure out how to css images to align hrizontally and hide the part that goes beyond the container of the thumnails, I am using spectre css framework, my HTML looks like this
.img-list {
margin-bottom: 20px;
height: 100px;
width: 100%;
overflow-x: hidden;
}
#media (max-width: 600px) {
.img-list {
height: 50px;
}
}
.img-container {
height: 100%;
position: relative;
overflow: visible;
}
.img-container img {
height: 100%;
display: inline-block;
position: relative;
}
.img-main {
width: 100%;
}
.img-main img {
width: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<div class="container">
<div class="columns">
<div class="column col-md-12">
<div class="img-main">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
</div>
<div class="img-list ">
<div class="img-container">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
<img src="https://preview.ibb.co/iZ3Lww/img2.jpg">
<img src="https://preview.ibb.co/iQsPOb/img3.jpg">
<img src="https://preview.ibb.co/gFFdib/img4.jpg">
<img src="https://preview.ibb.co/hS5ppG/img5.jpg">
<img src="https://preview.ibb.co/goKtGw/img6.jpg">
<img src="https://preview.ibb.co/bSWjOb/img7.jpg">
<img src="https://preview.ibb.co/i2o9pG/img8.jpg">
</div>
</div>
</div>
<div class="column col-md-12">
<h1>Peugeaut 206</h1>
<input type="number" onchange="showImage(this)" value="1">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam culpa sint recusandae architecto odit tenetur
fugit rerum soluta quidem velit. Eos provident nemo dolores vitae pariatur perspiciatis delectus ex dignissimos!
Quibusdam architecto natus nam ullam cupiditate deserunt voluptatem nulla inventore nesciunt error recusandae
quod ab, harum temporibus laboriosam numquam facilis beatae. Numquam odit dolorem quasi rerum aut cupiditate
distinctio ad! Assumenda aut, repellat nihil, fugit doloremque doloribus harum possimus commodi aliquam recusandae
reiciendis delectus vel modi quia sapiente sit voluptas deleniti. Repellat magni rerum fuga vitae odio ad
ullam tempora.</p>
</div>
</div>
</div>
You can simply use white-space:nowrap
.img-list {
margin-bottom: 20px;
height: 100px;
width: 100%;
overflow: auto; /*Show horizontal scroll*/
}
#media (max-width: 600px) {
.img-list {
height: 50px;
}
}
.img-container {
height: 100%;
position: relative;
white-space:nowrap; /*Added this*/
}
.img-container img {
height: 100%;
display: inline-block;
vertical-align:top; /*to remove unwanted whitespace */
position: relative;
}
.img-main {
width: 100%;
}
.img-main img {
width: 100%;
}
<div class="img-main">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
</div>
<div class="img-list ">
<div class="img-container">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
<img src="https://preview.ibb.co/iZ3Lww/img2.jpg">
<img src="https://preview.ibb.co/iQsPOb/img3.jpg">
<img src="https://preview.ibb.co/gFFdib/img4.jpg">
<img src="https://preview.ibb.co/hS5ppG/img5.jpg">
<img src="https://preview.ibb.co/goKtGw/img6.jpg">
<img src="https://preview.ibb.co/bSWjOb/img7.jpg">
<img src="https://preview.ibb.co/i2o9pG/img8.jpg">
</div>
</div>
Flexbox is good option but if you want you can add to div with a list of thumbnail images white-space: nowrap
Here is jsfiddle:
.img-container {
white-space: nowrap;
}
.img-container img {
height: 80px;
width: 80px;
display: inline-block;
}
.img-list {
height: 100px;
width: 100%;
}
.img-main img {
width: 100%;
}
<div class="img-main">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
</div>
<div class="img-list ">
<div class="img-container">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
<img src="https://preview.ibb.co/iZ3Lww/img2.jpg">
<img src="https://preview.ibb.co/iQsPOb/img3.jpg">
<img src="https://preview.ibb.co/gFFdib/img4.jpg">
<img src="https://preview.ibb.co/hS5ppG/img5.jpg">
<img src="https://preview.ibb.co/goKtGw/img6.jpg">
<img src="https://preview.ibb.co/bSWjOb/img7.jpg">
<img src="https://preview.ibb.co/i2o9pG/img8.jpg">
</div>
</div>
I have updated CSS removed the unnecessary style.
My solution of choice is Flexbox!
To class .img-container:
add display: flex; - this turns the container into a flex container
add flex-direction: row; - this is default but illustrates the example
add flex-wrap: nowrap; - this is also default but also illustrates the example
finally, change overflow to hidden
jsfiddle demo
I believe this achieves what you desire. Please let me know if I'm mistaken.
Related
I'm trying to replicate a website that claimed it was only made with the basic Html, CSS and JavaScript. Annoyingly I can't seem to make the images responsive and relatively the same
Can someone explain to me what I’m doing wrong? I'm using flexbox to make the site responsive but the alignments are off and I cant get them to sit next to each other with all the correct padding as well
This is my work:
https://codepen.io/Hitmonchan98/pen/PoQLRPy
This is what I want my site to look like:
https://i.stack.imgur.com/jsdxo.jpg
//html
<body>
<div class="main">
<div class="main-img"><img class="firstImage"src="https://www.amazingonly.com/wp-content/uploads/2013/04/images4-1728x1080.jpg" alt=""></div>
<div class="text">
<h2>Discover innovative ways to decorate</h2>
<p class="para">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia repudiandae dolore iure laudantium fugiat fuga sunt unde voluptates et, quasi exercitationem eum consectetur. Doloremque, ab?</p>
<div class="shop">Shop Now</div>
</div>
</div>
<div class="lower">
<div class="dark image">
<img class="dark-img" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/Download-Free-Pictures-4k.jpg" alt="">
</div>
<div class="text2">
<h3>About furniture</h3><p class="para">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus ipsa, adipisci perspiciatis debitis magni sed possimus pariatur qui exercitationem fugiat iusto error ducimus, quos quis, eius earum tempore quibusdam laboriosam!</p></p></div>
<div class="light image">
<img class="light-img"src="https://www.pixelstalk.net/wp-content/uploads/2016/07/Download-Free-Pictures-4k.jpg" alt="">
</div>
</div>
</body>
//css
body{
margin: 0;
padding: 0;
line-height: 2rem;
}
/*Body*/
.firstImage,.light-img,.dark-img
{
width: 100%;
}
.text2{
padding: 2rem;
}
.text h2
{
font-size:3rem;
}
#media screen and (min-width: 768px) {
.main{
display: flex;
}
.text{
padding: 1rem 3rem 3.5rem 3rem;
}
.lower{
display: flex;
align-content:center;
}
.text2{
padding:0;
width: 40%;
}
.dark, .light
{
width: 30%;
}
.dark-img, .light-img {
width: 100%;
}
}
#media screen and (min-width: 786px) {
}
Add display: block; to your img elements and this should get rid of the white spacing underneath them. Images are weird in HTML since they have properties of both display inline and block, and I usually set them to block to have maximum styling control over them.
I'm trying to recreate this but I'm stuck on getting the image and text to fit inside the innermost border. the final is supposed to have an outside border, an inside border, and a div that expands across the top. Then a picture that is 30% width of the top spanning div. Then text that is supposed to be width 70% of the top spanning div.
This is what I got so far HTML:
:root {
--winter-primary: #ffd110;
}
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
margin: 20px;
}
.wh {
background-color: var(--winter-primary);
padding: 30px;
}
.winter-image {
width: 30%;
float: left;
}
.wi {
width: 70%;
float: right;
}
<section class="winter">
<div class="outside-winter-border">
<div class="insdie-winter-border">
<div class="section-heading">
<div class="wh">
<h2>Winter</h2>
</div>
</div>
<div class="content-wrapper">
<div class="winter-image">
<div class="section-image">
<a href="winter.html">
<img src="assets/images/winter.jpg" alt="Winter Image">
</a>
</div>
</div>
<div class="wi">
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
The exact desired result is unclear. However, here is a version using flex that gets both the image and text within the border. Don't use float.
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
}
img {
height: 100%;
}
.wh {
display: inline-flex;
}
.insdie-winter-border {
display: flex;
align-items: center;
}
:root {
--winter-primary: #ffd110;
}
p {
margin-left: 1em;
}
.section-heading {
width: 100%;
background-color: var(--winter-primary);
text-align: center;
}
.section-heading>h2 {
margin: 0;
}
<section class="winter">
<div class="outside-winter-border">
<div class="section-heading">
<h2>Winter</h2>
</div>
<div class="insdie-winter-border">
<div class="wh">
<a href="winter.html">
<img src="https://dummyimage.com/125/000/fff" alt="Winter Image">
</a>
</div>
<div class="content-wrapper">
<div class="winter-image">
</div>
<div class="wi">
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
I think you can try this (insted of .winter-image and .wi ):
.content-wrapper {
display: flex;
}
.winter-image {
flex: 3;
}
.wi {
flex: 7;
}
I'm creating an 'About' section for a website, which is a table with three equal-width columns: a headshot, a paragraph, and another paragraph (see screenshots below).
I'd like to have the image automatically resize (keeping its aspect ratio) to be the height of the largest text- aligned left within the cell- without hardcoding any height/width values. However, I've played around a bunch and nothing seems to make the image resize.
/* an element that's one-third the width of its container */
.third-width {
width: 33%;
}
/* the headshot photo */
#headshot {
border-radius: 5px;
max-width: 100%;
max-height: 100%;
display: inline-block;
}
#about-table td {
background-color: pink;
padding: 1vw;
text-align: justify;
vertical-align: top;
font-family: var(--body-font);
font-weight: lighter;
}
<table id="about-table">
<tr>
<td class="third-width">
<img id="headshot" src="https://via.placeholder.com/80" alt="None">
</td>
<td class="third-width">
<p>[... SOME TEXT ...]</p>
</td>
<td class="third-width">
<p>[... SOME TEXT ...]</p>
</td>
</tr>
Current state:
What I would like:
Thank you!
Use CSS Flex instead of table
Make the cells flex: 1; position: relative;
Make the image position: absolute; with 100% W/H and object-fit: cover to not distort the image
/* QuickReset */
* { margin:0; box-sizing: border-box; }
/* About component */
.About {
display: flex;
}
.About > div {
position: relative;
flex: 1;
outline: 1px solid #000;
padding: 20px;
}
.About > div img {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="About">
<div><img src="https://placekitten.com/408/287" alt="Catz!"></div>
<div>Lorem ipsum</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur tempora voluptatibus eligendi dolorem. Excepturi perspiciatis ipsa porro, minus ea.</div>
</div>
<div class="About">
<div>Lorem ipsum</div>
<div>Molestiae sunt nisi nostrum sed, ipsa porro, minus ea.</div>
<div><img src="https://placekitten.com/500/300" alt="Catz!"></div>
</div>
<div class="About">
<div><img src="https://placekitten.com/310/290" alt="Catz!"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur</div>
<div>Lorem ipsum</div>
</div>
I've created a slideshow inside a section tag using a div tag. I tried to add a body of text above the slideshow so I added another div tag above the div tag for the slideshow and it worked however, as I add text, it pushes the images in the slideshow down, cutting off the images in the slideshow. Is there a solution to this? Thank you
<!DOCTYPE html>
<html>
<head>
<title> AnimeExpoBd </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<ul>
<li class="logo">ANIME EXPO LOGO</li>
<li class="navbar">HOME</li>
<li class="navbar"><a href=#gotoaboutus>ABOUT US</a></li>
<li class="navbar">SCHEDULE</li>
<li class="navbar">CONTACT US</li>
</ul>
</header>
<section class="feature-box opening">
<div id="gotoaboutus" class="about-us"><strong>ABOUT US</strong><p class="descpara">We aim to popularize and educate the Bangladesh public about Japanese anime and manga culture, as well as provide a forum to facilitate communication between professionals and fans. We're passionate about all things anime. We're here to help you discover hidden gems, learn more about new and current anime, find fan art and cosplay of all your faves, and get your opinions!</div>
<div class="Images"></div>
</section>
<section class="feature-box closing">
<div class="sched">Section A<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque exercitationem ad sed enim maiores cum recusandae numquam quibusdam. Perferendis reiciendis ut tenetur dignissimos neque hic impedit optio quasi libero sunt. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, ipsum? Exercitationem accusantium quaerat numquam architecto cum culpa magnam illo quos quod. Eligendi placeat repellendus perferendis veritatis ducimus iure maxime vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae rerum quia odit veniam natus consequuntur iste eum eos officiis ab optio sed itaque quasi possimus voluptatibus, velit est dolor quo. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat nostrum in, quidem totam a atque obcaecati natus ratione quae rem ipsam sed hic laudantium enim aspernatur nemo cum, nobis eius.</p></div>
<div class="slidershow middle">
<div class="header">Header and Description</div>
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<div class="slide s1">
<img src="images/1.jpg" alt="">
</div>
<div class="slide">
<img src="images/2.jpg" alt="">
</div>
<div class="slide">
<img src="images/3.png" alt="">
</div>
<div class="slide">
<img src="images/4.jpg" alt="">
</div>
<div class="slide">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
</div>
</section>
<footer>footer</footer>
</body>
</html>
section.feature-box.closing {
margin: 5px;
padding: 10px;
height: 620px;
width: 1310px;
background-color: #34495e;
display: flex;
}
section.feature-box.closing div.slidershow div.header {
font-size: medium;
color: white;
padding-bottom: 20px;
text-align: center;
margin-top: 5px;
}
section.feature-box.closing div.sched {
width: 481px;
text-align: center;
color:black;
font-size: medium;
background-color: #c3edea;
}
section.feature-box.closing div.slidershow {
width: 700px;
height: 400px;
overflow: hidden;
}
section.feature-box.closing div.middle {
position: relative;
top: 68%;
left: 31%;
transform: translate(-50%, -50%);
}
section.feature-box.closing div.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
section.feature-box.closing div.navigation label.bar {
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
}
section.feature-box.closing div.navigation label.bar:hover {
background-color: white;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
section.feature-box.closing div.slides {
width: 500%;
height: 100%;
display: flex;
background-size: 100%;
}
section.feature-box.closing div.slides div.slide {
width: 20%;
transition: 0.6s;
}
section.feature-box.closing div.slides div.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1 {
margin-left: 0;
}
#r2:checked ~ .s1 {
margin-left: -20%;
}
#r3:checked ~ .s1 {
margin-left: -40%;
}
#r4:checked ~ .s1 {
margin-left: -60%;
}
#r5:checked ~ .s1 {
margin-left: -80%;
}
Try this :
section.feature-box.closing div.slidershow div.header {
font-size: medium;
color: white;
padding-bottom: 20px;
text-align: center;
margin-top: 5px;
position: absolute;
left: 40%;
}
My understanding of table-cell is that each table-cell's height will expand to be the same height as the tallest table-cell; however, in this example, .col2's height extends below .col1 when the img within .col1 is set to display: block and the text within .col2 is pushed all the way to the bottom. If display: block is removed from the img, .col1 and .col2 line up with the text aligned to the middle. My question is why does the display: block on the img change how the table-cells are rendered and how the text is aligned. Toggle display: block on the img to see the difference.
https://codepen.io/norkuy/pen/EvQQrE
HTML
<div class="row1">
<div class="col1">
<img src="http://lorempixel.com/1000/800/" alt="">
</div>
<div class="col2">
<p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet
mollitia est maiores temporibus ea, sint ex repellat ipsa eveniet nesciunt.
</div></p>
</div>
</div>
<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab veniam
praesentium delectus aliquid ea nisi porro eius rem debitis architecto quas,
hic placeat ratione possimus voluptates perferendis at voluptatibus tenetur!
</div></p>
CSS
.col1, .col2 {
width: 50%;
display: table-cell;
}
.col2 {
background: black;
color: white;
}
.row1 {
display: table;
img {
display: block;
}
}
img {
max-width: 100%;
width: 100%;
}
If you want your table-cell elements work properly, your cells container has to have table-row display
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 50%;
vertical-align: middle;
border-bottom: 1px solid #000;
}
<div class="table">
<div class="row">
<div class="cell">
<br/><br/>fdfsf
</div>
<div class="cell">
dffdsf
</div>
</div>
</div>