PDA

View Full Version : Frames Help

ish90an
06-24-2008, 01:26 PM
Hi
I am trying to make my page to look like an iPod. What I have thought of is to put in an iPod as an image, then make the screen of the iPod a frame where I can put in a scroll bar and text. I have managed to insert an iFrame but I cannot get it to be on the screen area. Here's the code I have written so far

<html>
<body bgcolor="#383838">
<table border="1" width="100%" cellpadding="150"><td align="center"><font align="center" color="#383838">asdadadasdadadasdaadadada
<img src="ipod.png" align ="middle">
<iframe src="page1.html" align ="right" width=20% height=60%></iframe>
</td>
</font>
</table>
</body>
</html>
Can anyone tell me what I can do to get this sorted? Thanks. Much appreciated
BubikolRamios
06-24-2008, 02:08 PM
mybe the problem is in that that iframe does not know what is '60%' .....
try body style = 'width:100;height:100%;'
Doctor_Varney
06-24-2008, 02:27 PM
You can do it with a simple div, without using iframes, by styling the div with addition of the following:

#i-pod_viewscreen (whatever){
overflow:scroll;
}

The overflow property causes a normal div to scroll, or hide content which overflows the div's height, like an i-frame would. There are ways of styling up your inline scroll bar, too. You'd have to consult more learned people though, in order to work around the browser display issues.

Regards,

Doctor V
Doctor_Varney
06-24-2008, 02:31 PM
Oh dear, I just realized you're still using tables to lay out in raw HTML. You can do it with CSS, if you want to, using nested divs and it will be easier. Many people have made designs like this with HTML, but I would suggest following the CSS route instead.

Regards
Doctor_Varney
06-24-2008, 03:46 PM
Nesting is where you put one thing inside another thing... An example might be:

<div id="something">

<div id="something-inside">
</div>

</div>

The 'nested' div is inside the outer div (usually called a parent). Imagine a set of russian dolls, where each progressively smaller one, fits inside the previous.
ish90an
06-24-2008, 03:51 PM
Hi
Thanks for the reply. I tried using div block, but the issue is that I want a part of an image to have a scroll bar(the idea is to have the entire text inside the screen of the iPod). How will the div block be able to do that?
Doctor_Varney
06-24-2008, 07:11 PM
As I said, the overflow property of the div creates a scroll bar. Refer to the above example I posted earlier.

Enjoy your scroll bar!

Regards,

Doctor V