PDA

Click to See Complete Forum and Search --> : Some coding help . . .

el doro
01-11-2006, 03:56 PM
OK, im not the best at coding or graphics, but i'm building a website for my band, i've taken the easy approach, designed it in photoshop, sliced in image ready, and put altogether in Dreamweaver.

I'm having a few problems though . .

The page im working on is here . . . fourstarrock.bizhat.com

Basically i want the two darker boxes to hold the actual content of the page, at first i thought i could set the images as table backgrounds, put in my content, and use CSS to fix the background so it doesn't repeat, then add a scroll bar and i'm away. But i can't manage to do it, maybe someone could shed some light on the coding? I'm still getting used to html, and CSS is new stuff altogether for me when i started this site!

Anyway my next though was to use iframes, but this wouldnt do what i want would it, i mean i couldnt have a fixed background without it repeating in the frame when i scrolled? - sorry i've dived back to html here!

Does anyone have any other ideas about how i could achieve what i want?

Any help would be much great!

Cheers
requiembmx
01-11-2006, 05:51 PM
i like the layout.
i didnt bother changing all the code to make it easier to read just did minimal work to it. also IS this what you want? im on os x so this was checked in safari and ff, check it on windows.

<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Template.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
index_05_over = newImage("images/index_05-over.gif");
index_06_over = newImage("images/index_06-over.gif");
index_07_over = newImage("images/index_07-over.gif");
index_08_over = newImage("images/index_08-over.gif");
index_09_over = newImage("images/index_09-over.gif");
index_10_over = newImage("images/index_10-over.gif");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
body {
background-color: #fffbde;
}
-->
</style></head>
<body align="center" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">
<div align="center">
<!-- ImageReady Slices (Template.psd) -->
</div>
<table align="center" id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">

<tr>
<td colspan="6" rowspan="2">
<img src="images/index_01.gif" width="396" height="99" alt=""></td>
<td colspan="7">
<img src="images/index_02.jpg" width="404" height="3" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>

<td colspan="6">
<img src="images/index_03.jpg" width="399" height="96" alt=""></td>
<td rowspan="8">
<img src="images/index_04.jpg" width="5" height="597" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="96" alt=""></td>
</tr>
<tr>
<td colspan="3">

<a href="index.html"
onmouseover="changeImages('index_05', 'images/index_05-over.gif'); return true;"
onmouseout="changeImages('index_05', 'images/index_05.gif'); return true;"
onmousedown="changeImages('index_05', 'images/index_05-over.gif'); return true;"
onmouseup="changeImages('index_05', 'images/index_05-over.gif'); return true;">
<img name="index_05" src="images/index_05.gif" width="134" height="44" border="0" alt=""></a></td>
<td>
<a href="about.html"
onmouseover="changeImages('index_06', 'images/index_06-over.gif'); return true;"
onmouseout="changeImages('index_06', 'images/index_06.gif'); return true;"
onmousedown="changeImages('index_06', 'images/index_06-over.gif'); return true;"
onmouseup="changeImages('index_06', 'images/index_06-over.gif'); return true;">
<img name="index_06" src="images/index_06.gif" width="126" height="44" border="0" alt=""></a></td>
<td colspan="3">
<a href="gallery.html"
onmouseover="changeImages('index_07', 'images/index_07-over.gif'); return true;"
onmouseout="changeImages('index_07', 'images/index_07.gif'); return true;"
onmousedown="changeImages('index_07', 'images/index_07-over.gif'); return true;"
onmouseup="changeImages('index_07', 'images/index_07-over.gif'); return true;">
<img name="index_07" src="images/index_07.gif" width="152" height="44" border="0" alt=""></a></td>
<td colspan="2">

<a href="media.html"
onmouseover="changeImages('index_08', 'images/index_08-over.gif'); return true;"
onmouseout="changeImages('index_08', 'images/index_08.gif'); return true;"
onmousedown="changeImages('index_08', 'images/index_08-over.gif'); return true;"
onmouseup="changeImages('index_08', 'images/index_08-over.gif'); return true;">
<img name="index_08" src="images/index_08.gif" width="119" height="44" border="0" alt=""></a></td>
<td>
<a href="http://www.fourstar.phpbbweb.com" target="_blank"
onmouseover="changeImages('index_09', 'images/index_09-over.gif'); return true;"
onmouseout="changeImages('index_09', 'images/index_09.gif'); return true;"
onmousedown="changeImages('index_09', 'images/index_09-over.gif'); return true;"
onmouseup="changeImages('index_09', 'images/index_09-over.gif'); return true;">
<img name="index_09" src="images/index_09.gif" width="145" height="44" border="0" alt=""></a></td>
<td colspan="2">
<a href="links.html"
onmouseover="changeImages('index_10', 'images/index_10-over.gif'); return true;"
onmouseout="changeImages('index_10', 'images/index_10.gif'); return true;"
onmousedown="changeImages('index_10', 'images/index_10-over.gif'); return true;"
onmouseup="changeImages('index_10', 'images/index_10-over.gif'); return true;">
<img name="index_10" src="images/index_10.gif" width="119" height="44" border="0" alt=""></a></td>
<td>

<img src="images/spacer.gif" width="1" height="44" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/index_11.jpg" width="3" height="457" alt=""></td>
<td colspan="7" rowspan="2">
<img src="images/index_12.gif" width="461" height="156" alt=""></td>
<td colspan="4">
<img src="images/index_13.jpg" width="331" height="47" alt=""></td>

<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="4">
<div style='
width: 318px;
height: 312px;
background-image: url(images/index_14.jpg);
overflow: auto;
'>
<p style='padding-top: 40px; padding-left: 10px;'>
text<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
</p>
</div>
</td>
<td rowspan="5">
<img src="images/index_15.jpg" width="13" height="410" alt=""></td>
<td>

<img src="images/spacer.gif" width="1" height="109" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/index_16.jpg" width="461" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>

<td rowspan="3">
<img src="images/index_17.jpg" width="86" height="300" alt=""></td>
<td colspan="3">
<div style='
background-image: url(images/index_18.gif);
width: 289px;
height: 138px;
overflow: auto;
'>
<p style='margin-left: 10px; /* so the text doesnt rub the side */'>
content<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
stretch down<br>
</p>
</div>
</td>
<td colspan="3" rowspan="3">
<img src="images/index_19.jpg" width="86" height="300" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="138" alt=""></td>
</tr>

<tr>
<td colspan="3" rowspan="2">
<img src="images/index_20.jpg" width="289" height="162" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="64" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/index_21.jpg" width="318" height="98" alt=""></td>

<td>
<img src="images/spacer.gif" width="1" height="98" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="86" height="1" alt=""></td>
<td>

<img src="images/spacer.gif" width="45" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="126" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="118" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>

<td>
<img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="67" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="145" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="106" height="1" alt=""></td>
<td>

<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
el doro
01-12-2006, 01:36 PM
Yeah, thats what i was trying to do!

Apart from i need the backgrounds to remain stationary and fixed so only the text scrolls? It remains stationary in FF with that code, but scrolls, and repeats, in IE.

So what would i add to fix it so it doesnt repeat, both horizontally and vertically? Also so that the text would wrap and be fitted in the box.


Also, i want to change the scroll bars to make them more in-fitting with the background, by adding a standard

{scrollbar-3dlight- . . . :;
scrollbar-arrow- . . . :;
scrollbar-base- . . . :;
scrollbar-darkshadow- . . . :;
scrollbar-face- . . . :;
scrollbar-highlight- . . . :;
scrollbar-shadow- . . . :}

in the style tags i'd change the scroll bars on the whole page, in this case the actual page, and the tables inside it, is that right?

Is there anyway to change the scroll bars individually for the different tables?


Cheers
requiembmx
01-12-2006, 01:48 PM
<div style='
width: 318px;
height: 312px;
background-image: url(images/index_14.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
overflow: auto;
'>
try adding the bold the div's