The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Need help with HTML...
toxxxic.kitten
post Nov 24 2009, 08:06 PM
Post #1





Group: Members
Posts: 1
Joined: 24-November 09
Member No.: 10,422



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 24 2009, 08:25 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,330
Joined: 9-August 06
Member No.: 6



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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 24 2009, 08:34 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,330
Joined: 9-August 06
Member No.: 6



Use a doctype...
http://www.htmlhelp.com/tools/validator/doctype.html
that lets you validate...
http://www.htmlhelp.com/cgi-bin/validate.c...s&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).


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Nov 24 2009, 10:04 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,004
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 24 2009, 10:48 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,330
Joined: 9-August 06
Member No.: 6



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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd August 2014 - 02:48 PM