Frames Assistance

[AEguyTN]

Hello. I am designing a website for a friend who is starting up a Night Club. Here is the home page and a content page of what I am working on.

 

• http://i47.photobucket.com/albums/f188/coldeyes83/events1.jpg
  

• http://i47.photobucket.com/albums/f188/coldeyes83/home1.jpg
  

 

What I am doing is splicing up a photoshop document and basically using that as the page. I realize this is a waste of resources but it is fairly easy to edit. My question is as follows: Would it be easier to convert said pages to one background image with content on top of it and edit that way? Also, if there is nothing wrong with the way I am doing it - How can I create a layer or frame or whatever so that it appears transparent on top of the current slices so that I may have say... a scrolling frame within the shown white content area in the images.

[Wickham]

There's no reason why you can't have one big background-image for the whole page and place text or images over it. I prefer that to slicing up an image into lots of bits and placing them in table and td tags which is what most people seem to do.

 

If you want a small area to be a smaller box (a div box, not a frame) you can use a scrolling div.

CSS:-

#scrolldiv { width: 300px; height: 250px; overflow: scroll; }

HTML markup:-

Text or image here

 

A scrolling div needs a height and width so that a scrollbar will enable viewers to see content too big for the box. Overflow: auto; will only show a scrollbar where needed.

Edited May 9, 2009 by Wickham

[AEguyTN]

That may be the way to go, but is it possible to create a layer or table or something on top of the current splices? I was thinking about an iframe but i'm not so sure.

[Wickham]

We don't know what the structure of your page is; I'm guessing that it's tables.

 

Whatever the structure is, you can often use a div with position: absolute; (perhaps needing z-index as well) and this just sits on top of any other content, taking its top and left positions from the top left corner of the viewport, and is "out of the flow" of the page code so it's independent of anything else (code it after all the other page code).

 

Edit: I don't think an iframe would work. It would need to sit inside a div or table td tag and is a complete html page (although it can have a transparent background) so I don't think an iframe could span across several td cells or divs.

Edited May 9, 2009 by Wickham

[AEguyTN]

Using DW CS4 how would you add a div table with absolute positions? I think once I get the table down I can work with the rest until I figure it out. Yes the page is just a big centered table with a few rollover jpg's and the rest is spliced jpg.

[Wickham]

Here is a very, very, simple page with a normal table and a smaller position: absolute table layered on top of it.

 

>
br />
"http://www.w3.org/TR/html4/strict.dtd">



Table test
<br /><br />#table1 { width: 800px; height: 500px; background-color: skyblue; }<br />#table2 { position: absolute; width: 500px; height: 300px; <br />background-color: lime; top: 50px; left: 150px; }<br />



</pre>
<table id="table1">

Table cell 1
Table cell 2

Table cell 3
Table cell 4   
</table>
<br><br><br><table id="table2">
Table cell 5
Table cell 6

Table cell 7
Table cell 8   
</table>
<br><br><br

 

A slightly more complicated example is here:-

http://www.wickham43.com/forumposts/aeguy090509.html

which shows a main table centered in any screen resolution and the smaller table layered on top which remains in the same position within the first table wherever it may be on the screen.

Edited May 9, 2009 by Wickham

[LSW]

Avoid frames, they are out. Painful to work with and not supportive of the user or SEO spyders. They are bad for disabled users as well. There is really no reason to use frames these days.