Forum Moderators: not2easy
I'm not at all fluent in css but am trying to learn it. The text I am trying to place over the image is in the <div></div>. Can anyone please point out what I am doing wrong with this code?
<body>
<div>
<div STYLE="position:absolute; top:60px; left: 130px;">
<a href="link1.html">Link1</a>
<a href="link2.html">Link2</a>
<a href="link3.html">Link3</a>
<a href="link4.html">Link4</a>
</div>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="800" align="center">
<tr>
<td>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%">
<tr>
<td align="center">Title Goes Here</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div>
</body>
It would help to know the doctype you are using and the relevant CSS. Otherwise, the best way to do this (IMHO) is to set the image as a background in the <div> you have the text/links in.
Marshall
<div style="position: relative;">
<img src="logo.jpg" alt="">
<div style="position: absolute; left: 100px; top: 20px;">
Text to place over the logo
</div>
</div>
For starters, you say that your div is centered, but I do not see how that is possible, based on the current code given. Left:130 offsets it 130pixels to the right, but that does not center it if either the text size is increased, or if the window size is increased.
Another thing is you say your site is HTML 4.01 transitional, but you should really copy and paste what you wrote, because the reason for asking doctype is not only to know what doctype you are trying to go for, but also to know if you posted a FULL doctype which includes the link to the DTD (and also as a minor thing, if there's any typos).
As people have pointed out already, you want text over an image, but you don't tell us anything about this so-called image. Where it is, or if it's a background image or not. Using a background image for the div would probably be the best idea to get what you want.
CSS and HTML go hand in hand. You cannot have applicable CSS without HTML, and without using depreciated and/or non-semantic code, [styled] HTML (which accounts for virtually all HTML) cannot be done without CSS. As such, you should include all the relevantCSS code you used, as well as the relevant HTML. I noticed the inline CSS you included on the page (for the absolute positioning), but was that it? If so, then you also probably didn't include enough relevant HTML because there is no IMG tag around.
When it comes to testing a page while designing, the best thing to do would be to design based on a compliant browser like Opera or Firefox first (although since Firefox is more widely used, that may be the better choice if you only choose one), and THEN add fixes for Internet Explorer's quirky rendering bugs. Also note that IE6 and IE7 have some DIFFERENT rendering bugs, which can be annoying.
