css to replace frames

I

IWP506

Does your host support PHP? I've found php includes to be very good.
You could also cut down on the amound of time you need to add new
photos by having your pages dynamically generated.
 
J

Jim Scott

Does your host support PHP? I've found php includes to be very good.
You could also cut down on the amound of time you need to add new
photos by having your pages dynamically generated.

Mm, probably so, but it's as much "Teach Yourself css" at present. :eek:)
 
D

dorayme

From: Jim Scott said:
Subject: css to replace frames

Can someone help or point me towards help in replacing the following page
which uses frames with one which uses a stylesheet instead.
http://freespace.virgin.net/mr.jimscott/Jimspics_frames.html
--


I am sure you know that you can't replace this page with a
stylesheet, a stylesheet is what controls the styles on the html
page. What else to do instead of frames is so big a question in
the sense of there being so many alternatives that many will
find it ... let us say... a daunting one.

What features of the present set up are you very much wanting to
preserve? If you have an open mind on this, I'd say to do the
following. Forget about thumbnails (I think they are over-rated)
and replace them with a text list floated to the left. Or have
the landscape thumbnails on the left, maybe to be followed by
the portrait ones below (or even on the right. You have not got
so many, this would make them viewable without too much
scrolling).

Have the first pic display straight off on the right (or in the
middle if you want thumbnails and you like the idea of the
portrait ones on right).

Crucially, have a html page for each pic. The same menu exactly
on left, (your content is modest and hardly needs "includes" and
fancy doodle dandy) the same code, the same everything except
for the pic. You can do fancier with each page's menu item being
in non link colour for the particular pic (if you can be
bothered, I'd say don't worry as the pic itself and caption is
enough not to cause any confusion). The css could be bog
standard... The html too...

(Just BTW, if you keep the frames for a while, may I suggest a
couple of things: the home button looks quite odd stuck up there
in a frame... and there is a way to be rid of the (imo) ugly
blue "link colour" borders to the thumbnails. You need to either
be rid of the borders "border: 0px..." in the appropriate spots.
Or make some special class of link css and have "color:something
appropriate. Put the home and next buttons in a simple right
frame where there is a nice lot of room. Just have left and
right frame. Simpler and nicer to look at.)

A few thoughts anyway Jim... (I like your pics and their size
and simple bg and do similar things myself)

dorayme
 
J

Jim Scott

I am sure you know that you can't replace this page with a
stylesheet, a stylesheet is what controls the styles on the html
page. What else to do instead of frames is so big a question in
the sense of there being so many alternatives that many will
find it ... let us say... a daunting one.

What features of the present set up are you very much wanting to
preserve? If you have an open mind on this, I'd say to do the
following. Forget about thumbnails (I think they are over-rated)
and replace them with a text list floated to the left. Or have
the landscape thumbnails on the left, maybe to be followed by
the portrait ones below (or even on the right. You have not got
so many, this would make them viewable without too much
scrolling).

Have the first pic display straight off on the right (or in the
middle if you want thumbnails and you like the idea of the
portrait ones on right).

Crucially, have a html page for each pic. The same menu exactly
on left, (your content is modest and hardly needs "includes" and
fancy doodle dandy) the same code, the same everything except
for the pic. You can do fancier with each page's menu item being
in non link colour for the particular pic (if you can be
bothered, I'd say don't worry as the pic itself and caption is
enough not to cause any confusion). The css could be bog
standard... The html too...

(Just BTW, if you keep the frames for a while, may I suggest a
couple of things: the home button looks quite odd stuck up there
in a frame... and there is a way to be rid of the (imo) ugly
blue "link colour" borders to the thumbnails. You need to either
be rid of the borders "border: 0px..." in the appropriate spots.
Or make some special class of link css and have "color:something
appropriate. Put the home and next buttons in a simple right
frame where there is a nice lot of room. Just have left and
right frame. Simpler and nicer to look at.)

A few thoughts anyway Jim... (I like your pics and their size
and simple bg and do similar things myself)

dorayme

Thanks you for your very thorough reply.
Various bodies moan about frames so when I saw this:
http://www.nvu.com/demos/frames/frameSimulate.html
it got me to thinking. Not a thing that happens often.;o)

I got 'so far' but could not get three panels in the arrangement I
currently use. I cannot work out how to get the boxes side by side rather
than one above the other.
I understand your comment about the home button in a frame in its own, but
if I move it to the main frame it becomes a positioning problem if the page
is displayed on 800 x 600 which I'm sure happens a lot of the time. Then
WHAT buttons do I have, 'home' and 'next' or 'home', 'next' and 'back' OR
only 'home' and so enforce use of the thumbnails every time?

Every picture does have its own html page, and before using frames these
were accessed from a page like my home page, with 'home', 'next' and
'previous' buttons. However that forces the reader to view the whole
sequence or keep returning to the thumbnails page.
 
D

dorayme

From: Jim Scott said:
Thanks you for your very thorough reply.
Various bodies moan about frames so when I saw this:
http://www.nvu.com/demos/frames/frameSimulate.html
it got me to thinking. Not a thing that happens often.;o)

I got 'so far' but could not get three panels in the arrangement I
currently use. I cannot work out how to get the boxes side by side rather
than one above the other.

I truly think you should reconsider a top panel like that just
for a home and next button. You have so much room in the content
panel, above and below the picture. Then it is so simple. You
have a left panel with the links, if you must have thumbnails -
against my advice :) - then style the left div to centre all
with devices like margin-left:auto, margin-right:auto and give a
padding for grace esp if you might put a nice right border (it
might be a bit severe all black and no border!). You float this
div "left" and your other div is just a straightforward exercise
in html and css: I would have an <h1>Title of pic</h1>, style
this to center by say margin-left:auto, margin-right:auto and a
width of a suitable em, a font-size you fancy - 140%? Then a div
(styled similarly but now you know the width in px because it is
your pic). Then a following div or p with a next and home link,
centred underneath. Should be a simple clean look.
I understand your comment about the home button in a frame in its own, but
if I move it to the main frame it becomes a positioning problem if the page
is displayed on 800 x 600 which I'm sure happens a lot of the time. Then
WHAT buttons do I have, 'home' and 'next' or 'home', 'next' and 'back' OR
only 'home' and so enforce use of the thumbnails every time?

I can't see why you see a problem on a small screen, even the
tiniest? You centre such simple and few links and they will
always be there and centred. See above.

dorayme
 
J

Jim Scott

I truly think you should reconsider a top panel like that just
for a home and next button. You have so much room in the content
panel, above and below the picture. Then it is so simple. You
have a left panel with the links, if you must have thumbnails -
against my advice :) - then style the left div to centre all
with devices like margin-left:auto, margin-right:auto and give a
padding for grace esp if you might put a nice right border (it
might be a bit severe all black and no border!). You float this
div "left" and your other div is just a straightforward exercise
in html and css: I would have an <h1>Title of pic</h1>, style
this to center by say margin-left:auto, margin-right:auto and a
width of a suitable em, a font-size you fancy - 140%? Then a div
(styled similarly but now you know the width in px because it is
your pic). Then a following div or p with a next and home link,
centred underneath. Should be a simple clean look.
There y' go. Confusing me with someone who knows what he's doing :eek:)
 
J

Jim Scott

I truly think you should reconsider a top panel like that just
for a home and next button. You have so much room in the content
panel, above and below the picture. Then it is so simple. You
have a left panel with the links, if you must have thumbnails -
against my advice :) - then style the left div to centre all
with devices like margin-left:auto, margin-right:auto and give a
padding for grace esp if you might put a nice right border (it
might be a bit severe all black and no border!). You float this
div "left" and your other div is just a straightforward exercise
in html and css: I would have an <h1>Title of pic</h1>, style
this to center by say margin-left:auto, margin-right:auto and a
width of a suitable em, a font-size you fancy - 140%? Then a div
(styled similarly but now you know the width in px because it is
your pic). Then a following div or p with a next and home link,
centred underneath. Should be a simple clean look.


I can't see why you see a problem on a small screen, even the
tiniest? You centre such simple and few links and they will
always be there and centred. See above.

dorayme

Sorry, it's morning and I'm not thinking straight :eek:(
Thinking 'in frames' for the moment so I can see the layout clearly.
You suggest 1) the thumbnails frame is to go from top to bottom
2) a new frame above the enlarged photo with two buttons 'home' on the left
and 'next on the right (with page header text between?)
3) the main enlarged picture below?

The complication with that would appear to be that currently the only thing
that changes between pictures is the content of the right hand frame and
more importantly, perhaps, with it changes the 'next' link which is on the
same page. If the new top right box remains static, not only does the
contents of the picture frame have to change, but so does the 'next' link
above?
A simpler solution would be to add a 'home' button to the top left of every
page.

In a wider context; placing graphics without tables is something I have not
been able to get to grips with whether on the context of html or using css.
Where the contents of part of the screen changes then frames are used in
the majority of commercial websites and do the job admirably.
It is because several contributors here get very 'sniffy' about using
tables and frames that I have been making this attempt, but the more I try,
the more it feels like making my own sweater, by first going off to market
to buy a sheep :eek:?
 
D

dorayme

From: Jim Scott said:
There y' go. Confusing me with someone who knows what he's doing :eek:)

Sorry Jim, ... snowed under with work at the moment. Will try
again if no one has helped you in meantime. You do need to study
some simple css, techniques for centring things like divs from
the many online tutes.

dorayme'
 
D

dorayme

From: Jim Scott said:
Sorry, it's morning and I'm not thinking straight :eek:(
Thinking 'in frames' for the moment so I can see the layout clearly.
You suggest 1) the thumbnails frame is to go from top to bottom
2) a new frame above the enlarged photo with two buttons 'home' on the left
and 'next on the right (with page header text between?)
3) the main enlarged picture below?

There are two issues. One is about my suggestion for improving
what you have using frames, the other is about replacing the
frames. It gets complicated because in my advice about replacing
frames, I assume my advice for the improved frames version. I
hope you will allow me that liberty...

Yes, (1) is ok. But on (2) no, be rid of this top frame! There
are good reasons to do so. I will not state them here. Just have
a right frame that contains the picture pretty well as you have
done except for a simple change: put in the home and next text
link on it (top or bottom and nicely centred). Look again at my
suggestion for a heading for the pic. The home button will
simply be repeated the same on each content (right frame) page,
the next button will require you to do a little work: put in the
code for the actual next page, unique to each page. You don't
have a million pics, it won't take you long... In all this,
nothing is being said about css or tables, do whatever you are
comfortable with.

In a wider context; placing graphics without tables is something I have not
been able to get to grips with whether on the context of html or using css.

If you stick your pic in a

<div
style="width:thePicsWidthpx;margin-left:auto;margin-right:auto">
<img src="" etc</div>

Bob *will be* your uncle and you won't
need a table for so simple a thing. You can do the same for an

<h1 style="as above but width in ems maybe to suit the actual
text>heading</h1>

and <p> and all sorts of other tags...

You can get this "inline style" (my style="" stuff) out by
simply making an external style sheet with classes or ids and in
the html page you put <H1class="myNicelyCentered">. But for now
just use inline as it will help you "lay things out" before you
learn to separate content from style better...

dorayme
 
D

dorayme

From: dorayme said:
Newsgroups: alt.html
Date: Tue, 13 Sep 2005 11:46:40 +1000
Subject: Re: css to replace frames

snip...


It strikes me that perhaps you are not sure about the way to
direct links from *within frames* so perhaps you were puzzled
when I said to put in your "home" and "next" links in the right
frame (of the simpler suggested arrangement of left nav frame
and right content one).

For your home page link do this: <a href="homepage.html"
target="_top">. This will open the home page in the whole
browser window. For your "next" link, do this: <a
href="photo9.html">next</a>. No need to target anything as the
default is to open it in the same frame that the link is in,
just what you want, the next pic will appear!

Of course you need to ensure that the number (or name) of the
target is correct for each page. The home will stay same, the
others are different for each page. But, as I said, there's not
much work for a few pics... On page one you will mention
"photo2.html" while on the latter you will mention "photo3.html"
etc. In fact, while you are at it, you can have a back link too.
Thus on page "photo14.html" you might have something like this:

<a href="photo13.html">previous</a>&nbsp;<a
href="photo15.html">next</a>

Or you can go a little bit fancier with a couple of tiny almost
nothing k arrows (couple of triangles orientated appropriately)
to replace the text links. Looks intuitive and smart. Solid
white triangles on your black bg...

dorayme
 
J

Jim Scott

snip...


It strikes me that perhaps you are not sure about the way to
direct links from *within frames* so perhaps you were puzzled
when I said to put in your "home" and "next" links in the right
frame (of the simpler suggested arrangement of left nav frame
and right content one).

For your home page link do this: <a href="homepage.html"
target="_top">. This will open the home page in the whole
browser window. For your "next" link, do this: <a
href="photo9.html">next</a>. No need to target anything as the
default is to open it in the same frame that the link is in,
just what you want, the next pic will appear!

Of course you need to ensure that the number (or name) of the
target is correct for each page. The home will stay same, the
others are different for each page. But, as I said, there's not
much work for a few pics... On page one you will mention
"photo2.html" while on the latter you will mention "photo3.html"
etc. In fact, while you are at it, you can have a back link too.
Thus on page "photo14.html" you might have something like this:

<a href="photo13.html">previous</a>&nbsp;<a
href="photo15.html">next</a>

Or you can go a little bit fancier with a couple of tiny almost
nothing k arrows (couple of triangles orientated appropriately)
to replace the text links. Looks intuitive and smart. Solid
white triangles on your black bg...

dorayme

Thanks.
I was doing that with my buttonised commands wasn't I? :eek:)
 
D

dorayme

From: Jim Scott said:
snip


Thanks.
I was doing that with my buttonised commands wasn't I? :eek:)

Fair enough. I guess I was a bit unsure about your difficulty
when you said earlier:

"The complication ... would appear to be that currently
the only thing that changes between pictures is the content of
the right hand frame and more importantly, perhaps, with it
changes the 'next' link which is on the same page. If the new
top right box remains static, not only does the contents of the
picture frame have to change, but so does the 'next' link above?

A simpler solution would be to add a 'home' button to the top
left of every page."

I did not see it as very complicated given the few pics you
had... so i was wondering what the problem was? Also, you
perhaps do rate the look of things differently to me? I think it
is a bit fiddly looking to have a a home button in a top frame
on the left above a left frame with a scrollbar that starts
under it...? and then a next button up on the top frame to the
right... and I have made suggestions to alter this. You have
also said you would have a positioning problem if you put these
links in the main content page and I made suggestions to address
this.

Just by the way, this may be idiosyncratic of me, but I think of
buttons as things that look like buttons, pics, images,
button-looking things. A link is a just a text link. But true,
it is sort of pressable and maybe you are more in touch with
most folks??

Anyway, best of luck to you...

dorayme
 
J

Jim Scott

Fair enough. I guess I was a bit unsure about your difficulty
when you said earlier:

"The complication ... would appear to be that currently
the only thing that changes between pictures is the content of
the right hand frame and more importantly, perhaps, with it
changes the 'next' link which is on the same page. If the new
top right box remains static, not only does the contents of the
picture frame have to change, but so does the 'next' link above?

A simpler solution would be to add a 'home' button to the top
left of every page."

I did not see it as very complicated given the few pics you
had... so i was wondering what the problem was? Also, you
perhaps do rate the look of things differently to me? I think it
is a bit fiddly looking to have a a home button in a top frame
on the left above a left frame with a scrollbar that starts
under it...? and then a next button up on the top frame to the
right... and I have made suggestions to alter this. You have
also said you would have a positioning problem if you put these
links in the main content page and I made suggestions to address
this.

Just by the way, this may be idiosyncratic of me, but I think of
buttons as things that look like buttons, pics, images,
button-looking things. A link is a just a text link. But true,
it is sort of pressable and maybe you are more in touch with
most folks??

Anyway, best of luck to you...

dorayme

Thanks again.
Sorry if there was confusion. My worry was adding buttons to a frame which
was not going to visibly change. Since you agree that another top 'pane' is
not a good idea, then the problem doesn't arise anyhow.
I have been the route of next-back-home buttons and didn't like the look.
Each to his own eh?
Mind you I am mortally wounded that you don't think my buttons look like
buttons. I am quite proud of them although the stylesheet came from someone
in this ng. :eek:)
 
J

Jim Scott

Can someone help or point me towards help in replacing the following page
which uses frames with one which uses a stylesheet instead.
http://freespace.virgin.net/mr.jimscott/Jimspics_frames.html

OK so that doesn't work.
I have since then tried to Validate my frames pages.
Using the frameset doctype I can validate them if I remove the 'border="0"'
and 'frameborder="0"' tags. The trouble then is that the borders show up on
the pages.
Is there a workround?
 
D

dorayme

From: Jim Scott said:
OK so that doesn't work.
I have since then tried to Validate my frames pages.
Using the frameset doctype I can validate them if I remove the 'border="0"'
and 'frameborder="0"' tags. The trouble then is that the borders show up on
the pages.
Is there a workround?


In case this helps for your problem and others you might have
(without knowing it):

This is the dtd I used at the top of a no border two col frames
page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

And this is the frameset:

<frameset cols="125,*">
<frame src="../navShade.html" name="navigation" scrolling="no"
frameborder="0">
<frame src="../shadeCatalog/beach/aussieBeach.html"
name="rightframe" frameborder="0">

<noframes> I also had a no-frames section. You should do this.
When you have looked this up and if you do not follow this
feature, ask again. If you can't be bothered, fine, just leave
this out.</noframes>

</frameset>

You will notice that I had no "border" anything, but did have a
"frameborder"
What is this target you have? Does not sound right at all. The
frameset specifies the frames, the frames specify the page.
Target is about links showing up....

If you simplify to 2 cols for your purposes, you will have
better control and it will be better for most people. I see you
are reluctant to do this though from previous conversation... if
you are unsure of your html, this is another good reason,
because it is simpler (see my example above).

Look I am dashing this off and won't stop to double check it...

dorayme
 

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,480
Members
44,900
Latest member
Nell636132

Latest Threads

Top