Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Need help with HTML...

Posted by: toxxxic.kitten Nov 24 2009, 08:06 PM

Okay...so I'm helping a reptile show create their website so vendors or customers can visit to get more information. I'm having trouble with alignments. I edited the HTML on my laptop and it lines up perfectly fine, but when I got to view it on my desktop everything is shifted over the the left or off centered - this also happens when other people view it. I edited it in FireFox and other users seem to use Internet Explorer, so I edited the code in IE - but it's still off centered or shifted over. I want to be able to have the website be viewed on FF or IE and everything be in place...what do I need to do? Oh, and URL: http://www.indianareptileexpo.webs.com

Here is my coding for the homepage:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Indiana Reptile Expo</title>
</head>

<body>
<body background="http://i49.tinypic.com/2cs795k.png">
<center><img src="http://i46.tinypic.com/2jazz87.png" WIDTH=899 HEIGHT=900></center>

<div style="top: 115; left: 160; position: absolute; visibility: show; width: 205px; height: 25px; ">
<marquee>Next Show: December 6, 2009</marquee>
</div>


<div style="top: 208; left: 200; position: absolute; visibility: show; width: 205px; height: 25px; "><a href="http://indianareptileexpo.webs.com/info.html"><img src="http://img.photobucket.com/albums/v17/littleaussie44/info.png" border="0"></a></div>

<div style="top: 208; left: 330; position: absolute; visibility: show; width: 205px; height: 25px; "><a href="http://indianareptileexpo.webs.com/vendorinfo.html"><img src="http://img.photobucket.com/albums/v17/littleaussie44/vinformation.png" border="0"></a></div>

<div style="top: 208; left: 460; position: absolute; visibility: show; width: 205px; height: 25px; "><a href="http://indianareptileexpo.webs.com/apps/photos/"><img src="http://img.photobucket.com/albums/v17/littleaussie44/photogallery.png" border="0"></a></div>

<div style="top: 208; left: 590; position: absolute; visibility: show; width: 205px; height: 25px; "><a href="http://forum.indianareptileexpo.com/user/categories.aspx"><img src="http://img.photobucket.com/albums/v17/littleaussie44/forumcopy.png" border="0"></a></div>

<div style="top: 250; left: 105; position: absolute; visibility: show; width: 155px; height: 25px; ">
<img src="http://i45.tinypic.com/v4ckex.png"></div>

<div style="top: 352; left: 75; position: absolute; visibility: show; width: 160px; height: 25px; ">
<center>Life is Good. <b>BE YOU</b> Give Back.<br></br>

The IRE would like to proudly present: <b>Rupert from Survivor!</b> He will be attending the December 6, 2009 show from 11:00 AM-1:00 PM signing autographs. With a donation, Rupert will be kindly giving away his book, "Just Being Me."</center>
</div>

<div style="top: 620; left: 10; position: absolute; visibility: show; width: 155px; height: 25px; ">
<img src="http://i48.tinypic.com/2ibz4tc.png">
</div>

<div style="top: 675; left: 780; position: absolute; visibility: show; width: 155px; height: 25px; ">
<img src="http://i49.tinypic.com/2m4ccye.png">
</div>

<div style="top: 250; left: 255; position: absolute; visibility: show; width: 485px; height: 25px; ">
<b>Welcome to the Indiana Reptile Expo!</b><br></br>

<center>The Indiana Reptile Expo is held every first Sunday of the month in Noblesville, IN at the Hamilton County Exhibition Center & 4-H Grounds. It includes over 16,000 sq feet of reptiles and exotics. Free parking & food, as well as ATMs. It is a great opportunity to learn about reptiles/exotics and their care from the experts that raise and breed them. For more information click the "Info" link above.<br></br>

Our next show will be held <b>December 6, 2009</b> at the <b>Hamilton County Exhibition Center & 4-H Grounds in Noblesville, IN</b>!</center><br></br>

<u><b>Announcements:</u></b> December's show give a ways will include a male albino ball python, an Exo Terra complete set up with waterfall; retailed value of $400, a Zoo Med Reptile Breeze cage; retailed value of $200, and lastly $200 CASH to be spent with any vendor or vendors at the show.<br></br>

<center><img src="http://i48.tinypic.com/sawcw4.jpg">

</div>

<div style="top: 840; left: 250; position: absolute; visibility: show; width: 485px; height: 25px; ">
<center><b>Questions/Comments? E-mail: IndianaReptileExpo@gmail.com</b></center>
</div>

<div style="top: 250; left: 765; position: absolute; visibility: show; width: 165px; height: 25px; ">
<center>AD SPACE CAN BE BOUGHT HERE! E-MAIL FOR PRICING!</center>
</div>



</body>
</html>

Posted by: pandy Nov 24 2009, 08:25 PM

It's even more misaligned in FF for me. It looks like you have designed the page to fit a certain resolution, a full window on a 1024 x 768 display, perhaps? Don't do that.
http://htmlhelp.com/faq/html/design.html#screen-size

Posted by: pandy Nov 24 2009, 08:34 PM

Use a doctype...
http://www.htmlhelp.com/tools/validator/doctype.html
that lets you validate...
http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A//www.indianareptileexpo.webs.com/&warnings=yes&input=yes
and gets the page out of Quirks Mode.
http://hsivonen.iki.fi/doctype/

Don't use absolute positioning in the way you've done (positioning individual items relative the top left edges of the window).

Posted by: Darin McGrew Nov 24 2009, 10:04 PM

Some of the page is centered. Some of the page is positioned relative to the left edge. They'll line up only at one size of browser window. To see the effect, change the size of your browser window and watch what happens. Pick one or the other (centering, or aligning to the edges of the display area). Don't mix them like this.

Also, as pandy pointed out, positioning content over specific areas of a background image is a fragile way to design a page. If the content won't fit, then the layout falls apart.

Posted by: pandy Nov 24 2009, 10:48 PM

It's better to arrange everything inside a container DIV and then center that DIV.

The background with the scales is cool, but it's way too big. It takes ages to load. More than 3 MB is much too large for the web. Shouldn't it be possible to cut it so it can tile? If not, converting it to JPG will make it much smaller, even if still biggish.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)