Hi, I'm new here, hope someone can help. With frustration I've tried to figure this out. Creating a web page with a fixed width (pixel) is easy. My problem lies with creating one that is set at 100% How do I create and make the banner go from left to right 100% of the top of the page?
with thanks, msmitch
Setting a page to 100% is easy. Designing a banner that does so is different. Essentially, you have to divide your image into 3 pieces, a left and right, and a center pieces that is a simple sliver of solid color. That is the piece that will "expand" to fit the size of the page.
Post in the HTML/JavaScript/CSS section if you need more detailed help.
Yes I've tried creating the banner in threes, but testing it on smaller monitors part of the banner appears below. Looks terrible. Anyway to stop this from happening?
I think you need to show us the code you have thus far.
I think I've got it! Fingers crossed that is. I size the window and the banner remained intact! This is what I put together. I hope I posted this right.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-left: 0px;
}
.style1 {
font-size: 12px;
font-weight: bold;
}
-->
</style></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30%" align="left" valign="top" bgcolor="#BA9FBE"><img src="images/images/images/chris-banner_01.jpg" width="213" height="104"></td>
<td width="41%" align="left" valign="top" bgcolor="#BA9FBE"><img src="images/images/images/chris-banner_02.jpg" width="345" height="104"></td>
<td width="29%" align="center" valign="top" bgcolor="#BA9FBE"><img src="images/images/images/chris-banner_04.jpg" width="105" height="104"></td>
</tr>
<tr bgcolor="#000000">
<td colspan="3"><div align="center"><img src="images/images/spacer.gif" width="2" height="2"></div></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="3"><div align="right" class="style1">Navagation Here </div></td>
</tr>
</table>
<br>
</body>
</html>If it works, it works! I'm out of the habit of using tables for layout, so didn't immediately think of placing the image elements inside of a table.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.