• Locked
2 replies [Last post]
Fri, 2010-09-10 16:05
pookage
pookage's picture
User offline. Last seen 1 year 21 weeks ago. Offline
newbie
Timezone: GMT+1
Joined: 2010-09-10
Posts: 2
Points: 3

alrighty? well, i've basically got a border either side of my content which i want to repeat all the way to the bottom of the page on all resolutions. alas- it won't do it! any suggestions? am i missing something?

<!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"> 
*{margin:0;padding:0}
 
@font-face {
    font-family: "Bebas";
    src: url("http://www.pookage.co.uk/Bebas.ttf")
}
 
body {background-color:#600000;}
ul {margin:0em;
	padding:7px 0 0 20px;}
li {margin:0;
	padding:5px 10px;
	display: inline;
	list-style-type: none;}
 
 
.container > div {height:100%;}
.style1 {font-family: Bebas;
		 font-size:4.9em;
		 text-align:center;
		 letter-spacing:0.46em}
.overText {color:#a40000;}
 
#column1 {
	width:50%;
	height:100%;
	float:left;
	margin-right:-405px;}
 
#col1inner{
	margin-right:405px; 
	background: url(images/bg_left_col.gif) repeat-y right; 
	height:100%;}
 
#column2 {
	width:810px;
	float:left;
	position:relative;
	z-index:10;
	background-color:#fff;}
 
#column3outer {
	width:50%;
	height:100%;
	float:right;
	margin-left:-405px;}
 
#column3 {
	margin-left:405px;
	background: url(images/bg_right_col.gif) repeat-y left; 
	height:100%;}
 
#logo {
	margin-left:0.62em;
	margin-top: -0.7em;}
 
#nav {
	background-image:url("images/nav_bg.gif");
	background-repeat:no-repeat;
	width:842px;
	height:48px;
	font-family:Bebas;
	font-size: 1.2em;
	letter-spacing:0.15em}
 
 
</style>
 
</head> 
<body> 
<div class="container">
<div id="column1"> 
<div id="col1inner"> 
<p>.</p>
</div> 
</div> 
<div id="column2">
<div id="logo">
<h1 class="style1"> HEY ALBERT!</h1>
</div>
<div id="nav">
<ul>
	<li class="link" id="index">HOME</li>
		<li>-</li>
		<li class="link" id="browse">BROWSE</li>
			<li>-</li>
		<li class="link" id="search">SEARCH</li>
			<li>-</li>
		<li class="link" id="members">MEMBERS</li>
			<li>-</li>
		<li class="link" id="about">ABOUT</li>
			<li>-</li>
		<li class="link" id="contact">CONTACT</li>
	</UL>   
</div>
<p>.</p> 
</div> 
<div id="column3outer"> 
<div id="column3"> 
<p>.</p>
</div> 
</div>
</div>  
</body> 
</html>

Top
Tags:
Fri, 2010-09-10 16:12
#1
pookage
pookage's picture
User offline. Last seen 1 year 21 weeks ago. Offline
newbie
Timezone: GMT+1
Joined: 2010-09-10
Posts: 2
Points: 3

screengrab of the designed page

http://www.theheyalbertproject.co.uk/hap
this is what it SHOULD look like...
(and here's the site all zipped up if you want to acess the files http://www.pookage.co.uk/hapmk3.zip)

Top
Fri, 2010-09-10 17:43
#2
Hugo
Hugo's picture
User offline. Last seen 7 hours 15 min ago. Offline
rank Moderator
Moderator
Joined: 2004-06-06
Posts: 15096
Points: 2191

They can only extend the

They can only extend the height that the columns are which is dictated by content. Your height 100% is meaningless as it is not predicated on anything, 100% of what?

Even if you were to get the content to 100% of the browser that still leaves the child elements short.

You're better of trying to run borders on the elements and overlapping them so that whatever column is actually longest and dictating the overall height will show and carry on down, but that might be tricky with three columns.

You may need to do something like graphic on the parent element of the columns placed at the % point required and the second one run down two of the column edges and overlapping.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Top
  • Locked