Hey well i have the image which ive attached what i want is so that it will be full at 1024*786 but i want it to cut off or disappear at 800*600 so that there is no scroll bar.
I hope you get what i mean and any help is appreciated.
=========================================
EDIT: Its in a content div so it will be acting as a header if that helps any.
Cheers
Chris SharkeyIt's all done with the backgrounds.
And don't use a div for a header when you can use a header for a header.Hi -
Well, you may think it's a bad 'cheat', but how about doing the reverse? Make the header img fit the smaller screen, but give the div a black background, so that when the screen size is larger, the black fills where the image doesn't.
Maybe you'll get some better tips soon!
ElSorry for my lack of clarity i have a content div with the header inside of it
Anyway lavalamp it wont let me Download that zip with mox or ie.
any ideas mate thanks for the help everyone so far.Ah i fixed it but ill share since im generous -well i had <h2><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/contenthead.jpg"</h2> dont add the image inline add it as an background using a class or id with a full 100% width if that makes sense. Seemed to work for me.
Cheers everyone
Since the image is not content, there is no need for an image tag. I've uploaded again, hopefully it will work this time.Nope still not working but all is fixed now anyway.
Cheers again.If you're using an image tag then I'm afraid all is not fixed.
<!-- m --><a class="postlink" href="http://www.quiterude.com/david/sharkey/BlankX.htmlOriginally">http://www.quiterude.com/david/sharkey/ ... Originally</a><!-- m --> posted by lavalamp
If you're using an image tag then I'm afraid all is not fixed.
what is wrong w/ using an image tag? are u just saying for this instance? cause if not im confused
also, in what u are showing him, u are telling him to use two <span> which seems like too much, just have one span w/ background: url("") no-repeat; overflow: hidden;
just seems cleaner to me.Since the image's purpose is to replace content, it would make more sense to have the actual content in the page and then ad the image in over the top with CSS.
Yeah I agree that two spans is a bit much, it could be reduced to just one by using a top-border and a hack for IE.
<!-- m --><a class="postlink" href="http://www.quiterude.com/david/sharkey/BlankX2.htmlWhich">http://www.quiterude.com/david/sharkey/ ... .htmlWhich</a><!-- m --> is worse, though? An <img> tag or an empty, hence meaningless, <span> tag?<img>I don't know, in this case where you have to use an empty element to creat the affect, I think a <img> would be better than an empty tag, but that's just me.Don't use images to replace content, simple as that. Have you not heard of all the different types of image replacement? This type is called Shea Image Replacement and it's the best one of the lot, yeah there's an empty span tag, but it's the best alternative.
<!-- m --><a class="postlink" href="http://www.mezzoblue.com/tests/revised-image-replacement/#sheaSometimes">http://www.mezzoblue.com/tests/revised- ... aSometimes</a><!-- m --> the ALT tag is extremely useful. And as FIR techniques per se are not 100% effective.
Best Wishes,
DavidGuys im just using an <h2> with a class to give it a background image i thought the header would have been semantically the best but maybe not. I was using the <img/> tag inside the header at the start but this was causing it not to work properly.The <h2> is the best option, but the <img /> tag is not. Alt text is only there so that if the image doesn't show there's something to read. If you use Shea Image Reaplcement then it will work for everybody.
If images are disabled the text shows through.
If CSS is disabled the text is there.
Search engines can index your page better because you have text in your source rather than an <img />.
Braille displays and screen readers can read through you're page with the greatest of ease.
The only flaw is 1 empty <span> tag, but that doesn't do any harm.Ahh now i get you cheers lavalamp i'll going adjust it for the image replacement.
Thanks mateHappy to help.Here's a stumper for the FIR technique. Look at this site (<!-- m --><a class="postlink" href="http://spikedude.hollosite.com/">http://spikedude.hollosite.com/</a><!-- m -->) (I actually redid that site with CSS/semantic markup, but you'll have to deal with looking at this version for my question). If you look at the very top of the sidebar, you'll see an image that says "Navigation" and "Folder 1". It's only 13px high. How would you go about using FIR to replace that? I could redo the graphic, but I'm not at liberty to do so. Is it possible to FIR that image without redoing it?Yeah of course it's possible, why wouldn't it be possible?
But not FIR by the way, SIR. Shea Image replacement is where it's at now.Originally posted by lavalamp
Yeah of course it's possible, why wouldn't it be possible?
You wanna take a stab at it? I can upload the XHTML/CSS/some images, but the header is 56K, so you'll have to get that from the page. I tried it myself, and the text pops up under the image unless you make it small, then there's no point in SIR/FIRing it.
Originally posted by lavalamp
But not FIR by the way, SIR. Shea Image replacement is where it's at now.
Lol, okay, okay. I knew it was one of 'em.So where exactly have you uploaded to? And you know there's a 100K limit right? You could just zip everything and upload it all.Originally posted by lavalamp
So where exactly have you uploaded to?
Nowhere yet.
Originally posted by lavalamp
And you know there's a 100K limit right?
I knew there was a limit, I just didn't know what that limit was.
Originally posted by lavalamp
You could just zip everything and upload it all.
I was planning on doing that.
Note, I was able to successfully SIR the image by editing it and increasing it's height. I doubt there's any other way to do it.
On a sidenote: quite embarrassing, I must say; my converted file is larger than the original tabled-frontpaged file.This works:#side-bar h2 {
padding-left: 5px;
margin: 0;
height: 13px;
position: relative;
overflow:hidden;
}
#side-bar h2 span {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background:url(../images/nav.gif) no-repeat;
}Also, what's with all of the isolated definition lists and then more lists inside the <dl>? Just have a setup like this:<dl>
<dt>Lorem</dt>
<dd>Lorem - Link 1</dd>
<dd>Lorem - Link 2</dd>
<dd>Lorem - Link 3</dd>
<dt>Ipsum</dt>
<dd>Ipsum - Link 1</dd>
<dd>Ipsum - Link 2</dd>
<dd>Ipsum - Link 3</dd>
</dl>Originally posted by lavalamp
This works:#side-bar h2 {
padding-left: 5px;
margin: 0;
height: 13px;
position: relative;
overflow:hidden;
}
#side-bar h2 span {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background:url(../images/nav.gif) no-repeat;
}
Are you sure? I could've sworn I had just about the same thing, but the problem is that the text pokes out under the image.
Originally posted by lavalamp
Also, what's with all of the isolated definition lists and then more lists inside the <dl>? Just have a setup like this:<dl>
<dt>Lorem</dt>
<dd>Lorem - Link 1</dd>
<dd>Lorem - Link 2</dd>
<dd>Lorem - Link 3</dd>
<dt>Ipsum</dt>
<dd>Ipsum - Link 1</dd>
<dd>Ipsum - Link 2</dd>
<dd>Ipsum - Link 3</dd>
</dl>
I felt it was more appropriate, semantically, that way. Maybe it's just my phobia of using more than one <dd>… I've never used more than one…
I just thought it was wrong.There's nothing wrong with multiple <dd>. Think of it as a dictionary. A <dl> is a dictionary (Definition List). You have words, which are <dt> (Definition Terms) And the defintions are <dd> (Definition Description). Like a word can have multiple descriptions, a <dt> can have multiple descriptions (<dd>).Originally posted by MstrBob
There's nothing wrong with multiple <dd>. Think of it as a dictionary. A <dl> is a dictionary (Definition List). You have words, which are <dt> (Definition Terms) And the defintions are <dd> (Definition Description). Like a word can have multiple descriptions, a <dt> can have multiple descriptions (<dd>).
True. But I thought it better, since the unordered list of links as a whole is the “definitionâ€Â. *Shrug* It just seems more semantic to me. I know where y'all are comin' from, but I'm just not seein' it.Well, definition lists are different from ordered/unordered lists. There made to hold terms and their definition(s). Remember that the internet was first a means of exchanging information for scientific types. Defintion lists would be quite handy with all the scientific jargon. And of course, there are many, many words with more than one definition (description). So it'd be more correct to have multiple <dd>, IMO, than to have a <ul> as one <dd>.Originally posted by MstrBob
Well, definition lists are different from ordered/unordered lists. There made to hold terms and their definition(s). Remember that the internet was first a means of exchanging information for scientific types. Defintion lists would be quite handy with all the scientific jargon. And of course, there are many, many words with more than one definition (description). So it'd be more correct to have multiple <dd>, IMO, than to have a <ul> as one <dd>.
All right, all right; you all have worn me down! I'll give it a try in a bit.Originally posted by Paul Jr
Are you sure? I could've sworn I had just about the same thing, but the problem is that the text pokes out under the image.overflow:hidden; my man.
It would have the effect of hiding the bottom of the text if the image didn't show, but I'm sure people can work out what it says.
I hope you get what i mean and any help is appreciated.
=========================================
EDIT: Its in a content div so it will be acting as a header if that helps any.
Cheers
Chris SharkeyIt's all done with the backgrounds.
And don't use a div for a header when you can use a header for a header.Hi -
Well, you may think it's a bad 'cheat', but how about doing the reverse? Make the header img fit the smaller screen, but give the div a black background, so that when the screen size is larger, the black fills where the image doesn't.
Maybe you'll get some better tips soon!
ElSorry for my lack of clarity i have a content div with the header inside of it
Anyway lavalamp it wont let me Download that zip with mox or ie. any ideas mate thanks for the help everyone so far.Ah i fixed it but ill share since im generous -well i had <h2><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/contenthead.jpg"</h2> dont add the image inline add it as an background using a class or id with a full 100% width if that makes sense. Seemed to work for me.
Cheers everyone
Since the image is not content, there is no need for an image tag. I've uploaded again, hopefully it will work this time.Nope still not working but all is fixed now anyway.Cheers again.If you're using an image tag then I'm afraid all is not fixed.
<!-- m --><a class="postlink" href="http://www.quiterude.com/david/sharkey/BlankX.htmlOriginally">http://www.quiterude.com/david/sharkey/ ... Originally</a><!-- m --> posted by lavalamp
If you're using an image tag then I'm afraid all is not fixed.
what is wrong w/ using an image tag? are u just saying for this instance? cause if not im confused
also, in what u are showing him, u are telling him to use two <span> which seems like too much, just have one span w/ background: url("") no-repeat; overflow: hidden;
just seems cleaner to me.Since the image's purpose is to replace content, it would make more sense to have the actual content in the page and then ad the image in over the top with CSS.
Yeah I agree that two spans is a bit much, it could be reduced to just one by using a top-border and a hack for IE.
<!-- m --><a class="postlink" href="http://www.quiterude.com/david/sharkey/BlankX2.htmlWhich">http://www.quiterude.com/david/sharkey/ ... .htmlWhich</a><!-- m --> is worse, though? An <img> tag or an empty, hence meaningless, <span> tag?<img>I don't know, in this case where you have to use an empty element to creat the affect, I think a <img> would be better than an empty tag, but that's just me.Don't use images to replace content, simple as that. Have you not heard of all the different types of image replacement? This type is called Shea Image Replacement and it's the best one of the lot, yeah there's an empty span tag, but it's the best alternative.
<!-- m --><a class="postlink" href="http://www.mezzoblue.com/tests/revised-image-replacement/#sheaSometimes">http://www.mezzoblue.com/tests/revised- ... aSometimes</a><!-- m --> the ALT tag is extremely useful. And as FIR techniques per se are not 100% effective.
Best Wishes,
DavidGuys im just using an <h2> with a class to give it a background image i thought the header would have been semantically the best but maybe not. I was using the <img/> tag inside the header at the start but this was causing it not to work properly.The <h2> is the best option, but the <img /> tag is not. Alt text is only there so that if the image doesn't show there's something to read. If you use Shea Image Reaplcement then it will work for everybody.
If images are disabled the text shows through.
If CSS is disabled the text is there.
Search engines can index your page better because you have text in your source rather than an <img />.
Braille displays and screen readers can read through you're page with the greatest of ease.
The only flaw is 1 empty <span> tag, but that doesn't do any harm.Ahh now i get you cheers lavalamp i'll going adjust it for the image replacement.
Thanks mateHappy to help.
Here's a stumper for the FIR technique. Look at this site (<!-- m --><a class="postlink" href="http://spikedude.hollosite.com/">http://spikedude.hollosite.com/</a><!-- m -->) (I actually redid that site with CSS/semantic markup, but you'll have to deal with looking at this version for my question). If you look at the very top of the sidebar, you'll see an image that says "Navigation" and "Folder 1". It's only 13px high. How would you go about using FIR to replace that? I could redo the graphic, but I'm not at liberty to do so. Is it possible to FIR that image without redoing it?Yeah of course it's possible, why wouldn't it be possible?But not FIR by the way, SIR. Shea Image replacement is where it's at now.
Originally posted by lavalamp Yeah of course it's possible, why wouldn't it be possible?
You wanna take a stab at it? I can upload the XHTML/CSS/some images, but the header is 56K, so you'll have to get that from the page. I tried it myself, and the text pops up under the image unless you make it small, then there's no point in SIR/FIRing it.
Originally posted by lavalamp
But not FIR by the way, SIR. Shea Image replacement is where it's at now.
Lol, okay, okay. I knew it was one of 'em.
So where exactly have you uploaded to? And you know there's a 100K limit right? You could just zip everything and upload it all.Originally posted by lavalamp So where exactly have you uploaded to?
Nowhere yet.
Originally posted by lavalamp
And you know there's a 100K limit right?
I knew there was a limit, I just didn't know what that limit was.
Originally posted by lavalamp
You could just zip everything and upload it all.
I was planning on doing that.
Note, I was able to successfully SIR the image by editing it and increasing it's height. I doubt there's any other way to do it.
On a sidenote: quite embarrassing, I must say; my converted file is larger than the original tabled-frontpaged file.This works:#side-bar h2 {
padding-left: 5px;
margin: 0;
height: 13px;
position: relative;
overflow:hidden;
}
#side-bar h2 span {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background:url(../images/nav.gif) no-repeat;
}Also, what's with all of the isolated definition lists and then more lists inside the <dl>? Just have a setup like this:<dl>
<dt>Lorem</dt>
<dd>Lorem - Link 1</dd>
<dd>Lorem - Link 2</dd>
<dd>Lorem - Link 3</dd>
<dt>Ipsum</dt>
<dd>Ipsum - Link 1</dd>
<dd>Ipsum - Link 2</dd>
<dd>Ipsum - Link 3</dd>
</dl>Originally posted by lavalamp
This works:#side-bar h2 {
padding-left: 5px;
margin: 0;
height: 13px;
position: relative;
overflow:hidden;
}
#side-bar h2 span {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background:url(../images/nav.gif) no-repeat;
}
Are you sure? I could've sworn I had just about the same thing, but the problem is that the text pokes out under the image.
Originally posted by lavalamp
Also, what's with all of the isolated definition lists and then more lists inside the <dl>? Just have a setup like this:<dl>
<dt>Lorem</dt>
<dd>Lorem - Link 1</dd>
<dd>Lorem - Link 2</dd>
<dd>Lorem - Link 3</dd>
<dt>Ipsum</dt>
<dd>Ipsum - Link 1</dd>
<dd>Ipsum - Link 2</dd>
<dd>Ipsum - Link 3</dd>
</dl>
I felt it was more appropriate, semantically, that way. Maybe it's just my phobia of using more than one <dd>… I've never used more than one…
I just thought it was wrong.There's nothing wrong with multiple <dd>. Think of it as a dictionary. A <dl> is a dictionary (Definition List). You have words, which are <dt> (Definition Terms) And the defintions are <dd> (Definition Description). Like a word can have multiple descriptions, a <dt> can have multiple descriptions (<dd>).Originally posted by MstrBob There's nothing wrong with multiple <dd>. Think of it as a dictionary. A <dl> is a dictionary (Definition List). You have words, which are <dt> (Definition Terms) And the defintions are <dd> (Definition Description). Like a word can have multiple descriptions, a <dt> can have multiple descriptions (<dd>).
True. But I thought it better, since the unordered list of links as a whole is the “definitionâ€Â. *Shrug* It just seems more semantic to me. I know where y'all are comin' from, but I'm just not seein' it.Well, definition lists are different from ordered/unordered lists. There made to hold terms and their definition(s). Remember that the internet was first a means of exchanging information for scientific types. Defintion lists would be quite handy with all the scientific jargon. And of course, there are many, many words with more than one definition (description). So it'd be more correct to have multiple <dd>, IMO, than to have a <ul> as one <dd>.Originally posted by MstrBob
Well, definition lists are different from ordered/unordered lists. There made to hold terms and their definition(s). Remember that the internet was first a means of exchanging information for scientific types. Defintion lists would be quite handy with all the scientific jargon. And of course, there are many, many words with more than one definition (description). So it'd be more correct to have multiple <dd>, IMO, than to have a <ul> as one <dd>.
All right, all right; you all have worn me down! I'll give it a try in a bit.
Originally posted by Paul Jr Are you sure? I could've sworn I had just about the same thing, but the problem is that the text pokes out under the image.overflow:hidden; my man.
It would have the effect of hiding the bottom of the text if the image didn't show, but I'm sure people can work out what it says.