PDA

View Full Version : iFrame Scroll Bar Help


YNWA
03-19-2007, 12:43 PM
I am designing a basic website for my university coursework and I have inserted iFrames into the page using Dreamweaver.

I have them set up and working but what I need is to disable the horizontal scroll bars only. I have searched and search for this and nothing has worked.

I will post the code I have for my iFrame and if someone could edit it or contact me and I wil send them the file over that would be great?

As I say this is my uni work so I would really appreiciate any help.

Thanks
Will

1st iFrame


<div id="Layer9">
<iframe src ="S:\devdocs\users\10065472\PBL 3 Website\pages\iFrame_pages\recent_news.html" frameborder="0" scrolling="auto" marginwidth="0&#37;" width=100%" height="250%" > </iframe>
</div>


2nd iFrame


<div id="Layer8">
<iframe src ="S:\devdocs\users\10065472\PBL 3 Website\pages\iFrame_pages\home_info.html" width=100%" marginwidth="25%" height="95%" scrolling="auto" frameborder="0" class="iframe"></iframe>

</div>


The whole code of my page.



<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 0px;
top: 0;
}
#Layer2 {
position:absolute;
width:200px;
height:115px;
z-index:0;
left: 261px;
top: 183px;
}
#Layer3 {
position:absolute;
width:349px;
height:21px;
z-index:2;
left: 323px;
top: 189px;
}
.style4 {
color: #9DA531;
font-weight: bold;
}
.style5 {
color: #404300;
font-weight: bold;
}
.style9 {
font-family: "Trebuchet MS";
font-size: 18px;
}
#Layer4 {
position:absolute;
width:114px;
height:21px;
z-index:3;
left: 52px;
top: 194px;
}

#Layer5 {
position:absolute;
width:157px;
height:115px;
z-index:4;
left: 31px;
top: 234px;
}
#Layer6 {
position:absolute;
width:56px;
height:24px;
z-index:5;
left: 70px;
top: 537px;
}
#Layer7 {
position:absolute;
width:100px;
height:417px;
z-index:5;
left: 223px;
top: 109px;
}
#Layer8 {
position:absolute;
width:510px;
height:335px;
z-index:5;
left: 248px;
top: 228px;
}
.style12 {
font-size: 14px;
font-weight: bold;
}
#Layer9 {
position:absolute;
width:159px;
height:115px;
z-index:6;
left: 30px;
top: 231px;

}


-->
</style>
</head>

<body>
<div class="style9" id="Layer3">
<div align="center"><u>Welcome To <span class="style5">HOPE</span><span class="style4">less</span> <span class="style7">Reviews</u></div>
</div>
<img src="../images/maintemplate.gif" width="800" height="600" border="2" align="left" usemap="#MapMap" />
<div id="Layer9">
<iframe src ="S:\devdocs\users\10065472\PBL 3 Website\pages\iFrame_pages\recent_news.html" frameborder="0" scrolling="auto" marginwidth="0%" width=100%" height="250%" > </iframe>
</div>
<div id="Layer8">
<iframe src ="S:\devdocs\users\10065472\PBL 3 Website\pages\iFrame_pages\home_info.html" width=100%" marginwidth="25%" height="95%" scrolling="auto" frameborder="0" class="iframe"></iframe>

</div>
<map name="MapMap" id="MapMap">
<area shape="rect" coords="222,68,304,95" href="index.html" alt="Home" />
<area shape="rect" coords="350,66,473,94" href="news.html" alt="News" />
<area shape="rect" coords="522,67,610,95" href="artists.html" alt="Artists" />
<area shape="rect" coords="633,-5,823,140" href="index.html" alt="Home" />
<area shape="rect" coords="431,103,577,132" href="contact_us.html" alt="Contact Us" />
<area shape="rect" coords="-3,-6,154,140" href="index.html" /><area shape="rect" coords="133,0,171,99" href="index.html" />
<area shape="rect" coords="139,-4,177,98" href="index.html" /><area shape="rect" coords="162,106,404,134" href="artist_of_month.html" />
</map>
<div class="iframe" id="Layer4">
<div align="center" class="style12">Recent News </div>
</div>
</body>
</html>
Bob90
03-21-2007, 12:41 AM
Make the content thinner, like about 20px
:)
Sparaker
03-21-2007, 02:44 PM
Try this:


iframe {
overflow-x: hidden;
overflow-y: scroll;
}

Let me know if it helps. :)
vkbarefoot
04-02-2007, 11:37 PM
The iframe is a window to another page. If the window is not wide enough to show the page that is being viewed through it ...then you will have a horizontal scroll bar.
If your iframe is 100 pixels wide then the viewed page must be less than that ... 10 pxs less than the iframe width seems to be a good amount.
mburt
04-08-2007, 11:22 PM
iframe {
overflow-x: hidden;
overflow-y: scroll;
}

The -x,-y attributes are depreciated for valid CSS. Use overflow:auto; instead.
Twey
04-08-2007, 11:56 PM
They're valid CSS3, just not widely supported. overflow: auto; isn't going to have the same effect here.
I am designing a basic website for my university coursework and I have inserted iFrames into the page using Dreamweaver.Wow, two misjudgements in one sentence :p Firstly, stay away from Dreamweaver's WYSIWYG capabilities: I hear it's a decent code editor, but (as with all WYSIWYG editors) generates inferior code. Secondly, don't use iframes: they're invalid (http://validator.w3.org/) in all modern DOCTYPEs.
<img src="../images/maintemplate.gif" width="800" height="600" border="2" align="left" usemap="#MapMap" />Firstly, don't use presentational markup such as "width", "height", "border" and "align": these are all deprecated for CSS. Secondly, don't use XHTML unless you're intending to serve it as XHTML (with an application/xhtml+xml MIME type), and drop IE support, since IE doesn't support XHTML yet. If you serve it as text/html, it's not XHTML at all, but badly-formed HTML.
mburt
04-09-2007, 12:32 AM
I am designing a basic website for my university coursework and I have inserted iFrames into the page using Dreamweaver.
University work? Dreamweaver? HUH?
If this stuff is taught at University level, shouldn't you be coding by hand?