My web page is divided into 5 parts: Header, Left Sidebar, Content, Right
Sidebar & Footer. Within the header, I wish to place a large logo, a mini
logo and a site name or company name in large text. Currently, the CSS I'm
using for the header is:
:
:
div {
margin: 0;
padding: 0;
border: 1px dashed #000000; //This is for visual testing purposes only
}
div.page {
min-width: 54em;
padding: 10px;
}
div.header {
background-image: url(images/large_logo.gif);
background-repeat: no-repeat; // This image is not repeat worthy !
height:200px;
}
:
:
And the HTML is:
:
:
<div class="page">
<div class="header">
<h1>Title</h1>
</div>
:
:
</div>
However the image does not stretch to fill the right portion of the 'header'
div. Tiling this image spoils things. I've thought about slicing the
rightmost portion of the large_logo. I could then, perhaps, introduce a
parent div to 'header', say 'headerBackground' with the following CSS:
div.headerBackground {
background-image: url(images/large_logo_filler.gif);
background-repeat: repeat-x;
height:200px;
}
This sounds like a nasty way to solve this, with minimal guarantee of making
the repeated slice look good. I'm not familiar with the technique used to
stretch an image within a DIV, and am not confident that it won't visually
skew the logo. A "very simple" table based technique seems to *visually*
solve this problem quite well without having to fool around with the logo.
But I wouldn't be here asking for help if I was in favor of tables.
What is the standards compliant way to handle this ?
Thanks,
Matt
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
