This is what I want:
http://img571.imageshack.us/img571/4618/myimage.png
This is the best I could come up with:
CSS
img
{
background: red;
float: left;
}
table
{
background: yellow;
width: 90%;
}
HTML
<img src="image.jpg" width="40" height="40" />
<table>
<tr><td>Table</td></tr>
</table>
There is a problem with this approach. If you resize browser window at some point the table jumps below the image: click to view demo.
What is the better way of achieving this layout?
Try surrounding your table with div like that:
<img src="image.jpg" width="40" height="40" />
<div style="padding-left:40px">
<table>
<tr><td>Table</td></tr>
</table>
</div>
Some people might not like tables, but you could use a table with 2 cells that contains your image on the left and the table on the right.
Related
I want to make the grey images center aligned. Please guide me how can I do this.
Here is what I have tried:
<div id="responsivearea" style="margin-top: 50px;">
<div class="img-center">
<img style="clear:none;" class="size-thumbnail wp-image-2707" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/visa-logo2-150x150.jpg" alt="visa logo" width="150" height="150" />
<img style="clear:none;" class="size-thumbnail wp-image-2705" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/nethope-logo1-150x150.jpg" alt="nethope logo" width="150" height="150" />
<img style="clear:none;" class="size-thumbnail wp-image-2704" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/ILO-logo1-150x150.jpg" alt="ILO logo" width="150" height="150" />
</div>
</div>
Here is the site.
Simply use:
.img-center{text-align: center;}
As suggested already, magin auto... using your existing img-center class
.img-center{
margin:auto;
vertical-align:middle; /* If you mean vertically aligned */
}
text-align can work but is a little funny in cross browser support...
margin auto generally does the job and should work
otherwise just wrap them with center tags, while people may frown upon using center tags..THEY WORK CROSS BROWSER!! so they will NOT fail!
Otherwise, if you mean the footer images/logos on the site.. They are in a P tag without any class.. You can simply apply a text-align:center: to that p tag.
Set margin to auto. The browser will align the images to center for you
img {
margin: auto;
}
I have rows of product thumbnails with the product text below. See here
Since the images have different heights the text is not always vertically aligned in the right place. I just changed the layout from tables to divs because it's easier and more modern.
I've worked through several examples, websites, and this site but still haven't found a way to align this correctly. I'd like the image aligned in the middle of the div and the text at the very bottom.
Here's the DIV code (very simple):
<div style="float:left; width:210px; height:200px; text-align:center;" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/"><img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" /></a>
Alton Banquette
</div>
It works fine on this page since the images are all the same height
Is there a simple solution to this? I like DIVS better but this wasn't a problem when everything was table cells since I could use valign=center, etc.
Thank you!
Always assign a class and organize your code , always wrap your text to avoid glitches:
<div class="wrap" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/">
<img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" />
</a>
<p>Alton Banquette</p>
</div>
.wrap
{
float:left; width:210px; height:200px; text-align:center;
}
}
.wrap p
{
display:block;
}
img
{
height:100% !important;
width:auto;
}
Fiddle Demo
so whenever you change the image height , text will always remain at bottom.
I have been struggling to find a simple solution to the following problem using the CSS inline styles due to being on a free wordpress.com blog.
a table
inside each table cell there is an three parts
a hyperlink to enclose the two objects below
image - align vertical and horizontally centred in the table cell
text at the bottom of the table cell
<psedo markup>
<td>
<a href="#">
<img style="vertical-align:middle" src="" />
<p style="vertical-align:bottom">Text at the bottom</p>
</a>
but just cant seem to get a consistent result, am I better using <div style="display:block"> instead?
If you can use html5, use a figure:
<td>
<a href="http://gravatar.com">
<figure style="text-align: center;">
<img src="https://www.gravatar.com/avatar/5a25eba05dc8ac4384384c7a220958a6?s=32&d=identicon&r=PG&f=1"
alt="" width="32" height="32">
<figcaption>gravatar glyph</figcaption>
</figure>
</a>
</td>
The figure element was added precisely for situations like this, though the needed style here is a bit quirky.
HTML:
<table>
<tr>
<td style="text-align: center;">
<a>link</a>
<img style="display: block; margin: 0 auto;" src="http://placebacn.com/400/300">
<p>Bacon... Bacon... Bacon...</p>
</td>
</tr>
</table>
Even if you can't add a CSS file you may be able to add a <style> block before the HTML which would be better than inline styles:
<style>
td {
text-align: center;
}
td img {
display: block;
margin: 0 auto;
}
</style>
Fiddle: http://jsfiddle.net/xeTPx/2/
Please don't use tables for layout (i.e. non-tabular data - not sure if this is or not), there are other ways to have a similar layout without the bloated markup and accessibility problems. display: flex is often a good option as it now has support in a lot of today's browsers. Sometimes even using other markup with CSS display: table and display: table-cell is another option.
This might be a good read on vertical-align: http://css-tricks.com/what-is-vertical-align/
I would suggest to separate img and text from the same alignment-structure. I think you can manage to center the img but the text ruins this alignment. The trick that I use is position>relative to the parent and position>absolute to the child. Here you go:
<td>
<a href="#" style='**position:relative;**'>
<img style="vertical-align:middle" src="" />
<p style="**position:absolute; bottom:0;**">Text at the bottom</p>
</a>
</td>
By doing this p is not in the same alignment structure anymore.
I hope this solves your problem.
I am creating an email flyer and I have multiple images that I want at 140px by 140px but some are originally 300x300 or 400x400. I don't want to go resize each image as there can be quite a few and the flyer will be a weekly update so is it possible to use CSS to tell all images (or images that have classes) to resize to 140px?
I was going to post some code but it's quite a vague request so there no relevant code I can show to help my question.
maybe if I <span>...</span> and then give the span a class, would it be possible this way?
if your markup is for a newsletter you may force dimensions both with style attribute and with inline width and height attribute, e.g.
<img src="..." style="width:140px; height:140px" width="140" height="140" />
but, anyway, I strongly suggest to perform some kind of batch task for automatic resize of the images (e.g. using GruntJS), so you could save some precious bandwidth on the server in which you store your static assets. (conversely, if you embed images into the email, users will appreciate a lighter size)
Yeah add class to span and then:
span.yourclass img {
width: 140px;
}
I think I might be understanding this, but some simple css should work :
css :
img.small {
width: 140px;
height: 140px;
}
OR if you want to do all img's under a specific element :
.thumbs img {
width: 140px;
height: 140px;
}
html :
<img src="pic.jpg" class="small">
<div class="thumbs">
<img src="pic.jpg">
<img src="pic.jpg">
<img src="pic.jpg">
</div>
Or if they are dynamically generated, you can eliminate the css and just go :
<img src="pic.jpg" width="140" height="140">
You can set width and height for all images. Add "max" keyword to be sure.
img{
max-width:140px !important;
max-height:140px !important;
}
If you simply want ALL images on the page to resize, add the following into your CSS:
img{ width: 140px; }
This will proportionally set the height/width and I'm assuming all you images are square ?
If not, add 'height: 140px' but this will distort an image that isn't square.
wrap your images with div.class then write a single css to resize all the images which are wrapped by that div
MARK-UP::
<div class="imageWrapper">
<img src="/path/to" />
<img src="/path/to" />
<img src="/path/to" />
</div>
CSS::
.imageWrapper{
overflow:hidden;
}
.imageWrapper img{
width:400px;
height:400px;
}
I just finished my captcha script so it has the captcha image then next to it I have a link that is a small image that can be clicked to refresh the image to a new one.
I am wanting to make this small image be on top, on the bottom left corner of the large image, can someone help me with the CSS? Below is my complete code
<img src="captcha.php?sid=<?php echo md5(uniqid(time())); ?>" id="image" align="absmiddle" />
<a href="#" onclick="document.getElementById('image').src = 'captcha.php?sid=' + Math.random(); return false">
<img src="refresh.gif" alt="Reload a new image" border="0">
</a>
HTML
<div id="images-container">
<img src="image-big.png" alt="Big Image" id="big-image">
<img src="image-small.png" alt="Small Image" id="small-image">
</div>
(if you are using XHTML, don't forget to change the end of the image tag to use /> instead of >
CSS
#images-container {
position:relative;
}
#big-image {
position:absolute; /* position:absolute aligns to the parent container
which in the HTML above is the <div> element */
bottom:0;
left:0;
z-index:0;
}
#small-image {
position:absolute;
bottom:0;
left:0;
z-index:1;
}
The important thing for the z-index is that #small-image has a higher number than #big-image . If your repeating this effect, use classes instead of ids.
You'll want to use the CSS z-index property to set which image will display on top of the other:
http://www.w3schools.com/Css/pr_pos_z-index.asp
You'll probably want to use relative or absolute positioning to position the small image:
http://www.w3schools.com/Css/css_positioning.asp
I think what you need to do is to set css property position: relative; to #images-container div, and leave the other css rules as they were.
If you do that the images will be absolutely positioned but relative to their parent div instead of the body(whole screen).
Well.. good luck!
Z-index stuff can get sloppy in my experience. Why not just use an inline style to set your captcha as the background image of a div? Something like so:
<div id="image" style="background: url(captcha.php?sid=<?php echo md5(uniqid(time())); ?>) no-repeat; width: 100px; height: 100px;" id="image" align="absmiddle" >
<img src="refresh.gif" alt="Reload a new image" border="0" onclick="document.getElementById('image').style.backgroundImage = 'captcha.php?sid=' + Math.random(); return false">
</div>