trying to position text in a div that contains a background image

[pushyr]

hi, im new to coding without tables and i'm having difficulty getting text to position exactly where i want it over an image.

i've set the image as a background image and when i set my top 20px and right 50px padding ...the top padding moves the image down in a broken sort of way, and the right padding doesn't work at all. what am i doing wrong? Is there another approach to doing this?

here's my code...

#header { 
font-family: Arial, Helvetica, sans-serif; 
color: #666666; 
font-size: 10px; 
margin-top:0px;
width:986px;
height: 129px;
text-align:right;
padding-top:20px;
padding-right:50px;
border: 0px;
margin-left:0em;
background-image: url(../images/00_hbf/body02_r1_c1.gif);
background-repeat: no-repeat;
background-color:#C0DAE6; 
	  
}


<div id="header">
About | Careers | Contact Us
</div>

 

[BillyRayPreachersSon]

Investigate "background-position", e.g:

background-position: top right;

or

background-position: 20px 5px;

Hope this helps,
Dan


Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[pushyr]

no, that just moves the background image. i don't want the background image to move.. i just want the text to move exactly where i want to position it over the image

 

[pushyr]

hi,

solved it by using position: relative on the image and position: absolute on the text.

 

[Vragabond]

I would suggest you try to make your original idea to work, with a few modifications.

I would put the menu in a list -- because it is a list of links. I would then use paddings or margins to position that list within the header. I would also add a separate background to the list itself, so that it does not break completely if the rendering is not quite as you expected it (bigger font size, background image failing to load...). This way you can better control the situation across various browsers and events. And get to avoid the absolute positioning, which sometimes in the long run brings more problems than solutions.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[pushyr]

hi vragabond, i tried to use pading and margins in my original idea but that just moved the image. can you show me an example of what you mean?

 

[Vragabond]

Like I said, something like:

<div id="header">
 <ul>
  <li>About</li><li>Careers</li><li>Contact Us</li>
 </ul> 
</div>

Header should have roughly the same code, and ul should be matching the background of the header where it is supposed to be, along with the margin values that correspond to the position of the menu in the header.


___________________________________________________________
[small]Do something about world cancer today: PACT[/small]