New to writing code and need help stacking images on top of one another.
I am trying to stack an image on top of another (that I wish to have as my background) with a right align.
<div class="container-fluid" id="special">
<section id="fourth">
<img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
<img src="website/bg-services.jpg" alt="Greenteriors Moss Art" size="cover" width="100%" height="100%" id="services-background">
</section>
</div>
I lack the CSS prowess to even attempt to write the code. What currently happens is the img-services stacks on top of bg-services with a right align. I need the first image stacked on top of the second.
Appreciate any help.
here's a jsfiddle for an identical project with more images: http://jsfiddle.net/kizu/4RPFa/4570/
jsfiddle is a great free tool to play around with code and see how changes work out
so you'd be using an inline-block helper and setting height to: 100% and vertical-align: middle on both elements.
<div class="container-fluid" id="special">
<section id="fourth">
<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg"
alt="Greenteriors Moss Art" width="40%" height="40%" align="right"
id="services">
</div>
<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg"
alt="Greenteriors Moss Art" width="40%" height="40%" align="right"
id="services">
</div>
</section>
</div>
i've added extra div's around your elements. now you just need to add this to the css file to tell it what to do with those new divs:
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; /* this is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
you'll want to play around to make it look how you want. change the height and width. prob remove the border
#fourth { background-image: url('website/bg-services.jpg'); background-size: cover; }
<div class="container-fluid" id="special">
<section id="fourth">
<img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
</section>
</div>
Related
I wants to align a logo at left end of a div and a text at center of that div(text should be look like at center of screen). The width of div is fit to screen. Both logo and text should be in same line. How is it make possible?I have start like below.But shows two elements as line by line.
<div >
<img id="imglogo" alt="" src="images/ logo.JPG" style="width: 300px;height:75px" />
<h1 align="center" id="H1">Project Name</h1>
</div>
Personally, I prefer table as it places things quite nicely and is reliable. See below:
<table border=1 style="table-layout: fixed; width:100%">
<tr>
<td><img id="imglogo" alt="" src="https://placehold.it/100x35" /></td>
<td style="text-align: center">Centered Text</td>
<td></td>
</tr>
</table>
And of course you can customise to however you wish.
You can do it with flexbox. The Heading will be centered in the space next to the image.
.wrapper {
display: flex;
}
.wrapper>div, h1 {
flex: 1;
}
h1 {
text-align: center;
}
<div class="wrapper">
<div><img src="https://placehold.it/300x75" /></div>
<h1>Project Name</h1>
</div>
One approach is to use absolute in relative positions:
h1 {text-align:center;position:relative;height:50px;line-height:50px;}
#imglogo {height:50px;position:absolute;left:0;}
h1 {
text-align: center;
position: relative;
height: 50px;
line-height: 50px;
margin-bottom: 4px;
}
#imglogo {
height: 50px;
position: absolute;
left: 0;
}
<div>
<h1 id="H1">
<img id="imglogo" alt="" src="http://lindseymiller.github.io/FEWD/Homework/acme-corp-mine/images/acme-corp.jpg" /> Project Name
</h1>
Some more text
</div>
I think this achieves the effect you're after. Some notes:
We need to set the line height and height explicitly for the <h1>, so it will be vertically aligned with the logo. This will not work well if the title wraps lines.
On a small screen, the logo and the title overlap. You can define another rule for smaller displays.
You can use bootstrap columns.
img {
max-width: 300px;
float: left;
}
h1 {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-5">
<img class="img-responsive" src="https://placehold.it/300x75" />
</div>
<div class="col-xs-7">
<h1>Project Name</h1>
</div>
</div>
I have 3 images that I want to align vertically however I can't seem to get it working properly. My images are split into 3 parts from 1 existing image. You can see slight transitions from one image to the other. What am I missing here?
HTML:
<div id="Wrapper" class="Wrapper">
<div id ="image-1">
<img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor border="0">
</div>
<div id ="image-2">
<img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png" class="jscolor border="0">
</div>
<div id ="image-3">
<img id="bot" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png" class="jscolor border="0">
</div>
</div>
JS Fiddle: https://jsfiddle.net/krvrp7eb/
Why this happens?
img is an inline element and inline elements flows like text. The small whitespace is due to this. Possible solutions:
Change the display from inline to other - add display: block for instance
Change the vertical-align property to top (default is baseline)
Shrink the text size to 0 by font-size: 0 on the containing block of the inline element.
Example
Add vertical-align: top to all the three images - see updated fiddle here and snippet below:
#image-1 img,
#image-2 img,
#image-3 img {
background-color: #00f;
vertical-align: top;
}
.image-1,
.image-2,
image-3 {
display: block;
}
.Wrapper {
vertical-align: middle;
display: block;
}
<div id="Wrapper" class="Wrapper">
<div id="image-1">
<img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor" border="0">
</div>
<div id="image-2">
<img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png " class="jscolor" border="0">
</div>
<div id="image-3">
<img id="bot " src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png " class="jscolor" border="0">
</div>
</div>
Add the following to your CSS:
.Wrapper {
font-size:0;
}
JSFIDDLE
just add one css property in this
image-1 img, #image-2 img, #image-3 img
to
float: left;
use position: relative; and use top, bottom left, and right to adjust its position.
This is the problem I am having: I am able to align 2 images side by side, but I would like it, if 1 of them is floating to the left and the other to the right.
If someone can make an example of it, I will appreciate it very much.
Here is my code:
<div class="image123">
<div class="imageContainer">
<img src="../images/over_mijzelf.gif" height="188" width="600" />
<p>#</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="../images/mijn_hond.gif"/ height="188" width="600" />
<p>#</p>
</div>
</div>
Style:
<style>
.imageContainer {
float: left;
}
.imageContainer {
float: right;
}
p {
text-align: center;
}
<style/>
The issue is that you are applying conflicting styles to the exact same CSS class, imageContainer. CSS classes define a single set of behaviors that apply to multiple elements, so one class cannot define both float: left and float: right. One easy way to fix this is to break your class into two, one for each object, so for instance imageContainerLeft and imageContainerRight.
Here is a live JSFiddle demo of how this would work: https://jsfiddle.net/2q18dqju/
Here is how you would change your code:
<div class="image123">
<div class="imageContainerLeft">
<img src="../images/over_mijzelf.gif" height="188" width="600" />
<p>#</p>
</div>
<div class="imageContainerRight">
<img class="middle-img" src="../images/mijn_hond.gif"/ height="188" width="600" />
<p>#</p>
</div>
</div>
CSS:
.imageContainerLeft {
float: left;
}
.imageContainerRight {
float: right;
}
p {
text-align: center;
}
The goal is that I want both images to have be side by side and centered in the middle of the row.
I tried to do that via adjusting the columns of the row
The problem is that even with trying to center via rows, it always looks a little off center and if I change the max-width to be a little bigger, the images are no longer side by side and are on top of one another
The height and width of the images are...
graft1/graft2 - height="333" width="500"
ivan1/ivan2 - height="542" width="400"
Here is my HTML
<section class="wrapper style1">
<div class="container">
<div id="content">
<!-- Content -->
<article>
<header>
<h2>Before and After</h2>
</header>
<div class="row">
<div class="div_baPics">
<img id="graft1" class="baPics" src="images/graft1.jpg" alt="">
<label for="graft1">Before</label>
<img id="graft2" class="baPics" src="images/graft2.jpg" alt="">
<label for="graft2">After</label>
</div>
</div>
<div class="row">
<div class="div_baPics">
<img id="ivan1" class="baPics" src="images/ivan1.jpg" alt="">
<label for="ivan1">Before</label>
<img id="ivan2" class="baPics" src="images/ivan2.jpg" alt="">
<label for="ivan2">After</label>
</div>
</div>
</article>
</div>
</div>
</section>
And here is the CSS for baPics
.baPics {
max-width: 30%;
}
.div_baPics {
text-align: center;
}
Since you're using Bootstrap, I went with its system. See this fiddle :
http://jsfiddle.net/Bladepianist/55gyp94n/
Well, i did use real image so that you could see the result but with that (when I tested anyway), your image should resize, following the screen.
.thumbnail {
border: none;
}
This code isn't needed, unless you don't want the border of the thumbnail ;).
Hope it will satisfy you and if that's the case, thumbs up :p.
You need to wrap img and corresponding label in a wrapper, like so:
/*Just to make a difference between pics*/
body {
background: grey;
}
/*Minimal CSS*/
.div_baPics {
text-align: center; /*Center alignment for the wrapper*/
font-size: 0; /*To remove the white space between pics*/
}
.pic {
display: inline-block;
}
.pic img {
display: block;
/*This should be set by default by Bootstrap*/
max-width: 100%;
height: auto;
}
.pic label {
display: block;
font-size: 16px; /*Or whatever font-size you use*/
}
<div class="div_baPics">
<div class="pic">
<img src="http://i.imgur.com/zNTWaR3.jpg" />
<label>Pic 1</label>
</div>
<div class="pic">
<img src="http://i.imgur.com/IqiJN2f.png" />
<label>Pic 2</label>
</div>
</div>
I am using a 2x2 grid on a wordpress page to display some images that change during a mouseover.
Using a 2 column 1 row grid, the images are perfectly horizontally aligned, but when I add a second row the bottom two images get out of alignment.
I put this code into my CSS stylesheet
.grid {
width: 704px;
margin: auto;
vertical-align: middle;
}
.grid-m1 {
float: left;
width: 22px;
height: 1px;
}
.grid-c1 {
float: left;
width: 320px;
}
.grid-m2 {
float: left;
width: 22px;
height: 1px;
}
.grid-c2 {
float: left;
width: 320px;
}
Then in my new page I put in:
<div class="grid">
<p class="grid-m1"></p>
<p class="grid-c1"><a id="top left" href="top left">
<img title="Top Left" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Left.png" />
</a>
</p>
<p class="grid-m2"></p>
<p class="grid-c2"><a id="top right" href="top right">
<img title="Top Right" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Top-Right.png" />
</a>
</p>
</div>
<div class="grid">
<p class="grid-m1"></p>
<p class="grid-c1"><a id="bottom left" href="bottom left">
<img title="Bottom Left" onmouseover="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right-solid.png'" onmouseout="this.src='http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right.png'" alt="" src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/Bottom-Right.png" />
</a>
</p>
<p class="grid-m2"></p>
<p class="grid-c2">
<img src="http://quickfoqus.com/studies/wp-content/uploads/2013/09/focus-group.png" />
</p>
</div>
http://jsfiddle.net/isherwood/DZqQJ/
As you can see by looking at my site: quickfoqus.com/studies/test I cannot get these 4 images to line up properly on the grid.
I tried vertical-align tags on my css but this did not seem to work.
Thanks for the help!
Your plain gradient images have empty space at the top and side(s). Your people image does not. Here's the layout with margins applied to that image to get things lined up:
http://jsfiddle.net/isherwood/DZqQJ/1/
<img src="http://.../focus-group.png" style="margin: 10px 0 0 15px;" />