Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   cant use display:block for image replacement (http://www.velocityreviews.com/forums/t162172-cant-use-display-block-for-image-replacement.html)

mark | r 07-04-2005 09:53 AM

cant use display:block for image replacement
 


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





Els 07-04-2005 10:06 AM

Re: cant use display:block for image replacement
 
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 -

mark | r 07-04-2005 10:17 AM

Re: cant use display:block for image replacement
 



"Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:1q7fumwte652p$.1ghz9pf3iu96p$.dlg@40tude.net. ..
> 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





Els 07-04-2005 11:34 AM

Re: cant use display:block for image replacement
 
mark | r wrote:

>
>
>
> "Els" <els.aNOSPAM@tiscali.nl> wrote in message
> news:1q7fumwte652p$.1ghz9pf3iu96p$.dlg@40tude.net. ..
>> 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 -

mark | r 07-04-2005 12:51 PM

Re: cant use display:block for image replacement
 



"Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:1v9d4vqiqj5k5.4cqcl2mvcq40.dlg@40tude.net...
> mark | r wrote:
>
> >
> >
> >
> > "Els" <els.aNOSPAM@tiscali.nl> wrote in message
> > news:1q7fumwte652p$.1ghz9pf3iu96p$.dlg@40tude.net. ..
> >> 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





Els 07-04-2005 12:56 PM

Re: cant use display:block for image replacement
 
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 -

mark | r 07-04-2005 01:06 PM

Re: cant use display:block for image replacement
 



"Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:s7jl5z8gpcjv.m2djixz1cd2s$.dlg@40tude.net...
> 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





kchayka 07-04-2005 01:13 PM

Re: cant use display:block for image replacement
 
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.

Steve Pugh 07-04-2005 02:13 PM

Re: cant use display:block for image replacement
 
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


Els 07-04-2005 02:21 PM

Re: cant use display:block for image replacement
 
mark | r wrote:

>
>
>
> "Els" <els.aNOSPAM@tiscali.nl> wrote in message
> news:s7jl5z8gpcjv.m2djixz1cd2s$.dlg@40tude.net...
>> 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 -


All times are GMT. The time now is 04:15 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.