I'm trying to centre two buttons but having no luck!
It also has a header image above the buttons within the HTML.
Here's my current HTML:
HTML:
<div>
<img src=".jpg" style="width:700px;display:block;margin-left:auto;margin-right:auto;" alt=""><div class="nav3" style="height:705px;">
<span class="icons"><a href="https://twitter.com/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</span>
<a href="https://www.amazon.co.uk/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</div>
I revised your code and separate it the inline style from your html code.
div {
text-align: center;
width: 700px;
}
div img{
width:700px;
margin-bottom: 20px;
}
.nav3 img {
width: 100px;
display: inline;
}
<div>
<img src="http://placehold.it/700x260" alt="">
<div class="nav3">
<img src="http://placehold.it/640x260" alt="">
<img src="http://placehold.it/640x260" alt="">
</div>
</div>
Currently, I set the width of div to width: 700px; and the place holder also contains the same width. Modify these width to suit your needs.
Related
This is probably something very simple, yet I can't seem to figure it out. I am working on an image gallery where the images are sometimes in the portrait and sometimes in the landscape mode. For the gallery to look uniform, I need the thumbnails to be the same size and only upon a click, the full image will be displayed. I'm using Zurb Foundation and SCSS.
This is my code at the moment:
<div class="img-single column column-block">
<a data-open="galleryModal">
<img src="assets/img-01.jpg" class="thumbnail" alt="">
</a>
</div>
.img-single {
width: 300px;
height: 300px;
img {
width: 100%;
height: 100%;
}
}
At the moment, the image stretches to be 300px by 300px. I just need to display a thumbnail of the image with the image's centre to be displayed, and not distorted. I also tried adding vertical-align: middle; and played with max-width and max-height values, but it didn't do anything. How can it be done?
You may take advantage of the new object-fit CSS property and make the image appear as you want.
Here is some example code for you, showing the difference between the image placed using object-fit and the default image:
.img-single {
display: inline-block;
width: 300px;
height: 300px;
overflow: hidden;
}
.img-single img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="img-single column column-block">
<a data-open="galleryModal">
<img src="https://unsplash.it/458/354?image=0" class="thumbnail" alt="Image with object-fit" title="Image with object-fit">
</a>
</div>
<img src="https://unsplash.it/458/354?image=0" alt="Just the image" title="Just the image">
You may also position the image differently within the .img-single container using the object-position property if you want.
Hope it helped.
PS: I also used the overflow property in such cases to avoid images from bleeding out. Cheers!
You can center the image in a smaller container using background-image on a div.
<div class="thumbnail" style="background: url("assets/img-01.jpg") no-repeat;"></div>
.thumbnail {
background-position: center;
width: 50px;
height: 50px;
}
If you remove Foundation's thumbnail class this should work.
HTML (e.g)
<div class="img-grid row small-up-2 medium-up-3 large-up-4">
<div class="img-single column column-block">
<a data-open="galleryModal">
<img src="https://placeimg.com/620/580/animals" class="" alt="">
</a>
</div>
<div class="img-single column column-block">
<a data-open="galleryModal">
<img src="https://placeimg.com/440/780/animals" class="" alt="">
</a>
</div>
<div class="img-single column column-block">
<a data-open="galleryModal">
<img src="https://placeimg.com/460/640/animals" class="" alt="">
</a>
</div>
<div class="img-single column column-block">
<a data-open="galleryModal">
<img src="https://placeimg.com/720/420/animals" class="" alt="">
</a>
</div>
<div class="img-single column column-block">
<a data-open="galleryModal">
<img src="https://placeimg.com/660/400/animals" class="" alt="">
</a>
</div>
<div class="img-single column column-block">
<a data-open="galleryModal">
<img src="https://placeimg.com/480/840/animals" class="" alt="">
</a>
</div>
<div class="img-single column column-block">
<a data-open="galleryModal">
<img src="https://placeimg.com/400/640/animals" class="" alt="">
</a>
</div>
<div class="img-single column column-block">
<a data-open="galleryModal">
<img src="https://placeimg.com/440/780/animals" class="" alt="">
</a>
</div>
</div>
SCSS
.img-single {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
min-width: 300px;
min-height: 300px;
}
}
JSFiddle demo
I have 3 icons that i want to align them in the center i tried different code but nothing is working so far, i tried putting a margin right to it, but the problem with that is that it's adding an unnecessary space between them, so i want them to be close to each other, is there a way to put margin-right to it and remove the space from there ?
i just want to align them below my paragraph but in the center of it.
heres my code so far.
#body a img {
width: 50px;
height: 50px;
margin-top: 50px;
margin-right: 200px;
}
<div id="body">
<p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias</p>
<div class="icons">
<a href="https://www.youtube.com/themunkiuke">
<img class="icon1" src="images/youtube.png">
</a>
<a href="http://www.twitch.tv/siminios">
<img class="icon2" src="images/twitch.png">
</a>
<a href="http://yinochi.deviantart.com/gallery/">
<img class="icon3" src="images/art.png">
</a>
</div>
Will it be a simple text-align missing ?
#body a img {
width: 50px;
height: 50px;
}
.icons {
text-align:center;
}
<div id="body">
<p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias</p>
<div class="icons">
<a href="https://www.youtube.com/themunkiuke">
<img class="icon1" src="images/youtube.png">
</a>
<a href="http://www.twitch.tv/siminios">
<img class="icon2" src="images/twitch.png">
</a>
<a href="http://yinochi.deviantart.com/gallery/">
<img class="icon3" src="images/art.png">
</a>
</div>
Here you are DEMO
#body a img {
width: 50px;
height: 50px;
}
.icons {
text-align: center;
}
<div id="body">
<p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias</p>
<div class="icons">
<a href="https://www.youtube.com/themunkiuke">
<img class="icon1" src="images/youtube.png">
</a>
<a href="http://www.twitch.tv/siminios">
<img class="icon2" src="images/twitch.png">
</a>
<a href="http://yinochi.deviantart.com/gallery/">
<img class="icon3" src="images/art.png">
</a>
</div>
Here's a demo https://jsfiddle.net/r4wwczao/
In HTML I added a container for each icon to give them a percent size (the border is just to see the solution better):
<div id="body">
<p class="text">We are a group of friends that enjoy playing League Of Legends togather, feel free to follow us on our different website medias </p>
<div class="icons">
<div class="icon_div">
<img class="icon1" src="images/youtube.png">
</div>
<div class="icon_div">
<img class="icon2" src="images/twitch.png">
</div>
<div class="icon_div">
<img class="icon3" src="images/art.png">
</div>
</div>
</div>
And CSS:
img{
width: 50px;
height: 50px;
}
.icon_div{
border:1px black solid;
display: inline-block;
text-align: center;
width:32%;
}
I have a gallery and the thumbnails are set to have a width of 100%. however some images do not fill the full height of this div.
How do I get it so that the images stretch over the full width and height of the div? (can't be changed to background images)
<div class="gallery-grid">
<div class="section group">
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
</div>
<!--style-->
.gallery-grid img{
width:100%;
}
It works for me. You must have some other css affecting it. See here: http://codepen.io/anon/pen/JGmRBW
.gallery-grid img{
width:100%;
}
Try this:
gallery-grid .section .col a{
display: block;
}
.gallery-grid .section .col a img {
width: 100%;
height: 100%;
}
You should consider that a is an inline element, so to put an image propely in it, you may need to set its display property correctly.
In action
a{
display: block;
width: 100px;
height: 100px;
}
img{
width: 100%;
height: 100%;
}
<p>The parent anchor has 100x100 dimensions:</p>
<p>The child image has 100x50 dimensions:</p>
<img src="https://placehold.it/100x50">
What I want to do is have the images on this site change in width and height (they should be equal) between 50-60px. However between them they all need to have a minimum padding of 5px. This can vary depending on the size of the images, this is the case as the two end images need to fit to the edges of the parent div, to align with an image about it. The height/width/padding should all change to ensure the images are still properly aligned when then screen size changes.
If you look at this page you will be able to see what I mean. The images that need to change are the grey squares at the bottom.
http://media.gaigo.org/work2.html
This is my html:
<div class="smallImages">
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
</div>
and my css is as follows:
smallImages div {
display: inline-block;
padding: 5px;
}
.smallImages div img {
max-width: 60px;
min-width: 50px;
max-height: 60px;
min-height: 50px;
}
Sorry if this seems confusing. Just ask if you need me to explain more.
One option is to set percentage widths, however that number percentage is dependent upon the number of images in your row. See this example:
* {
box-sizing:border-box; /* You need this so that heights and widths are inclusive of padding and border */
}
.container {
width:400px; /* set this to whatever you like, it should work still */
padding:5px;
border:1px solid;
}
.row {
width:100%;
padding:0 5px;
}
.row img {
padding:5px;
}
.row.one img {
width:100%;
}
.row.two img {
width:50%;
}
.row.three img {
width:33.33%;
}
.row.four img {
width:25%;
}
<div class="container">
<div class="row one">
<img src="http://placehold.it/150x150">
</div>
<div class="row two">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row three">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row four">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
</div>
Putting HTML comments between lines means there's no white space between the images.
This is what you are after.
Display inline-block wont let the images behave in that manner you need to use table.
You should just check the source code of the site you are working from..
.row {
display: table-row;
}
.smallImages {
padding-left: 0px;
margin-bottom: 0px;
display: table;
text-align: center;
}
.smallImages .row div {
display: table-cell;
padding: 5px;
}
.smallImages .row div:first-child {
padding-left: 0;
}
.smallImages .row div img {
max-width: 100%;
}
img {
border: 0;
}
<div class="smallImages">
<div class="row">
<div>
<a href="#item-1">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-2">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-3">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-4">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-5">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-6">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-7">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-8">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-9">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-10">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-11">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-12">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
</div>
</div>
I have 6 images that I want to have at the bottom and one large image above them. I am trying to make an image gallery.
I have set margin-top to the 6 images. I have added the other image which I want larger for the preview image but it seems to be making the other images move down and some out of the div. I know this may have something to do with the images being floated? I am a bit confused on where to put the float I initially just floated the images but it didn't seem to need it I guess because they're inline.I may possibly need to put them in divs? Overall I'm just confused :/
Here is an image to make it clear what I want to achieve:
Here is my code:
HTML
<div class="mainInfo">
<div class="gallery">
<!-----this is the first image I want to be the large preview--->
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery1.png" alt="">
<img src="../assets/images/gallery/gallery2.png" alt="">
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery4.png" alt="">
<img src="../assets/images/gallery/gallery5.png" alt="">
<img src="../assets/images/gallery/gallery6.png" alt="">
</div>
<!--END OF MAIN INFO-->
</div>
CSS
.mainInfo {
height: 650px;
background-color:#FCFCFC;
color:#001D5D;
padding: 100px 0 0 30px;
/* .............Gallery section........... */
.gallery {
float: left;
}
.gallery img {
width:140px;
height:auto;
margin:365px 0 0 15px;
}
.displayImage img {
width:400px;
height: auto;
margin: 0 auto;
padding:10px 0 0 30px;
}
/* .............Gallery section END........... */
Organize
You need to organize your HTML for layout.
Try inserting your big image in a <div class="displayImage"></div> tag. Then you can control it easier with your CSS.
Use CSS to define constraints.
Let's try adding appropriate widths to your images and fixing the margins.
Updated CSS
.gallery {
float: left;
}
.gallery img {
width:80px;
height: 80px;
margin: 10px;
}
.displayImage {
text-align: center;
padding-bottom: 20px;
}
.displayImage img {
width: 400px;
height: auto;
margin: 0 auto;
}
Updated HTML
<div class="gallery">
<div class="displayImage">
<img src="http://images.summitpost.org/original/371959.JPG" alt="" class="displayImage">
</div>
<a href="#">
<img src="http://www.slowtrav.com/blog/chiocciola/IMG_1368.jpg" alt="">
</a>
<a href="#">
<img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
</a>
<a href="#">
<img src="http://images.summitpost.org/original/134465.jpg" alt="">
</a>
<a href="#">
<img src="http://www.domnik.net/topoi/commons/AT/alps/05n_mountain.jpg" alt="">
</a>
<a href="#">
<img src="http://people.hsc.edu/faculty-staff/mhight/Fulbright_Images/ItalySept2007/Cassino01.jpg" alt="">
</a>
<a href="#">
<img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
</a>
</div>
Just remember, HTML is your friend. Organize it to best parallel with your CSS. This is a small case that could still survive without less structured HTML, but it's a great practice to get started.
Here's a example of it all: http://codepen.io/anon/pen/LjgdF
Do something like this,then you can position first images as per your wish.
Something you will get in Fiddle
<div class="mainInfo">
<div class="gallery">
<div class="bigpic">
<img src="../assets/images/gallery/gallery3.png" alt="">
</div>
<img src="../assets/images/gallery/gallery1.png" alt="">
<img src="../assets/images/gallery/gallery2.png" alt="">
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery4.png" alt="">
<img src="../assets/images/gallery/gallery5.png" alt="">
<img src="../assets/images/gallery/gallery6.png" alt="">
</div>
</div>