Replacing a framed website with css

P

Paul F. Johnson

Hi,

I've mostly fixed a section of my work website which used to rely on a
frameset which wasn't that nice with some lovely clean CSS, but I've hit a
problem.

The old frame set looked like this

------------TOP OF SCREEN-------------
centred image
_______________________________
|
piccy | text


The centred image and left hand pictures were set not to scroll.
Obviously, as it was a frameset, the text would be confined to the right
and never over write the top image.

The CSS I have does almost that, except that I can't seem to prevent the
text over writing the top image. Is there a way to effectively keep the
text *always* at a position below the top image?

I did look at iframes, but I'm not sure that's the way I want to go.

TTFN

Paul
 
N

Neal

Hi,

I've mostly fixed a section of my work website which used to rely on a
frameset which wasn't that nice with some lovely clean CSS, but I've hit
a
problem.

The old frame set looked like this

------------TOP OF SCREEN-------------
centred image
_______________________________
|
piccy | text


The centred image and left hand pictures were set not to scroll.
Obviously, as it was a frameset, the text would be confined to the right
and never over write the top image.

The CSS I have does almost that, except that I can't seem to prevent the
text over writing the top image. Is there a way to effectively keep the
text *always* at a position below the top image?

With this markup:

<img ...>
<h1>

.... the heading will never ascend to cover the image unless I position it
to do so. My guess - and in absence of a URL it's merely a guess - is that
you're trying to position something incorrectly.

Can't advise further without seeing a URL, and please no posting code, a
live example.
I did look at iframes, but I'm not sure that's the way I want to go.

Definitely avoid.
 
M

mark | r

is this what you're looking for?

<html>
<head>
<style>
body{margin:0;padding:0}
#top{height:15%;background:#f00}
#left{width:20%;height:85%;float:left;background:#0f0}
#right{width:80%;height:85%;float:left;background:#00f;overflow:auto}
</style>
</head>
<body>
<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Right<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br
/>7<br />8<br />9<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br
/>9<br />0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br
/>0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />0<br
/>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />0<br />1<br
/>2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />0<br />1<br />2<br
/>3<br />4<br />5<br />6<br />7<br />8<br />9<br />0<br />1<br />2<br />3<br
/>4<br />5bottom</div>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top