HTML Help

honorablejr · Joined: 26 Aug 2006 Posts: 14

Hey, all. I've just gotten my wife's website up: www.encompasstravelcenter.com
Most of it works ok, but the pictures on the left side, and our logo, won't stay put! Depending on your browser, monitor size, size of the window when it opens, etc... the images move horizontally where they show up..!

I created this using FrontPage, and have edited the problems out of it using html. Which is really hilarious, since I don't know what I'm doing with either! (I just ctrl-x bits of html in and out of the source code from my files online - pure guesswork! HA!)

Any script I can use to fix my pics? Thanks!

Corey Bryant · Posted: Sun Aug 27, 2006 5:03 am

Which picture exactly is it? You are using absolute positioning on some Code:          <div style="position: absolute; left: 192px; top: 413px">
            <font size="3">
            <img border="0" src="Encompass%20logo%20halfsize.JPG" width="169" height="104"></font><br>
</div> which can cause some problems in itself.

_________________
Corey
Loud Info | Loud Worx | Merchant Account Blog

honorablejr · Joined: 26 Aug 2006 Posts: 14

Well, that may be it. I didn't know it was absolutely positioned: I just dragged it into the position I wanted it and saved it there in FrontPage.

The logo on each page, and any pictures directly below it, all move. Try going to: www.encompasstravelcenter.com/use_us.html , and then make your screen width smaller and see what happens to the logo and pic.

What would be a fix for these problems?

Thanks so much for your help!

honorablejr · Joined: 26 Aug 2006 Posts: 14

Oh, and as of today, without making any changes to the site, I now see a white band or border along one or two edges of the central image area, in each page.... I SWEAR I didn't change anything since last night, when it wasn't doing that! Ergh...
:(

I did try a little bit ago to change the "absolute" positioning of my logo to "relative", and only succeeded in planting the image at the bottom of my page. Well, change that back...

Any suggested script for fixing this? Actual cut-and-paste stuff would work better than directions, as I really don't understand most of what I am doing. :-)

Thanks!

Corey Bryant · Posted: Sun Aug 27, 2006 12:25 pm

honorablejr wrote: Well, that may be it. I didn't know it was absolutely positioned: I just dragged it into the position I wanted it and saved it there in FrontPage.! Creating a website is not the same as using Adobe photoshop where you can drag and drop layers, etc. Using these divides (Frontpage calls them layers) allows you to do this but it can cause problems.
honorablejr wrote: The logo on each page, and any pictures directly below it, all move. Try going to: www.encompasstravelcenter.com/use_us.html , and then make your screen width smaller and see what happens to the logo and pic.

What would be a fix for these problems?

Thanks so much for your help! Right now - it looks like you have built your site for 800X600 resolution - which is not a good idea. Meaning, if you have the window opened completely in a larger resolution, you will see a lot more problems. Take a look at http://www.coreybryant.org/dev/images/html20060827.gif and hopefully you will see what I mean.

My suggestion to you is to use tables to help you layout your website.
honorablejr wrote: Oh, and as of today, without making any changes to the site, I now see a white band or border along one or two edges of the central image area, in each page.... I SWEAR I didn't change anything since last night, when it wasn't doing that! Ergh... You have Code: <td height="202" valign="top" background="images/bg5.gif" bgcolor="#FFFFFF"> which you might be seeing the background color showing thru there
honorablejr wrote: I did try a little bit ago to change the "absolute" positioning of my logo to "relative", and only succeeded in planting the image at the bottom of my page. Well, change that back... You can't just change something like this. With you using absolute positioning, no matter where in the code you have this, the image / layer / divide will appear in the position that you specified in the code
honorablejr wrote: Any suggested script for fixing this? Actual cut-and-paste stuff would work better than directions, as I really don't understand most of what I am doing. :-)
Start small - use tables to layout this out. You have a header, and then the contents and then the footer Code: <table border="1" width="100%" id="table1">
<tr>
   <td> </td>
</tr>
</table>
<table border="1" width="100%" id="table2">
<tr>
   <td> </td>
   <td> </td>
</tr>
</table>
<table border="1" width="100%" id="table3">
<tr>
   <td> </td>
</tr>
</table> Is something like you want - but then you just need to change the attributes on there.

Hopefully looking at the image you will see the issues with absolute positioning.

_________________
Corey
Loud Info | Loud Worx | Merchant Account Blog

honorablejr · Joined: 26 Aug 2006 Posts: 14

Well, I tried to create tables in FrontPage to put my pics and logo in, but it didn't let me move them to where they needed to be positioned. That's why I just pasted and moved. Apparently FPage (I won't mention what the F is for...) :P didn't do what I thought it was doing at that time.

Sorry, Corey, I'm not a REAL programmer: just a newbie who is forced to do this 'cause I can't afford to pay someone to do it! :oops: I really only partly understand the instructions you gave... wayyyyy out of my league, here.

The explanation is clear, but the solution is not. I don't know enough about what I'm doing to write script to solve anything. I'm more like a woodsman's helper: tell me to cut there, and I'll cut, but I don't where or why, without help. :?:

I can see what a table IS, but I certainly don't know what to do to it to change it or make it work/look like it needs. And I can definitely see what kinds of problems absolute positioning can cause: I just don't know what to do about it!

I'll try to see if FrontPage can tutor me on putting these things into tables, then. Oh, and maybe it will let me adjust the resolution settings? What should they be? No way I'll be able to figure any of this out on my own. Thanks, though, man!

Corey Bryant · Posted: Sun Aug 27, 2006 1:43 pm

honorablejr wrote: Well, I tried to create tables in FrontPage to put my pics and logo in, but it didn't let me move them to where they needed to be positioned. That's why I just pasted and moved. Apparently FPage (I won't mention what the F is for...) :P didn't do what I thought it was doing at that time. Well if the log was not where you needed it - then you let Frontpage try to put it there for you - but using those absolute positioning layers can get you into a world of mess.

If you take out the images that you put in there with the absolute positioning, does it look better? With the exception of absolute positioning, everything else seems to be OK.
honorablejr wrote: I'll try to see if FrontPage can tutor me on putting these things into tables, then. Oh, and maybe it will let me adjust the resolution settings? What should they be? No way I'll be able to figure any of this out on my own. Thanks, though, man! Your code Code: <table width="766" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top:45px "> in the very beginning I would say is good. You built it for a 800X600 screen, which is OK and everything but using that absolute positioning is what is messing it up. I put all my pages in a divide that is 800 pixels in width. That will cause a scroll bar on people who have a 800X600 screen, but I honestly don't care. The size that you have used is just fine.

There is also a Frontpage Forums that might be better for you for some things since you are relying on Frontpage. I would make a copy of one of the pages, take out the absolute positioning and then go from there.

For example, you have Code:          <div style="position: absolute; left: 192px; top: 413px">
            <font size="3">
            <img border="0" src="Encompass%20logo%20halfsize.JPG" width="169" height="104"></font><br>
</div> which is basically right under Code:       <div style="color:#D49C73; margin-right:15px " align="right">
          <p><font size="3"><font color="#8E5C4C">Encompass Travel &
         Tours: Trips, tours, travel ... fun!</font>    </font> That image could go under this code without the absolute positioning divide (layer).

_________________
Corey
Loud Info | Loud Worx | Merchant Account Blog

honorablejr · Joined: 26 Aug 2006 Posts: 14

I don't know about using the FrontPage forum, Corey; they can't be TOO good, if they have chosen FP, right? :P

Thanks for the great tip: I stripped out the absolute positioning line, and adjusted (by hit or miss) the spacing down, and now it looks pretty good! And, it doesn't move around on me when the window size is adjusted!

Pretty cool!

Now I am trying to figure out the background/border issue: I think it might be in this code somewhere, but I'm not sure:

Code: </table></td>
</tr>
<tr>
<td><table width="766" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"><img src="images/a1.gif" width="20" height="502"></td>
<td width="726" valign="top" bgcolor="#FFFFFF">
   <TABLE WIDTH=726 height="502" BORDER=0 CELLPADDING=0 CELLSPACING=0 style="border-left-width: 0px; border-bottom-width: 0px">
<TR>
<TD width="253" height="301" valign="top" background="images/bg1.gif">
      <p align="right" style="margin-top: 0; margin-bottom: 0">
      <font face="BlackChancery" size="5">Welcome    
      </font></p>

I was especially thinking maybe the table width/height and spacings aren't set right, or the border attributes? It's also showing up on the right-hand side, so maybe that isn't the right section, after all.

Thank you SOOOO much for your help!!!! It's looking (and I'm feeling) so much better already!! :D
-Joel

Corey Bryant · Posted: Sun Aug 27, 2006 3:01 pm

honorablejr wrote: I don't know about using the FrontPage forum, Corey; they can't be TOO good, if they have chosen FP, right? :P Well I would say so. I still use Frontpage for most of my websites. The publishing feature is fantastic. But no matter, I tell everyone you must have the basic concept of HTML down to help you.

As far as the white band - I really guess I first need to know exactly where you see it. I see a gray line to the right of the button called groups.

Ok I think I know what you mean now by a white band around the central image area. I call that your main content area and I was looking at your logo. So now that I know what you mean, maybe we can get somewhere.

On around line 197, you have Code: </table>
<br>
<div style="margin-left:3px "></div>
</div></TD> Get rid of that <br> so that you have Code: </table>
<div style="margin-left:3px "></div>
</div></TD> You seem to have an extra <td> in there on the right which is causing you some of the problems. As far as height - don't use unless you have to. It usually causes more problems than anything.

Another question - did you create this using an imaging program and then slice it and it created all these tables for you? There are so many tables in there, that might be your other issue / problem. With tables, less is more. I would really recommend you red-oing the code, starting from scratch.

I see that you have a lot of FP code, especialy the roll-overs, etc - something that I won't get into at this time but take a look at Code: <div align="center">

<table style="text-align: right; border-collapse: collapse; width:766px; background: url('http://www.encompasstravelcenter.com/images/m0.gif')">
<tr>
<td><img src="http://www.encompasstravelcenter.com/images/m0.gif" width="252" height="23"><a href="http://www.encompasstravelcenter.com"><img border="0" id="img5" src="http://www.encompasstravelcenter.com/button4.jpg" height="23" width="90" alt="Home" fp-style="fp-btn: Embossed Capsule 6; fp-font-style: Bold; fp-font-color-hover: #486DB7; fp-bgcolor: #592C14; fp-proportional: 0" fp-title="Home" onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'http://www.encompasstravelcenter.com/button5.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'http://www.encompasstravelcenter.com/button4.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'http://www.encompasstravelcenter.com/button6.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'http://www.encompasstravelcenter.com/button5.jpg')"></a><a href="http://encompasstravel.joystar.com/Cruise.aspx?AgentID=10008835" TARGET=_blank><img border="0" id="img4" src="http://www.encompasstravelcenter.com/button42.jpg" height="23" width="90" alt="Cruises" fp-style="fp-btn: Embossed Capsule 6; fp-font-style: Bold; fp-font-color-hover: #486DB7; fp-bgcolor: #592C14; fp-proportional: 0" fp-title="Cruises" onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'http://www.encompasstravelcenter.com/button43.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'http://www.encompasstravelcenter.com/button42.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button44.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'http://www.encompasstravelcenter.com/button43.jpg')"></a><a href="http://encompasstravel.joystar.com/Vacation.aspx?AgentID=10008835" TARGET=_blank><img border="0" id="img3" src="http://www.encompasstravelcenter.com/button1.jpg" height="23" width="90" alt="Vacations" fp-style="fp-btn: Embossed Capsule 6; fp-font-style: Bold; fp-font-color-hover: #486DB7; fp-bgcolor: #592C14; fp-proportional: 0" fp-title="Vacations" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'http://www.encompasstravelcenter.com/button2.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button1.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'http://www.encompasstravelcenter.com/button3.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'http://www.encompasstravelcenter.com/button2.jpg')"></a><a href="http://encompasstravel.joystar.com/Default.aspx?AgentID=10008835" TARGET=_blank><img border="0" id="img2" src="http://www.encompasstravelcenter.com/button3C.jpg" height="23" width="102" alt="Flights/Hotel" fp-style="fp-btn: Embossed Capsule 6; fp-font-style: Bold; fp-font-color-hover: #486DB7; fp-bgcolor: #592C14; fp-proportional: 0" fp-title="Flights/Hotel" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'http://www.encompasstravelcenter.com/button3D.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'http://www.encompasstravelcenter.com/button3C.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'http://www.encompasstravelcenter.com/button3E.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button3D.jpg')"></a><a href="http://www.encompasstravelcenter.com/Groups.html"><img style="padding-right: 20px;" border="0" id="img6" src="http://www.encompasstravelcenter.com/button60.jpg" height="23" width="100" alt="Groups" fp-style="fp-btn: Embossed Capsule 6; fp-font-style: Bold; fp-font-color-hover: #486DB7; fp-bgcolor: #592C14; fp-proportional: 0" fp-title="Groups" onmouseover="FP_swapImg(1,0,/*id*/'img6',/*url*/'http://www.encompasstravelcenter.com/button61.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img6',/*url*/'http://www.encompasstravelcenter.com/button60.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img6',/*url*/'button62.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img6',/*url*/'http://www.encompasstravelcenter.com/button61.jpg')"></a></td>
</tr>
</table>

</div> I still used your FP roll-over code for this one.

And then for the second one something like Code: <table style="text-align: center; border-collapse: collapse; width:766px; background: url('http://www.encompasstravelcenter.com/images/m0.gif')">
<tr>
<td><img src="http://www.encompasstravelcenter.com/images/pict.gif" width="726" height="179" alt="Alt text"></td>
</tr>
</table> But hopefully you get the idea. You can use CSS to control the padding like I did on your buttons, etc.

For a cleaner roll-over code check out Rollover trouble.

_________________
Corey
Loud Commerce |
Loud Worx | Loud Ads

honorablejr · Joined: 26 Aug 2006 Posts: 14

Ok, now. I'm still looking through my code to see exactly where your suggested coding would fit. In the meantime, to address some of your suggestions or questions:

I took out the <br> as suggested, but nothing changed. However, I didn't get rid of the extra td, because there were several, and I didn't know which one was extra...

All of the height tags were put there by FP; I didn't do anything by hand there.

As for the number of tables: the template I purchased and imported into FP was probably to blame for a lot of the extra tables. I just did what looked good while writing this up, and had no idea I should do anything with "tables". Likewise, all of the images were just copied directly onto the page in FrontPage, and then I grabbed the corners and stretched or shrunk them to the right size, and grabbed and moved them to the right locations. That's all.

I can see where the less is more standard would be a good one, but I have zero skills in this area, so I couldn't possibly rewrite the page by hand. (Let's see: which smiley looks like I am fainting?...)

:shock:

Not sure what padding is, but I will read your code side by side with FP's, and see if I can't figure it out.

As for the rollover code: I kinda fubar-ed that, with FrontPages' help. The template came with a really cool looking tab, but it didn't have enough room, nor enough tabs, for my site. So, I inserted/pasted a different type of button over it, to make it work. Ugly, but it worked.

I really appreciate you sticking in there with me, Corey: I know it is frustrating trying to help out folks who really have no idea what you are talking about. But, I'm learning, in spurts and spots. Thanks again!

honorablejr · Joined: 26 Aug 2006 Posts: 14

Still reading the html. Got to thinking: I don't see how you guys see this stuff so easily! It's sort of like The Matrix: you see a gobbledygook of numbers and letters, and go "Oh, yeah: your dingfod is attributed to your watchamacallit, so your whosywhat won't work right."

Go, Neo !

:D

Corey Bryant · Posted: Mon Aug 28, 2006 3:26 am

The problem with templates - a lot of them are done by designers who do not understand HTML, not even the basics. And then you rely on that even more.

The padding only added a little extra to the right as you required on your site. If you copy the code from here into a new web page, I think you will start to see / understand some. You might have to redo the rollover images but it could be a start.

_________________
Corey
Loud Commerce | Loud Worx | Merchant Account Blog

honorablejr · Joined: 26 Aug 2006 Posts: 14

PARTIAL SUCCESS !!
I've gotten rid of the white bars on the right: my code had a width setting wrong, and it was extending the white background layer too far.

Now I am searching for the point at which my height is wrong, but not getting much success: I still have a white bar running horizontally on two of the pages.

I'm trying to compare the code from two pages, to see what is different, but oh, boy, do my eyes start swimming! :shock: :roll:

If anyone has any clues as to why my index page has that white bar, and my groups page doesn't, I'd love the help finding it!

-Joel (Not Sherlock Holmes) the newbie

Corey Bryant · Posted: Tue Aug 29, 2006 9:55 am

If you don't need the height - I would not use it. Usually it causes more problems

_________________
Corey
Loud Commerce | Loud Worx | Merchant Account Blog

honorablejr · Joined: 26 Aug 2006 Posts: 14

Sorry, Corey, but I'm not sure what you mean about not using height...

The height of the tables and images are already in there, put in place by FrontPage. I'm just trying to figure out which one got altered, so the white layer (CSS?) is too tall.

Thanks for all your help and persistence!