View Full Version : Uh...Is This Possible?


bourdelson
10-20-2003, 09:07 PM
Okay, what I want to do for a website is have the pages set up like this...

http://www.boomspeed.com/amandifer/websitelayoutplan.bmp

The six boxes are going to be fixed on the page, and all of the links inside of them are going to open up inside the inline frame.

Does anyone know how I could do this? [Or if this idea is even conceiveable?]

Cherchezlafemme
10-20-2003, 10:48 PM
please save as a gif next time will ya? ;) It took long to load and i have a 300k modem



All the layout is are DIV's and iframes. The links of the DIV's can be linked into the iframe by targeting.

Lissa'smain site has all the information you need! :D

bourdelson
10-20-2003, 10:57 PM
Okay, thanks!!

Oh, about the picture, I made it in MS Paint, so I couldn't save as a GIF. Sorry about that. =/

bourdelson
10-20-2003, 11:05 PM
Wait, I have another question, and I can't edit my last post because my five minutes are up. =/

What codes do I use to make the boxes? I have the code for the DIV layer, and I know the i-frame code, but I have no idea how to do the boxes.

Cherchezlafemme
10-20-2003, 11:06 PM
The boxes are single units of DIV's. You make them all stylized with CSS

fruitcake
10-22-2003, 04:41 AM
You can save as a GIF in MS Paint, it's not going to save as well as the BMP, but I saved your same image, and it went down to 32KB from your 566KB. Just something to keep in mind.

Here's a quick example of a box in CSS:
.content {
width: 200px;
height: 300px;
border: 1px dashed #330000;
position: absolute;
top: 50px;
left: 50px;
}

That's going to make your 200x300 box with a red dashed border, and it'll be in the upper lefthand corner of the page.
Do the same thing for your other 5 boxes, changing your class name for each. Then do your Iframe in the middle.

bourdelson
10-22-2003, 08:11 PM
For the class name, you mean like where it says ".content"?

Also, how do I position them so that they're set up three in a row on one side and three in a row on the otherside with the I-frame in the middle?

fruitcake
10-23-2003, 12:36 AM
yes, the class is the ".content"
To apply that in your .html file, use your div:
<div class="content">
text text text...
</div>

To make the other 5 of your little boxes, change
top: 50px;
left: 50px;

to
top: 350px;
left: 50px;

and the third box on the left side will be down another 300px (650px) You may want to change your numbers around a bit if you're working with an 800x600 res.
The right side boxes will all correspond with the left side top pixel measurements, just change the left to 600px, or whatever is working with your layout.

Your IFrame is just your basic iframe code, add in class="iframe" to the tag, and in your CSS file add a new class:
iframe.iframe {
width: 300px;
height: 400px;
position: absolute;
top: 50px;
left: 300px;
border: 1px dashed red;
}
And whatever other styles you want.

Once you get all your boxes and iframe onto your page, it's just a matter of changing the numbers around to get them all exactly where you want them. So don't stress to much when you're doing your coding, think of it just as a rough draft. Remember, the save button never runs out ;)