[2008] question about positioning on webpage

[kleinma]

I mostly do winforms development, but once in a while I have a need to work with webpages.

I need to create a small site that is only about 4 pages, and the site itself will be very simple.

My question is, I want to use a fairly large image as the background of the site, and there is a section on this image that is blank, and I want to have an HTML text area there (not textarea as in the HTML element, just an area where I can do HTML, it could be a DIV tag or whatever is best).

This area will include the links to the other pages as well as some text info, etc...

To illustrate what I am trying to do, I attached a screenshot. I have made a few attempts to do this in both dreamweaver and Visual Studio but my lack of expertise in web layouts is showing...

I tried using absolute positioning, I tried using tables setting pixel width, etc... However I can't seem to get it just right for both Firefox and IE. (table moves around when page is resized, etc...) I also want the page to be centered and built for 800x600 minimum res.

What HTML tags/properties are my best bet for this?

[mendhak]

Take that guitar image, make it the background for your <DIV>.

Put another <DIV> inside that <DIV>, align that to the bottom of the DIV. Or, just have all your text vertically aligned at the bottom of the container div so that the links or whatever text shows up at the bottom.

[kleinma]

I will check that out....

in the mean time, I had gone a very evil route, and I actually got everything to play nice using VS2003 and its grid layout.

I know the gridlayout of VS2003 was not something web developers were too fond of, but it actually did exactly what I wanted in this specific case, and looks the same in IE and Fx

I would like to do it the "right" way, so I will see if I can also get it to work in a flow layout using what you mentioned.

[mendhak]

<div id="container" style="vertical-align:bottom;background-image:url(http://farm1.static.flickr.com/176/407887789_5a93a1d38a_b.jpg);height:600px;position:relative;">
<div class="bottomlinks" style="bottom:0;left:35px;position:absolute;">
<a style="text-decoration:none;color:white;font-size:14px;font-family:verdana;" href="http://www.mendhak.com/">Mendhak</a>
<br/>
<a style="text-decoration:none;color:white;font-size:14px;font-family:verdana;" href="http://www.vbforums.com/">VBF</a>
</div>
</div>