Forum Moderators: not2easy
the page consists out of 9 frames. 3 on top, 3 in the middle and 3 on the bottom.
like this thus:
¦ 1 ¦ 2 ¦ 3 ¦
¦ 4 ¦ 5 ¦ 6 ¦
¦ 7 ¦ 8 ¦ 9 ¦
Frame 5 is the content frame, the others make the painting's frame. I succeed in making frames 1 3 7 or 9. the hardest part is making the frames in between (2 4 6 & 8).
Who can give me any tips?
If my English or my explanation somehow troubled you, plz check out the old site on <Ooops!>
[edited by: Nick_W at 7:00 pm (utc) on Sep. 25, 2003]
[edit reason] no urls please / thanks! [/edit]
Anyone?
Nick
If I understand you right, you have a picture in frame 5, and the remaining frames 1-4 and 6-9 are just decorative [in other words have no content, just color.]?
If this is the case you could place the picture in an appropriately sized div, aligned centrally in the view port. Then just give the background a color of your choice.
Does that sound about what you are looking for?
Spook.
here's a tictactoe type grid similar to what rico is looking for... this one resizes all of the frames to maintain 33% height and width of the browser window for each one...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"><html>
<head>
<title>tic tac toe frames</title>
</head>
<frameset cols="33%, 33%, 33%" rows="33%, 33%, 33%">
<frame name="1a" src="1a.html">
<frame name="2a" src="2a.html">
<frame name="3a" src="3a.html">
<frame name="1b" src="1b.html">
<frame name="2b" src="2b.html">
<frame name="3b" src="3b.html">
<frame name="1c" src="1c.html">
<frame name="2c" src="2c.html">
<frame name="3c" src="3c.html">
<noframes>
<p>sorry, your browser doesn't do frames.</p>
</noframes>
</frameset>
</html>
this one, on the other hand, keeps the center frame (2b) set to 200px by 200px while all the others adjust shape and size as the browser window is resized...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"><html>
<head>
<title>tic tac toe frames</title>
</head>
<frameset cols="*, 200, *" rows="*, 200, *">
<frame name="1a" src="1a.html">
<frame name="2a" src="2a.html">
<frame name="3a" src="3a.html">
<frame name="1b" src="1b.html">
<frame name="2b" src="2b.html">
<frame name="3b" src="3b.html">
<frame name="1c" src="1c.html">
<frame name="2c" src="2c.html">
<frame name="3c" src="3c.html">
<noframes>
<p>sorry, your browser doesn't do frames.</p>
</noframes>
</frameset>
</html>
but it seems that rico already has something like this (the existing framed site)... rico, are you wanting to move away from frames and do this all in one page rather than 10 (1 index and 9 content) pages? if so and since you mention knowing how to do it with tables but wanting to do it with styles instead, it would seem so... however, you'd be nesting divs within divs within divs in an attempt to recreate what a table already does...
i'm not totally sure exactly what you are wanting to do ;(
[added]maybe spook has it... he got that in during the time i created, copied and pasted the two sets of code in this message, LOL![/added]
I also posted the same site which I made with tables. BUt I really want to let a stylesheet do the work.
FRAMESET:
-------------------
<frameset framespacing="0" border="false" frameborder="0" rows="30,*,29">
<frameset cols="26,*,26">
<frame name="lboven" scrolling="no" noresize target="contents" src="lijst/lbovenrand.htm">
<frame name="boven" scrolling="no" noresize target="contents" src="lijst/bovenrand.htm">
<frame name="rboven" scrolling="no" noresize target="contents" src="lijst/rbovenrand.htm">
</frameset>
<frameset cols="26,*,26">
<frame name="links" scrolling="no" noresize target="contents" src="lijst/linksrand.htm">
<frame name="start" src="html/start.htm" scrolling="no">
<frame name="rechts" src="lijst/rechtsrand.htm" scrolling="no" target="contents">
</frameset>
<frameset cols="26,100%,26">
<frame name="londer" scrolling="no" noresize target="contents" src="lijst/londerrand.htm">
<frame name="onder" scrolling="no" noresize target="contents" src="lijst/onderrand.htm" marginwidth="0">
<frame name="ronder" scrolling="no" noresize target="contents" src="lijst/ronderrand.htm">
<noframes>
</noframes>
</frameset>
<noframes>
<body>
some text here
</body>
</noframes>
</frameset>
TABLES:
-------------------------------------
<table width="100%" height="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center" background="../.././lijst/lboven.jpg"> </td>
<td align="center" valign="bottom" background="../.././lijst/boven.jpg"><img src="../.././plaatjes/spacer.gif" height="30" width="1"></td>
<td align="center" background="../.././lijst/rboven.jpg"> </td>
</tr>
<tr>
<td align="center" background="../.././lijst/links.jpg"><img src="../.././plaatjes/spacer.gif" width="26"></td>
<td align="center" height="100%" width="100%">inhoud</td>
<td align="center" background="../.././lijst/rechts.jpg"><img src="../.././plaatjes/spacer.gif" width="26"></td>
</tr>
<tr>
<td align="center" background="../.././lijst/londer.jpg"> </td>
<td align="center" background="../.././lijst/onder.jpg"><img src="../.././plaatjes/spacer.gif" height="30" width="1"></td>
<td align="center" background="../.././lijst/ronder.jpg"> </td>
</tr>
</table>
3 parts(divs) will give you an expanding Picture frame Look
1. top of design - top corners and border
2. a background image(repeating along the y-axis) for the 2 x side borders
3. bottom of design - bottom border and corners.
Which is quite logical when you think header, content, footer layout
if you use the middle section (2) for content it will expand as necessary.
It can all be done with relative positioning so should remain stable.
Suzy
I think the following will give you approximately what you have now, someone will jump in soon and correct me if I am missleading you.
cssbody{
background : Gray;
}
#container{
border: 1px solid red;
margin: 30px 26px 30px 26px;
}
#frame{
background: transparent;
width: 760px;
position: absolute;
left: 50%;
margin-left: -380px;
margin-top: 10px;
margin-bottom: 20px;
border: 1px solid white;
}
And html
<body>
<div id="frame">
<div id="container">Picture Here</div>
</div>
</body>
If you play around with the colours, margins and borders you should be able to "tweak2 it to suit.
Still not sure if this is what you are looking for but hope this helps.
Spook
Spook
If you guys want to know what I have right now, please contact me (Private message). You guys would make me a very happy man :D.
