Have a look at http://www.cofchristknoxville.org .
I have a 62x62px image I want to insert just before "Community of Christ - Knoxville, Tenn. Congregation"
see the attached image: insertImageHere.jpg
Below is the code that now exists.
<body>
<div id="wrapper">
<div id="header">
<h1>Community of Christ - Knoxville, Tenn. Congregation</h1>
</div>
When I place the image tag in front of the <h1>, the image shows BUT it is stretched out of shape. I want the image to hold its 62x62px size and appear on the same line as the <h1>Community of Christ.... line.
Can this be done and if so how?
Thanks for your time.
--
JamesKB
James Becker
Registered User
50 posts
Jo Rice
Senior Advisor
10,951 posts
Hiya James,
In order to do this, you "should" be able to just find the image in the tree to the left with your files and folders for your website project, put your mouse where you want to insert the image, and then double click the file in the tree. This should insert the code for you for the image and it will include the height and width variables that are needed to retain your image size. Hope that helps
In order to do this, you "should" be able to just find the image in the tree to the left with your files and folders for your website project, put your mouse where you want to insert the image, and then double click the file in the tree. This should insert the code for you for the image and it will include the height and width variables that are needed to retain your image size. Hope that helps
James Becker
Registered User
50 posts
Thanks for the fast response Jo Ann,
I did as you instructed above but it did not quite work.
Below is the code:
<div id="wrapper">
<div id="header">
<img src="images/New62CLRoval.gif" width="92" height="66" alt="" /><h1>Community of Christ - Knoxville, Tenn. Congregation</h1>
</div>
See the attached image: imageDistorted.jpg.
Ideas?
I did as you instructed above but it did not quite work.
Below is the code:
<div id="wrapper">
<div id="header">
<img src="images/New62CLRoval.gif" width="92" height="66" alt="" /><h1>Community of Christ - Knoxville, Tenn. Congregation</h1>
</div>
See the attached image: imageDistorted.jpg.
Ideas?
James Becker
Registered User
50 posts
Sorry, here is imageDistorted.jpg 
Jo Rice
Senior Advisor
10,951 posts
Can you put the image in and let me take a look at the page itself to see what might be wrong? Also you might want to put either <p></p> tags or <div></div> tags around that image code.
James Becker
Registered User
50 posts
HiYa Jo Ann,
OK, have a look at http://www.cofchristknoxville.org . I added the <div> tag, but the image is still distorted? Sigh. Ideas??
OK, have a look at http://www.cofchristknoxville.org . I added the <div> tag, but the image is still distorted? Sigh. Ideas??
Inger
Senior Advisor
14,624 posts
Online Now
To me it looks as if the image actually is rectangular, not square. The inserted pic on your site looks squashed.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Janys Hyde
Ambassador
6,076 posts
James. Looks as if there are several issues here.
The image is actually 92 x 66 px
It has been scaled to 128 x 128 px.
Just this scaling is going to created distortion anyway. Don't quite understand what has caused the resizing, but to have your image at 62 x 62 you should really open it up in an image editor and make that change.
The image is actually 92 x 66 px
It has been scaled to 128 x 128 px.
Just this scaling is going to created distortion anyway. Don't quite understand what has caused the resizing, but to have your image at 62 x 62 you should really open it up in an image editor and make that change.
James Becker
Registered User
50 posts
Thanks for the response. I know the image is 92x66 px, which is OK, it will still fit where I want it if only it would hold that size. Ideas??
Perhaps it is being scaled because of the css <div id="header"> tag? See below:
<div id="header">
<div><img src="images/New62CLRoval.gif" width="92" height="66" alt="" /></div><h1> Community of Christ - Knoxville, Tenn. Congregation</h1>
Ideas??
Perhaps it is being scaled because of the css <div id="header"> tag? See below:
<div id="header">
<div><img src="images/New62CLRoval.gif" width="92" height="66" alt="" /></div><h1> Community of Christ - Knoxville, Tenn. Congregation</h1>
Ideas??
Janys Hyde
Ambassador
6,076 posts
James
Had a look at your css file and this could be the culprit...
I see that the header image is 128 x 128. You could try removing that and just leave the float left in there to see what happens.
Had a look at your css file and this could be the culprit...
#header {width:960px; float:left; background:#425c82 url(../images/header_bg.jpg) left top repeat-x}
#header img {width:128px; height:128px; float:left}
#header h1 {margin:20px 15px; font-family:Georgia, Times, "Times New Roman", serif; font-size:2em; color:#fff}
#header img {width:128px; height:128px; float:left}
#header h1 {margin:20px 15px; font-family:Georgia, Times, "Times New Roman", serif; font-size:2em; color:#fff}
I see that the header image is 128 x 128. You could try removing that and just leave the float left in there to see what happens.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
