I am relatively new to coding and I am looking to re-create this http://prntscr.com/e73jze which I designed in Photoshop. Could anyone give me the simplest way to make this?
Many thanks
Based on your included photo, exactly matching the styling of this design will not have a simple answer. To make a simple <div> with horizontally scrollable content, you could do something like this:
#wrapper {
display:flex;
flex-wrap:none;
height:200px;
width:100%;
background-color:black;
overflow-x: scroll;
}
.photo-box {
flex:0 0 auto;
margin:25px;
background-color:white;
width:300px;
height:150px;
}
<div id='wrapper'>
<div class='photo-box'></div>
<div class='photo-box'></div>
<div class='photo-box'></div>
<div class='photo-box'></div>
<div class='photo-box'></div>
<div class='photo-box'></div>
<div class='photo-box'></div>
</div>
However styling things like the scrollbar are not as simple and would require a fair amount more mark-up.
Use a div with overflow:scroll as a starting place to get a scrolling box and you can find a jQuery plug-in for making custom scrollbars here.
Just insert your own images and style the scrollbar.
#scrollable {
width: 500px;
height: auto;
margin: 100px auto;
overflow: auto;
white-space: nowrap;
}
<div id="scrollable">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
</div>
Related
I'm using a downloaded theme from a site and it had multiple versions of homepages. I'm using one of them but in the homepage there were set sizes for the images.
I have a dynamic site so the images will be loaded automatically. I'm trying to get rid of this stuck image size but it refuses, a single image is taking all over the container.
I've deleted all the code in that section. It was a container split into 3 parts, a side bar , middle part and right part. Because I won't know the sizes of my images I left the sidebar as is and I joined the middle and right part to be together. Now whenever I add an image it takes over the whole container and the other images just load under it which lead the container to drag more.
This is what my code looks like
.container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: 100px 300px;
grid-gap: 10px;
}
.gallery_container .gallery_Item {
width:100%;
height: 100%;
position: relative;
}
4.gallery_container .gallery_Item .image {
width: 100%;
height: 100%;
overflow: hidden;
}
.gallery_container .gallery_Item .img {
width:100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPNy2qphPH0eDMdpoyfLsPz9D-pc6ntnktcw&usqp=CAU" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVy3Qlw07-BSIBiWkNRxZEYSHJKqQgvynzwQ&usqp=CAU" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://pqina.nl/media/cat.jpeg" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmK_e1W8uKhev51wmsAZVqNO0PVhOl9u2o3w&usqp=CAU" />
</div>
</div>
</div>
</div>
I've been doing some stuff with HTML and I need to have a few columns. I know how to make them and the basics of how they work. However, there is a certain problem that I have. I need to have 3 columns that have an image on top, then text on bottom. However, the text on bottom can't flow into the next column if the browser is resized - it just needs to go up or down. What I have so far:
body {
background-color: white;
font-family: times, serif;
color: black;
}
div {
display: flex;
margin: 50px;
flex-wrap: wrap;
}
<div>
<div class="first">
<img src="Images/australia_flag.jpg" alt="Australian Flag" title="Australian Flag" height="200" width="300"> text as well </div>
<div class="second">
<img src="Images/brazil_flag.jpg" alt="Brazilian Flag" title="Brazilian Flag"> even more text </div>
<div class="third">
<img src="Images/china_flag.jpg" alt="Chinese Flag" title="Chinese Flag" height="200" width="300"> text again
</div>
</div>
not entirely sure if you mean columns or rows? Based on your code, it looks like rows. If that's the case, I'm not sure what you mean by "flow into the next column"? You might check out the relative and absolute values for CSS position.
If, in fact, you do actually mean columns, I'd strongly advise using Bootstrap's Grid System. This is great for creating responsive columns.
Please take a look at this simple 3 column layout with a full width content area on top and bottom here: https://jsfiddle.net/7drfva0o/2/
.top, .bottom {
width:98%;
padding:1%;
background-color: red;
clear:both;
}
.cols {
width:31%;
padding:1%;
float:left;
background-color:blue;
border: 1px solid #FFF;
}
Is that what you're looking for?
First, you'll need to improve your markup: having images and texts as DOM node to be "flexed"
HTML markup improved
<div class="wrapper">
<div class="column">
<img src="..." />
<p>text</p>
</div>
<div class="column">
<img src="..." />
<p>text</p>
</div>
<div class="column">
<img src="..." />
<p>text</p>
</div>
</div>
Then, each of your div is going to have display: flex + flex-direction: column to allow the image going on top and the text going below. You will be able to adjust margin or whatever. At the minimum, I'd go like this:
CSS improved
.wrapper {
display: flex;
}
.column {
margin: 5px;
display: flex;
flex-direction: column;
}
Wrapped altogether, here is a snippet of what I think you're trying to achieve
Snippet
.wrapper {
display: flex;
}
.column {
margin: 5px;
display: flex;
flex-direction: column;
}
<div class="wrapper">
<div class="column">
<img src="http://fakeimg.pl/300x200" />
<p>text as well</p>
</div>
<div class="column">
<img src="http://fakeimg.pl/300x200" />
<p>text as well</p>
</div>
<div class="column">
<img src="http://fakeimg.pl/300x200" />
<p>text as well</p>
</div>
</div>
Then, feel free to play with flexbox properties to align, wrap, adjust alignments, etc. Great documentation on CSS-Tricks : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am learning to bear with me.
I want to have 3 separate blocks within a container, and through css have them inlined, for example
the html (rough idea)
<div class="content-container">
<div class="block1">
<img scr="blockimage1" />
</div>
<div class="block2">
<img scr="blockimage2" />
</div>
<div class="block3">
<img scr="blockimage3" />
</div>
</div>
the css (rough idea)
.content-containter
{
width:1500px;
margin:40px auto 0 auto;
padding:10px;
}
.block1
{
width:500px;
float:left;
}
.block2
{
width:500px;
float:center;
}
.block3
{
width:500px;
float:right;
}
What's happening to me is they are just all aligning vertically below each other. Not next to each other in a horizontal line. I've tried many things and the closest I got was making a grid system with bootstrap but I ran issues with that later on so I thought I'd try a new approach.
You need to clean your HTML, CSS and use a simple solution. View the result in full screen. Display the blocks in a line using display: inline-block
.content-containter
{
width:1500px;
margin:40px auto 0 auto;
padding:10px;
}
.block {
display: inline-block;
}
<div class="content-container">
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
</div>
I am trying to make a iphone overlay with a scrolling image inside to showcase mobile website designs, but the image isn't scrolling with the overlayed iphone on top is there something I am doing wrong and how do I fix it?
DEMO: http://jsfiddle.net/jonathanl5660/Lao36z20/
<div>
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px" style="position: absolute; ">
</div>
<div style="width:300px;height:700px;overflow:scroll;margin:30px; position: relitive;">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="98%" height="700px" alt="" style="margin-top:150px;margin-left:10px;" /><br />
<br />
</div>
You could structure your html like this:
<div class="iphone">
<div class="container">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" alt=""/>
</div>
</div>
And then with CSS adjust the look :
.iphone {
width:370px;
height:800px;
background:url('https://dl.dropboxusercontent.com/u/9833562/iphone.png') no-repeat center;
background-size:100%;
}
.container {
position:relative;
top:152px;
width:293px;
margin:auto;
max-height:496px;
overflow:auto;
}
.container img {
width:100%;
}
Check this demo Fiddle
I've forked your example and twaked it a bit. By keeping inner content at constant width we can expand its container vertically and the effect is that like if we only moved scrollbar to the right. Please also note we can setup overflow behavior spearately for x and y axes.
Here's the JSFiddle link:
http://jsfiddle.net/74yh81s4/2/
and the code:
<div class="position: relative">
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px">
</div>
<div style="width:340px; height:472px; overflow-x:hidden; overflow-y:scroll; margin:30px; position: absolute; top: 142px; left: 17px">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="295px" alt="" />
</div>
Best regards
I'm trying to create a <div> with a series of photos which are horizontally scrollable only.
It should look something like this LINK;
However the above is only achieved by specifying a width for the <div> which contains the photos (so they don't 'word-wrap'). If I don't put a width - it looks like this;LINK
What can I do using CSS to prevent putting in a fixed width as the images may vary.
Thanks
You can use display:inline-block with white-space:nowrap. Write like this:
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap;
}
.imageDiv img {
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 50px;
cursor: pointer;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
}
Check this http://jsfiddle.net/YbrX3/
Here's a solution with flexbox for images with variable width and height:
.container {
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
margin: 20px;
}
img {
flex: 0 0 auto;
width: auto;
height: 100px;
max-width: 100%;
margin-right: 10px;
}
<div class="container">
<img src="https://via.placeholder.com/100x100" />
<img src="https://via.placeholder.com/50x50" />
<img src="https://via.placeholder.com/5x50" />
<img src="https://via.placeholder.com/100x50" />
<img src="https://via.placeholder.com/50x100" />
<img src="https://via.placeholder.com/20x50" />
<img src="https://via.placeholder.com/50x30" />
<img src="https://via.placeholder.com/50x150" />
<img src="https://via.placeholder.com/250x50" />
<img src="https://via.placeholder.com/150x350" />
<img src="https://via.placeholder.com/50x350" />
<img src="https://via.placeholder.com/100x100" />
<img src="https://via.placeholder.com/50x50" />
<img src="https://via.placeholder.com/5x50" />
<img src="https://via.placeholder.com/100x50" />
<img src="https://via.placeholder.com/50x100" />
<img src="https://via.placeholder.com/20x50" />
<img src="https://via.placeholder.com/50x30" />
<img src="https://via.placeholder.com/50x150" />
<img src="https://via.placeholder.com/250x50" />
<img src="https://via.placeholder.com/150x350" />
<img src="https://via.placeholder.com/50x350" />
</div>
Use this code to generate horizontal scrolling blocks contents. I got this from here http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html
<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<!-- more boxes here -->
</div>
</div>
</body>
</html>
try using table structure, it's more back compatible.
Check this outHorizontal Scrolling using Tables