|
|
Posted by Jonathan N. Little on 02/07/07 21:12
charles cashion wrote:
> I am running Firefox 1.5.0.9 on Windows XP.
> My screen is probably 1024x768, but my window
> width is slightly less. I wanted my logo and my
> greeting to be on the top with the greeting
> inside of the first table width. As it is, the
> greeting.bmp graphic begins outside of the
> desired 700px width.
>
> This is what I want
> |---logo---|---blank---|---greeting---|
> 0 250 400 700
>
> This is what I have
> |---logo---|---blank------------------|---greeting
> 0 250 400 700
> the right side of the greeting is cut off
1) Don't use *WINDOWS* bmp files on the web, use JPG, GIF, PNG*
2) Don't use a table to "hang" your logo on your page
3) Don't design for a ridge fixed window size
4) You can put graphics in both upper corners but let the page adjust
for different browser widths, accommodate your visitors not the other
way around.
*IE has problems with some formats of PNG transparency
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Look Ma, No Table!</title>
<style type="text/css">
BODY { margin: 0; padding: 0; }
#banner { height: 110px; width: 100%;
min-width: 550px; /* IE does not support but hey that's IE! */
text-align: right; background-color: #ffd; /* demo only */
}
#banner #logo {
position: absolute; left: 0; top: 0; /* put logo upper left*/
}
#content { /* rest of your page*/
margin: 1em;
}
</style>
</head>
<body>
<div id="banner">
<img id="logo" src="logo.jpg" width="250" height="110" alt="logo">
<img src="greeting.jpg" width="300" height="110" alt="Greeting">
</div>
<div id="content">
<p>rest of your page</p>
</div>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|