hi,
i am creating a page where i have placed the image using pixel co-ordinates eg.
<style>
#menubar{position: absolute; right:10px; top:10px}
</style>
i need some text over this image, how do i do this, at present the image is in front of the text. you set a z-index don't you?
the img src is in the body with the following code:
<div id="menubar">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/menubar3.jpg"
</div>
and the text is in a table cell with the following code:
<table width="760">
<tr>
<td align="right" valign="middle">
<br>
<br>
<div id="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Index.htm">
Home
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"AboutUs.htm">
About Us
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Services.htm">
Services
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"RecentJobs.htm">
View Recent Jobs
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Contact.htm">
Contact Us
</a>
</div>
<br>
<br>
<br>
</td>
</tr>
</table>
thanksMaybe there's an official answer on this somewhere, but it's my experience that anything you place with position: absolute will be on TOP of 'normal' block-level elements.
So the best option, given what you're trying to do, is to set the image as the background of the menu (since that's what it is, anyways), and then have the text of the menu lose in the div:
<style>
#menubar {
position: absolute;
right: 10px;
top: 10px;
background: url(images/menubar3.jpg);
}
#menubar ul { list-style: none; }
#menubar li { text-align: right; }
</style>
<div id="menubar">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 4</a></li>
</ul>
</div>
A table is unnecessary for the menu -- you can a style a list however you need to.the best way to do this is to use the image as a background in an element be it div or ul or whatever and put the text in there. For example,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<STYLE TYPE="text/css">
#menubar li {
background: url("./images/menubar3.jpg") left no-repeat
}
</STYLE>
</head>
<body>
<ul id="menubar">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 4</a></li>
</ul>
</body>
</html>
I dont know exactly where you are wanting to put the image behind text so i just gave an example. In the example above you will have the same image behind each link. If you have any further questions on clarification ask
glbasically what i want to do is put 4 links in front of 1 image, if i specify the image as a background then the image doesnt place exactly where i want it to.
eg. as a background within a table cell, thats why i am using pixel co-ordinates
if i set the z-index at 1 for the image and the
z-index for the 1st link at 2 then it works, but i can't set the rest of the links at 2 as they all then go outside the image all together and stack on top of each other, hope this makes sense, if it doesn't then just disregard this last paragraph!Have you tried
<td background="images/menubar3.jpg">
for that table cellWow that's like exactly what everyone else has been suggesting except not as good.
Can't you put it as the background of the div and work out the spacing with the margin of the ul?Originally posted by dennic
basically what i want to do is put 4 links in front of 1 image, if i specify the image as a background then the image doesnt place exactly where i want it to.
still not exactly sure what you are trying to do, sry. so im going to throw out some general information that may be able to help you. When you assign background: you have different things you can change of the background and these include: background-color, background-image, background-repeat, background-attachment, and background-position. These are all explain in further detail at w3.org (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">http://www.w3.org/TR/CSS21/colors.html# ... background</a><!-- m -->). The main part you should look at is the background-position (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">http://www.w3.org/TR/CSS21/colors.html# ... d-position</a><!-- m -->) . You can state exactly where you want the background to be aligned from. Hope this helps you some.
Also, if you want to draw in paint or whatever what you are trying to do then i may be able to help you with how to do it exactly
just attach it to a post if you want to. tc&gl
i am creating a page where i have placed the image using pixel co-ordinates eg.
<style>
#menubar{position: absolute; right:10px; top:10px}
</style>
i need some text over this image, how do i do this, at present the image is in front of the text. you set a z-index don't you?
the img src is in the body with the following code:
<div id="menubar">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/menubar3.jpg"
</div>
and the text is in a table cell with the following code:
<table width="760">
<tr>
<td align="right" valign="middle">
<br>
<br>
<div id="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Index.htm">
Home
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"AboutUs.htm">
About Us
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Services.htm">
Services
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"RecentJobs.htm">
View Recent Jobs
</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Contact.htm">
Contact Us
</a>
</div>
<br>
<br>
<br>
</td>
</tr>
</table>
thanksMaybe there's an official answer on this somewhere, but it's my experience that anything you place with position: absolute will be on TOP of 'normal' block-level elements.
So the best option, given what you're trying to do, is to set the image as the background of the menu (since that's what it is, anyways), and then have the text of the menu lose in the div:
<style>
#menubar {
position: absolute;
right: 10px;
top: 10px;
background: url(images/menubar3.jpg);
}
#menubar ul { list-style: none; }
#menubar li { text-align: right; }
</style>
<div id="menubar">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 4</a></li>
</ul>
</div>
A table is unnecessary for the menu -- you can a style a list however you need to.the best way to do this is to use the image as a background in an element be it div or ul or whatever and put the text in there. For example,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<STYLE TYPE="text/css">
#menubar li {
background: url("./images/menubar3.jpg") left no-repeat
}
</STYLE>
</head>
<body>
<ul id="menubar">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 4</a></li>
</ul>
</body>
</html>
I dont know exactly where you are wanting to put the image behind text so i just gave an example. In the example above you will have the same image behind each link. If you have any further questions on clarification ask
glbasically what i want to do is put 4 links in front of 1 image, if i specify the image as a background then the image doesnt place exactly where i want it to.eg. as a background within a table cell, thats why i am using pixel co-ordinates
if i set the z-index at 1 for the image and the
z-index for the 1st link at 2 then it works, but i can't set the rest of the links at 2 as they all then go outside the image all together and stack on top of each other, hope this makes sense, if it doesn't then just disregard this last paragraph!Have you tried
<td background="images/menubar3.jpg">
for that table cellWow that's like exactly what everyone else has been suggesting except not as good.
Can't you put it as the background of the div and work out the spacing with the margin of the ul?Originally posted by dennic
basically what i want to do is put 4 links in front of 1 image, if i specify the image as a background then the image doesnt place exactly where i want it to.
still not exactly sure what you are trying to do, sry. so im going to throw out some general information that may be able to help you. When you assign background: you have different things you can change of the background and these include: background-color, background-image, background-repeat, background-attachment, and background-position. These are all explain in further detail at w3.org (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">http://www.w3.org/TR/CSS21/colors.html# ... background</a><!-- m -->). The main part you should look at is the background-position (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">http://www.w3.org/TR/CSS21/colors.html# ... d-position</a><!-- m -->) . You can state exactly where you want the background to be aligned from. Hope this helps you some.
Also, if you want to draw in paint or whatever what you are trying to do then i may be able to help you with how to do it exactly
just attach it to a post if you want to. tc&gl