Re: graphic alignment



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
.