PDA

View Full Version : Adding text to a jpg image



htims
Jan 22nd, 2009, 10:19 AM
Hi there,
I need to add a menu to a jpg image. How can I d do this?
At the moment I have the following:
<div id="header">
<!--start of top header-->
<ul>
<li class="firstitem"><a href="#">A-Z Services</a></li>
<li><a href="#">Useful Links</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="headerSection">

<img alt="Logo" src="header.jpg" />
</div>
<!-- end of HeaderSection-->
</div>

I want the list to appear in header.jpg at the top.
TIA

abduraooft
Jan 22nd, 2009, 11:23 AM
I need to add a menu to a jpg image. How can I d do this? You may need to add a background via CSS to your header instead of <img>, like

#header{
background:url(header.jpg) no-repeat top left;
}

htims
Jan 22nd, 2009, 08:29 PM
You may need to add a background via CSS to your header instead of <img>, like

#header{
background:url(header.jpg) no-repeat top left;
}

Now I don't see my image coding like this.
I have this in my html page:
<div id="header">
<!--start of top header-->
<ul>
<li class="firstitem"><a href="#">A-Z Services</a></li>
<li><a href="#">Useful Links</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

and this in my CSS:
#header

{
background:url(header.jpg) no-repeat top left;

border: solid 1px red;
color:white;
}

#header ul
{
margin: 0;
padding: 0;
}


#header ul li
{
list-style:none;
display:inline;
border-left:thin solid white;
padding: 0 7px 0 8px;
}
#header ul li a
{
color:white;

}

#header ul li.firstitem
{
padding-left: 0px;
border-left: medium none;
}

All I see is my menu, no image.

Excavator
Jan 22nd, 2009, 09:01 PM
Hello htims,


#header

{
background:url(header.jpg) no-repeat top left;

border: solid 1px red;
color:white;
}


That bit in red assumes header.jpg is in the same directory as your CSS file. If your CSS is attached, then it's assuming the same directory as your .html file.

Could be path to your header.jpg is something like ../images/header.jpg? Or similar.

htims
Jan 22nd, 2009, 09:13 PM
All files are in the same folder...

htims
Jan 22nd, 2009, 09:15 PM
I can see the image when I do this in the html document:
<img alt="Background Logo" src="header.jpg" />

BoldUlysses
Jan 22nd, 2009, 09:18 PM
Is your linked CSS file in the same folder as your HTML file and images? If it's up one level you'll need to call the background image like this:


{
background:url(../header.jpg) no-repeat top left;
}

or by using the full URL.

htims
Jan 22nd, 2009, 09:41 PM
All files are in the same folder. Could it be something to do with the size of the header? The image is bigger in height and width. Here is the relevant sections from my CSS and the HTML document. Maybe I'm trying to force something large(my image) into something small(my header) and it cannot validate.

/* COMMON */
body {
border:0;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
border-bottom: solid 1px grey;
font-size: 1.2em;
padding-bottom: 10px;
}

/* HEADER */
#header

{
background:url(header.jpg) no-repeat top left;

border: solid 1px red;
color:white;
}

#header ul
{
margin: 0;
padding: 0;
}


#header ul li
{
list-style:none;
display:inline;
border-left:thin solid white;
padding: 0 7px 0 8px;
}
#header ul li a
{
color:white;

}

#header ul li.firstitem
{
padding-left: 0px;
border-left: medium none;
}


HTML:
<div id="header">
<!--start of top header-->
<ul>
<li class="firstitem"><a href="#">A-Z Services</a></li>
<li><a href="#">Useful Links</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

jerry62704
Jan 22nd, 2009, 09:46 PM
Do you have a link so we can check it?

Excavator
Jan 23rd, 2009, 12:20 AM
Yes, a link. Image related questions lose a lot when we don't see the image.

Start using code tags when your posting code please. The # button will wrap your code in a scrolling box, it makes your posts a LOT more readable.