Lindsay0385
01-21-2004, 02:50 PM
Hello,
I am new to iframes and I was wondering if it was possible to line up three iframes next to each other. Right now I am testing out iframes and I want to line up it like this, but I don't know if it is possible or how to do it:
left iframe (with links)--- main iframe --- right iframe (with links)
Right now I have it like this (all on top of each other) and can't figure it out:
main iframe
left iframe
right iframe
Here is the site link:
http://www.geocities.com/newcomb_smith/testing.html
Thanks for your help!
Lindsay
Yes you can. You can either use the very old and stupid way of aligning them by using tables, or you can use CSS.
http://glish.com/css/2.asp
The above link shows a simple way of making a 3-column layout in CSS. It may not be entirely suitable for you but it's a start. You would put your three iframes into each of the boxes there.
Just a thought: do you really need three iframes to split up your page like that? It would be easier to just have one iframe in the middle and fixed links on the sides. Of course this is entirely up to how you want your site to look :)
Lindsay0385
01-21-2004, 09:03 PM
Okay, I used the site that was listed and tried to fix my site...but now it looks like this:
left-------right
center
Look at it here:
http://www.geocities.com/newcomb_smith/testing2.html
What can I do?
Thanks!
spikemeister
01-21-2004, 10:12 PM
There are a few mistakes in your html that you may wan to look at. I'll not point them out but you should have a look through your code and see if you can spot them. You should also try and move all the attributes of your iframes into your <style> makes things easier to read. Ok ive set up your page, i just took the code from your source and modified it. Basically its just a three column css layout. Ill leave you to modify as you please. just replace your old <style> with this
<style type="text/css">
<!--
#mainleft {
width:130px;
background:"SnowFlakes.jpg";
padding-bottom:50px;
padding-top:40px;
position: absolute;
height: auto;
top: 30px;
left: 5px;
}
#maincenter {
background:"SnowFlakes.jpg";
padding-bottom:10px;
margin-left: 138px;
margin-right:138px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 140px;
margin-right:140px;
}
html>body #maincenter {
margin-left: 140px;
margin-right:140px;
}
#mainright {
width:130px;
background:"SnowFlakes.jpg";
padding-bottom:50px;
padding-top:40px;
position: absolute;
height: auto;
top: 30px;
right: 5px;
}
#banner {
background:"SnowFlakes.jpg";
}
h1 {
font-family: Trebuchet MS, Arial;
color: #000099
}
p {
font-family: Trebuchet MS, Arial;
color: #000099
}
A:link {
text-decoration: none; color:#000099;
}
A:visited {
text-decoration: none; color:#000099;
}
A:hover {
text-decoration: none; color:#000099;
}
body {
scrollbar-face-color : #FFFFFF;
scrollbar-highlight-color : #C6DEFF;
scrollbar-3dlight-color : #A4B6D2;
scrollbar-shadow-color : #6084BA;
scrollbar-darkshadow-color : #3D5D8D;
scrollbar-track-color : #FFFFFF;
scrollbar-arrow-color : #3D5D8D;
}
-->
</style>
Lindsay0385
01-21-2004, 11:09 PM
Thanks so much for your help with the code, but the center frame is still at the bottom (left and right parts are in the correct spot). I use yahoo advanced editor to preview it and now the frames are floating above the code....I think it's because of the absolute. And when I take out the sizes of the iframes from the <body> part of the code the sizes are not the correct sizes. Maybe I should just go back to my simple frames...I am so confused...
lovely
01-21-2004, 11:21 PM
Um, I don't think you have 'position: absolute;' in your #maincenter. That's probably why it isn't staying put. ;)
Don't give up! Have patience - you'll get it.
Lindsay0385
01-21-2004, 11:39 PM
Um, I don't think you have 'position: absolute;' in your #maincenter. That's probably why it isn't staying put. ;)
Don't give up! Have patience - you'll get it.
Okay I fixed that..but it is still on the bottom...:confused:
lovely
01-22-2004, 04:05 AM
Did you copy the text right out of spikemeister's box? If so, this part:
#maincenter {
background:"SnowFlakes.jpg";
padding-bottom:10px;
margin-left: 138px;
margin-right:138px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 140px;
margin-right:140px;
}
html>body #maincenter {
margin-left: 140px;
margin-right:140px;
}
Needs some attention. More like this:
#maincenter {
position: absolute;
background:"SnowFlakes.jpg";
padding-bottom:10px;
margin-left: 138px;
margin-right:138px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 140px;
margin-right:140px;
}
See if that helps. :) Also, I would look over Lissa's section on CSS ( http://www.lissaexplains.com/css.shtml ) code wise.
Lindsay0385
01-22-2004, 06:13 PM
Okay, I did that...but it is still on the bottom. I tried deleting the right frame, and then the bottom one comes up. Then I tried to add it in again and it went back to the bottom again...what can I do?
Rosey
01-22-2004, 06:29 PM
The problem is that you have a few " missing.
That's it.
At the end of your mainright iframe, after the scrolling:auto , you need a " (same for the mainleft iframe)
In your div maincenter:
<div id="maincenter">
Lindsay0385
01-22-2004, 06:43 PM
Figures that I would miss something as small as that...lol! Thank you all for your time and help.
Rosey
01-22-2004, 06:53 PM
Don't worry, we've all done it and still do ;)