When adding images to a table, I was able to size the first image's width and height but for some reason the second image will not register the height in the image tag. The code is as follows:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<p class="pic"></p>
</td>
<td>
<p class="pic2"><a link to image on Facebook> <img src="pic2FileName" width="150 height="200" alt="text"></a></p>
</td>
</body>
</html>
The problem is with the height="200" that is not registering in my code. I'm using SublimeText and the height also doesn't change to green like the height in my first image.
I can also post the CSS code if needed, but this is kind of a personal project so I want to post as little of it as I possibly can.
You're missing a closing quotation in your second image, after width.
<img src="pic2FileName" width="150 height="200" alt="text">
Should be:
<img src="pic2FileName" width="150" height="200" alt="text">
Related
I'm making an email signature for a client, and on my pc works great, but on anothers the image looks stretched horizontally, it's probably because i set the width to 50% of the image size, I do that because the client will edit this images later, and will need to change the width of that, also for the image looks sharp, i need to use a 2x resolution.(outlook sucks). So that's the code I'm using.
<!DOCTYPE html>
<html lang="en"
<head>
<meta charset="UTF-8">
<title>signature</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign=top>
<p >
<span>
<a href="www.client-website.com">
<img border=0 src="image-who-will-change-the width.png" alt="Signature" style=" max-width:50%; max-height:117.5px; width:50%;height:117.5px">
</a>
</span>
</p>
</td>
</tr>
</table>
</body>
</html>
Use this css for your page it will help you to set height or width in percentages.
css:
html,body{height:100%;
width:100%;
}
and add height to percentage.
I need to position this form into place on top of the image in sidebar of my blog posts page:
http://insightcxo.com/category/blog/
Right now the image and the form are in the same container but are below one another.
Your markup has several issues in it. This is what I'm seeing in the provided link:
<td align="center" valign="top">
<a href="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png">
<img class="aligncenter size-full wp-image-1035" src="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png" alt="blog form background" width="370" height="400">
</a>
<p></p>
<table class="bodyContainer webFormBodyContainer" width="100%" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF">
<!-- form is in here -->
</table>
</td>
First, you've got an <a> tag with an <img> in it, which has a height of 400px. So that's pushing your <table> (which includes your <form>) down.
What you want to do is only have that image as a background image, and not a background of an <a> tag. That way, you can nest your <form> inside the container with the background image.
Something along the lines of this:
<div style="background: url('http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png');">
<form></form>
</div>
Although a few extra pointers:
Don't use <table> tags for layout purposes. Only use them for actual data tables.
Avoid inline styles (I've done that above just to show you where the background image style should go. Instead, set a class, like .form-container, and apply your styles in a separate CSS file.
Avoid having extra markup. What's that empty <p> tag doing there?
I'm not primarily an html programmer, but I'm using HTML to format the display of one of my screens in iPhone. So what I have is something that is supposed to be a paragraph like display with an embedded image in the top right, so that while next to the image, the text wraps and doesn't overlap, but will continue to the right once it is below the image.
I hen need a table of comments posted below that, so knowing that my view is 728 pixels wide, I did
<table width="768">
When I do this code in my smaller (240 px wide) view, the comments appear below the image, but in the larger view, it doesn't. Anyone know why this might happen?
Here's a sample of the html I'm using:
<body bgcolor="#FFFFFF">
<p>
<img src="http://www.smspal.com/iPhonePhoto.jpg" width="320" height="480" align="right">
Tweet
</p>
<table width="728" cellpadding="3" cellspacing="0" >
<tr>
<td>
<b>
<font size="2">Parent1 Parent1</font>
</b>
</td>
<td>
<p align="right"><font size="1">Tue. May 3, 2011 at 3:47 PM</font></p>
</td>
</tr>
<tr>
<td colspan="2">
<p align="left">
<font size="2">Add a comment</font>
</p>
</td>
</tr>
</table>
<hr noshade size="1" />
</body>
Your giving an absolute pixel size on your table to match the pixel width of a specific screen. The size is absolute so on a smaller screen size nothing more can be displayed to the left or right of it so it has nowhere to go but down.
Try using a percentage width as that is a relative size that will conform to many different screen sizes.
Why don't you just put the image inside the table? You can use the colspan attribute to keep the image in the right corner.
I am having some problems getting a small piece of text to be centered while floating next to an image.
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<img src="logocss.gif" width="95" height="84" />
<div style="position:relative; top: 20px;">
This
</div>
<div>
Other stuff...
</body>
</html>
(You can copy and paste this code into http://www.w3schools.com/CSS/tryit.asp?filename=trycss_float to see it in action.
What I would like is a way to vertically center the text while floating beside this image. and also not mess up text that comes after it. (as you can see, "Other Stuff..." is on top of "This")
I would prefer a pure CSS approach(or possibly restructuring of divs and such) because this is just an example showing the problem. The application it is being used in is very complex and having it all go into a table would require quite a bit of work, and possibly wouldn't look right.
UPDATE
Ok, I have ripped out part of my asp.net generated page that shows the problem I am having. I realize the code is ugly and apologize. It was generated by machine
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<table>
<tr>
<td>
<div style="line-height:84px;">
<img src="logocss.gif" width="95" height="84" />
<span>This </span>
</div>
</td>
</tr>
</table>
Other stuff...
<br>
<br>
Actual application:
<br>
<div style="width:300px;">
<div style="width:300px;">
<input type="hidden"/>
<table border="0" style="border-collapse:collapse;border-spacing:1px;">
<tr>
<td style="width:250px;"><div style="line-height: 50px;">
<input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" /><span style="display:inline-block;color:Black;width:250px;">Email</span>
</div></td><td style="width:350px;"><table border="0">
<tr>
<td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td>
</tr><tr style="height:0px;">
<td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Sorry for big code but its a working example of my problem. I did the line height trick but it seems to have no effect here. Basically what I want is for the edit control to be vertically centered in the middle of the image(which is easy because of the table) and for the "Email" text to be vertically centered in the middle of the image. I can not make it work though in this arrangement. What am I doing wrong?
What about this? (note that the line-height value equals the image's height):
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style="text-align:right;line-height:84px;">
<img src="logocss.gif" width="95" height="84" />
This
</div>
Other stuff...
</body>
</html>
UPDATE:
Considering the updated code, I came up with this:
<div style="width:300px;">
<div style="width:300px;">
<input type="hidden"/>
<table border="0" style="border-collapse:collapse;border-spacing:1px;">
<tr>
<td style="width:250px;"><div style="line-height: 84px; width:250px; text-align:right;">
<input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" />Email
</div></td><td style="width:350px;"><table border="0">
<tr>
<td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td>
</tr><tr style="height:0px;">
<td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td>
</tr>
</table>
</div>
</div>
I'm not saying it's the best way to do it, but I tried not to modify your code too much.
You don't need to wrap the text in a span in my opinion.
If you want to stick to using tables, then try looking at the valign="middle" property of the td element : http://www.w3schools.com/TAGS/att_td_valign.asp
But if you want to do that, you'll have to separate the image from the text and put them in different tds.
Slightly different solution than the one from Glennular. I'm not entirely sure how you want to do this, but the following centers the text This..., floats the image to its right (and it would wrap the text if it stretches to the image) and puts the Other stuff... below it.
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style="position:relative; top: 20px; text-align:center;">
<img src="logocss.gif" width="95" height="84" />
This
</div>
<div style="clear:right;">
Other stuff...
</body>
</html>
This might be what you're looking for.
I think you mean you want the image on the right side of the DIV. The float right will put it on the Right end of the container. Which has no size, ie. the whole screen.
<html>
<head>
<style type="text/css">
img
{
float:left;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style=" top: 20px;float:left;">
This
</div><img src="logocss.gif" width="95" height="84" />
</div>
Other stuff...
</body>
</html>
Can anyone tell me how can I add an image over another image without using Z-index or Z-order?
Difficult to answer properly without knowing exactly what you want to achieve, z-index probably isn't what you actually need. For instance the following would work:
<div id="container">
<img src="img1.jpg" id="img1" />
<img src="img2.jpg" id="img2" />
</div>
#container {
position:relative;
}
#img2 {
position: absolute;
left: 50px;
top: 50px;
}
Also whether you use <img> tags or background-images depends on the semantic valueof the images, i.e. are they presentational or actualy content of the page?
The easiest way is to make sure they're both the same size, one has transparency, and you use this snippet:
<img style="background:url(image.jpg)" src="overlay_image.gif" alt="" />
Set the main image's background image in CSS with the background-image property
You can also use text over image by using the following code:
<TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
<TR>
<TD WIDTH="221" HEIGHT="300" BACKGROUND="samplepic.jpg" VALIGN="bottom">
<FONT SIZE="+1" COLOR="yellow">Sample Text</FONT>
</TD
</TR>
</TABLE>
Hope that helps.