...

View Full Version : CSS Verticality Issues.



moptop
10-26-2007, 07:24 PM
Hi there!

I have been a graphic design/artist for a while now and always had the luxury of others doing the coding for me until recently. Anyhow, I'm working on a website for myself and getting deeper into CSS than I have ever been, and I'm encountering some issues.

Here's a link to the page in question: http://www.inanition.ca/test.html
(I read the rules and guidelines and do not see anything against posting links, unless this is considered self-promotion, which is not my intention..)

What I'm trying to do:

1. I'm trying to make those hazard stripe bars on either side of the page span the height of the browser area and remain in a fixed position without scrolling. Whenever I attempt to use position: fixed, however, it screws with the alignment of the entire page. Currently, they are floating to their respective sides and are set to a pixel-based height as placeholders. Any help would be appreciated!!

2. Secondly, I'm trying to make those plain metal plates at the bottom, beneath the content windows, stretch the remainder of the way to the bottom of the browser window/site. They currently exist in three separate columns and will only be seen if the content in column is longer than the others. I have fooled around with all kinds of values and I just can't seem to get it to work at all. They are currently set with a arbitrary pixel-based height to act as placeholders. Again, any help would be appreciated!!

Here's the code I'm using so far:

CSS


/* CSS Document */

body {

background-image: url(http://www.inanition.ca/images/stonebackgroundrepeating.gif);
background-repeat: repeat;
background-attachment: fixed;
background-color: #663300;
font-family: Tahoma, Geneva, Verdana, Arial;
font-size: 10px;
color: #FFFFFF;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;

}

a {

border: 0px;
text-decoration: none;
outline: none;

}

a:link {

color: #999999;

}

a:visited {

color: #999999;

}

a:hover {

color: #999999;

}

img {

border: 0px;

}

#outercontainer {

width: 904px;
margin: 0 auto;

}

#hazardleft {

width: 52px;
height: 1000px;
background-image: url("http://www.inanition.ca/images/hazardleft.gif");
float: left;

}

#hazardright {

width: 52px;
height: 1000px;
background-image: url("http://www.inanition.ca/images/hazardright.gif");
float: right;

}

#pagecontainer {

width: 800px;
float: left;

}

#header {

width: 800px;
height: 170px;

}

#navbar {

width: 800px;
height: 50px;
clear: bottom;

}

#leftcontainer {

float: left;

}

#leftheader {

width: 150px;
height: 42px;

}

#leftbody {

width: 150px;
text-align: center;
background-image: url("http://www.inanition.ca/images/insetleft.gif");
background-repeat: repeat;
padding-top: 20px;
padding-bottom: 20px;

}

#leftfooter {

width: 150px;
height: 41px;
background-image: url("http://www.inanition.ca/images/bottomleft.gif");

}

#leftfiller {

width: 150px;
height: 500px;
background-image: url("http://www.inanition.ca/images/fillerleft.gif");

}


#middlecontainer {

float: left;

}

#middleheader {

width: 500px;
height: 42px;

}

#middlebody {

width: 500px;
background-image: url("http://www.inanition.ca/images/insetmiddle.gif");
background-repeat: repeat;
padding-top: 20px;
padding-bottom: 20px;

}

#middlecontent {

width: 460px;
margin: 0 auto;

}

#middlefooter {

width: 500px;
height: 41px;
background-image: url("http://www.inanition.ca/images/bottommiddle.gif");

}

#middlefiller {

width: 500px;
height: 500px;
background-image: url("http://www.inanition.ca/images/fillermiddle.gif");

}

#rightcontainer {

float: right;

}

#rightheader {

width: 150px;
height: 42px;

}

#rightbody {

width: 150px;
text-align: center;
background-image: url("http://www.inanition.ca/images/insetright.gif");
background-repeat: repeat;
padding-top: 20px;
padding-bottom: 20px;

}

#rightfooter {

width: 150px;
height: 41px;
background-image: url("http://www.inanition.ca/images/bottomright.gif");

}

#rightfiller {

width: 150px;
height: 500px;
background-image: url("http://www.inanition.ca/images/fillerright.gif");

}


The HTML:


<!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" xml:lang="cs" lang="cs">

<head>

<meta name="generator" content="PSPad editor, www.pspad.com" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Inanition.</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />

</head>

<body>


<div id="outercontainer">

<div id="hazardleft"></div>
<div id="hazardright"></div>
<div id="pagecontainer">

<div id="header"><img src="images/header.gif" width="800" height="170"></div>
<div id="navbar"><img src="images/navnews.gif" width="127" height="50"><img src="images/navportfolio.gif" width="164" height="50"><img src="images/navtutorials.gif" width="170" height="50"><img src="images/navresources.gif" width="175" height="50"><img src="images/navcontact.gif" width="164" height="50"></div>

<div id="leftcontainer">

<div id="leftheader"><img src="images/topleft.gif" width="150" height="42"></div>
<div id="leftbody">
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
</div>
<div id="leftfooter"><img src="images/bottomleft.gif" width="150" height="41"></div>
<div id="leftbody">
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
</div>
<div id="leftfooter"></div>
<div id="leftfiller"></div>

</div>
<div id="rightcontainer">

<div id="rightheader"><img src="images/topright.gif" width="150" height="42"></div>
<div id="rightbody">
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
</div>
<div id="rightfooter"></div>
<div id="rightfiller"></div>

</div>
<div id="middlecontainer">

<div id="middleheader"><img src="images/topmiddle.gif" width="500" height="42"></div>
<div id="middlebody">

<div id="middlecontent">
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
Test.<br />
</div>

</div>
<div id="middlefooter"></div>
<div id="middlefiller"></div>

</div>

</div>

</div>

</body>

</html>


Thanks in advance!!

brampmap
10-26-2007, 08:20 PM
Nothing like starting in the deep end!

1) Couple of ways spring to mind for the hazard bars, using absolute positions or (and probably the easiest) as you're using a fixed width content is to create an image the width you need them to be apart (so you would have one image that held both the left and right hazards) and set that the background image of the first div then just align all your content in the middle.


2) bit more difficult to explain but if you search for faux columns in google (or the forum) you should find something

moptop
10-26-2007, 09:26 PM
Wow, okay. So, I think the solution to both problems is 'faux columns'. If I were to make a background image that included the rock, the hazard bars and the metal plates that I wish to use as filler, it'll kill two birds with one stone.

I hope! (it sounds like aligning the background may be a bit of a nightmare)

Thanks for the suggestions! Especially the second one, which opened my eyes to a whole new world of possibilities!

I'll give it a shot and let you know how I'm doing.

moptop
10-27-2007, 01:34 AM
It worked perfectly, man. Thanks again! You're a real life-saver. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum