I'd like to format my tumbnails so that they form one larger square. Currently they're uncentered (which is my first issue), and have spaces between them. How would I go about centering the overall thumbnails, and then making it so that all the thumbnails would touch and form a square?
.links {
margin: auto;
padding: auto;
width: 100%;
}
img {
margin: 0 0 0 0;
padding: auto;
vertical-align: middle;
width: 100px;
}
h2 {
margin: 15% 0 0 0;
padding: 0 0 0 0;
margin-top: 10px;
margin-bottom: 5px;
font-size: 125%;
text-align: center;
}
<h2>Landscapes</h2>
<div id="links">
<a href="img/landscapes/brs.jpg" title="">
<img src="img/thumbnails/brs.jpg" alt="">
</a>
<a href="img/landscapes/ela.jpg" title="">
<img src="img/thumbnails/ela.jpg" alt="">
</a>
<a href="img/landscapes/farm.jpg" title="">
<img src="img/thumbnails/farm.jpg" alt="">
</a>
<a href="img/landscapes/first.jpg" title="">
<img src="img/thumbnails/first.jpg" alt="">
</a>
<a href="img/landscapes/hf.jpg" title="">
<img src="img/thumbnails/hf.jpg" alt="">
</a>
<a href="img/landscapes/lindy.jpg" title="">
<img src="img/thumbnails/lindy.jpg" alt="">
</a>
<a href="img/landscapes/lp.jpg" title="">
<img src="img/thumbnails/lp.jpg" alt="">
</a>
<a href="img/landscapes/mcafee.jpg" title="">
<img src="img/thumbnails/mcafee.jpg" alt="">
</a>
<a href="img/landscapes/meth.jpg" title="">
<img src="img/thumbnails/meth.jpg" alt="">
</a>
<a href="img/landscapes/nr.jpg" title="">
<img src="img/thumbnails/nr.jpg" alt="">
</a>
<a href="img/landscapes/d.jpg" title="">
<img src="img/thumbnails/d.jpg" alt="">
</a>
<a href="img/landscapes/old.jpg" title="">
<img src="img/thumbnails/old.jpg" alt="">
</a>
</div>
Here's an image of what it currently looks like:
The kind of thing I'm going for:
Just add the following and change .links to #links or set class = 'links' instead of id = 'links'
a{
display: inline-block;
margin: 0px -2.5px;
}
Try to
a, img, div{
display: inline-table;
}
.links {
margin: auto;
padding: auto;
width: 100%;
}
img {
margin: 0 0 0 0;
padding: auto;
vertical-align: middle;
width: 100px;
}
h2 {
margin: 15% 0 0 0;
padding: 0 0 0 0;
margin-top: 10px;
margin-bottom: 5px;
font-size: 125%;
text-align: center;
}
a{
display: inline-table;
width: 100px;
}
Fiddle: https://jsfiddle.net/55cdek2r/
Related
I need to center images side by side (warp) & also be able to change images on hover, seems like I can't do both at the same time.
Here is what is have tried:
The first part is the centering part; it works.
The 3rd part is the hover part; that works too but only if justified to the left
and the 2nd part is both and it gets crazy when I hover over.
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
.fblogo {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 200px;
}
#images{ text-align: center; }
#images2{ text-align: center; }
<div id="images">
<img class="fblogo" border="0" alt="Facebook" src="https://d1fzhre25nnjsm.cloudfront.net/483141420_2072_Artboard-55.png" />
<img class="fblogo" border="0" alt="Facebook" src="https://d1fzhre25nnjsm.cloudfront.net/483141436_2072_Artboard-50.png" />
</div>
<div id="images2">
<a href="https://cs13498732.churchspring.org/get-involved/breakway/">
<img class="fblogo" border="0" alt="Facebook" src="https://d1fzhre25nnjsm.cloudfront.net/483141420_2072_Artboard-55.png" />
<img class="fblogo" border="0" alt="Facebook" src="https://d1fzhre25nnjsm.cloudfront.net/483141416_2072_Artboard-56.png" />
</a>
<a href="https://www.facebook.com/OlympiaHaacht">
<img class="fblogo" border="0" alt="Facebook" src="https://d1fzhre25nnjsm.cloudfront.net/483141436_2072_Artboard-50.png" />
<img class="fblogo" border="0" alt="Facebook" src="https://d1fzhre25nnjsm.cloudfront.net/483141441_2072_Artboard-49.png" />
</a>
</div>
<div id="images3">
<a href="https://cs13498732.churchspring.org/get-involved/calvary-kids/">
<img class="img-responsive" src="https://d1fzhre25nnjsm.cloudfront.net/483141420_2072_Artboard-55.png" alt="" style="float: left; margin: auto;">
<img class="img-responsive" src="https://d1fzhre25nnjsm.cloudfront.net/483141416_2072_Artboard-56.png" alt="" style="background-color: initial; float: left; margin: auto;">
</a>
<a href="https://cs13498732.churchspring.org/get-involved/breakway/">
<img class="img-responsive" src="https://d1fzhre25nnjsm.cloudfront.net/483141436_2072_Artboard-50.png" alt="" style="float: left; margin: 0px 30px 30px 0px;">
<img class="img-responsive" src="https://d1fzhre25nnjsm.cloudfront.net/483141441_2072_Artboard-49.png" alt="" style="float: left; margin: 0px 30px 30px 0px;">
</a>
</div>
This is a simple solution which uses a Flexbox to centre the content automatically
HTML
<div class="flex justify-center">
<div>
<a href="https://cs13498732.churchspring.org/get-involved/calvary-kids/">
<img class="img-responsive" src="https://d1fzhre25nnjsm.cloudfront.net/483141420_2072_Artboard-55.png" alt="" style="float: left; margin: auto;">
<img class="img-responsive" src="https://d1fzhre25nnjsm.cloudfront.net/483141416_2072_Artboard-56.png" alt="" style="background-color: initial; float: left; margin: auto;">
</a>
</div>
<div>
<a href="https://cs13498732.churchspring.org/get-involved/breakway/">
<img class="img-responsive" src="https://d1fzhre25nnjsm.cloudfront.net/483141436_2072_Artboard-50.png" alt="" style="float: left; margin: 0px 30px 30px 0px;">
<img class="img-responsive" src="https://d1fzhre25nnjsm.cloudfront.net/483141441_2072_Artboard-49.png" alt="" style="float: left; margin: 0px 30px 30px 0px;">
</a>
</div>
</div>
CSS
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
.fblogo {
height: 200px;
}
.flex {
display:flex;
}
.justify-center {
justify-content: center;
}
View On JSFiddle
https://jsfiddle.net/MrGreyKnight/qmsfj89h/4/
Nice Guide to Flexboxes :)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am having problems trying to center a div containing four contact images inside of another div. The following is my HTML code for it:
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
<img class="contactImg" src="images/facebook.png" alt="Facebook"></img>
<img class="contactImg" src="images/instagram.png" alt="Instagram"></img>
<img class="contactImg" src="images/twitter.png" alt="Twitter"></img>
<img class="contactImg" src="images/snapchat.png" alt="Snapchat"></img>
</div>
</div>
And the CSS is
div#contact {
border: 1px solid red;
}
div#centeredConctact {
margin: 0 auto;
width: 50%;
}
img.contactImg {
width:50px;
height:50px;
display: inline-block;
margin: 0 auto;
}
div.infoSection {
margin-top: 15px;
padding: 0;
width: 60%;
min-width: 600px;
}
What could I do to fix this? Thank you.
Let me know if this is not what you are trying to achieve. Your question was a little vague but this is what I took from it.
div#contact {
border: 1px solid red;
width: 100%;
}
div#centeredConctact {
text-align: center;
}
img.contactImg {
width: 50px;
height: 50px;
display: inline-block;
margin:4px 1px 1px;
}
a.contactImg {
text-decoration:none;
}
div.infoSection {
margin-top: 15px;
padding: 0;
}
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email">-->
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=F" alt="Facebook">
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=I" alt="Instagram">
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=T" alt="Twitter">
<img class="contactImg" src="http://placehold.it/50x50/333333/dddddd&text=S" alt="Snapchat">
</div>
</div>
The div is already centered.
Center the images (respectively the links) with text-algin: center.
div#contact {
border: 1px solid red;
}
div#centeredConctact {
margin: 0 auto;
width: 50%;
border: 1px solid;
text-align: center;
}
img.contactImg {
width: 50px;
height: 50px;
display: inline-block;
}
div.infoSection {
margin-top: 15px;
padding: 0;
width: 60%;
min-width: 600px;
}
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/facebook.png" alt="Facebook">
</a>
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/instagram.png" alt="Instagram">
</a>
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/twitter.png" alt="Twitter">
</a>
<a href="" rel="noopener noreferrer"><img class="contactImg" src="images/snapchat.png" alt="Snapchat">
</a>
</div>
</div>
Try using flaxbox layout like this:
div#contact {
border: 1px solid red;
display: flex;
justify-content: center
}
img.contactImg {
width: 50px;
height: 50px;
margin: 3px 1px 0;
}
div.infoSection {
margin-top: 15px;
padding: 0;
width: 60%;
min-width: 600px;
}
<div id="contact" class="infoSection">
<div id="centeredConctact">
<!--<img class="contactImg" src="images/email.png" alt="Email"></img>-->
<img class="contactImg" src="http://placehold.it/50x50" alt="Facebook"></img>
<img class="contactImg" src="http://placehold.it/50x50" alt="Instagram"></img>
<img class="contactImg" src="http://placehold.it/50x50" alt="Twitter"></img>
<img class="contactImg" src="http://placehold.it/50x50" alt="Snapchat"></img>
</div>
</div>
I'm working on HTML and CSS and I'm having a hard time aligning the images horizontally instead of vertically.
I tried displaying them inline-block and inline none of them works. And I also want my images to have the same sizes.
Here's my html code:
#gallery {
width: 500px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 100px auto;
display: inline;
}
#gallery img {
width: 50%;
height: auto;
border: 5px solid #FFFFFF;
margin: 10px;
box-sizing: border-box;
margin: 0 auto;
padding: 0;
}
<div id="gallery">
<img src="images/gallery1.png">
<img src="images/gallery2.png">
<img src="images/gallery3.png">
<img src="images/gallery4.png">
<img src="images/gallery5.png">
<img src="images/gallery6.png">
<script src="lightbox2-master/dist/js/lightbox-plus-jquery.js"></script>
</div>
Try this:
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>
<div class="gallery">
<a href="images/gallery1.png" data-lightbox="image-1" data-title="Ian and Vee">
<img src="images/gallery1.png" width="600" height="400">
</a>
</div>
Simpler answer. Add a float to your image.
#gallery {
width: 500px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 100px auto;
display: inline;
}
#gallery img {
float: left;
width: 50%;
height: auto;
border: 5px solid #FFFFFF;
margin: 10px;
box-sizing: border-box;
margin: 0 auto;
padding: 0;
}
Does anyone know how I can remove the space between the top of my menu and the bottom of the image on top of the page. I tried to do it with margin and padding. But that didn't work.
This is a picture of the result I get now
#charset "UTF-8";
body {
background-color: #ADF1F5;
}
html,
body {
margin: 0;
padding: 0;
}
#Anouk {
text-align: center;
margin: 0 auto;
padding: 0;
}
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
}
li a {
color: #FFFFFF;
height: 80px;
}
#contact {
float: right;
}
<div id="Anouk">
<img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
<div id="menu">
<!--Home-->
<li id="home">
<a href="index.html">
<img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
</a>
</li>
<!--Over Mij-->
<li id="over">
<a href="over.html">
<img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
</a>
</li>
<!--Portfolio-->
<li id="portfolio">
<a href="portfolio.html">
<img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
</a>
</li>
<!--Contact-->
<li id="contact">
<a href="contact.html">
<img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
</a>
</li>
</div>
</div>
Try to add display:block to your top most image.
#Anouk img{
display: block;
}
Here is a solution: https://jsfiddle.net/egjbmp1u/
For your #header style you need to add:
position: relative;
float: left;
width: 100%;
Also, #Anouk style should look like this:
#Anouk {
display: flex;
text-align: center;
padding: 0;
}
#Anouk img {
margin: 0 auto;
}
I have been trying to add an overlay play icon to my videos which all works however after adding this im getting a weird 1px spacing on the bottom row of my images
When the absolute positioning is removed from (#icon) the images align perfectly - but when added back it adds the weird spacing
Could anybody help with this?
CODE: http://www.codeply.com/go/JC75OR4xpD
HTML CODE:
<div class="instaVideos">
<h1>Short Videos</h1>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/11661388_407770589406910_367605487_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11325016_1163164417043690_1908545167_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xtp1/t50.2886-16/1489765_333969910114258_1680134671_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/10706968_601233316654119_1567865956_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/10679292_519402934860781_468618633_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/10665576_441425795996740_1661178998_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10641919_684721938283340_2079757675_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-g-a.akamaihd.net/hphotos-ak-xap1/t51.2885-15/924582_890120924350870_1658010424_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10541299_371884109631916_1548975081_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xpa1/t51.2885-15/10538735_664550930296554_1249448005_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="https://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/11683107_112731029066100_1538573428_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/11386568_1455668744729300_108311835_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10721731_1471532036461241_1447645097_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xpa1/t51.2885-15/10724656_765518650158719_1752400817_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfa1/t50.2886-16/11679305_467034590127593_1579081935_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11429736_699224963557660_1457167025_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
</div>
CSS:
.instaVideos {
margin:0 auto;
margin-left: auto;
margin-right: auto;
max-width: 800px;
width:90%;
text-align: center;
margin-bottom: 50px;
transition:all .2s ease-in-out;
}
.instaVideos > h1 {
margin:0 auto;
text-align: left;
width:300px;
margin-left: 2%;
font-size: 30px;
font-family: 'raleway';
}
.instaVideos > a > img {
width:150px;
height:auto;
margin-top: 5px;
border:1px solid red;
text-align: center;
}
.instaVideos a:hover {
opacity: 0.7;
}
.instaVideos > a {
position:relative;
}
#icon {
width:auto;
height:30px;
position:absolute !important;
left:35%;
top:0px;
right:0px;
display:inline !important;
}
SOLVED
I fixed this by doing the follwing:
.instaVideos {
position:relative;
}
#icon {
position: absolute;
left:0;
right:0;
top:0;
margin: 0 auto;
}
Maybe this help you: Fiddle
CSS:
.instaVideos > a {
position: relative;
height: 100%;
width: auto;
display: inline-block;
}
#icon {
width:auto;
height:30px;
position:absolute !important;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}