I am fairly new at this, so, this may seem like a very simple question to answer.
I've started to design my own page, and the code below is where I am at so far.
How it's looks is...
top left - my logo
top right - navigation
left hand side - images / descriptions
What I am trying to do, and where I am getting stuck, is getting the description to align perfectly underneath each image, and have that same thing happen as you move right across the page.
What is currently happening is that each image, and description underneath, are aligning on the left all the way down the left side of the page.
Current code below:
<body>
<div class="container">
<img src="#" alt="Title" width="300" height="100" />
<div id="navbar">
<ul>
<li>GALLERY</li>
<li>ABOUT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<div id="images">
<img src="#" width="300" height="199" alt="name"></div>
<div id="descriptions">City</div>
<div id="images">
<img src="#" width="300" height="199" alt="name"></div>
<div id="descriptions">Model</div>
</div>
</div>
</body>
I'd use markup like this:
<figure class="images">
<img src="#" width="300" height="199" alt="City">
<figcaption>City</figcaption>
</figure>
<figure class="images">
<img src="#" width="300" height="199" alt="Model">
<figcaption>Model</figcaption>
</figure>
<figure class="images">
<img src="#" width="300" height="199" alt="Foo">
<figcaption>Foo</figcaption>
</figure>
And some sample CSS:
.images {
float: left;
width: 300px;
min-height: 200px;
margin: 0 10px 0 0;
background-color: #EEE; /* just to show containers since image scr is blank */
}
.images:last-child {
margin-right: 0;
}
.images figcaption {
text-align: center;
}
Fiddle
Related
I have 3 horizontally aligned images. I set a background image (background image) for the aligned images as below. When I run my code, the background image flows over the images. I want the 3 aligned images to appear on top of the background image. I tried to use box-shadow which couldn't work. I don't want the background image to cross over any of the 3 aligned images. How do I do this please?
HTML
<div class="col-lg-12">
<img src="images/background.png" alt="Change">
<div class="img">
<div class="column-img">
<img src="/images/pic.jpg" alt="" width="426" height="479">
</div>
<div class="column-img">
<img src="/images/pic.jpg" alt="" width="425" height="479">
</div>
<div class="column-img">
<img src="/images/change.jpg" alt="" width="426" height="479">
</div>
</div>
</div>
CSS
//how I align my 3 images horizontally.
.column-img {
float: left;
width: 33.33%;
padding: 5px;
}
Hm, so you want the background.png to appear behind the other images? If you insist on having it within the DOM, you'd need to remove it from the document flow. Something like this:
.column-img {
float: left;
width: 33.33%;
padding: 5px;
}
.background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background-anchor {
position: relative;
}
<div class="col-lg-12 background-anchor">
<img class="background" src="https://placekitten.com/1300/1300" alt="Change">
<div class="img">
<div class="column-img">
<img src="https://placekitten.com/426/479" alt="" width="426" height="479">
</div>
<div class="column-img">
<img src="https://placekitten.com/425/479" alt="" width="425" height="479">
</div>
<div class="column-img">
<img src="https://placekitten.com/426/479" alt="" width="426" height="479">
</div>
</div>
</div>
css :
.img {
background-image: url('../images/pic.jpg');
}
this is the right way to put a background image in css
get more information from : W3school
I'm trying to learn a bit more CSS/HTML to customize xaringan slides and could use some help.
I would like to place a number of GIF's in an image grid like the one shown here into a xaringan slide.
I know that normally one can display two images side-by-side by either using .pull-left[] & .pull-right[] or by defining sections with custom CSS like this:
.left-code {
color: #777;
width: 38%;
height: 92%;
float: left;
}
.right-plot {
width: 60%;
float: right;
padding-left: 1%;
}
Then one would put the images in a xaringan slide with R code like this:
.pull-left[
<img src=figure1.jpg>
]
.pull-right[
<img src=figure2.jpg>
]
For an image grid the custom CSS would be:
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
However, it also includes HTML code that specifies all of the images so I'm not quite sure how to integrate the two in a xaringan slide.
<div class="row">
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
</div>
You can do this using the extension theme here.
This theme is included the later version of xaringan so you can specify in the YAML by css: "ninjutsu". The layout should look like below:
---
title: "Split to grid in `xaringan`"
output:
xaringan::moon_reader:
css: ["ninjutsu"]
---
class: split-four
.column[
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
]
.column[
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
]
.column[
other images
]
.column[
other images
]
I would like to know how to edit this code to show these pictures centered side by side with each download button centered and underneath each picture, If anybody knows how to edit the code to this, it would be appreciated. Thanks.
The website link that I uploaded the code to, to test it can be seen below:
http://www.tekmillion.com/albums.html
.clearfix {
clear: both;
}
.divWithBtn {
float: left;
text-align: center;
padding: 10px;
}
.divWithBtn img,
.divWithBtn a{
display: block;
margin: 0 auto;
}
<HR>
<div class="container">
</br>
<span class="textformat1"><center><b>Albums</b></span></center>
</br>
<center>
<div class="clear">
<div class="divWithBtn">
<img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" width="200" height="200">
<a href="LONDON%202%20TURKEY%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" width="200" height="200" border:none;>
<a href="LONDON%202%20TURKEY%20VOL.2.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)" width="200" height="200">
<a href="LOVE%20%26%20HATE%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" height="200">
<a href="GURBET%20ELI%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
</div>
</center>
</br>
Add following css to your code:
This css will make image side by side.
.divWithBtn {
display: inline-block;
}
Following css will make download button below the image.
.divWithBtn > a {
display: block;
}
Hope it helps.
Note: And your current css which you post here is not applied. Make sure it is applied to your html element. Check path for your css file.
add class "display_table" to outer div.
<div class="clear" class="display_table">
add styles for the class "divWithBtn"
.divWithBtn {
float:left;
text-align:center;
margin: 0px 20px;
}
And finally add div to the image tag
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
Finall output
<div class="clear" class="display_table">
<div class="divWithBtn">
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div> <img height="200" width="200" src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" border:none;=""></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)">
<div> <img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
</div>
</div>
</div>
Css
.display_table { display: table; }
.divWithBtn { float: left; text-align: center; margin: 0px 20px; }
I am trying to render the images, it comes out perfectly in Firefox and Chrome, but is having issues in Safari(v 7.0.3). In Safari, image shifts to bottom right, while I want the image to be at the bottom center.
This is my css
.circular {
/*margin: 10px 30px 0px 30px;*/
display: block;
margin: 0 auto;
position: relative;
bottom:-400px;
left:93%;
transform:translateX(-50%);
}
HTML :
<section class="module parallax parallax-1">
<div class="container">
<div class="circular" vertical-align:middle; text-align:center><img src="images/index/yoyo.png" width=120px height=120px></div>
<div class="social_tags" vertical-align:middle; >
<img src="images/index/github.png" width=40px height=40px>
<img src="images/index/facebook.png" width=40px height=40px>
<a href="mailto:yoyo#gmail.com?Subject=Hello" ><img src="images/index/gmail.png" width=40px height=40px></a>
<img src="images/index/linkedin.png" width=40px height=40px>
</div>
</div>
</section>
You have several issues with your html.
I fixed them in this fiddle and it works the same in chrome as in safari: https://jsfiddle.net/msq0eqch/3/
This is the corrected html code:
(You had your style without style="" etc.)
<section class="module parallax parallax-1">
<div class="container">
<div class="circular" style="vertical-align:middle; text-align:center"><img src="images/index/yoyo.png" width="120px" height="120px"></div>
<div class="social_tags" style="vertical-align:middle;" >
<img src="images/index/github.png" width="40px" height="40px">
<img src="images/index/facebook.png" width="40px" height="40px">
<img src="images/index/linkedin.png" width="40px" height="40px">
</div>
</div>
</section>
Also add -webkit-transform:translateX(-50%); to your css.
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>