Basic CSS & HTML Help!

R.O.S.S.I

R.O.S.S.I

R.O.S.S.I

Soldato
Joined
16 Nov 2002
Posts
11,301
Location
The Moon
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>
Click to expand...

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}
Click to expand...

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!
 
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>
 
Last edited:
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>
Click to expand...

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 said:
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.
Click to expand...

Remove your stylesheet, it might be overriding my header styles.
 
<!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>
Click to expand...

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.
 
Hmm, I don't have your images, can you upload that page to somewhere so I can see your version live?

In mine the blue coloured box was definitely centred at the top of the page..
 
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!
 
Just use a table :p

Code: 
<style type="text/css">    

body {

background-image: url(images/background.jpg);
}
</style>
</head>
<body>
  <table width="100%" height="100%" >
    <tr>
      <td><div align="center"><img alt="splash" src="landingpage.jpg" align="middle" /></div></td>
    </tr>
  </table>
  </body>
</html>
 
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 said:
Cheers, i've fired over an email now with everything in it.
Click to expand...

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.
 
You must log in or register to reply here.
Back
Top Bottom