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;" />
Related
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>
I want the first image to stick to the top of the container and the following images should be below it... top:0; lets the image be..200px above the container and if I just say position:relative its always in the middle...;
<div class="container">
<div class="card_left">
<p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
<p style="font-size:1.2em;">Long text</p>
</div>
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/>
<img src="../res/images/artikel1bild.PNG"/>
</div>
Use display: block so there will be no other images in the same line and margin: auto for centering the image
img {
display: block;
margin: auto;
width: 200px;
}
<div>
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
</div>
Just add <br /> after each image if you want to stick to HTML:
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/><br />
<img src="../res/images/artikel1bild.PNG"/><br />
</div>
Or the better way would be to make a separate CSS file and set display: block; for your img tags:
img {
display: block;
}
Example: https://jsfiddle.net/nk8fbr76/
try this
img {
margin: 0, auto;width: 200px;display:inline-block;height:100px;
}
<div class="card_right">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
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 HTML like this:
<div style="float: left; font-family: arial; padding-top: 40px; width: 655px; ">
<div style="float: left;">
<img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" style="border: none;" />
</div>
<div style="float: left; ">
<p>
<h1>mobile business plan, <br />
business ideas, fundraising<br /> and marketing apps
</h1> <!-- font-size: 200%; -->
</p>
</div>
<div style="clear:both;"></div>
And it looks like this. Here is a test page:
http://problemio.com/index_test.php
The blue B is supposed to be on the same line with the text. But possibly because the original image size is very big, it is getting screwed up in size.
Here is the css for the img:
img#above_fold_img
{
width: 30%;
height: 30%;
}
Would anyone know how to make the image and text appear on the same line?
Thanks!
You need to specify a width for both of the child <div>s. According to Chrome DevTools, the first <div> (with the child image) is 512px wide. width: 30%; on img#above_fold_img uses 30% of its parent div.Example:
<div style="float: left; width: 256px; height: 256px; margin: 0">
<img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" style="border: none; width: 256px; height: 256px" />
</div>
<div style="float: left; width: 393px; margin: 0; margin-left: 5px">
<p>
<h1>mobile business plan, <br />
business ideas, fundraising<br /> and marketing apps
</h1> <!-- font-size: 200%; -->
</p>
</div>
I kept all styles inline in my example, but using CSS is better. Also, the 'b' image is 512x512px. If you can shrink it, you will reduce load times.
I think just giving an answer helps but op wanted to know why as well..
You should declare a width on the image that contains the #above_fold_img so that the div takes on the same width that way you can do this
<div style="float: left; font-family: arial; padding-top: 40px; width: 655px;">
<div style="float: left;margin-right:20px">
<img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" width="154">
</div>
<div style="float: left;">
<p></p>
<h1>mobile business plan, <br>
business ideas, fundraising<br> and marketing apps
</h1> <!-- font-size: 200%; -->
<p></p>
</div>
<div style="clear:both;"></div>
</div>
Also you should try not to use <p></p> as spaces but use <br/> to do that
Change your div to have a width of 30% and the image to have a width of 100% or 90% for astetic reasons, so:
<div style="float: left; font-family: arial; padding-top: 40px; width: 655px;">
<div style="float: left; width: 30%;">
<img src="http://www.problemio.com/img/big_logo.png" id="above_fold_img" style="border: none;" />
</div>
and CSS:
img#above_fold_img
{
width: 100%;
height: 100%;
}
I'm trying to create two side by side divs in a wrapper. The first div, #content, is a position:relative div.
#wrapper {
background-image: url(assets/images/BG2.gif);
margin-right: auto;
margin-left: auto;
width: 996px;
overflow: auto;
}
#content {
position: relative;
top: 10px;
left: 10px;
width: 745px;
background-color: red;
}
#important {
float: right;
position: relative;
top: -1120px;
width: 231px;
margin-right: 10px;
background-color: green;
}
The problem is that the second div, #important, is displayed under the first one. There is enough space for both divs and the padding/margins. I can make it work by floating it to the right and using a negative top position and it displays fine, but I feel as though there is a better/correct way of doing this.
HTML:
<div id="wrapper">
<div id="content">
<img src="assets/photos/bid day 046.jpg" alt="Bid Day" width="745" height="311" />
<div id="fraternity">
<p align="center"><span class="style5"><strong>TITLE</strong><br />
Subtitle<br />
Sub-subtitle</span></p>
<p align="justify">depry derp</p>
<p align="justify">derp derp derp</p>
<p class="style5" align="center"><br/><strong>Title<br/>
Twitter Feed</strong></p>
<div id="twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>...</script>
</div>
</div>
<div class="fb-like-box" data-href="something" data-width="292" data-colorscheme="dark" data-show-faces="false" data-stream="true" data-header="false">
</div>
</div>
<div id="important">
<p align="center"><strong>IMPORTANT INFORMATION</strong><br />Derp!</p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center"><strong>Achievements<br /></p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center" class="style11"><strong>UPCOMING EVENTS<br /></strong>stuff<br /></p>
<p align="center"><br /> <strong>more stuff</strong><br /></p>
</div>
</div>
Make the #wrappers position be relative or absolute.
Then set the inner div positions to be absolute.
jsfiddle example: http://jsfiddle.net/kRHTj/
I would float them both left or right.