PDA

View Full Version : text directly on top of an image



lavvylav349
Oct 4th, 2009, 03:34 PM
I'm trying to place two headings on top of an image ( not above).
Thank you!
Here's what I'm starting with:

<html>
<body style="background-color:LightGoldenRodYellow;">

<h1 style="text-align:center">BEACH</h1>
<br>
<h1 style="text-align:center">DESIGN</h1>

<img border="0" src="C:\Documents and Settings\Mark\My Documents\My Pictures\2005_08_21\IMG_0222.JPG"
width="1000" height="500" />

</body>
</html>

abduraooft
Oct 4th, 2009, 03:44 PM
Can't you set it as a background image (http://www.w3schools.com/css/pr_background-image.asp)?

PS: It's better to use relative paths in web (by saving the files in adjacent directories), for the benefit of cross browsers support.

lavvylav349
Oct 4th, 2009, 04:30 PM
Yes, but I thought that a background image would cover the entire web page. I just want the image to be a portion of the page, near the top. Please give an example of an adjacent web directory.
Thank you.

abduraooft
Oct 4th, 2009, 04:38 PM
You could wrap those two required tags inside a <div> and set the background on it.

Please give an example of an adjacent web directory. If you save your html and image in the same directory (and add the styles in the same html page ), you don't need need to specify any directory path. If you save the images inside a folder name images under the directly where your html is saved, then you need to specify the path as images/name-of-file.jpg

lavvylav349
Oct 4th, 2009, 05:00 PM
I understand wrapping the two headings inside <div>, and placing the image in the same folder as the html document. But I need help with the coding to place them on top of each other. Am I still going to be using an image, or am I going to have to change to a background?

<html>
<body style="background-color:LightGoldenRodYellow;">

<div>
<h1 style="text-align:center">BEACH</h1>
<br>
<h1 style="text-align:center">DESIGN</h1>
</div>

<img border="0" src="IMG_0226.JPG"
width="1000" height="500" />

</body>
</html>

abduraooft
Oct 4th, 2009, 05:14 PM
Am I still going to be using an image, or am I going to have to change to a background?
A background image. I have given a link in my first post, for getting sample usage.

lavvylav349
Oct 4th, 2009, 05:33 PM
The code I've included ends up using the image as the entire background. I want to use the image as only a portion of the page near the top.

<html>
<body style="background-color:LightGoldenRodYellow;">

<style>
body
{
background-image:url('IMG_0226.jpg');
background-repeat:no-repeat;
}
</style>
</head>

<div>
<h1 style="text-align:center">BEACH</h1>
<br>
<h1 style="text-align:center">DESIGN</h1>
</div>

</body>
</html>

abduraooft
Oct 4th, 2009, 05:35 PM
body
{
background-image:url('IMG_0226.jpg');
background-repeat:no-repeat;
} You may use any tag-name(like div,h1 etc) instead of the selector body in the above code.

lavvylav349
Oct 4th, 2009, 06:01 PM
That works fine, using the div tag. But now my image is only as large as the headings. How would I make this area larger, while keeping the headings the same size?

Excavator
Oct 4th, 2009, 06:43 PM
Hello lavvylav349,
I'm not sure what you want to end up with and I don't have the image to see how this looks but you can try something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
}
#header {
width: 800px;
height: 200px;
margin: 0 auto;
background: #ff0 url(IMG_0226.jpg) no-repeat;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<h1>BEACH</h1>
<br>
<h1>DESIGN</h1>
<!--end header--></div>
</body>
</html>

I've added a DocType.
By giving your div an id, #header, it's easier to style than just <div>. You can specify what size you want it to be in the CSS.
Also styled the h1 via the embedded CSS, instead of inline like you were doing.

lavvylav349
Oct 5th, 2009, 02:02 AM
That worked fine. Thank you!

lavvylav349
Oct 5th, 2009, 02:36 AM
Can you tell me why font-family and font-size refering to h1 are not working properly?




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
}
#header {
width: 640px;
height: 480px;
margin: 0 auto;
background-image:url(IMG_0226_2.jpg);
}
h1 {
text-align: center;
font-family: garamond;
font-size:60px;
}
</style>
</head>
<body>
<div id="header">
<h1>BEACH</h1>
<br>
<h1>DESIGN</h1>
<!--end header--></div>
</body>
</html>

effpeetee
Oct 5th, 2009, 03:01 PM
Can you tell me why font-family and font-size refering to h1 are not working properly?

Works OK for me using Firefox 3.5

Check here (http://exitfegs.co.uk/untitled.html).

or is this what you want.
(http://exitfegs.co.uk/untitled2.html)
using one of my images.
Frank

Scriptet
Oct 5th, 2009, 03:55 PM
Also you should only really use one <h1> per page, <h1> is the page heading, <h2> sub headings <h3> sub sub headings etc... etc... all the way to <h6>

lavvylav349
Oct 5th, 2009, 05:01 PM
But if I change the 2nd line of my header to <h2>, won't that change the size of the text?

Scriptet
Oct 5th, 2009, 05:04 PM
Yeah but you can change the text-size of anything to what you want, that's the wonder of PHP, you can alter the presentation of anything to appear how you want..

For example the following CSS:


#h2{
font-size:60px;
}

Changes the font-size of all h2's to 60px...

lavvylav349
Oct 5th, 2009, 05:11 PM
Thank you! I think I'm good for this thread.

lavvylav349
Oct 5th, 2009, 06:07 PM
Except, now I need help with color and letter spacing for the text on my two headings. The code I've included does seem to affect them.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beach Design</title>
<style type="text/css">
body {
background-color:#ffffcc;
}
#header {
width: 640px;
height: 480px;
margin: 0 auto;
background-image:url(IMG_0226_2.jpg);
}
h1 {
text-align: center;
font-family: garamond;
font-size: 6em;
color: ffffcc;
letter-spacing: 2px;
}
h2 {
text-align: center;
font-family: garamond;
font-size: 1em;
color: ff0000;
letter-spacing: 3px;
}
</style>
</head>
<body>
<div id="header">
<h1>BEACH<br>DESIGN</h1>
<!--end header--></div>
<h2>A complete Web Design and Development company.</h2>
</body>
</html>

Scriptet
Oct 5th, 2009, 06:17 PM
You need a has before you specify the RGB of the colour, so:
color: ffffcc; becomes color: #ffffcc;

The letter-spacing should be working fine as it is??

lavvylav349
Oct 5th, 2009, 06:41 PM
Exerything's working perfectly.
Thank you!

lavvylav349
Oct 5th, 2009, 07:54 PM
I'm trying to position the list "mainNav" relative to the center of the page. The image in the header is 640px wide, so I'm trying to keep the list positioned 320px to the left of center.






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beach Design</title>
<style type="text/css">
body {
background-color:#ffffcc;
}
#header {
width: 640px;
height: 480px;
margin: 0 auto;
background-image:url(IMG_0226_2.jpg);
}
h1 {
text-align: center;
font-family: garamond;
font-size: 6em;
color: #660066;
letter-spacing: 8px;
}
h2 {
text-align: center;
font-family: garamond;
font-size: 1em;
color: #660066;
letter-spacing: 3px;
}
#mainNav {
text-align: center;
center: -320px;
}
</style>
</head>
<body>
<div id="header">
<h1>BEACH<br>DESIGN</h1>
<!--end header--></div>
<h2>A complete Web Design and Development company.</h2>
<div id="mainNav">
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">About</a></li>
<li> <a href="#">Contact</a></li>
<li> <a href="#">Services</a></li>
<li> <a href="#">Links</a></li>
</ul>
</div>

</p>




</body>
</html>

Scriptet
Oct 5th, 2009, 09:10 PM
Do you mean like this:

#mainNav {
text-align: center;
margin-left: 320px;
}

lavvylav349
Oct 5th, 2009, 09:39 PM
Close, Your code moves the list in line with the edge of the image. But the list items are centered to each other. I'd prefer the 1st character ( farthest to the left) of each item in the list to be lined up under each other.
Thanks

Scriptet
Oct 5th, 2009, 09:44 PM
Hm not too sure what you mean, how about if you change it to:

#mainNav {
margin-left: 320px;
}

lavvylav349
Oct 5th, 2009, 09:55 PM
No luck there.

This is the result of:

#mainNav {
text-align: center;
margin-left: 320px;
}


Home
About
Contact
Services
Links

Although it IS centered on the edge of the image.

This is what I'm after:
Home
About
Contact
Services
Links

Scriptet
Oct 5th, 2009, 09:59 PM
Does:

#mainNav {
text-align: left;
margin-left: 320px;
}

Help?

or:

#mainNav ul li a {
text-align: left;
}

lavvylav349
Oct 6th, 2009, 02:05 AM
I changed my page to absolute positioning. Instead of working from the center. Much easier.

Scriptet
Oct 6th, 2009, 03:50 PM
Ah you're going backwards don't use absolute positioning..it's the wrong way to learn how to position elements on a page..

Excavator
Oct 6th, 2009, 04:24 PM
I totally agree with Scriptet!!
Have a look at http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/