Help - Search - Members - Calendar
Full Version: Header Expansion
Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion
THJT-9
Jun 12 2009, 09:16 PM
Try as I might I cannot get my Header image to stretch so that it fills the whole of the website to (or get it to just move into the middle of the page) does anyone know either of the codes I need for there 2 things-thanks smile.gif
Braunson
Jun 13 2009, 04:50 AM
Hello, I'm Braunson.

What might your code be right now? Also how big is your image. Some more info please!
THJT-9
Jun 13 2009, 07:53 AM
Here is the code I have at the moment (I know there's probably alot of mistakes, but it's my first website) you should find all the sizes etc in there.
NOTE: I tried to put it as an attachment but it kept saying upload failed...

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Rise Of Empires CCG</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
input {
font-family: Shruti, "Segoe Print";
font-size: x-small;
color: #df0000;
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #df0000;
width: 100%;
}
#leftcol {
background: #df0000;
float: left;
width: 20%;
height: 500px;
}
#rightcol {
background: #df0000;
float: right;
width: 20%;
height: 500px;
}
#content {
background: #df0000;
float: left;
width: 59%;
height: 500px;
}
#footer {
background: #df0000;
clear: both;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="header">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
input {
font-family: Shruti, "Segoe Print";
font-size: x-small;
color: #FFFFFF;
<html>
<title>ROE CCG Website Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (ROE CCG Website Layout.psd) -->
<img src="images/ROE-CCG-Website-Header.gif" width="800" height="100" alt="">
<!-- End ImageReady Slices -->
</body>
</html>background-color: df0000;
border: 1px solid #48546F;
}
-->
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bgcolor="df0000">
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- MAIN HEADER --> <tr>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (ROE CCG Website Layout slice.psd) -->
<table id="Table_01" width="801" height="111" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="images/Header_01.gif" width="429" height="17" alt=""></td>
<td colspan="4" rowspan="2">
<img src="images/Header_02.gif" width="371" height="45" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="2">
<img src="images/Header_03.gif" width="429" height="65" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/Header_04.gif" width="371" height="37" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="37" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Header_05.gif" width="44" height="18" alt=""></td>
<td rowspan="2">
<img src="images/Header_06.gif" width="99" height="26" alt=""></td>
<td rowspan="2">
<img src="images/Header_07.gif" width="97" height="26" alt=""></td>
<td rowspan="2">
<img src="images/Header_08.gif" width="94" height="26" alt=""></td>
<td rowspan="2">
<img src="images/Header_09.gif" width="92" height="26" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/Header_10.gif" width="101" height="26" alt=""></td>
<td rowspan="2">
<img src="images/Header_11.gif" width="98" height="26" alt=""></td>
<td rowspan="2">
<img src="images/Header_12.gif" width="102" height="26" alt=""></td>
<td rowspan="2">
<img src="images/Header_13.gif" width="73" height="26" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Header_14.gif" width="44" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="images/Header_15.gif" width="756" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="44" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="99" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="97" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="94" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="98" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="98" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="73" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</div>
<div id="leftcol">
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1) -->
<table id="Table_01" width="220" height="430" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/Column-boxes_01.gif" width="220" height="26" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/Column-boxes_02.gif" width="29" height="404" alt=""></td>
<td>
<img src="images/Column-boxes_03.gif" width="163" height="109" alt=""></td>
<td rowspan="6">
<img src="images/Column-boxes_04.gif" width="28" height="404" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Column-boxes_05.gif" width="163" height="11" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Column-boxes_06.gif" width="163" height="117" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Column-boxes_07.gif" width="163" height="15" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Column-boxes_08.gif" width="163" height="126" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Column-boxes_09.gif" width="163" height="26" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</div>
<div id="rightcol">
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1) -->
<table id="Table_01" width="220" height="430" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/Column-boxes_01.gif" width="220" height="26" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/Column-boxes_02.gif" width="29" height="404" alt=""></td>
<td>
<img src="images/Column-boxes_03.gif" width="163" height="109" alt=""></td>
<td rowspan="6">
<img src="images/Column-boxes_04.gif" width="28" height="404" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Column-boxes_05.gif" width="163" height="11" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Column-boxes_06.gif" width="163" height="117" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Column-boxes_07.gif" width="163" height="15" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Column-boxes_08.gif" width="163" height="126" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Column-boxes_09.gif" width="163" height="26" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</div>
<div id="content"><b><big>COMING SOON: ROE CCG!</big></b></div>
<div id="footer">Created by THJT-9</div>
</body>
</html>


EDIT: I have made a change to the code since this code was posted, I have now converted the code above to my new code.
Andrew
Jun 13 2009, 03:06 PM
It actually would help to have a live view, that way we can see how the images interact with the code.
lawny
Jun 13 2009, 03:27 PM
if that code is one page it is certainly invalid i can see more than four closing </head> tags for starters
THJT-9
Jun 13 2009, 09:26 PM
QUOTE(Andrew @ Jun 13 2009, 03:06 PM) *
It actually would help to have a live view, that way we can see how the images interact with the code.

How do I add a live view? Also on dreamweaver, not all of it shows up, I have to activate it on a html to see it (opening in IE)

QUOTE(lawny @ Jun 13 2009, 03:27 PM) *
if that code is one page it is certainly invalid i can see more than four closing </head> tags for starters


I know there are a fair few mistakes, and I will be trying to correct them, when I know what and where they are, but this is my first try and at the moment im more concerned about getting all my information I need (coding pieces). Also as for closing tags, I have several different coded pieces in there on the page, so they're probably for each of the diffent things-the html overall, the header image and the left and right column images.
bambosi
Jun 13 2009, 10:48 PM
I prefer to use Text on my header than images
THJT-9
Jun 14 2009, 08:07 AM
QUOTE(bambosi @ Jun 13 2009, 10:48 PM) *
I prefer to use Text on my header than images

Text...?
Anyway this is what I get when I open it up in the latest Internet Explorer (see attachment):
NOTE: There is also a small foooter that can't be seen in the image.
EDIT:the image doesn't seem to have attached well but it should be good enough for a general idea.
zpcs
Jun 14 2009, 05:37 PM
QUOTE(THJT-9 @ Jun 13 2009, 04:26 PM) *
How do I add a live view? . . .


Hi THJT-9, just thought I'd interject - I believe Andrew was asking for a current-in-use code view (web page address).
Is that right Andrew?
I'm curious too!
zpcs
THJT-9
Jun 21 2009, 06:23 PM
Thanks to everyone who has replyed.
I have managed to fix it by increasing my header size by adding blocks the colour of the site background to the original image.

QUOTE(lawny @ Jun 13 2009, 03:27 PM) *
if that code is one page it is certainly invalid i can see more than four closing </head> tags for starters


Secondly, how does it being invalid affect it as the site looks fine when loaded up?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.