I'm attempting to create an image gallery and want it to appear as a horizontal strip at the bottom of the page that can be scrolled along from left to right to view all of the images. However, something about my code is preventing me from using overflow-x:scroll on the bottom-gallery div or the thumnbail-wrap div. Instead of the images continuing left to right, they automatically start stacking on eachother if the viewport is small enough. Even if I explicitly add overflow-x:scroll to #bottom-gallery and .thumbnail-wrap, they will get set to overflow-y instead, making them scrollable vertically which I don't want.
I have included relevant markup and css below. I suspected that flexbox styling may have contributed to my problem but I toyed with removing all flexbox references in the css and the problem persisted.
Are there known things that prevent layouts from scrolling horizontally?
Markup:
<div class="col-xs-12 hidden-md hidden-lg" id="bottom-gallery">
<div class="thumbnail-wrap">
<img src="assets/images/beardo-thumb.jpg" alt="thumbnail">
<img src="assets/images/grecian-thumb.jpg" alt="thumbnail">
<img src="assets/images/kreg-portrait-thumb.jpg" alt="thumbnail">
<img src="assets/images/pigblood-thumb.jpg" alt="thumbnail">
<img src="assets/images/zombie-thumb.jpg" alt="thumbnail">
</div>
</div>
CSS:
#bottom-gallery {
height:15vh;
padding:15px 0;
div.thumbnail-wrap {
justify-content:flex-start;
a {
width:75px;
height:75px;
margin-bottom:15px;
margin-right:10px;
}
}
}
div.thumbnail-wrap {
display:flex;
flex-flow:row wrap;
img {
width:100%;
height:100%;
}
}
Here's the minimal needed to get you started:
.thumbnail-wrap {
overflow-x: scroll;
display: flex;
}
.thumbnail-wrap .thumb-link {
display: inline-block;
flex: 1 0 auto;
}
<div class="thumbnail-wrap">
<a href='' class='thumb-link'><img src="//placehold.it/400x100/0bf" alt='th'></a>
<a href='' class='thumb-link'><img src="//placehold.it/400x100/fb0" alt='th'></a>
<a href='' class='thumb-link'><img src="//placehold.it/400x100/0fb" alt='th'></a>
<a href='' class='thumb-link'><img src="//placehold.it/400x100/f0b" alt='th'></a>
</div>
Related
I've created an image gallery but I am unsure about how to center the images in the middle of the page horizontally and vertically.
<div class="gallery">
<a target="_blank" href="Icon_pyro.jpg">
<img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
</a>
<div class="desc">Pyro</div>
</div>
With my CSS classes being
div.gallery {
display: block;
margin: 0 auto;
text-align: center;
}
div.gallery img {
margin: 5px;
}
It shows up stacked on top, I am stumped on how to make them side by side
Current webpage
You can use display:flex property to fix your problem.
I will give you some Idea........................
horizontally center
if you use display:flex; all div elements are show as row. Then if you use justify-content:center; you row element will be center horizontally.
.html
<div class="imageContainer">
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
</div>
.css
.imageContainer{
display:flex;
justify-content:center;
}
.img{
margin:5px;
}
jsFiddle example
Vertically center
You have to only add align-items: center; and min-height: 100vh;
.imageContainer{
display: flex;
align-items: center;
min-height: 100vh;
}
jsFiddle Example
horizontally and vertically Center.
just add (here has both above css propertise. have a look and get the idea)
.imageContainer{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
jsFiddle Example
As well as check following example it will show you how to center columns items vertically and horizontally (just added flex-direction:column;)
.imageContainer{
display:flex;
align-items:center;
min-height:100vh;
flex-direction:column;
justify-content:center;
}
jsFiddle Example
Here is the tutorial if you want to follow and get some idea about flex
Can you please check the below code? Hope it will work for you.
You have to add one parent element for all the gallery elements and give flex utility property to that parent. You need to set the height of gallery parent element as per requirements (currently, we have set viewport height for the below demo).
Please refer to this link: https://jsfiddle.net/yudizsolutions/b2fq8dhr/
It sounds like you will want to wrap the images using flex to get them side by side.
In that case, I would create a gallery-wrapper div that wraps around all of your gallery divs. You can style the gallery-wrapper to get flex, which will make it's children side-by-side by default. Also, add justify-content: center, to center things horizontally. Check out this jsFiddle / my updated answer, and consider learning more about Flexbox styling - it's the best.
.gallery-wrapper {
display: flex;
justify-content: center;
}
<body>
<div class="gallery-wrapper">
<div class="gallery">
<a target="_blank" href="Icon_pyro.jpg">
<img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
</a>
<div class="desc">Pyro</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_scout.jpg">
<img src="Icon_scout.jpg" alt="Scout" width="256" height="256">
</a>
<div class="desc">Scout</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_spy.jpg">
<img src="Icon_spy.jpg" alt="Spy" width="256" height="256">
</a>
<div class="desc">Spy</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_soldier.jpg">
<img src="Icon_soldier.jpg" alt="Soldier" width="256" height="256">
</a>
<div class="desc">Soldier</div>
</div>
</div>
</body>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 2 years ago.
I want to show these images on my personal website in a horizontal row, but I'm getting these small unwanted lines at the bottom between my images.
.
Here is my HTML:
<div id="container">
<div id="left">
<h1 id="name">My Name</h1>
</div>
<div id="right">
<a href="link to github">
<img class="imgLink" src="resources/images/github.png">
</a>
<a href="link to linkedin">
<img class="imgLink" src="resources/images/linkedin.png">
</a>
<a href="mailto">
<img class="imgLink" src="resources/images/email.png">
</a>
</div>
<div id="center">
<img src="resources/images/profile.jpg" id="avatar">
</div>
</div>
Here is my CSS:
div {
width: 100%;
height: 25%;
float: left;
}
.imgLink {
height: 100px;
width: 100px;
}
#right {
float: right;
width: 33%;
height: 100%;
background-color: green;
}
The lines are from the spaces in your code. Inline elements are sensitive to whitespace, so removing them removes the lines.
For example, change:
<a href="link to linkedin">
<img class="imgLink" src="resources/images/linkedin.png">
</a>
To:
<img class="imgLink" src="resources/images/linkedin.png">
The tiny lines appear to be links. To remove them try :
#right a {text-decoration:none;}
Try adding:
display:block;
to class .imgLink in your css. This should actually remove the gap (and the underline), rather than just removing the underline.
This is often desirable where you want to accurately adjust padding and margin between objects.
You can then add:
#right a{
float: right;
}
Which should provide the layout you want, but without the gap between icons.
If you want a gap, you can set with margins and know it will be accurate.
this is my first question and I hope I would get some help here.
I have made this HTML page that has 5 DIV's mainly:
Header
Content
Footer
Content contains
Left
Right
The Left and Right Div's float on Left and right respectively.When I put something content div with an H1 tag the div's get somewhat disorted and I get a approx. 10px space between the header and content section, somewhat like this:
Disorted
However the original one should be:
Original
<body>
<a target="_blank"><div id="main" >
<div id="header" >
<a style="color:#000000" href="home.html">Home</a>
<a style="color:#000000" href="about.html">about</a>
<a style="color:#000000" href="Our customers.html">Our Customers</a>
<a style="color:#000000" href="Career.html">Careers</a>
<a style="color:#000000" href="Contact us.html">Contact us</a>
</div>
<div id="content">
<div id="left" ></div>
<div id="right" ></div>
Home
</div>
<div id="footer">
<a style="color:#FFFFFF" href="home.html">Privacy Policy</a>|
<a style="color:#FFFFFF" href="Feedback.html">Feedback</a>|
<a style="color:#FFFFFF" href="disclaimer.html">Disclaimer</a>|
<a style="color:#FFFFFF" href="Manadatory.html">Manadatory Disclosure</a>|
<a style="color:#FFFFFF" href="sitemap.html">Site Map</a>|
</div>
</div></body>
Here is my CSS Code:
#main
{
height:900px;
background-color:#000000;
}
#header
{
height:100px;
background-color:#00FF00;
padding:70px;
padding-right:70px;
font-size:30px;
text-align:center;
background-image:url(Images/text3.jpg);
padding: 50px;
}
#content
{
height:700px;
background-color:#FFFFFF;
}
#left
{
float:left;
height:700px;
background-color:#FF0000;
width:150px;
background-image:url(Images/navbar2.jpg);
}
#right
{
float:right;
height:700px;
background-color:#FF0000;
width:150px;
background-image:url(Images/navbar2.jpg);
}
#footer
{
padding:50px;
padding-right:70px;
font-size:20px;
text-align:center;
height:100px;
background-image:url(Images/footer.jpg);
}
Fixing position of the div's using position hasn't helped. Thanks for any help in advance :)
Right click and inspect element on your browser and check the divs. You should see what's happening to it. Most likely it will be some default styling that's giving some margins. That's why most people use some kind of reset.css as a clean base. I imagine the default css is applying margins to the <p> and <h1> tags.
Maybe try adding something like:
h1 {
margin:0;
}
Obviously you could specify only certain margins rather than all or .content h1{} to just apply styling to the headers within the content block.
I am trying to work out the best way for me to center each of my pictures (#contact1, #contact2, #contact3) inside each of their containers. I have tried to put margin left etc but doesnt work for when I scale up.
I have a JSFiddle I have started: http://jsfiddle.net/tJugd/3592/
HTML:
<div class="slide" style="height:66px;">
<div class="staff staff-matt" data-hammer="[object Object]">
<div id="contact1"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-shail" data-hammer="[object Object]">
<div id="contact2"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-leah" data-hammer="[object Object]">
<div id="contact3"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
</div>
CSS: (View all on JSFiddle)
#contact1, #contact2, #contact3{
position:relative;
background-color:white;
width:100%;
height:66px;
}
You will need to make you images display block and add margin 0 auto to it
#contact1 img, #contact2 img, #contact3 img{
margin: 0px auto;
display:block;
}
Try:
margin-left: auto;
margin-right: auto;
This makes your image have an equal margin on both sides, and usually works with most divs and images.
Try with adding the attribute text-align: center; to staff class.
HTML/CSS newbie question for you.
I've been stuck on this for awhile. I'm looking to center my image gallery AND also make the padding between the images tighter. I'm thinking I need a container but, I've just been screwing it all up when I try. Any help would be great!
<div id="container" align="center">
<div class="img">
<a href="#">
<img src="#" alt="PIcture1" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="Images/9700_1915630577543_1314909545_n.jpg" alt="oldman" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture3" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture4" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
</div>
CSS:
#container{
}
div.img
{
margin:5px;
padding: 5px;
border:none;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:none;
}
div.img a:hover img
{
border:none;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
It depends on how you want to centre your gallery.
There's a few things that you need to bear in mind. In order to centralise some HTML you need to have a set width of the centralising element.
Here's some code for you to work with:
Create a "centre" class in CSS as follows:
div.centre{
margin:0px auto;
width:800px;
}
Then add it to your container as follows:
<div id="container" class="centre">
The secret to centralisation is in the margin:0px auto;, this is convention of modern web development to centralise content.
Have a look at this code
p.s. don't use align="center" it is depreciated in later versions of HTML. Better to not get into the habit of using it and stick to using CSS classes to centralising things for you.
You should not use align. It is a deprecated property. To center something with a container you need to specify a fixed width and add margin auto.
Ex:
#container {
width:970px;
margin: 0 auto;
}
You can remove the padding on div.img