No replies
Elementor
Offline
newbie
Last seen: 10 years 36 weeks ago
Timezone: GMT+1
Joined: 2005-02-17
Posts: 1
Points: 0

It took me a bit to get my head around my own post so read slowly Tongue

I pretty much 'learnt' CSS today, and I'm liking the ideas behind it, reminds me a lot of java. That's why I wanna use it to do what I'm trying to do here.

Anyway, I have a lil page I'm making for myself right now, never made one before in any language. So far I have the main page sorted, there's a nice theme going on there, it's basically one big photoshop image with some chunky font title and links cut into slices, so that when you rollover the links they change to another colour from the page. It looks good so I'm pretty impressed for a first go Tongue ImageReady created some xhtml + javascript code for me when I used it to create the page.

Here's the image I used to create the main page:

http://img115.exs.cx/img115/3291/oogabooga7os.jpg

Now it lines up exactly with the top left of the window, as you can see here (the background is usually the dark chocolate colour, I made it white so you can see what I mean):

http://img58.exs.cx/img58/276/oogaboogasite1ef.jpg

I want it to line with the centre both horizontally and vertically. If it was a solid image I could do it, but because it's a collection of things I have no idea how to do that.

<html>
<head>
<title>oogabooga, the world of Lewis Howles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (oogabooga.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = 

changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		oogabooga_04_over = newImage("images/oogabooga_04-over.jpg");
		oogabooga_06_over = newImage("images/oogabooga_06-over.jpg");
		oogabooga_08_over = newImage("images/oogabooga_08-over.jpg");
		oogabooga_10_over = newImage("images/oogabooga_10-over.jpg");
		oogabooga_12_over = newImage("images/oogabooga_12-over.jpg");
		oogabooga_14_over = newImage("images/oogabooga_14-over.jpg");
		oogabooga_16_over = newImage("images/oogabooga_16-over.jpg");
		preloadFlag = true;
	}
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#49232A"; topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0" onload="preloadImages();">

etc etc etc. What do I dooooooo? >.<

Better still, is there a way I can make the site stretch to fit the browser window's width (leaving no border top, right or left, while keeping the height in proportion? (that also applies to the whole document)

PS:

If I had the following xhtml for example,

<body bgcolor="#49232A"; topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0" onload="preloadImages();">

and I wanted to add for example a body command from CSS which said,

body { background-position: centre centre }

could I just tap it on the end? like <body bgcolor= etc etc etc Images();" background-position: centre centre> ?

PPS:

For the other pages on the site, I want whatever images down the left hand side (including a title and the big septagon shape - but not the character or the links), and text down the right hand side. In which case, I'd have a long image down the left, and the right would be the background colour, which I could write over using the <p> etc tags.

I want this text to be at least a certain distance away from the image on the right, but I also want it to snap to the right side of the browser window and spread further from the left if it was possible.

Like this:

The white line shows where the image to the left would end, everything to the right would be page background. I want the text to be at least this far from the left, and with the same sized margin to the right and top.

http://img203.exs.cx/img203/2500/rebeccaleft7kf.jpg

However, if the browser were to widen on a screen with higher resolution, I want the text (while keeping the same margin from the right and top) to expand with the browser window, so it gets further from the left, leaving more background in between. If you understand me.

How on earth would I get the text into a box like that in the first place, and how would I get it to resize with the browser?

Told you it was a big question >.<