Evan thanks for the follow up... but things are not working. I am not sure I
understood.
Can you attempt (or someone else) attempt to modify this html as it runs
from the following website? All you have to do is cut/paste the following
snippet to the web site and play with it.
I am just trying to get the image to stretch 100% width across.
Here is the website
http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_min-width_percent
Here is the snippet you cut/paste in and click the render button top-left
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
overflow:visible;
}
div#header {
width: 100%;
height: 100%;
overflow:visible;
background: #fff url( logocss.gif ) top left no-repeat;
}
</style>
</head>
<body>
<div id="header" >
</body>
</html>
Thanks in advance... if this cannot be done then i am left trying to
instrument the doms in tapestry/json.
Best regards
Ken in nashua
div#header{
height:94px;
width:80%;
margin:0 auto 0 auto;
background css code ....
}
then wrap that div with another div called headerContainer{}, use that to
control layout positioning of your inner header div.
css doesn't ever stretch images like an img tag does, it only underlays the
image beneath the innerHTMl content (hence using a bg image)
using margin auto for left and right will center the header wether its
stretched or not.
hope that helps.
ps. generally i never use the clear: both; it really doesnt' do shyt.
overflow is the most complicating property you would use having div styles.
if tyou want some examples of how to do straight div layout using only css,
no html cept for a and div (maybe some img)
http://oakenfold.ath.cx:8080/main/app?service=page/CorpHome
~evan
----- Original Message -----
From: "Ken nashua" <[EMAIL PROTECTED]>
To: <users@tapestry.apache.org>
Sent: Tuesday, July 03, 2007 11:14 AM
Subject: how to tile/stretch a header image in css
Sorry folks if this does not belong in this group but I think it might.
I have the following:
div#header {
color: black;
clear: both;
padding: 0;
height: 94px;
margin: 5px 5px 5px 5px;
background: #fff url( images/header.jpg ) top left no-repeat;
}
But the image is coming up in original width/height.
How can I stretch the image?
How can I tile it?
If I stretch it does the percentage have to be against a component like
<tr><td> or <div> or <span>
The above css element is rendered in a div tag
<div id="header" class="clearfix">
</div>
Ideally I would like this header to occupy 15% of the top main page it lies
within and stretch the header image to 80% of that.
Help is greatly appreciated.
Thanks
_________________________________________________________________
Don't get caught with egg on your face. Play Chicktionary!
http://club.live.com/chicktionary.aspx?icid=chick_hotmailtextlink2
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
_________________________________________________________________
Now you can see troubleĀ
before he arrives
http://newlivehotmail.com/?ocid=TXT_TAGHM_migration_HM_viral_protection_0507
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
