1.) You know in Internet Explorer 6.0+, how when you hold the cursor over an image somtimes that little save/print/resize toolbar appears? Is there a way to stop that from happening? it looks stupid when it comes up on an image that is suppose to blend in with the background.
2.) Making text over lap an image, how is that done?
3.) I'm not sure if this can be done in HTML, but you know how some of you guys have a random avatar display everytime the page is loaded? I want to make it so when you open a page a random page is loaded from a folder that is uploaded.
4.) I want my entire site to be in a pre-resized window that cannot be enlarged or shrunk. How would go about doing that?
1. Make the image the background of a TD. <td background="mypicture.gif" width="100" height="100">
2.
a. Use a <Div> and put your text in it. <div style="position:absolute; left:100px; top:100px;></div> - Not recommended though, because some browsers work differently with 'div' positions.
b. Use the method in point 1, and put text inside the <TD>
3. That's usually PHP, although it can be done in any scripting language
4. You can't stop the window size from changing. Ok, you could use Javascript but that looks horrible and gets on people's nerves. Try just making the main part of your site a fixed width:
<table align="center" width="750"> ...
This way, the site will always be 750 pixels wide (which is about right for 800x600) but on larger resolutions it won't stretch, it'll just be centralised and 'padded out' with your background image.
There's another method which involves making a popup window in javascript:
"Say you're hanging from a huge cliff at the top of mt. everest and a guy comes along and says he'll save you, and proceeds to throw religious pamphlets at you while simultaniously giving a sermon." - Dustin G
Okay I think i've really stuffed this up.
I tried those things and they didn't work, but i'm pretty sure it's because I made half the site in this Yahoo page builder thing I found.
You told me not to use the div tag thing, but after looking in the HTML code i've used it like 50 times...
That's probably why then, maybe you should use Dreamweaver or something
"Say you're hanging from a huge cliff at the top of mt. everest and a guy comes along and says he'll save you, and proceeds to throw religious pamphlets at you while simultaniously giving a sermon." - Dustin G
As for 4, DONT DO THAT! You're breaking one of the fundamental rules in web usability by having a non resizable page. Your site should also use percentage/relative sizes so it stretches to the user's browser size, and fits their resolution. (Ever used a high resolution and used a fixed sized site like Natomic or Acoders? Huge bands of background down either side...)
If you use javascript to force a size you can expect people just to close your site immediately.
There are some exceptions though like the help section of a site or something if it pops up, but whatever you do don't do it for a whole site.
I am using dreamweaver now, but the buttons i've made are different they are different sizes (sorta) It is hard to explain what I mean but they need to be alligned perfectly along one another but also over lap another image. I didnt know how to do that in dreamweaver. As for the resize window thing, I want the window to be shunk smaller so there isn't loads of blank background, I want to cut that out.
And what if he doesn't want his site stretching to the whole width of the screen?
"Say you're hanging from a huge cliff at the top of mt. everest and a guy comes along and says he'll save you, and proceeds to throw religious pamphlets at you while simultaniously giving a sermon." - Dustin G
Pete Nattress Cheesy Bits img src/uploads/sccheesegif
Registered 23/09/2002
Points 4811
5th December, 2004 at 10:24:47 -
"You're breaking one of the fundamental rules in web usability by having a non resizable page."
sorry tigs but i must say that that is total bollocks. observe:
wow, three very popular websites with FIXED WIDTH designs. it's not a fundamental rule, it's a design choice that must be made, and it's dependant on lots of factors. some websites would look really bad if you made them stretch out. the most common resolutions are 800*600 or 1024*768 anyway.
3)
say we have this folder:
somepage.htm
anannoyingpage.htm
randompage.htm
...
so use this code in your page htat loads up a random page:
<script language="JavaScript">
pages = ["somepage.htm","anannoyingpage.htm","randompage.htm"...]; //don't think it's possible to load a directory into an array if so, tell me.
random = pages[Math.Floor(Math.Rand()*pages.length)+1]; //will set random to one of the strings in the pages array
document.href="directory/"+random;
</script>
that should work, haven't tested it out yet though
As a boy, I wanted to be a train. I didn’t realize this was unusual—that other kids played with trains, not as them.
Actually, it's a little known fact that many, many corporate web sites totally suck. Just because it's a big site with a big company behind it doesn't mean it therefore is a well designed site. Ever tried to use Microsoft's MSDN? It's a bloody nightmare navigating that. And they're a big corporation with lots of money. I hope you don't try to learn anything from THEIR site.
Let us consult the bible of any web designer, http://www.useit.com/alertbox
In the top 10 worst site design faults, number 2 was:
2. Use a liquid layout that lets users adjust the homepage size
Compliance rate: 28%
Guideline number in Homepage Usability book: 67
Fighting frozen layouts seems a lost battle, but it's worth repeating: different users have different monitor sizes. People with big monitors want to be able to resize their browsers to view multiple windows simultaneously. You can't assume that everyone's window width is 800 pixels: it's too much for some users and too little for others.
And from the summary on the same page:
There are ten usability mistakes that about two-thirds of corporate websites make. The prevalence of these errors alone warrants attention, especially since they appear on sites with significant investment in usable design.
That guy is a professional web designer by the way, who writes lots of books on good web design.
So just because lots of big websites do it doesn't mean you should too.
There are few excuses as to why a site shouldn't have liquid design. Steps can be taken to allow resizability - it's not so totally difficult or unimaginable for people to want to control how much space the site takes. You want people to look at the site, after all.
It has a maximum width for the search results (ads float on the right). It all works perfectly on 800x600, but what if you want more visible links per page? You can't do it, you get a void of nothingness on the right of your screen. It's not like there's anything remotely hard or wrong about getting rid of that maximum width, it's just there, and there is no real need for it other than to make sure all of the page descriptions fit on two lines, not one-and-a-half and spoils the balance. If I want to spoil the balance, let me do it. It's not like I'm doing Google a disservice by occasionally clicking the ad links that they are paid to put up there. With this big empty space in most search results, the right side of the screen is obsolete, totally useless and boring. Those little boxes aren't going to be much use when I don't bother looking out of habit.
Let's all just agree that it's down to personal preference
"Say you're hanging from a huge cliff at the top of mt. everest and a guy comes along and says he'll save you, and proceeds to throw religious pamphlets at you while simultaniously giving a sermon." - Dustin G
Stuff like the google front page doesn't NEED to be liquid, because absolutely everything is shown in that one fixed area. Your example "liquid google" page is deliberately exaggerated by resizing the google logo, the very idea of which is ridiculous. www.klikacademy.com is a good example of liquid width, and didn't you design that, Pete?
petermat.me.uk could also be made liquid. Leave the navigation constant width, and just allow the news section to fill up the rest of the space. Then I get more content on my screen, which is a good thing (providing the website has useful content).
Perhaps most people wont be that bothered, but imagine you're selling something - you don't want to lose sales just because a couple of people used 640x480, right? Or maybe some graphic designers on some huge resolution got pissed off with a narrow column down the middle in a sea of white and couldnt be arsed to put in the effort to read stuff. The same applies to normal websites really, presumably you have a site because you want people to look at it? But not many webmasters care that much, I suppose.
I guess it boils down to this: either everyone can view your site comfortably, or less people can view your site comfortably. Why would you choose "less people"? Oh yeah, you want a fancy banner or something which makes it hard to do it. Yes, I visit websites to see fancy banners and not useful content.
Anyways, I look forwards to your next book on good web design practices, Pete.
Edited by the Author.
- Tigerworks
Pete Nattress Cheesy Bits img src/uploads/sccheesegif
Registered 23/09/2002
Points 4811
5th December, 2004 at 17:02:10 -
yeah the google was a bit of a joke
i'd welcome you making my gradients on petermat liquid, tigs... and avoid the boringly long spaces you'd get in the header. and yes, i did make KA liquid. i felt it fitted the design better, i didn't feel that way about petermat. like kris says, personal preference, not steadfast rules.
also, the famous creator of www.webpagesthatsuck.com says as much in his book on professional webdesign: ftp://ftp.sybex.com/4020/4020ch04.pdf
Okay, i've fixed everything but the resizeable window thing. Now I'm not sure what I should do.
I'll try to explain it better.
I've got a simple tiled background, lets call it (bg1). On top of that, I have a rectangle table like thing with a different tiled background (bg2) in it, and thats where the actual website contents are. bg1 is basicly just a border for the website.
When the window is enlarged there is more of bg1 shown on the right, and it looks funny, So i either wanted it un resizeable and set a size so the window cuts off the repeditive background shown on the left, or I wanted the website to be centered so there is an even amount of bg1 on each side of the website.
Pete Nattress Cheesy Bits img src/uploads/sccheesegif
Registered 23/09/2002
Points 4811
6th December, 2004 at 04:29:36 -
you can do that. add the CSS style:
<body background="bg1" style="background-position: center top">
website....
</bodY>
that will position the background image (bg1) in the center of the page.
some others things i wanted to add, using fixed font size isn't good at all, why ? the real size depends of the monitor and his resolution,for a 13inch 640x480 it's very big, and for a 17 inch 1600x1200 (like me, it's very enjoyable for me) a size of 10 isn't readable at all
there is a default user font (size +0) which is configurable or not depending of the navigator, but nearly noone take care of it, to make websites readable i have to force a minimum font size of 14, and you know what a fixed width with a forced font size does...
1600x1200!
oh man, your not going to have much fun getting around a site like mine then. I'll try and fix this stuff. I'll post the site here tommorow so people can tell me how it looks on their computer.
Yeah, liquid design starts making a lot more sense after people like Batchman tell you what a nightmare your website is. Variable font size is a big plus (some CSS setups seem to make various browsers unable to vary the font size)
why 1600x1200 isn't good on a 17 inch monitor ? when i switched to it, every font on my system resized automatically... image are a little smaller, but not too small ...
Nice site but it doesn't look how you think it should in Firefox (and probably most others)
"Say you're hanging from a huge cliff at the top of mt. everest and a guy comes along and says he'll save you, and proceeds to throw religious pamphlets at you while simultaniously giving a sermon." - Dustin G
Batchman,
I have know idea what that c.gif file is, its just some stupid thing yahoo page builder thought I'd be better off having.
Kris,
I've only tested it in IE & Netscape at the moment. But I'll check into that.
Amnesiasoft, I'm not sure how to center it without the border screwing up.. but I have an idea. As for the preloading images thing I have no idea how to do that, and as for the flash thing, I really didn't want to have any flash on my page at all.
I love fixed width, but I agree, not all websites need it. With my webcomic site, for example, there's simply not enough content to merit a liquid design. It just shows a 640-wide comic page followed by any user comments underneath.
That said, when I'm making a fixed layout, I always try my hardest to make it look nice in other screens by centralising it, etc. And also making sure that when the window is resized too small for the design, nothing bunches up or crumples.
With the random avatar thing, there is a more complicated but in some ways better method than linking to a script. Some sites only allow linking to avatars that are .gif or .jpeg, so .php or .asp won't work. In these cases, you can use HTACCESS instead.
You set your avatar to 'www.mydomain.com/avatar.gif' - but that file actually doesn't exist. However, your htaccess file is looking for that request. When it receives it, it then redirects to the PHP file (which in turn redirects to the random image).
Htaccess can be a pain though. I would dearly love to use it more, but so many of my hosts are picky about the features you can or can't use.
Advertisement
Post Reply
Edited by the Author.
Apocalyptic Coders - 
