Snarkpit Forum Index » General Banter » Web Authoring Question
Web Authoring Question
1
Post Reply
Quote
 Re: Web Authoring Question
Posted by Nickelplate on Tue Sep 6th at 5:56am 2005

I would like to make a more professional-looking website. I want to have an 800x600 background picture that does not scroll down (only the text scrolls down) and will stretch to fit the browser window. Is this possible?

Or if not Could I make the window always be one size like Forceflow's website?




I tried sniffing coke, but the ice cubes kept getting stuck in my nose.
http://www.dimebowl.com



Quote
 Re: Web Authoring Question
Posted by Captain P on Tue Sep 6th at 6:25am 2005

Personally, I find background images that are static to look awfull. I think it makes text harder to read due to a changing background color per line, and it makes a text block feel so unsolid.
It's possible though. As far as I know at the moment, you can do it with css and the fixed option. Haven't toyed with this yet, though.

Resizing the window is possible or opening a pop-up when your page is visited to display your site in there can be done too. I'd choose the second option (I hate window-resizing pages).



Create-ivity - a game development blog



Quote
 Re: Web Authoring Question
Posted by Nickelplate on Tue Sep 6th at 7:01am 2005

oh.. this image only has a bottom corner and bottom to it. the rest is more or less a solid color.


I tried sniffing coke, but the ice cubes kept getting stuck in my nose.
http://www.dimebowl.com



Quote
 Re: Web Authoring Question
Posted by Forceflow on Tue Sep 6th at 7:21am 2005

Well, on my site (http://forceflow.undreamedstudios.be - for example purposes, not pimpage ) I work with an image as a background.

I found out launching it in a pop-up window was the best way to make it look the same on all systems/browsers. The image did not allow stretching, it looked silly when the site was auto-stretched to 800*600. Make sure your image uses the same color overall, makes it easier for the eyes.

So, what you have to do is:

1. Slice up your background pictures into the pieces you want it to have. (On my site, there are three. The left big part with me an the menu, the part where the text shows up, and the tiny one with the quotations in the downright corner. Save these pieces seperately, and write down their dimensions somewhere.

2. Make different pages (in my case: three) that use each of the pictures as background. The background image will be tiled (repeated) and look ugly, but don't worry about it at this point.

3. Compose a frameset, consisting of three frames that match the dimensions of your image pieces, and load the seperate pages in them. You might need to edit some page margins to have it look right. Of course, these frames should have the NOREZISE en SCROLLBAR=NO tags when you define them.

Like this:
? quote:
<frame src="frameright.htm" name="rechts" scrolling="NO" noresize>

4. Now we have to make the background of your site's pages fixed. Otherwise, when the text exceeds your frame space, the background image will be repeated every time you scroll, which looks bad.

Define this in a CSS file:
? quote:
BODY
{
background-attachment:fixed;
}

Then implement this CSS file into each of your pages by using this:
? quote:
<link rel="stylesheet" href="scroll.css" type="text/css">

This should go in the HEAD part of your HMTL. (between <head> en </head>)

It's also very useful to define other things in your CSS file when you start with the site. Text sizes, scrollbar colors (only works in IE, though), link behaviour, ... All easy to edit later on, since you only have to change one line in the CSS file to use a different font, instead of editing dozens of seperal webpages.

Edit: To get best results, it's best to use multiple framesets. On my site, I use three different framesets embedded in eachother:

http://www.snarkpit.net/pits/forceflow/website.JPG

As you can see, the red frameset is resizable and will dissapear when defining a pop-up window with the right dimensions. The Blue frameset contains the site, splitted in left part (menu) and right part (text + quotations). The green frameset defines with part of the right part of the site is for text and which part is for quotations.



:: Forceflow.be :: Nuclear Dawn developer



Quote
 Re: Web Authoring Question
Posted by Nickelplate on Tue Sep 6th at 11:18pm 2005

thanks!

you know, evil really never looked so damn good!

{edit} i dunno how to do CSS....




I tried sniffing coke, but the ice cubes kept getting stuck in my nose.
http://www.dimebowl.com



Quote
 Re: Web Authoring Question
Posted by Crono on Tue Sep 6th at 11:47pm 2005

You have google.

http://www.w3schools.com/css/default.asp
http://www.w3schools.com/html/
http://www.w3schools.com/js/default.asp

That's really all you'll need to know unless you get into other languages.


Blame it on Microsoft, God does.



Quote
 Re: Web Authoring Question
Posted by Forceflow on Wed Sep 7th at 10:02am 2005

My CSS is located here, you can have a look at it: http://users.pandora.be/history/forceflow/scroll.css

The same goes for all code on my page, feel free to copy any part you'd like.



:: Forceflow.be :: Nuclear Dawn developer




1
Post Reply