First of all let me say that I am a complete newbie at web site design. But since I work on computers for a living for some reason my sons wrestling club just assumed I was the man for the job. Anyway, when I open my website up on my laptop it looks fine. All of the text and graphics are centered the way I want them and it looks ok for a first timer. That was until I opened the web site on a PC that has a larger screen. When I do that the images are way off from what I see on my laptop and no where near what I would like them to be. It also appears that if you resize your IE window the images appear to move around on the page.
I only use the visual editor as I really have no idea when it comes to code. The address to the site is http://goforth.homeftp.org if you would like to check it out for yourselves. Please try not to laugh to hard as it is a work in progress and it is also my first venture into web design. Any help at all would be greatly appreciated.
Image placement - Post ID 6448
Kevin Goforth
Registered User
5 posts
Cary
Ambassador
1,080 posts
You can try this code. I'll explain some of the changes below it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rock Creek Kids Wrestling</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ff0000" vlink="#ff0000" alink="#ff0000" style="text-align:center">
<div style="position:relative; width:1000px; margin:0 auto; text-align:left;">
<p align="center"><strong><font size="4">ROCK CREEK KIDS WRESTLING<br><br>"PRACTICE MAKES CHAMPIONS"</font></strong></p>
<hr align="center" style="color:#c0c0c0; background-color:#c0c0c0;">
<a href="Home.html">HOME</a><br><br>
<a href="Contact.html">CONTACT US</a><br><br>
<a href="mycalendar.html">CALENDAR</a><br><br>
<a href="myalbum.html">PHOTOS</a><br><br>
<strike>VIDEOS</strike>
<img style="Z-INDEX: 100; LEFT: 200px; POSITION: absolute; TOP: -7px" height="92" alt="" src="RCKWLOGO2.JPG" width="123" border="0">
<img style="Z-INDEX: 100; LEFT: 675px; POSITION: absolute; TOP: -8px" height="92" alt="" src="RCKWLOGO3.JPG" width="123" border="0">
<img style="Z-INDEX: 100; LEFT: 198px; POSITION: absolute; TOP: 100px" height="455" alt="" src="Rock_Creek_Wrestling_20071.jpg" width="602" border="0">
</div>
</body>
</html>
The code for your page starts with "</head>" followed by the opening body tag and the rest of the html. The code above adds the complete head to the page as well as a Doctype.
Part of the head is the title which you need to change to your liking. This is what you see at the top of the browser when you visit the page.
I added a div to the page which opens just after the opening body tag and closes just before the closing body tag. This div therefore contains all the content on the page. Styling is used in the opening div to give it a width of 1000px, which seems to be about the size you were designing your page for. This 1000px wide div will also stay centered on wider screens.
It is also styled with relative positioning. This allows your absolutely positioned images within the containing div to move with the div as the div's position on the page shifts, so everything stays lined up. As long as you keep all new code added to the page within this div, any elements added to the page should hold their positions relative to one another.
I'm guessing anything new added to the page will produce code below the closing div tag, and that code will need to be moved inside the div, before its closing tag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rock Creek Kids Wrestling</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ff0000" vlink="#ff0000" alink="#ff0000" style="text-align:center">
<div style="position:relative; width:1000px; margin:0 auto; text-align:left;">
<p align="center"><strong><font size="4">ROCK CREEK KIDS WRESTLING<br><br>"PRACTICE MAKES CHAMPIONS"</font></strong></p>
<hr align="center" style="color:#c0c0c0; background-color:#c0c0c0;">
<a href="Home.html">HOME</a><br><br>
<a href="Contact.html">CONTACT US</a><br><br>
<a href="mycalendar.html">CALENDAR</a><br><br>
<a href="myalbum.html">PHOTOS</a><br><br>
<strike>VIDEOS</strike>
<img style="Z-INDEX: 100; LEFT: 200px; POSITION: absolute; TOP: -7px" height="92" alt="" src="RCKWLOGO2.JPG" width="123" border="0">
<img style="Z-INDEX: 100; LEFT: 675px; POSITION: absolute; TOP: -8px" height="92" alt="" src="RCKWLOGO3.JPG" width="123" border="0">
<img style="Z-INDEX: 100; LEFT: 198px; POSITION: absolute; TOP: 100px" height="455" alt="" src="Rock_Creek_Wrestling_20071.jpg" width="602" border="0">
</div>
</body>
</html>
The code for your page starts with "</head>" followed by the opening body tag and the rest of the html. The code above adds the complete head to the page as well as a Doctype.
Part of the head is the title which you need to change to your liking. This is what you see at the top of the browser when you visit the page.
I added a div to the page which opens just after the opening body tag and closes just before the closing body tag. This div therefore contains all the content on the page. Styling is used in the opening div to give it a width of 1000px, which seems to be about the size you were designing your page for. This 1000px wide div will also stay centered on wider screens.
It is also styled with relative positioning. This allows your absolutely positioned images within the containing div to move with the div as the div's position on the page shifts, so everything stays lined up. As long as you keep all new code added to the page within this div, any elements added to the page should hold their positions relative to one another.
I'm guessing anything new added to the page will produce code below the closing div tag, and that code will need to be moved inside the div, before its closing tag.
Cary
Ambassador
1,080 posts
Oh, another change I made requires you to change the name of one of your images. You have "Rock Creek Wrestling 20071.jpg" which contains spaces, and spaces should always be avoided when naming files for web use. One option is to replace the spaces with underscores like this:
"Rock_Creek_Wrestling_20071.jpg"
Rename the image file like this and the code above will work, or change the code I gave above to match whatever new name you create for this file.
"Rock_Creek_Wrestling_20071.jpg"
Rename the image file like this and the code above will work, or change the code I gave above to match whatever new name you create for this file.
Kevin Goforth
Registered User
5 posts
That appears to have fixed the problem. Thank you so much.
Adam R.
Ambassador
3,120 posts
Looks pretty good for a "newbie" site. 
I hate to point out a typo, especially when it's in an image. Hopefully that's in an easier format to edit elsewhere, but the line in the creed that says "He pounders quitting" I'm sure should be "ponders."
I hate to point out a typo, especially when it's in an image. Hopefully that's in an easier format to edit elsewhere, but the line in the creed that says "He pounders quitting" I'm sure should be "ponders."
Kevin Goforth
Registered User
5 posts
Yeah I spotted that to. I received the image from a club member who also works for the place that did our t-shirts. That same image was used for our t-shirts. The shirts came out fine so I am trying to get a copy of final version of the image.
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.
