Stretching graphics

  • Nucleo
  • SausagePorkPie
  • Mastermind
  • User avatar
  • Posts: 2297
  • Loc: UK - England

Post 3+ Months Ago

Hi
me and some m8s are going to make an interactive football (soccer) website. It will be made using phpcoding and MySql. I am going to be learning as i go.

the first thing i want to do is have a header graphic. The header graphic is around 790pixels wide. I have sliced it into 3 for easy loading, but I would like the 2 end slices to go the the end of viewable space. and the middle graphic to be stretched. This way the site is not an odd size and the header fills the whole page width.

i would just like to know how to go about doing this. I have never done it before, the middle graphics is a small space with nothing it in, so it can be stretched, Am i going abou this the wrong way?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

hey man,

If I'm reading this right, what you're describing is a very common task in HTML. You can do a CSS solution too, but I'll just post the HTML right now to see if this is what you were after. In this solution I'm actually 'tiling' an image as a cell background, not stretching it, so that tiling image would actually be 1px wide, by whatever height.

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Soccer Document</title>
</head>
<body style="margin:0;padding:0;">
<table width="100%" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td width="200" bgcolor="#CC3300">fixed width cell</td>
    <td bgcolor="#CCCCCC" background="images/yourImageToBeStretched.gif">adapting cell</td>
    <td width="200" bgcolor="#CC3300">fixed width cell</td>
</tr>
</table>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Soccer Document</title>
  5. </head>
  6. <body style="margin:0;padding:0;">
  7. <table width="100%" height="300" border="0" cellpadding="0" cellspacing="0">
  8. <tr>
  9.     <td width="200" bgcolor="#CC3300">fixed width cell</td>
  10.     <td bgcolor="#CCCCCC" background="images/yourImageToBeStretched.gif">adapting cell</td>
  11.     <td width="200" bgcolor="#CC3300">fixed width cell</td>
  12. </tr>
  13. </table>
  14. </body>
  15. </html>


The way this is layed out here, the two fixed width columns will collapse below 200px if the they're squished enough, but that won't happen when you have images in there to force them to width. The height attribute in the table tag will also become unneeded at that point.

I'd also like to mention that if you're scoping 800 x 600 screen resolutions as your base client, your layout should actually be under 760px or 750px to be sure you're not evoking horizontal scrollbars. 790px is just a bit too much for some environments (the majority actually).
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Here's a CSS solution:

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Soccer Document</title>
</head>
<body style="margin:0;padding:0;">
<div style="width:100%;height:200px;background:#CCC url(images/yourImageToBeStretched.gif);position:absolute;top:0;left:0;">
    <div style="width:200px;height:200px;background:#C30;position:absolute;top:0;left:0;"></div>
    <div style="width:200px;height:200px;background:#C30;position:absolute;top:0;right:0;"></div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>Soccer Document</title>
  5. </head>
  6. <body style="margin:0;padding:0;">
  7. <div style="width:100%;height:200px;background:#CCC url(images/yourImageToBeStretched.gif);position:absolute;top:0;left:0;">
  8.     <div style="width:200px;height:200px;background:#C30;position:absolute;top:0;left:0;"></div>
  9.     <div style="width:200px;height:200px;background:#C30;position:absolute;top:0;right:0;"></div>
  10. </div>
  11. </body>
  12. </html>


Notice I've changed the doctype declaration to an xhtml DTD. This would really be considered better form, IMO, but this should also work with the HTML 4.01 trans DTD.(If you are specifying an xhtml dtd, make sure you use proper termination for all tags) Also, on that note, I would never put styles inline as I've done here. That just defeats the concept of CSS and separating content from format. I've done it here just for the sake of example.

Further, I could run upstairs and test these on my SuSe box(Konquerer, Mozilla) to be absolutely sure there are no problems with interpretation, but....I didn't


Cheers!
  • Nucleo
  • SausagePorkPie
  • Mastermind
  • User avatar
  • Posts: 2297
  • Loc: UK - England

Post 3+ Months Ago

thanks alot, that did the trick...

it may have been a simple concept but I am a simple guy and new to html ;)

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 80 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.