View Full Version : Best way to code a web layout

01-30-2005, 03:39 AM
I made a web layout on photoshop, its http://img.photobucket.com/albums/v288/scott4ravens/my%20site/layout.jpg I wanted to know the bestr way of getting the text/buttons at the top to be links and a transparent text area thing in the box where it says text here

01-30-2005, 03:56 AM

At the top, since the background is gradient, I think your going to have to make the buttons transparent gifs. Although a transparent gif will work, the quality may not be that good, and the edges might be jaggedy. If the background was not gradient, you could just make the image background color the same color as that top part. As for the text area, I'll assume you mean a place where you're going to show text, and not the form element, text area. If you make this design within a table, which I think will be the easiest, you can just make that image the background of a cell, and you can then type right over it.

Hope this helps,

01-30-2005, 06:10 PM
I think the best way would be to put both parts into their own DIV like this:

<div id="menubar">Your menu stuff here</div>
<div id="textbody">Your text here</div>

Then declare the attributes in your css so that your 'menubar' and its links are transparent until to rollover them and that your div, 'textbody' has a background image assigned to it or is transparent (if the background is the general page background).

Your menu would best be an unordered list <UL> given the attributes list-style-type : none; display : inline; but I can post that help if you need it.

No need for tables, as in this case, they would make more difficult the task of upgrading/re-designing your site at a later date and they eat more bandwidth and filespace.