Setting up a webpage. Need LOTS of help!

John_Doe · **Posted:** Wed Jul 21, 2004 4:02 am **Post subject:**

spudthedestroyer wrote:

you should slap whoever you stole it from and eat his babies :lol:

*Furiously slapping myself*
:oops:

spudthedestroyer wrote:

If you want the same layout, and want to use frames. You can:

a) Keep that image you've got. do not set the navigation image as background. Instead simply insert it as a foreground image. Now use a map to highlight the text areas of the image, and link those up with a link to the htm page (and target="mainframe" or whatever you've called the right hand side)
b) the problem is now that, if the image is too big, low resolution browsers get scroll bars. To get round this, you need to come up with a freely repeatable design for the background, and align a smaller navigation image over the top and then link that up. Its simplest with lots of images, one for each area, but you could do a background then a foreground image

But then I'll have the same problems all over: Getting the navigation bar to be placed exactly where I want it, on the pixel. I tried many times, but it just wouldn't be placed where I wanted it.

See for yourself:
Background http://jdoe.mine.nu/test/Image2.jpg
Menu http://jdoe.mine.nu/test/buttons.jpg

I could not get it to fit in with the background. It always looked a little crooked in some way or another...
And that's just one .jpg for the whole menu. When I tried it with one .jpg for each menu link I couldn't even get the buttons near where I wanted them!

Quote:

Because frames are terrible, glitchy and poorly implemented unless you know what your doing and have a design your working from. Look at all the best sites and you'll see they avoid frames at all costs, and rightly so. The reason is because you have are entering the realm of platform dependance, introducing poor code and...well a lot of the time it just looks crap. It doesn't matter about reloading, you have it in cache don't you

It looks miles better too.

I don't really mind that much to be honest, but frames introduce far more problems than they solve, so I prefer to avoid them unless its absolutely necessary/unavoidable. When I have used them, keeping them simple, and using option a) was the only way to go for images.

Strongly disagree. It has anoyed me that this site don't have the top bar as a frame, for example. Damn anoying to have to scroll all the way to the top when I need to do a search or something.
Making the whole site reload looks much more crap IMO, but I guess it's just a matter of personal preference.

spudthedestroyer · **Posted:** Wed Jul 21, 2004 6:19 am **Post subject:**

I don't think you understand:
http://www.dtp-aus.com/im-map.htm
was the suggestion

I pillaged your image, dumped all the dud code and replaced it with a simple map nav (and even kept your precious frames, although they really aren't needed, layout could be identical but keep frames. That would also fix the bug you get now with people with lower resolutions, people being able to resize your frames, etc.)

To cut a longer story short, propered the code by quickly fixing your image as mentioned and using some better HTML (map):
http://members.lycos.co.uk/fhimages/correct/

You need to cleanup your image, and if neccessary sort out a freely repeating background image. You original implementation breaks on screen resolution 1600x1200 btw. Your background repeats again.

With the other implementations I mentioned you need to use table space to pad out the images to the correct location. But you need to be pretty knowledgeable about what your doing

Quote:

Strongly disagree. It has anoyed me that this site don't have the top bar as a frame, for example. Damn anoying to have to scroll all the way to the top when I need to do a search or something.

That's a design choice, not down to a frame implementation. Frames are ugly, don't display correctly and make the whole thing crappy (and god forbid, screw up all the links within the mainframe and keep a smeg awful frame on top no matter where the site navigates). You will NEVER, ever, see a php site with frames, and if you do, you know the webmaster is a halfwit. I would never use them on this site unless absolutely unavoidable, and even then it would be on a static section or an iframe. They screw up the design for lower resolution users and those using a browser that lack loose-implemented HTML code. It would look identical with or without frames as you described btw, except some absolutely awful banner would take away 10%+ of your screen all the time, which would be a terrible and annoying design. I can't disagree with you any more on that. You would seriously want that whole menu to move up and down the screen?!?!

I've used frames in the past, but only back when I didn't know html properly or started without any design in mind. Every frame implementation can be done better without.... but anyway, there's essays on why you shouldn't use them. But there's essays on why you shouldn't use drugs, whatevers you poison.

Quote:

Damn anoying to have to scroll all the way to the top when I need to do a search or something.

lol, lazy bastard :mrgreen:

BTW, every site that uses phpbb is like, bar the odd quirky design. It would be a terrible move to make something that big take over x% of the screen all the time at the top. It would not only be very distracting, restrict viewing area, etc. it would also look really crappy and cheap. It would be easy to move the navigation bar to the left or the right, with an always on nav bar, using frames wouldn't be that much of an issue, beyond the coding problems and the annoyances mentioned earlier. But top frame bars are the black death

Moving it to the left or right, as said could be done, but its a very bad idea for a forum imo. You get long posts, and I hate narrow forums, you squash the text and force the user to scroll down and make the whole thing more of an effort to read. On static sites (and frontpages) its not so bad, but the bigger the nav frames/bars, the harder it is for the users to read the content.

BTW. try the button called home ... I'll leave you to discover the joys of home/end keys :mrgreen:

That should be a time saver, you don't even have to touch your mouse

spudthedestroyer · **Posted:** Wed Jul 21, 2004 6:42 am **Post subject:**

or you could use a competant browser like opera and just add the search box to a nav bar and stick that to the bottom like i've done.

John_Doe · **Posted:** Wed Jul 21, 2004 7:35 am **Post subject:**

Quote:

I don't think you understand:
http://www.dtp-aus.com/im-map.htm
was the suggestion

Yeah, I know, but you didn't use the background picture for the background, and that's what I was having trouble with..
I never got around to using image map, cause there was no image to put the map on.

Quote:

To cut a longer story short, propered the code by quickly fixing your image as mentioned and using some better HTML (map):
http://members.lycos.co.uk/fhimages/correct/

Great. Tnx alot!
looking into it and trying to understand... but it's so full of scripts and links to strange files:

nav_files/a1.js
http://lycos-eu.imrworldwide.com/
nav_files/count.gif (you put a counter in there?)
google_ad_client
frame_files/show_ads.js (why on earth would I want ads?)
frame_files/imp.gif
Cookies? Do I need that for such a site?

it's extremley diffucult to understand what you've done. I thought you said to keep it simple! :wink:

Quote:

BTW. try the button called home ... I'll leave you to discover the joys of home/end keys That should be a time saver, you don't even have to touch your mouse

I know, I know. I'm lazy. =)

Quote:

or you could use a competant browser like opera and just add the search box to a nav bar and stick that to the bottom like i've done.

Tried that too. Was so full of errors that I just couldn't take it anymore.... Wouldn't even take ed2k links, no matter what I tried.
I always have opera installed, and use it every now and then for a few things, but all in all, it just wan't friendly towards the way I prefer to use a browser.

John_Doe · **Posted:** Wed Jul 21, 2004 7:37 am **Post subject:**

Quote:

You get long posts, and I hate narrow forums

hehe.. reminds me of a certain discussion over at the sci-fi forums.. :lol:

graag · **Posted:** Wed Jul 21, 2004 9:03 am **Post subject:**

All the magick is here:

Code:

<!--Author - SpudTheDestroyer - Don't steal it all in one go ;) -->
<img src="images/nav_proper.jpg" width="236"  height="974" border="0" align="right" usemap="#Map" ISMAP>
<map name="Map">
  <area shape="poly" coords="24,176,150,128,160,158,27,199" href="about.htm" target="mainFrame" alt="UglyFrame1">
  <area shape="poly" coords="30,216,127,187,131,218,33,244" href="movies.htm" target="mainFrame" alt="UglyFrameMap2">
  <area shape="poly" coords="33,259,173,231,181,263,34,290" href="thai.htm" target="mainFrame" alt="uglyFrames">
  <area shape="poly" coords="32,303,172,281,179,312,34,328" href="cool.htm" target="mainFrame" alt="uglysmellyframelink2">
</map>

Oh, and disregard that comment - in web design everybody is a thief.

John_Doe · **Posted:** Wed Jul 21, 2004 4:46 pm **Post subject:**

so what you guys are saying is that it actually impossible to use that image as a background then. =(

Is there at least a way I can get the picture to be aligned all the way to to top left, without any blank space between it?

spudthedestroyer · **Posted:** Wed Jul 21, 2004 5:58 pm **Post subject:**

a) use a repeating background image. That one isn't repeating because it would only repeat if you mirrored it 3 directions, then it would be repeating.

What I mean by this is, load up your paint app and get creating. It must fill the space between the top of the page and your design and down the side, but remember it will also repeat all the way down the nav bar. The best idea would be to crop the picture smaller by cutting a few pixels off the top and right. Then making its horizontal larger than 1200 (as to avoid repeating on people with resolutions like mine). The image should then be aligned correctly... or b) easier:

Code:

<html>
<head>
<title>Navigation</title>
<style type="text/css">
#logo
{
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px; /* Opera */
}
</style>
</head>
<!-- Let's take a moment to reflect on what we have done -->
<!-- okay the moments over, I'm bored -->
<body bgcolor="#000000">
<!--Author - SpudTheDestroyer - Don't steal it all in one go ;) --> 
<img src="images/nav_proper.jpg" id="logo" width="236"  height="974" border="0" align="left" usemap="#Map" ISMAP> 
<map name="Map"> 
  <area shape="poly" coords="24,176,150,128,160,158,27,199" href="about.htm" target="mainFrame" alt="UglyFrame1"> 
  <area shape="poly" coords="30,216,127,187,131,218,33,244" href="movies.htm" target="mainFrame" alt="UglyFrameMap2"> 
  <area shape="poly" coords="33,259,173,231,181,263,34,290" href="thai.htm" target="mainFrame" alt="uglyFrames"> 
  <area shape="poly" coords="32,303,172,281,179,312,34,328" href="cool.htm" target="mainFrame" alt="uglysmellyframelink2"> 
</map>
</body>
</html>

Steal my code. Your welcome!

Code:

nav_files/a1.js 
http://lycos-eu.imrworldwide.com/ 
nav_files/count.gif (you put a counter in there?) 
google_ad_client 
frame_files/show_ads.js (why on earth would I want ads?) 
frame_files/imp.gif 
Cookies? Do I need that for such a site?

That is mr lycos adding code on the fly. its for their advert. You needed to frane>view source as graag did. I was hoping you'd see my comment :lol:

I love comments :mrgreen:

There was one bit of javascript in the whole thing, and thats for the frames to be displayed correctly in netscape (as frames are a non standard html feature).

John_Doe · **Posted:** Thu Jul 22, 2004 3:31 am **Post subject:**

Thus the circle is complete and we're back right where we started. Forget about the repeating background image. Forget about the frames. Forget about the imagemap. What I was having trouble with is this:

How can I position the nav bar exactly where I want it, on the pixel, so that the graphics of the navbar image will go together with the background image seamlessly?

If this is impossible, is there then instead a way to display a picture all the way at the edge of the browser window, without any space between it?

John_Doe · **Posted:** Thu Jul 22, 2004 4:04 pm **Post subject:**

Wohoo! Managed to do it myself:

Code:

body {
   background-color: #000000;
  margin-left: 0px;
   margin-top: 0px;
}
-->

Finally I can get cracking!

spudthedestroyer · **Posted:** Thu Jul 22, 2004 7:17 pm **Post subject:**

erm I already posted something that would do it in all browsers

Quote:

#logo
{
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px; /* Opera */
}

Code:

<html> 
<head> 
<title>Navigation</title> 
<style type="text/css"> 
#logo 
{ 
position: absolute; 
top: 0px; 
left: 0px; 
margin: 0px; 
padding: 0px; /* Opera */ 
} 
</style> 
</head> 
<!-- Let's take a moment to reflect on what we have done --> 
<!-- okay the moments over, I'm bored --> 
<body bgcolor="#000000"> 
<!--Author - SpudTheDestroyer - Don't steal it all in one go ;) --> 
<img src="images/nav_proper.jpg" id="logo" width="236"  height="974" border="0" align="left" usemap="#Map" ISMAP> 
<map name="Map"> 
  <area shape="poly" coords="24,176,150,128,160,158,27,199" href="about.htm" target="mainFrame" alt="UglyFrame1"> 
  <area shape="poly" coords="30,216,127,187,131,218,33,244" href="movies.htm" target="mainFrame" alt="UglyFrameMap2"> 
  <area shape="poly" coords="33,259,173,231,181,263,34,290" href="thai.htm" target="mainFrame" alt="uglyFrames"> 
  <area shape="poly" coords="32,303,172,281,179,312,34,328" href="cool.htm" target="mainFrame" alt="uglysmellyframelink2"> 
</map> 
</body> 
</html>

You just have to give the image in question id="logo". Otherwise with yours any text will also be pushed right up against the side too which looks gash (but if u intend to use frames I suppose it doesn't really matter)

Code:

body { 
   background-color: #000000; 
   margin-left: 0px; 
   margin-top: 0px; 
}

Looking at that code, once again, I don't think it will work in opera, you need:

Code:

body { 
   background-color: #000000; 
   margin-left: 0px; 
   margin-top: 0px; 
   margin: 0px; 
   padding: 0px; /* Opera */ 
}

(If i recall correctly) ...if you must set it to body, but I would advise against it. Use logo then the margin is still there for text, just not for your navigation menu which is what you want.

John_Doe · **Posted:** Fri Jul 23, 2004 3:00 am **Post subject:**

ok. tnx mate =)

hehe.. now about guestbooks... ?

spudthedestroyer · **Posted:** Fri Jul 23, 2004 3:15 am **Post subject:**

arrgghhhhhh! Guestbooks... the only way to kill a webmaster! :mrgreen:

The problem is you won't have the server technology to run one locally, and if you do, then its easier just installing a forum imo. Still if you have the technology, you can write a simple guestbook in php, very, very easily. I'm assuming you don't have anything on your free host beyond apache though?

In that case, any host for a guestbook will do. Bravenet used to host them, but if you search google for free guestbook I'm sure you'll get plenty of hits.

John_Doe · **Posted:** Fri Jul 23, 2004 3:37 am **Post subject:**

yeah... I thought you'd say that, but as this will be a personal and small homepage, I thought maybe a forum would be a little overkill? If I send the link to some family member and they want to write a little hello, I think anything more than 'Enter message here' will confuse the hell out of them. We're talking about guys who's having trouble finding the 'On' button here...

I think I can have any technology I want on there btw. The hosting is free, yeah, but that's only cause my cousin owns a webpage distrobuting company.

He said I could have anything I'd like on there at least..

so what do I use to write php then? Dreamweaver?

spudthedestroyer · **Posted:** Fri Jul 23, 2004 4:15 pm **Post subject:**

you can use any text editor to write php, its very, very simple.

But since you are hosted you might as well just use something like:
http://www.promosi-web.com/script/guestbook/

John_Doe · **Posted:** Tue Jul 27, 2004 8:36 pm **Post subject:**

http://jdoe.mine.nu/

ok spud, cleaned up alot. looking better now? No 'naff' code and better picture, ect.

got one little problem though. Check the 'my thai trip' section. You see that little jpg I have down in the corner there. Now in Opera is displays correctly, the way I meant it to, but in IE it's displayed on the middle of the page (after scrolling down).

Also IE don't 'wrap' the text correctly like opera does, but gives an additional horizontal scroll-bar. Can't seam to fix it whatever I do.

spudthedestroyer · **Posted:** Wed Jul 28, 2004 8:53 am **Post subject:**

hmm not quite sure, but yes, I've experienced IE doing that before, it just doesn't seem to like positioning items across the page, I had a similar trouble with IE and tables a while back.

You could try adding:
margin-left: 0px;
margin-top: 0px;
to corner

John_Doe · **Posted:** Wed Jul 28, 2004 3:10 pm **Post subject:**

tried that... didn't work. =(

How about the scroll bar? Any idea why it wont 'wrap' the text correctly?

spudthedestroyer · **Posted:** Wed Jul 28, 2004 8:21 pm **Post subject:**

nope, that's frames + IE for you

you could try using a tablewith two columns, 99%, 1% and then put no scroll on for the frames. I think that gets rid of vertical scroll though

John_Doe · **Posted:** Thu Jul 29, 2004 12:10 am **Post subject:**

at least managed to put the corner picture correctly at the bottom, simply by REMOVING the 'bootom; 0xp' tag. But now it's not displayed in the 'background' but put beneath the last 'epilogue' link, making the page longer... argh =(

Setting up a webpage. Need LOTS of help!

Who is online