cant use display:block for image replacement

Discussion in 'HTML' started by mark | r, Jul 4, 2005.

  1. mark | r

    mark | r Guest

    im using an image replacement technique which would normally be:

    h1{display:block;width:100px;height:200px;overflow:hidden}
    h1
    span{display:inline;width:100px;height:200px;top:0;left:0;background:url(ima
    ge.gif)}

    only im using display inline for my H1 see www.iosilver.co.uk/test/ the logo
    image wants to be replaced.

    anyone know a work around?

    Mark
     
    mark | r, Jul 4, 2005
    #1
    1. Advertising

  2. mark | r

    Els Guest

    mark | r wrote:

    >
    >
    > im using an image replacement technique which would normally be:
    >
    > h1{display:block;width:100px;height:200px;overflow:hidden}
    > h1
    > span{display:inline;width:100px;height:200px;top:0;left:0;background:url(ima
    > ge.gif)}
    >
    > only im using display inline for my H1 see www.iosilver.co.uk/test/ the logo
    > image wants to be replaced.
    >
    > anyone know a work around?


    Only if I'd understand the question.
    In that test page I see an <h1><img src=....></h1>.
    No span. What is the effect you are after?

    What do you mean by 'the logo image wants to be replaced'?

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 4, 2005
    #2
    1. Advertising

  3. mark | r

    mark | r Guest

    "Els" <> wrote in message
    news:1q7fumwte652p$.1ghz9pf3iu96p$...
    > mark | r wrote:
    >
    > >
    > >
    > > im using an image replacement technique which would normally be:
    > >
    > > h1{display:block;width:100px;height:200px;overflow:hidden}
    > > h1
    > >

    span{display:inline;width:100px;height:200px;top:0;left:0;background:url(ima
    > > ge.gif)}
    > >
    > > only im using display inline for my H1 see www.iosilver.co.uk/test/ the

    logo
    > > image wants to be replaced.
    > >
    > > anyone know a work around?

    >
    > Only if I'd understand the question.
    > In that test page I see an <h1><img src=....></h1>.
    > No span. What is the effect you are after?
    >
    > What do you mean by 'the logo image wants to be replaced'?
    >
    > --
    > Els http://locusmeus.com/
    > Sonhos vem. Sonhos vão. O resto é imperfeito.
    > - Renato Russo -
    >
    >

    Ive dropped the image into the H1 for now so i can see the site how its
    intended to be displayed - the img src is to be replacd with "Io Silver
    Jewellery <span></span>"

    mark
     
    mark | r, Jul 4, 2005
    #3
  4. mark | r

    Els Guest

    mark | r wrote:

    >
    >
    >
    > "Els" <> wrote in message
    > news:1q7fumwte652p$.1ghz9pf3iu96p$...
    >> mark | r wrote:
    >>
    >>>
    >>>
    >>> im using an image replacement technique which would normally be:
    >>>
    >>> h1{display:block;width:100px;height:200px;overflow:hidden}
    >>> h1
    >>>

    > span{display:inline;width:100px;height:200px;top:0;left:0;background:url(ima
    >>> ge.gif)}
    >>>
    >>> only im using display inline for my H1 see www.iosilver.co.uk/test/ the

    > logo
    >>> image wants to be replaced.
    >>>
    >>> anyone know a work around?

    >>
    >> Only if I'd understand the question.
    >> In that test page I see an <h1><img src=....></h1>.
    >> No span. What is the effect you are after?
    >>
    >> What do you mean by 'the logo image wants to be replaced'?
    >>
    >> --
    >> Els http://locusmeus.com/
    >> Sonhos vem. Sonhos vão. O resto é imperfeito.
    >> - Renato Russo -
    >>
    >>

    > Ive dropped the image into the H1 for now so i can see the site how its
    > intended to be displayed - the img src is to be replacd with "Io Silver
    > Jewellery <span></span>"


    So.. guessing what you want:
    the <h1> element to have no content, and show the image by using it as
    a background image for <h1>? So.. what do you want the span for?

    Or, from your last comment:
    the html to read <h1>Io Silver Jewellery <span></span></h1>, where the
    span is to show an image as background?
    Do you want the 'Io Silver Jewellery' to show as text to the left of
    the image?

    Assuming that is what you want to accomplish, this could be your code:

    <h1>Io Silver Jewellery</h1>

    CSS:
    h1{
    width:[required width including image];
    padding-right:[width of image];
    background-image:url([url of image]);
    background-position:right center;
    background-repeat:no-repeat;
    min-height:[height of image];
    }
    /* IE only, except IE-Mac \*/
    * html h1{height:[height of image];}
    /* end of Mac-IE hide */

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 4, 2005
    #4
  5. mark | r

    mark | r Guest

    "Els" <> wrote in message
    news:...
    > mark | r wrote:
    >
    > >
    > >
    > >
    > > "Els" <> wrote in message
    > > news:1q7fumwte652p$.1ghz9pf3iu96p$...
    > >> mark | r wrote:
    > >>
    > >>>
    > >>>
    > >>> im using an image replacement technique which would normally be:
    > >>>
    > >>> h1{display:block;width:100px;height:200px;overflow:hidden}
    > >>> h1
    > >>>

    > >

    span{display:inline;width:100px;height:200px;top:0;left:0;background:url(ima
    > >>> ge.gif)}
    > >>>
    > >>> only im using display inline for my H1 see www.iosilver.co.uk/test/

    the
    > > logo
    > >>> image wants to be replaced.
    > >>>
    > >>> anyone know a work around?
    > >>
    > >> Only if I'd understand the question.
    > >> In that test page I see an <h1><img src=....></h1>.
    > >> No span. What is the effect you are after?
    > >>
    > >> What do you mean by 'the logo image wants to be replaced'?
    > >>
    > >> --
    > >> Els http://locusmeus.com/
    > >> Sonhos vem. Sonhos vão. O resto é imperfeito.
    > >> - Renato Russo -
    > >>
    > >>

    > > Ive dropped the image into the H1 for now so i can see the site how its
    > > intended to be displayed - the img src is to be replacd with "Io Silver
    > > Jewellery <span></span>"

    >
    > So.. guessing what you want:
    > the <h1> element to have no content, and show the image by using it as
    > a background image for <h1>? So.. what do you want the span for?
    >
    > Or, from your last comment:
    > the html to read <h1>Io Silver Jewellery <span></span></h1>, where the
    > span is to show an image as background?
    > Do you want the 'Io Silver Jewellery' to show as text to the left of
    > the image?
    >
    > Assuming that is what you want to accomplish, this could be your code:
    >
    > <h1>Io Silver Jewellery</h1>
    >
    > CSS:
    > h1{
    > width:[required width including image];
    > padding-right:[width of image];
    > background-image:url([url of image]);
    > background-position:right center;
    > background-repeat:no-repeat;
    > min-height:[height of image];
    > }
    > /* IE only, except IE-Mac \*/
    > * html h1{height:[height of image];}
    > /* end of Mac-IE hide */
    >
    > --
    > Els http://locusmeus.com/
    > Sonhos vem. Sonhos vão. O resto é imperfeito.
    > - Renato Russo -
    >
    >


    i want the h1 to have content that is underneath an expanded spanwhich
    covers the text and displays an image as a background graphic.so if you turn
    graphics on and off you either get the logo graphic, or some h1 text.

    its a commonly used technique in CSS design.

    Mark
     
    mark | r, Jul 4, 2005
    #5
  6. mark | r

    Els Guest

    mark | r wrote:

    > i want the h1 to have content that is underneath an expanded spanwhich
    > covers the text and displays an image as a background graphic.so if you turn
    > graphics on and off you either get the logo graphic, or some h1 text.
    >
    > its a commonly used technique in CSS design.


    I think you misunderstood this technique.

    It's actually done like this:

    <h1><img src="image.jpg" alt="Io Silver Jewellery"></h1>

    And when anyone turns off images, the alt text does get displayed as
    if it were directly in the <h1>.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 4, 2005
    #6
  7. mark | r

    mark | r Guest

    "Els" <> wrote in message
    news:s7jl5z8gpcjv.m2djixz1cd2s$...
    > mark | r wrote:
    >
    > > i want the h1 to have content that is underneath an expanded spanwhich
    > > covers the text and displays an image as a background graphic.so if you

    turn
    > > graphics on and off you either get the logo graphic, or some h1 text.
    > >
    > > its a commonly used technique in CSS design.

    >
    > I think you misunderstood this technique.
    >
    > It's actually done like this:
    >
    > <h1><img src="image.jpg" alt="Io Silver Jewellery"></h1>
    >
    > And when anyone turns off images, the alt text does get displayed as
    > if it were directly in the <h1>.
    >
    > --
    > Els http://locusmeus.com/
    > Sonhos vem. Sonhos vão. O resto é imperfeito.
    > - Renato Russo -
    >
    >


    http://www.mezzoblue.com/tests/revised-image-replacement/

    shows loads of example of these techniques, the only one i know to be
    completeley accessible is the one using spans!

    mark
     
    mark | r, Jul 4, 2005
    #7
  8. mark | r

    kchayka Guest

    mark | r wrote:
    >
    > im using an image replacement technique which would normally be:
    >
    > h1{display:block;width:100px;height:200px;overflow:hidden}
    > h1
    > span{display:inline;width:100px;height:200px;top:0;left:0;background:url(ima
    > ge.gif)}


    The width and height properties do not apply to inline elements, so your
    span rules don't give the desired results, except in broken browsers.

    <URL:http://www.mezzoblue.com/tests/revised-image-replacement/>

    The Gilder/Levin method is less bad than most, as it can still be usable
    when image loading is disabled, providing the image doesn't use
    transparency.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Jul 4, 2005
    #8
  9. mark | r

    Steve Pugh Guest

    kchayka wrote:
    >
    > <URL:http://www.mezzoblue.com/tests/revised-image-replacement/>
    >
    > The Gilder/Levin method is less bad than most, as it can still be usable
    > when image loading is disabled, providing the image doesn't use
    > transparency.


    .... and provided that the user's font size is small enough to keep the
    text version smaller than the image version, otherwise it spills out
    from underneath.

    Steve
     
    Steve Pugh, Jul 4, 2005
    #9
  10. mark | r

    Els Guest

    mark | r wrote:

    >
    >
    >
    > "Els" <> wrote in message
    > news:s7jl5z8gpcjv.m2djixz1cd2s$...
    >> mark | r wrote:
    >>
    >>> i want the h1 to have content that is underneath an expanded spanwhich
    >>> covers the text and displays an image as a background graphic.so if you

    > turn
    >>> graphics on and off you either get the logo graphic, or some h1 text.
    >>>
    >>> its a commonly used technique in CSS design.

    >>
    >> I think you misunderstood this technique.
    >>
    >> It's actually done like this:
    >>
    >> <h1><img src="image.jpg" alt="Io Silver Jewellery"></h1>
    >>
    >> And when anyone turns off images, the alt text does get displayed as
    >> if it were directly in the <h1>.

    >
    > http://www.mezzoblue.com/tests/revised-image-replacement/


    Must say I never saw that technique before, actually...

    > shows loads of example of these techniques, the only one i know to be
    > completeley accessible is the one using spans!


    In which situation wouldn't the regular alt text be displayed when the
    image is absent?

    Also, what Steve says seems a valid reason for me not to use that
    technique.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 4, 2005
    #10
  11. mark | r

    mark | r Guest

    "Els" <> wrote in message
    news:v9ignkzrp7yy$.1l3m7py6elef0$...
    > mark | r wrote:
    >
    > >
    > >
    > >
    > > "Els" <> wrote in message
    > > news:s7jl5z8gpcjv.m2djixz1cd2s$...
    > >> mark | r wrote:
    > >>
    > >>> i want the h1 to have content that is underneath an expanded spanwhich
    > >>> covers the text and displays an image as a background graphic.so if

    you
    > > turn
    > >>> graphics on and off you either get the logo graphic, or some h1 text.
    > >>>
    > >>> its a commonly used technique in CSS design.
    > >>
    > >> I think you misunderstood this technique.
    > >>
    > >> It's actually done like this:
    > >>
    > >> <h1><img src="image.jpg" alt="Io Silver Jewellery"></h1>
    > >>
    > >> And when anyone turns off images, the alt text does get displayed as
    > >> if it were directly in the <h1>.

    > >
    > > http://www.mezzoblue.com/tests/revised-image-replacement/

    >
    > Must say I never saw that technique before, actually...
    >
    > > shows loads of example of these techniques, the only one i know to be
    > > completeley accessible is the one using spans!

    >
    > In which situation wouldn't the regular alt text be displayed when the
    > image is absent?
    >
    > Also, what Steve says seems a valid reason for me not to use that
    > technique.
    >
    > --
    > Els http://locusmeus.com/
    > Sonhos vem. Sonhos vão. O resto é imperfeito.
    > - Renato Russo -
    >
    >

    Because search engines dont categorise Alt text in a h1 as H1 text

    mark
     
    mark | r, Jul 4, 2005
    #11
  12. mark | r

    Els Guest

    mark | r wrote:

    >>>> <h1><img src="image.jpg" alt="Io Silver Jewellery"></h1>
    >>>>
    >>>> And when anyone turns off images, the alt text does get displayed as
    >>>> if it were directly in the <h1>.
    >>>
    >>> http://www.mezzoblue.com/tests/revised-image-replacement/

    >>
    >> Must say I never saw that technique before, actually...
    >>
    >>> shows loads of example of these techniques, the only one i know to be
    >>> completeley accessible is the one using spans!

    >>
    >> In which situation wouldn't the regular alt text be displayed when the
    >> image is absent?

    >
    > Because search engines dont categorise Alt text in a h1 as H1 text


    Which shows I'm better at CSS than at SEO :S

    Oh well, it's one more reason to not apply <h1> to what I usually code
    as <div id="logo">. I use <h1> for the page title, which never is an
    image in my book.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 4, 2005
    #12
  13. mark | r

    Adrienne Guest

    Gazing into my crystal ball I observed Els <> writing
    in news::

    > mark | r wrote:
    >
    >>>>> <h1><img src="image.jpg" alt="Io Silver Jewellery"></h1>
    >>>>>
    >>>>> And when anyone turns off images, the alt text does get displayed as
    >>>>> if it were directly in the <h1>.
    >>>>
    >>>> http://www.mezzoblue.com/tests/revised-image-replacement/
    >>>
    >>> Must say I never saw that technique before, actually...
    >>>
    >>>> shows loads of example of these techniques, the only one i know to be
    >>>> completeley accessible is the one using spans!
    >>>
    >>> In which situation wouldn't the regular alt text be displayed when the
    >>> image is absent?

    >>
    >> Because search engines dont categorise Alt text in a h1 as H1 text

    >
    > Which shows I'm better at CSS than at SEO :S
    >
    > Oh well, it's one more reason to not apply <h1> to what I usually code
    > as <div id="logo">. I use <h1> for the page title, which never is an
    > image in my book.
    >


    Google _might_ look at it if it were a link. You could try:
    <a href="#heading"><img src="logo.png" alt="" title="Heading Text"
    id="heading"></a>

    Then style it to not appear as a link.

    But, as Els says, headings should be text, not images. There are probably
    other SEO issues with H1 images, like should a SE shows H1s in the SERPS,
    how would it display an image?
    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne, Jul 4, 2005
    #13
    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. Showjumper
    Replies:
    2
    Views:
    2,378
    Showjumper
    Jul 22, 2003
  2. dee
    Replies:
    2
    Views:
    1,496
  3. Bruce Barker
    Replies:
    0
    Views:
    509
    Bruce Barker
    Nov 2, 2005
  4. morrell
    Replies:
    1
    Views:
    975
    roy axenov
    Oct 10, 2006
  5. Nagaraj
    Replies:
    1
    Views:
    890
    Lionel B
    Mar 1, 2007
Loading...

Share This Page