CSS - multiple images

Discussion in 'HTML' started by mal_k100@hotmail.com, Sep 30, 2005.

  1. Guest

    I have checked a few posts and found that this is not strickly possible
    so I could do with some practical advice please...
    I am using a style for my heading on a help system
    <style>
    H1 {color: black; font-size: 150%;border: ridge; text-align: center;
    background: url("myrightlogo.gif") lightyellow right no-repeat; }
    </style>
    In practice I am imorting from a .css file but the values work either
    way.

    All works fine but what I really would like is to have a left and a
    right logo. It has to be in the style sheet as all the HTML files have
    a consistent look and feel that may change (other than the text).

    So what I want is..
    Logo1 (with transparency to show the backgroung color) MUST be a fixed
    width as the logo cannot change when the HTML screen is resized

    Background color (with the text from the H1 in the HTML page)

    Logo2 (with transparency to show the backgroung color) MUST be a fixed
    width as the logo cannot change when the HTML screen is resized)

    It sort of seems as though what I might need is a 3 column table with
    the first and third having fixed widths so that the logo cannot change
    in size - also the heading must not change either. That is the one
    problem I have with my current one in that if the screen is narrowed
    too far, the logo overwrites the text on the heading. This is not too
    important though, as noone would really narrow it that much in practice
    as nothing would be readable.

    So...any ideas ... can I somehow put an H1 in the style and tell it
    that it must be a 3 column table ?

    Anyother ideas would be great. One thing...no changes to the HTML as it
    is already written and there are too many screen to change and I want
    to keep flexibility.

    Thanks
     
    , Sep 30, 2005
    #1
    1. Advertising

  2. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > I have checked a few posts and found that this is not strickly possible
    > so I could do with some practical advice please...
    > I am using a style for my heading on a help system
    > <style>
    > H1 {color: black; font-size: 150%;border: ridge; text-align: center;
    > background: url("myrightlogo.gif") lightyellow right no-repeat; }
    > </style>
    > In practice I am imorting from a .css file but the values work either
    > way.
    >
    > All works fine but what I really would like is to have a left and a
    > right logo. It has to be in the style sheet as all the HTML files have
    > a consistent look and feel that may change (other than the text).
    >
    > So what I want is..
    > Logo1 (with transparency to show the backgroung color) MUST be a fixed
    > width as the logo cannot change when the HTML screen is resized
    >
    > Background color (with the text from the H1 in the HTML page)
    >
    > Logo2 (with transparency to show the backgroung color) MUST be a fixed
    > width as the logo cannot change when the HTML screen is resized)
    >
    > It sort of seems as though what I might need is a 3 column table with
    > the first and third having fixed widths so that the logo cannot change
    > in size - also the heading must not change either. That is the one
    > problem I have with my current one in that if the screen is narrowed
    > too far, the logo overwrites the text on the heading. This is not too
    > important though, as noone would really narrow it that much in practice
    > as nothing would be readable.
    >
    > So...any ideas ... can I somehow put an H1 in the style and tell it
    > that it must be a 3 column table ?
    >
    > Anyother ideas would be great. One thing...no changes to the HTML as it
    > is already written and there are too many screen to change and I want
    > to keep flexibility.


    What you want is impossible without altering the html.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Sep 30, 2005
    #2
    1. Advertising

  3. Guest

    Well thanks anyway -

    I bit the bullet, changed the .css and set it up as a box with a left
    middle and right, so at least I avoided having to use a table !
    Just meant going quickly through the .htm files to paste a few <div
    lines in

    Cheers

    Neredbojias wrote:
    > With neither quill nor qualm, quothed:
    >
    > > I have checked a few posts and found that this is not strickly possible
    > > so I could do with some practical advice please...
    > > I am using a style for my heading on a help system
    > > <style>
    > > H1 {color: black; font-size: 150%;border: ridge; text-align: center;
    > > background: url("myrightlogo.gif") lightyellow right no-repeat; }
    > > </style>
    > > In practice I am imorting from a .css file but the values work either
    > > way.
    > >
    > > All works fine but what I really would like is to have a left and a
    > > right logo. It has to be in the style sheet as all the HTML files have
    > > a consistent look and feel that may change (other than the text).
    > >
    > > So what I want is..
    > > Logo1 (with transparency to show the backgroung color) MUST be a fixed
    > > width as the logo cannot change when the HTML screen is resized
    > >
    > > Background color (with the text from the H1 in the HTML page)
    > >
    > > Logo2 (with transparency to show the backgroung color) MUST be a fixed
    > > width as the logo cannot change when the HTML screen is resized)
    > >
    > > It sort of seems as though what I might need is a 3 column table with
    > > the first and third having fixed widths so that the logo cannot change
    > > in size - also the heading must not change either. That is the one
    > > problem I have with my current one in that if the screen is narrowed
    > > too far, the logo overwrites the text on the heading. This is not too
    > > important though, as noone would really narrow it that much in practice
    > > as nothing would be readable.
    > >
    > > So...any ideas ... can I somehow put an H1 in the style and tell it
    > > that it must be a 3 column table ?
    > >
    > > Anyother ideas would be great. One thing...no changes to the HTML as it
    > > is already written and there are too many screen to change and I want
    > > to keep flexibility.

    >
    > What you want is impossible without altering the html.
    >
    > --
    > Neredbojias
    > Contrary to popular belief, it is believable.
     
    , Oct 3, 2005
    #3
  4. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > Well thanks anyway -
    >
    > I bit the bullet, changed the .css and set it up as a box with a left
    > middle and right, so at least I avoided having to use a table !
    > Just meant going quickly through the .htm files to paste a few <div
    > lines in
    >
    > Cheers


    Well, for what it's worth, I think you did the optimal thing. You do
    know that if you have identical areas in the html itself, you can use
    server-side utilities such as php to generate multiple pages.

    Best o' luck.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Oct 3, 2005
    #4
  5. Guest

    All done now, although I have posted a 'can I do it without frames'.
    I can't use Server Side due to the place it is going to so has to be
    pure client HTML/CSS
    Oh - the solution I used, if anyone wants it (it can be extended to do
    all sorts) was ....

    Style.css

    ..line {border: ridge;
    display: block;
    position: relative;
    background: lightyellow;
    color: black;
    text-align: center;
    line-height: 23px;
    height: 23px;
    width: 23em;
    margin: 0 auto 2ex auto;
    padding: 0;
    }
    ..line p {display: inline; margin: 0;padding: 0;line-height: 23px;
    font-family: arial; font-weight: bold; }
    ..line .l, .line .r {width: 37px;height: 23px;position: absolute;top:
    0;}
    ..line .l { left: 0; background-image: url(LeftLogo.gif); }
    ..line .r { right: 0; background-image: url(RightLogo.gif); }


    My.html
    <snip>
    ..
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
    </HEAD>
    <BODY>
    <div class = "line">
    <div class="l"> </div>
    <p>My Heading Line</p>
    <div class="r"> </div>
    </div>
    ..
    ..
    <etc.>
     
    , Oct 6, 2005
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest
    Replies:
    4
    Views:
    919
    Eliyahu Goldin
    Jan 4, 2005
  2. Luis Esteban Valencia Muñoz
    Replies:
    0
    Views:
    789
    Luis Esteban Valencia Muñoz
    Jun 3, 2005
  3. wardemon

    Cache Images vs Static Images

    wardemon, Jun 14, 2007, in forum: ASP .Net
    Replies:
    3
    Views:
    671
    bruce barker
    Jun 14, 2007
  4. Keith Hughitt
    Replies:
    6
    Views:
    1,080
  5. MISS CHIEVOUS
    Replies:
    51
    Views:
    2,102
    MISS CHIEVOUS
    Apr 19, 2009
Loading...

Share This Page