Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > cant use display:block for image replacement

Reply
Thread Tools

cant use display:block for image replacement

 
 
mark | r
Guest
Posts: n/a
 
      07-04-2005


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




 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      07-04-2005
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 vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
 
 
 
mark | r
Guest
Posts: n/a
 
      07-04-2005



"Els" <(E-Mail Removed)> wrote in message
news:1q7fumwte652p$.1ghz9pf3iu96p$(E-Mail Removed). ..
> 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 vo. 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




 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      07-04-2005
mark | r wrote:

>
>
>
> "Els" <(E-Mail Removed)> wrote in message
> news:1q7fumwte652p$.1ghz9pf3iu96p$(E-Mail Removed). ..
>> 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 vo. 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 vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
mark | r
Guest
Posts: n/a
 
      07-04-2005



"Els" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> mark | r wrote:
>
> >
> >
> >
> > "Els" <(E-Mail Removed)> wrote in message
> > news:1q7fumwte652p$.1ghz9pf3iu96p$(E-Mail Removed). ..
> >> 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 vo. 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 vo. 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




 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      07-04-2005
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 vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
mark | r
Guest
Posts: n/a
 
      07-04-2005



"Els" <(E-Mail Removed)> wrote in message
news:s7jl5z8gpcjv.m2djixz1cd2s$(E-Mail Removed)...
> 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 vo. O resto imperfeito.
> - Renato Russo -
>
>


http://www.mezzoblue.com/tests/revis...e-replacement/

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

mark




 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      07-04-2005
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.
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      07-04-2005
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

 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      07-04-2005
mark | r wrote:

>
>
>
> "Els" <(E-Mail Removed)> wrote in message
> news:s7jl5z8gpcjv.m2djixz1cd2s$(E-Mail Removed)...
>> 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/revis...e-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 vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Text Replacement in PDF Document & Stable PDF to Image Conversion sherazam Java 0 06-19-2012 11:46 AM
cant compile on linux system.cant compile on cant compile onlinux system. Nagaraj C++ 1 03-01-2007 11:18 AM
man i cant belive i cant get help please unclejesse01 DVD Video 2 04-14-2005 03:15 PM
Evans Image Replacement Dante Javascript 0 02-02-2004 12:43 AM
eXtensible Image Replacement Dante Javascript 3 12-09-2003 07:24 AM



Advertisments