CSS/HTML: Header, Container & Footer Image Alignments

ShinX001 · May 26, 2008, 9:15pm

Hoping you guys can help, been trying to solve this problem which seems simple but I am unable to do it lol.

Before we begin here is my page I am working on: http://www.taintedstudio.com/wowGuild

Ok my current concern is not the text, content or the links within the page I can deal with that in due time.

My concern is with the header and footer, have the container bg stick out at the end.

Here is my current css code:

@charset "utf-8";
/* CSS Document */

/* Basic Elements */

html {
	margin: 0;
	padding: 0;
	}
	
body{
margin:0px;
padding: 0px;
background:url(resources/gigsieBackground.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
text-decoration: none;
}

a:link {
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
	}
a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
	}
a:hover, a:active {
	text-decoration: none;
	color: #7d7d7d;
	display: inline;
	margin-right: 1.3em;
	margin-left: 1.3em;
	}
acronym {
	border-bottom: none;
	}
	
/* specific divs */

#container{
width: 780px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
background: url(resources/containerBG.jpg);
background-repeat:repeat-y;
}
	
#pageHeader{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
text-decoration: none;
width: 780px;
height: 50px;
background-image: url(resources/headerBorder.gif);
background-repeat: no-repeat;
}

#pageFooter{
width: 780px;
background-image: url(resources/footerBorder.gif);
background-repeat: no-repeat;
}

#intro {
clear:both;
	margin: 20px 20px 20px 10px;
	width: 160px;
	float: left;
}

#intro p {
	font: italic 10pt/22pt georgia;
	text-align:center;
	}

#linkList {
	position: absolute;
	top: 129px;
	right: 0;
	left: 158px;
	bottom: 0px;
	width: 702px;
	font: normal 10px verdana, Geneva, Arial, Helvetica, sans-serif;
}

#linkList ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	}

#linkList li{
display: inline;
}

#linkList li a {
display: inline;
padding:5px;
margin: 1px;
border: 1px solid white;
width: 100px;
height: 20px;
background: #333333;
color: white;
text-decoration: none;
}

#linkList li a:hover {
background: #666666;
}

and here is the current HTML code:

<!DOCTYPE html PUBLIC &#147;-//W3C//DTD XHTML 1.0 Strict//EN&#148;
&#147;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&#148;>
<html xmlns=&#148;http://www.w3.org/1999/xhtml&#148; xml:lang=&#148;en&#148;>

<head>
<meta http-equiv=&#148;Content-Type&#148; content=&#148;text/html; charset=UTF-8&#148; />
<meta name=&#148;keywords&#148; content=&#148;World, Of, Warcraft, Guild, Outland, Alliance, Creed&#148; />
<meta name=&#148;description&#148; content=&#148;Latest Alliance Outland Server Creed Guild News, Info and Updates&#148; />
<meta name=&#148;author&#148; content=&#148;taintedstudio.com&#148; />
<title>Creed: The Beauty Of True Gamers</title>
<style type="text/css">
<!--
@import url("body.css");
-->
</style>
<link href="body.css" rel="stylesheet" type="text/css">
</head>

<body onload="window.defaultStatus='Outland Guild: The Beauty Of True Gamers';" id="css-zen-garden">
<div id="container">
  <div id="pageHeader">
	<div id="intro">
	  <h1><span>Outland Guild</span></h1>
	  <h2><span>The Beauty of <acronym title="WoW Guilds Beauty">True Gamers</acronym></span></h2>
	</div>
	<div id="Guild Basics">
	  <h3><span>Introduction</span></h3>
	  <p class="p1"><span><acronym title="Guild Info">Alliance based guild on Outland Server</acronym></span></p>
	</div>
  </div>
  <div id="pageMain">
	<h3> Body </h3>
  </div>
  <div id="pageFooter">
	<h3> Footer </h3>
  </div>
  <div id="linkList">
	<div id"=ll1">
	  <ul>
		<li><a href="/" >News </a></li>
		<li><a href="/"> Calendar </a></li>
		<li><a href="/" >Progress </a></li>
		<li><a href="/" >Media </a></li>
		<li><a href="/" >Forums </a></li>
		<li><a href="/" >Member List </a></li>
		<li><a href="/" >Join Us </a></li>
		<li><a href="/" >Contact </a></li>
	  </ul>
	</div>
  </div>
</div>
</body>

</html>

Now trying to visually explain what I am trying to achieve is shown in these image below:

This is what I want it to be like:

This is my current situation:

If there is anything else you may require to help me please let me know, I will post it here. Thank You Again in advanced… rather new to css thats all trying to gets to grips with it.

John_Betong · May 27, 2008, 2:18am

Hi,

Try this in your CSS file:

#pageFooter{
width: 780px;
margin:0 auto; /* EXTRA ALIGNMENT CODE */
background-image: url(resources/footerBorder.gif);
background-repeat: no-repeat;
}

ShinX001 · May 27, 2008, 4:21pm

Thanks dude that was ineffective: I have managed to do this for the header since the headers position from the top remains fixed:

I added an img normally: <img src=“resources/headerBorder.gif” id=“headerImage” />

Then I did this cs code and it positioned it correctly:


#headerImage {
	position:absolute;
	top: 10px;
}

Now my problem is the footer just need to insert it some how so it stretches along with the rest of the page…

John_Betong · May 28, 2008, 5:31am

Hi ShinX001,

I just glanced at your code and did not think that you would have used absolute positioning.

Any I would have done it differently as you can see [B]here.[/B]

Cheers,

John_Betong

ShinX001 · May 28, 2008, 3:53pm

John thank you for your help, I dont know how to thank you very clean and neat code, I will adapt your code to mine ^^ this is great the way you have coded it seems to make the page load that little bit faster I feel my code was a bit scrambled.

I think your style of coding has rubbed onto me… thank you for improving my CSS/html skills much aprpeciated.

John_Betong · May 31, 2008, 4:13am

Hi ShinX001,

Many thanks I appreciate your comments and very pleased to help.

Here are a few pointers that I have learned along the way.

Use “Doctype STRICT” to make different browsers rigidly follow instructions.
Use FireFox and http://users.skynet.be/mgueury/mozilla/ a great
unobtrusive addon that not only shows errors and warning but also gives help to
eliminate the problems.
Make a point of getting rid of all errors and warnings so that the browser
does not have to think of the possible work arounds. This must take time before
it selects an option.
Never ever use padding on a block element such as DIV because browser
interpretations are different. Instead nest another div and position it with
“width:XXX%; margin:auto”. Both statements seem to work with all browsers.
Padding on an inline element seems to work with all browsers.
When developing temporarily forget the external stylesheet.css. Use embedded
styles as and where required. When developing is finished (is it ever) transfer
the embedded styles to the faster predefined external stylesheet.
When developing use “border:dotted” to highlight boundaries. It is quite easy
once positioned to search and delete the “border:dotted” statement.
Use “display:none” to temporarily hide complete blocks.
Endeavour to use plain CSS statements instead of a specific browser KLUDGE
Try to eliminate ‘divitis’ by transferring CSS inline elements to blocks.
Convert native “inline” elements to “display:block” as and where required
such as IMG.
Always specify IMG width and height to prevent the browser screen ‘jumping’
and re-displaying the screen.
Test your pages in different browsers and refine where necessary.

.