I made a background with photoshop, exported to imageready, then exported as html/css. I wanted to use this image as a background and have div's inside of it that would contain the text i wanted. If you have seen the flash page i posted in the review section you may understand. Someone recommended i have an html version also.
Within this background image I made some other images that i'm using as links. I edited the html file that imageready gave me to make the correct sections links, and i linked a CSS file i wanted to use to center the image in the page.
I may be rambling a little, The image that i had exported i had a bunch of slices in, when imageready made the html file they put it all inside a table. How, without having to change every image to absolute positioning, would i make div's on top the sliced background table image. Is there a setting i can use in imageready/photoshop that will make them all absolute positioning? or maybe a less tedious way of doing it all manually.
here's the source code, you can see where the images would be but not tha actual images. There is nowhere on the site that has a solid color or i would just put a colored div instead of an image.
html file:
Code:
<html>
<head>
<title>border</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (border.psd) -->
<div id="wrapper">
<table id="mainTable" width="722" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="11">
<img src="images/border_01.jpg" width="721" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/border_02.jpg" width="464" height="1" alt=""></td>
<td rowspan="4">
<a href="hobbies.html"><img class="link" src="images/border_03.gif" width="72" height="27" alt=""></a></td><!-- Hobbies link //-->
<td colspan="3">
<img src="images/border_04.jpg" width="185" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/border_05.jpg" width="14" height="389" alt=""></td>
<td rowspan="3">
<a href="home.html"><img class="link" src="images/border_06.gif" width="106" height="26" alt=""></a></td><!-- Home link //-->
<td colspan="3">
<img src="images/border_07.jpg" width="193" height="1" alt=""></td>
<td rowspan="2">
<a href="projects.html"><img class="link" src="images/border_08.gif" width="87" height="25" alt=""></a></td><!-- Projects link //-->
<td rowspan="4">
<img src="images/border_09.jpg" width="64" height="389" alt=""></td>
<td rowspan="4">
<img src="images/border_10.jpg" width="77" height="389" alt=""></td>
<td rowspan="2">
<a href="links.html"><img class="link" src="images/border_11.gif" width="65" height="25" alt=""></a></td><!--links link //-->
<td rowspan="4">
<img src="images/border_12.jpg" width="43" height="389" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/border_13.jpg" width="49" height="388" alt=""></td>
<td>
<a href="about.html"><img class="link" src="images/border_14.gif" width="85" height="24" alt=""></a></td><!--About link //-->
<td rowspan="3">
<img src="images/border_15.jpg" width="59" height="388" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/border_16.jpg" width="85" height="364" alt=""></td>
<td rowspan="2">
<img src="images/border_17.jpg" width="87" height="364" alt=""></td>
<td rowspan="2">
<img src="images/border_18.jpg" width="65" height="364" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/border_19.jpg" width="106" height="363" alt=""></td>
<td>
<img src="images/border_20.jpg" width="72" height="363" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="363" alt=""></td>
</tr>
</table>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
css code:
Code:
body{
text-align: center;
background-color: black;
}
div.main{
width: 710 px;
height: 390 px;
z-index: 1;
background-color: white;
}
img.link{
border: 0;
}
p.main{
color: white;
}
#wrapper{
height: 400 px;
width: 720 px;
text-align: left;
margin: 100 px;
z-index: 2;
}
#linkContainer{
width: 705 px;
height: 30 px;
background-color: white;
}
#mainTable{
position: absolute;
z-index: 2;
}
|
