Re: Using CSS

Tech Tip: Click here to run a free scan for Windows Errors and optimize PC performance

<div id="bmlogo" style="position:absolute; bottom:-29px; right:8px;">
<a href="somepage.htm"><img src="images/piccy.gif" width="149"
height="131" alt="logo"></a>
</div>
Tested, and works in Firefox and IE6.
The image is positioned at the bottom right corner of the page
content, (this is not necessarily the bottom right corner of the
browser window), if the page is too long for the browser window it
will not appear until the bottom of the page scrolls into view.

I prefer bottom:-10px in the positioning - adjust to suit your design.

The div's style can be placed in your main style *** and removed
from the page HTML.

#bmlogo {position:absolute; bottom:-29px; right:8px;}

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/


"peebs" <peebs@xxxxxxxxxxxxxxxxxxxxxxxxx> wrote in message
news:58AA5C0E-F67A-419E-BD8F-20235CF6FF37@xxxxxxxxxxxxxxxx
> OK Guys,
> This is what I have in the htm page
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html>
> <head>
> <title>BIBLIOTHÈQUE DE LA PIERRE ANGULAIRE</title>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
> <meta http-equiv="imagetoolbar" content="no">
> <link rel="style***" TYPE="text/css" HREF="new_page_1.css">
>
> </head>
>
> <body>
> <img src="images/Menu_image_anim2.gif" style="position: absolute;
right: 8;
> bottom:
> -26; width:149px; height:131px">
>
> </body>
>
> </html>
>
>
> This is what I have in the CSS
>
> body
> {
> background-image:url(images/PA_backgroundWM.JPG);
> background-repeat: no-repeat;
> background-attachment: fixed;
>
>
> }
>
> I have cleaned out the other parts of both files for clarity.
> If I run the htm page I get my background image full screen no
scroll and I
> get my logo image initially in the lower right corner BUT it scrolls
with the
> page AND I don't seem able to get a link on it. In my original
design
> clicking on the logo image brought up a window with the site
navigation menu.
> Many thanks for your interest,
>
> --
> peebs
>
>
> "Kevin Spencer" wrote:
>
> > It should be on the right of the page, sticking down past the
bottom by 26
> > pixels, and it should remain there.
> >
> > --
> > HTH,
> >
> > Kevin Spencer
> > Microsoft MVP
> > ..Net Developer
> > You can lead a fish to a bicycle,
> > but it takes a very long time,
> > and the bicycle has to *want* to change.
> >
> > "peebs" <peebs@xxxxxxxxxxxxxxxxxxxxxxxxx> wrote in message
> > news:BBE1362B-3C18-493D-A3D4-49E0F75583B3@xxxxxxxxxxxxxxxx
> > > Hi Murrey,
> > > I want to keep the layout so I think that I will forget trying
to put the
> > > logo image in the CSS. I can make it work by adding
> > >
> > > "background-image:url(images/PA_backgroundWM.JPG);
> > > background-repeat: no-repeat;
> > > background-attachment: fixed;"
> > >
> > > in the CSS and using a script for the logo image in each htm
page. That
> > > works fine - I just thought that i could clean it up a bit if i
could find
> > > a
> > > way to put it all in the CSS.
> > > I thought that I could do away with using a long script by using
> > >
> > > "<img src="images/Menu_image_anim2.gif" style="position:
absolute; right:
> > > 8;
> > > bottom: -26; width:149px; height:131px">"
> > >
> > > in the .htm page. Although it put the image in the lower left
corner it
> > > wasn't fixed and scrolled. I also could not get a link attached
to it so
> > > it
> > > is back to my original ideas - unless you have any other ideas
............
> > > Regards,
> > >
> > >
> > > --
> > > peebs
> > >
> > >
> > > "Murray" wrote:
> > >
> > >> It won't.
> > >>
> > >> Kevin has his finger on the problem.
> > >>
> > >> To make something reliably sit in the bottom right hand corner,
it must
> > >> be a
> > >> background image - then you can use CSS to style it with
> > >> background-position:bottom right. That'll work fine.
> > >>
> > >> The problem is that other background image. Since you have
already used
> > >> up
> > >> the page background image, anything else will be ON TOP of it.
> > >>
> > >> OK - so you could make the big image the page background image
and then
> > >> put
> > >> a table on the page with the logo as the background in the
bottom right -
> > >> but that's no good since you cannot force the table to fill the
height of
> > >> the browser viewport *and* render the page in standards mode.
In my
> > >> opinion, losing the latter is a great tragedy, and not worth
the benefit
> > >> of
> > >> the former.
> > >>
> > >> So - I would be inclined to rethink this layout plan. How
about you?
> > >>
> > >> --
> > >> Murray
> > >> ============
> > >>
> > >> "peebs" <peebs@xxxxxxxxxxxxxxxxxxxxxxxxx> wrote in message
> > >> news:6DF32063-1A6D-480C-B19B-BF672CFB98C8@xxxxxxxxxxxxxxxx
> > >> > Thanks Kevin,
> > >> > As I said, I am new to CSS and obviously have a lot to learn.
I will
> > >> > look
> > >> > into DWTs to see if that will do the trick.
> > >> > --
> > >> > peebs
> > >> >
> > >> >
> > >> > "Kevin Spencer" wrote:
> > >> >
> > >> >> Hi peebs,
> > >> >>
> > >> >> The problem here is that the CSS can only refer to something
that
> > >> >> already
> > >> >> exists in the page. The page itself is an HTML document,
represented
> > >> >> by
> > >> >> the
> > >> >> region between the <body> and </body> tags in the page. You
are
> > >> >> applying
> > >> >> a
> > >> >> style to that document. To apply a style to anything, it
must be *in*
> > >> >> the
> > >> >> page. Perhaps you could use a Dynamic Web Template with the
image in
> > >> >> it,
> > >> >> and
> > >> >> apply that to all of your pages.
> > >> >>
> > >> >> --
> > >> >> HTH,
> > >> >>
> > >> >> Kevin Spencer
> > >> >> Microsoft MVP
> > >> >> ..Net Developer
> > >> >> You can lead a fish to a bicycle,
> > >> >> but it takes a very long time,
> > >> >> and the bicycle has to *want* to change.
> > >> >>
> > >> >> "peebs" <peebs@xxxxxxxxxxxxxxxxxxxxxxxxx> wrote in message
> > >> >> news:6DDA6262-F13E-428B-92B8-C5349B90CFF7@xxxxxxxxxxxxxxxx
> > >> >> > Hi Kevin,
> > >> >> > My earlier post may be misleading. I can put your idea in
the .htm
> > >> >> > page
> > >> >> > and
> > >> >> > it works oK but i was trying to get everything into one
place in a
> > >> >> > CSS
> > >> >> > so
> > >> >> > that any changes could be more easily controlled. Putting
the full
> > >> >> > screen
> > >> >> > b/g
> > >> >> > image into the CSS and the logo image into the .htm is
what I am
> > >> >> > doing
> > >> >> > at
> > >> >> > the
> > >> >> > moment - I just wanted to combine the processes.
> > >> >> > Many thanks,
> > >> >> >
> > >> >> > --
> > >> >> > peebs
> > >> >> >
> > >> >> >
> > >> >> > "Kevin Spencer" wrote:
> > >> >> >
> > >> >> >> Hi peebs,
> > >> >> >>
> > >> >> >> This could be done, I believe, by using the background
image as the
> > >> >> >> background image, and the fixed logo image using CSS to
position
> > >> >> >> it.
> > >> >> >> Example:
> > >> >> >>
> > >> >> >> <img src="chutney(large).gif" style="position: absolute;
right: 0;
> > >> >> >> bottom:
> > >> >> >> 0">
> > >> >> >>
> > >> >> >> --
> > >> >> >> HTH,
> > >> >> >>
> > >> >> >> Kevin Spencer
> > >> >> >> Microsoft MVP
> > >> >> >> ..Net Developer
> > >> >> >> You can lead a fish to a bicycle,
> > >> >> >> but it takes a very long time,
> > >> >> >> and the bicycle has to *want* to change.
> > >> >> >>
> > >> >> >> "peebs" <peebs@xxxxxxxxxxxxxxxxxxxxxxxxx> wrote in
message
> > >> >> >>
news:E57E4AFA-71A9-4B88-9119-ED2E49E1A99B@xxxxxxxxxxxxxxxx
> > >> >> >> > Thanks for the quick reply Murray.
> > >> >> >> > I gathered that there was a problems trying to put 2
b/g images
> > >> >> >> > on
> > >> >> >> > one
> > >> >> >> > page!!
> > >> >> >> > I can't link you because it is not published yet.
> > >> >> >> > What i have done is to put the full screen background
image -
> > >> >> >> > no-repeat,
> > >> >> >> > fixed in the CSS and put a fixed logo (one of DD's
static logo
> > >> >> >> > scripts)
> > >> >> >> > in
> > >> >> >> > the HTM page.
> > >> >> >> > This works fine but I was trying to put a fixed logo in
the CSS
> > >> >> >> > file
> > >> >> >> > so
> > >> >> >> > that
> > >> >> >> > I had it all in one place as, like the background
image, it
> > >> >> >> > appears
> > >> >> >> > on
> > >> >> >> > each
> > >> >> >> > page. I thought also that I could get around using a
script.
> > >> >> >> > I may not be making much sense - but as i said, i am
new to CSS
> > >> >> >> > and
> > >> >> >> > FP
> > >> >> >> > for
> > >> >> >> > that matter!!
> > >> >> >> > In short, I want a full screen JPG image in the
background with a
> > >> >> >> > animated
> > >> >> >> > .GIF image fixed (non scroll) in the lower rh corner. I
want this
> > >> >> >> > arrangement
> > >> >> >> > to appear on each page along with the data specific to
each page.
> > >> >> >> > Best regards,
> > >> >> >> > --
> > >> >> >> > peebs
> > >> >> >> >
> > >> >> >> >
> > >> >> >> > "Murray" wrote:
> > >> >> >> >
> > >> >> >> >> > but it doesn't work
> > >> >> >> >>
> > >> >> >> >> You cannot have two background images on the same
element.
> > >> >> >> >>
> > >> >> >> >> > I ca nmake it
> > >> >> >> >> > work putting the full screen background image in the
CSS and
> > >> >> >> >> > the
> > >> >> >> >> > bottom
> > >> >> >> >> > corner logo in each .HTM page
> > >> >> >> >>
> > >> >> >> >> What?
> > >> >> >> >>
> > >> >> >> >> Why not post a link to the page so I can see what you
are trying
> > >> >> >> >> to
> > >> >> >> >> do?
> > >> >> >> >>
> > >> >> >> >> --
> > >> >> >> >> Murray
> > >> >> >> >> ============
> > >> >> >> >>
> > >> >> >> >> "peebs" <peebs@xxxxxxxxxxxxxxxxxxxxxxxxx> wrote in
message
> > >> >> >> >>
news:DEA45999-D7E3-4698-B3A5-37525A3CD8E9@xxxxxxxxxxxxxxxx
> > >> >> >> >> >I am just starting to look into CSS.
> > >> >> >> >> > I have used a css *** to add a fixed background
image to the
> > >> >> >> >> > related
> > >> >> >> >> > .HTL
> > >> >> >> >> > using
> > >> >> >> >> > background fixed, no-repeat etc.
> > >> >> >> >> > I now want to add another graphic on top of the
existing
> > >> >> >> >> > background
> > >> >> >> >> > image
> > >> >> >> >> > and locate it fixed at the bottom right corner.
> > >> >> >> >> > I thought that I could simply call a second
background image
> > >> >> >> >> > and
> > >> >> >> >> > locate
> > >> >> >> >> > it
> > >> >> >> >> > in the bottom LH corner but it doesn't work - I
simply get
> > >> >> >> >> > either
> > >> >> >> >> > the
> > >> >> >> >> > full
> > >> >> >> >> > screen background image OR the small logo image in
the bottom
> > >> >> >> >> > corner
> > >> >> >> >> > depending on the order in the CSS. I want these two
images to
> > >> >> >> >> > feature
> > >> >> >> >> > on
> > >> >> >> >> > all
> > >> >> >> >> > pages of the site and I thought that I could do it
with CSS. I
> > >> >> >> >> > ca
> > >> >> >> >> > nmake
> > >> >> >> >> > it
> > >> >> >> >> > work putting the full screen background image in the
CSS and
> > >> >> >> >> > the
> > >> >> >> >> > bottom
> > >> >> >> >> > corner logo in each .HTM page but I was hoping to
simplify
> > >> >> >> >> > things.
> > >> >> >> >> > Any advice will be greatly appeciated.
> > >> >> >> >> > Thank,--
> > >> >> >> >> > peebs
> > >> >> >> >>
> > >> >> >> >>
> > >> >> >> >>
> > >> >> >>
> > >> >> >>
> > >> >> >>
> > >> >>
> > >> >>
> > >> >>
> > >>
> > >>
> > >>
> >
> >
> >


.

Quantcast