Positioning Background Image Problem CSS

Working with header and footer to fit nicely around containers bg

Page 1 of 1

4 Replies - 1467 Views - Last Post: 26 May 2008 - 02:36 PM

#1 ShinX   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 14-November 07

Positioning Background Image Problem CSS

Post icon  Posted 26 May 2008 - 09:28 AM

:confused: Well I hope its simple and I hope someone can help and before I being I would like to say thank you in advanced to all who have taken interest in this post.

We can first look at a screen shot of my page:

Posted Image

Well as you can see my page layout is appauling, I am unconcerned about, text and links as I can do this in due time. I am having problems with header and footer if you look at it my bg for my container div sticks outside my header and footer bg, any solutions for this such as repositioning header and footer?? I am totally clueless at the moment any assistance will be good.


Here is my 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 HTML code:

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

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
<meta name=”keywords” content=”World, Of, Warcraft, Guild, Outland, Alliance, Creed” />
<meta name=”description” content=”Latest Alliance Outland Server Creed Guild News, Info and Updates” />
<meta name=”author” content=”taintedstudio.com” />
<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>


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.

Is This A Good Question/Topic? 0
  • +

Replies To: Positioning Background Image Problem CSS

#2 ShinX   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 14-November 07

Re: Positioning Background Image Problem CSS

Posted 26 May 2008 - 09:47 AM

I have uploaded the page to my host you can see it at: www.taintedstudio.com/wowGuild/
Was This Post Helpful? 0
  • +
  • -

#3 girasquid   User is offline

  • Barbarbar
  • member icon

Reputation: 109
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: Positioning Background Image Problem CSS

Posted 26 May 2008 - 09:50 AM

If your container div has the id pageMain, it's not sticking out at all according to Firebug. Or do you mean linkList?
Was This Post Helpful? 0
  • +
  • -

#4 ShinX   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 14-November 07

Re: Positioning Background Image Problem CSS

Posted 26 May 2008 - 09:58 AM

pageHeader container pageFooter Thats the pattern it is, each div has its own background image.

The containers bg image sticks out behind the curves of the footer and headers background images and I want to remove that.
Was This Post Helpful? 0
  • +
  • -

#5 ShinX   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 14-November 07

Re: Positioning Background Image Problem CSS

Posted 26 May 2008 - 02:36 PM

:D Okay to help show you guys what I am currently trying to achieve I will show you, through graphics:

What I want is this:
Posted Image

What it currently is, is this:
Posted Image

hope this helps... explain what I am trying to achieve here...
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1