•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,913 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,702 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 3120 | Replies: 8
 |
•
•
Join Date: Jan 2007
Posts: 3
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
I have a template that I'm trying to customize. It has a left sidebanner div and image.
How do I get text to appear on top of the image? By making the image a background-image in CSS? By specifying z-index?
Your help is GREATLY appreciated
How do I get text to appear on top of the image? By making the image a background-image in CSS? By specifying z-index?
Your help is GREATLY appreciated
•
•
Join Date: Aug 2006
Posts: 17
Reputation:
Rep Power: 2
Solved Threads: 0
Newbie Poster
The best way is to put the image in as a background image using CSS.
Z-index requires that the image is Absolutely positioned which can cause other layout problems in different browsers.
HTH
Z-index requires that the image is Absolutely positioned which can cause other layout problems in different browsers.
HTH
•
•
Join Date: Jun 2007
Location: Killarney Vale, NSW
Posts: 10
Reputation:
Rep Power: 2
Solved Threads: 0
Newbie Poster
Hi all, I'm having a similar problem...
I have an image that I would like to be the background of a table cell so I can have text over it. I have given the cell a class referred to it in my style sheet, which reads:
td.banner {
background-image:url(../images/banner.jpg);
background-position:center;
background-repeat:no-repeat;
background:fixed;
}
The images are there in working mode, but when I preview in a browser, the images aren't there!
Can anyone tell me what's wrong?
I have an image that I would like to be the background of a table cell so I can have text over it. I have given the cell a class referred to it in my style sheet, which reads:
td.banner {
background-image:url(../images/banner.jpg);
background-position:center;
background-repeat:no-repeat;
background:fixed;
}
The images are there in working mode, but when I preview in a browser, the images aren't there!
Can anyone tell me what's wrong?
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
Not 100% certain you can put "background" in a TD... I know that it is also dodgey trying to colour a TD...
So you have two options.
1) Put a Div inside the TD and apply the BGIMG to that
2) Use full on selectors.... #TABLEID TR TD {} and see if that works.
To be honest... probably best going with (1)... and is the Table for content... or layout ?
So you have two options.
1) Put a Div inside the TD and apply the BGIMG to that
2) Use full on selectors.... #TABLEID TR TD {} and see if that works.
To be honest... probably best going with (1)... and is the Table for content... or layout ?
•
•
Join Date: Jan 2007
Posts: 2,510
Reputation:
Rep Power: 7
Solved Threads: 104
I have had no trouble coloring a td. A background should work in any box object.
But it must be a td and not a TD. CSS doesn't know what a TD is.
All relevant tage, styles, ids, classes, and selectors must be in lowercase for CSS to understand them.
Be aware that the cell will NOT expand to show the entire image. It shows only the portion which fits behind the contents.
But it must be a td and not a TD. CSS doesn't know what a TD is.
All relevant tage, styles, ids, classes, and selectors must be in lowercase for CSS to understand them.
Be aware that the cell will NOT expand to show the entire image. It shows only the portion which fits behind the contents.
Last edited by MidiMagic : Aug 7th, 2007 at 4:11 am.
Daylight-saving time uses more gasoline
•
•
Join Date: Jan 2007
Posts: 2,510
Reputation:
Rep Power: 7
Solved Threads: 104
Is there some reason I always have trouble posting at 4 am?
Last edited by MidiMagic : Aug 7th, 2007 at 4:08 am. Reason: The server locked up, and when I tried to free it, it posted twice.
Daylight-saving time uses more gasoline
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
... MidiMagic ...
The reason I mentioned it...
" being dodgey "
...is that some browsers aren't 100% on it, (i.e. some simply won't show it if it is the TD that is styled, rather than the TABLE TR / TABLE TD / TABLE TR TD or use of classes etc.).
Simply fore-warning them and trying to make sure they get the best result across browsers (ok, most modern ones are fine, but I know NN and some Opera's are iffy on it).
Also, can you please confirm about the UPPER/lowercase for CSS...
* I thought that you shouldn't use _ (underscore) due to some browsers not liking it (added for CSS2 after release) (NN was an issue).
* You shouldn't use a Numeric value at the begin (not due to CSS, but due to DocTypes).
* You can use UPPER/lower/MiXeD case in ID and CLASS, so long as the same is used in both the DOC and the CSS code, (but you are correct about things such as TABLE should be table (I think)), thus...
<div id="rabbitone"> #rabbitone
<div id="rabbitOne"> #rabbitOne
<div id="rabbit1"> #rabbit1
<div id="raBBitone"> #raBBitone
<div id="raBBit1"> #raBBit1
should work fine...
where as
<div id="Rabbitone"> #Rabbitone
<div id="rabbit_one"> #rabbit_one
<div id="rabbitone"> #RABBITONE
<div id="RABBITONE"> #rabbitone
shouldn't work (or won't work on all browsers!)
???
If you know of an official doc on this, please point it out, as for some reason I cannot actually find one... (which bugs me no end
)
The reason I mentioned it...
" being dodgey "
...is that some browsers aren't 100% on it, (i.e. some simply won't show it if it is the TD that is styled, rather than the TABLE TR / TABLE TD / TABLE TR TD or use of classes etc.).
Simply fore-warning them and trying to make sure they get the best result across browsers (ok, most modern ones are fine, but I know NN and some Opera's are iffy on it).
Also, can you please confirm about the UPPER/lowercase for CSS...
* I thought that you shouldn't use _ (underscore) due to some browsers not liking it (added for CSS2 after release) (NN was an issue).
* You shouldn't use a Numeric value at the begin (not due to CSS, but due to DocTypes).
* You can use UPPER/lower/MiXeD case in ID and CLASS, so long as the same is used in both the DOC and the CSS code, (but you are correct about things such as TABLE should be table (I think)), thus...
<div id="rabbitone"> #rabbitone
<div id="rabbitOne"> #rabbitOne
<div id="rabbit1"> #rabbit1
<div id="raBBitone"> #raBBitone
<div id="raBBit1"> #raBBit1
should work fine...
where as
<div id="Rabbitone"> #Rabbitone
<div id="rabbit_one"> #rabbit_one
<div id="rabbitone"> #RABBITONE
<div id="RABBITONE"> #rabbitone
shouldn't work (or won't work on all browsers!)
???
If you know of an official doc on this, please point it out, as for some reason I cannot actually find one... (which bugs me no end
) •
•
Join Date: Jan 2007
Posts: 2,510
Reputation:
Rep Power: 7
Solved Threads: 104
•
•
•
•
Originally Posted by autocrat 
... MidiMagic ...
Also, can you please confirm about the UPPER/lowercase for CSS...
* I thought that you shouldn't use _ (underscore) due to some browsers not liking it (added for CSS2 after release) (NN was an issue).
True. Use letters and numbers for classes and ids for max compatibility. The first character must be a letter.
•
•
•
•
* You shouldn't use a Numeric value at the begin (not due to CSS, but due to DocTypes).
Correct.
•
•
•
•
* You can use UPPER/lower/MiXeD case in ID and CLASS, so long as the same is used in both the DOC and the CSS code, (but you are correct about things such as TABLE should be table (I think)), thus...
<div id="rabbitone"> #rabbitone <div id="rabbitOne"> #rabbitOne <div id="raBBitone"> #raBBitone
----
•
•
•
•
<div id="rabbit1"> #rabbit1 <div id="raBBit1"> #raBBit1
These become the same id in IE.
----
•
•
•
•
should work fine...
where as
<div id="Rabbitone"> #Rabbitone
That one works as long as the smash-case duplicate ID is not present.
----
•
•
•
•
shouldn't work (or won't work on all browsers!)<div id="rabbit_one"> #rabbit_one <div id="rabbitone"> #RABBITONE <div id="RABBITONE"> #rabbitone
The first one has an illegal character on some Doctypes.
The last two become the same id in IE, and dont address in Mozilla (or address as each other).
???
•
•
•
•
If you know of an official doc on this, please point it out, as for some reason I cannot actually find one... (which bugs me no end
XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)
Last edited by MidiMagic : Aug 9th, 2007 at 12:14 am.
Daylight-saving time uses more gasoline
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
- CSS - strech a background image? (Site Layout and Usability)
- background image alignment (HTML and CSS)
- Dreamweaver background image refresh (Graphics and Multimedia)
- background image - help (HTML and CSS)
- problem with background image repeat-y (HTML and CSS)
- Background image flickers in IE.... (JavaScript / DHTML / AJAX)
Other Threads in the HTML and CSS Forum
- Previous Thread: Problems on IE6
- Next Thread: Graphic Text containers that stretch
