Basic CSS & HTML Help!

R.O.S.S.I · 5 Oct 2010 at 10:13

Hey all, i'm an absolute novice when it comes to CSS and HTML, just tried having a stab at a landing page for my website whilst I get it all built up again.

Its basically a background image, then on top of it another 'splash' image, which is basically my logo.

So far i've got the CSS and HTML for the index working as far as when you display the page it shows the background, but then the 'splash' image is underneath the background image at the bottom of the page, rather than kind of floating above the background......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="Site/Stylesheet.css" media="screen">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Daniel Rostron - Coming Soon.......</title>
</head>
<body>
<div id="container">
<img src="Images/Background.jpg" />
<div id="landing page">
<img src="Images/LandingPage.jpg" />
</div>
</div>
</body>
</html>

and the CSS .....

@charset "utf-8";
/* CSS Document */
div#container
{position:fixed;
width:100%;height:100%;
margin:0px;
padding:0px;
border:none;
position:inherit;
overflow:hidden;
float:left;
z-index:1;}
div#landingpage
{float:none;
margin:auto;
position:absolute;
overflow:hidden;
z-index:2}

I was trying to get the background image as a permanent fixed object, and then the splash image to be something that stays central to the window.

I know there are probably a million and one errors in that but would appreciate any kind of help with this!

R.O.S.S.I · 5 Oct 2010 at 11:15

gord said:
I've built something along the lines that you want, with basic colours. Hopefully you will be able to work out what I have done.

But, one of the main issues with your code is you have used the id "landing page", where the space breaks the id. You need to use hiphens or similar.

If you want the background fixed, you can use what Jestar describes and apply that to the container. Or even to the body tag if it's site wide.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <link rel="stylesheet" href="Site/Stylesheet.css" media="screen"> <style type="text/css"> /* CSS Document */ div#container{ background-color: red; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } div#landingpage { margin: 50px auto; z-index:2; background-color: blue; width: 100px; height: 100px; } </style> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Daniel Rostron - Coming Soon.......</title> </head> <body> <div id="container"> <img src="Images/Background.jpg" /> <div id="landingpage"> <img src="Images/LandingPage.jpg" /> </div> </div> </body> </html>

Tried using that, but alls it has done is moved the image of splash to the middle at the bottom of the page beneath the background image, whereas it was left aligned before.

R.O.S.S.I · 5 Oct 2010 at 11:32

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
/* CSS Document */
div#container{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
div#landingpage
{
margin: 50px auto;
z-index: 2;
width: 100px;
height: 100px;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Daniel Rostron - Coming Soon.......</title>
</head>
<body>
<div id="container">
<img src="Images/Background.jpg" />
<div id="landingpage">
<img src="Images/LandingPage.jpg" />
</div>
</div>
</body>
</html>

Don't know if i've understood you rightly?!
Thats how the code looks now and is still the same. Background image, then the splash image at the bottom of the page centred underneath.

R.O.S.S.I · 5 Oct 2010 at 11:59

I could email you the images if you want (if you don't mind!)? My hosting isn't setup properly yet

Just want it so the splash image is centred horizontally and vertically according to whatever window is viewing it!

R.O.S.S.I · 5 Oct 2010 at 12:16

gord said:
Ok, fire an email over of what you have (zip up the whole folder structure please) to [email protected] and I'll take a look in my lunch break.

Cheers, i've fired over an email now with everything in it.

R.O.S.S.I · 5 Oct 2010 at 12:25

I didn't really think it was that difficult to understand!

I just want a background image obviously set as the permanent fixed background. Then another image to be laid over the job that is dead centre no matter what resolution screen you use.

R.O.S.S.I · 5 Oct 2010 at 13:40

gord said:
You should have something back. What I found:

Landing Page ID had a space in it.
Your external stylesheet link was "site/stylesheet.css", when the sheet was local to the html file.
The background image file was inside the html, when it really wants to be the background of the container in the CSS. I should have spotted that ages ago.

Remaining issues.
Massive images! Especially for the repeating background pattern. Google for "repeating background CSS". Very important for site load time. Also the edges of the repeating pattern don't seem to line up.
Vertical alignment of the central image.

Hope that helps you on your way.

Yeh I figured it the large images may cause some problems. I was looking into repeating backgrounds, only problem is how would I achieve the colour gradient of the background if its just repeating like a small pattern over and over? If that makes sense?

R.O.S.S.I · 5 Oct 2010 at 14:03

gord said:
1 or 2 pixels isn't wide enough for the pattern, but essentially still the best way of doing it, and then right at the bottom of the image fade to just the colour, or stop the pattern, and have that colour behind so that it blends out.

Looks like i've got a lot of reading to do then doesn't it!