登录 | 注册 | FAQ
Anonymous

Layering text on an image

+ 发表回复

4 篇帖子 分页: 1 / 1


Layering text on an image

Maffia » 周三 11月 10, 2010 2:12 am

Hello kind HTML helpers,
I cannot figure out how to get my text on top of my image. (I would like the nav bar to be on the turquoise strip of the image on the top)

This is the HTML coding I used:

<body>

<img src="homepage image.jpg" id="homepageimage" width="800" height="600" alt="Mattress Veracruz" style="display:block; margin-left:auto; margin-right:auto; " />

<h1 id="navbar">
<span class="jessicamaffia">jessica maffia</span>
<a href="Jessica Maffia Artist Website Drawing.htm">drawings</a>
<a href="Jessica Maffia Artist Website Assemblage">assemblages</a>
<a href="Jessica Maffia Artist Website Photography">photography</a>
<a href="Jessica Maffia Artist Website Bio">bio</a>
<a href="Jessica Maffia Artist Website Contact">contact</a>
</h1>

<hr id="underline">
</body>

And the CSS is:
#navbar {
display:block; margin-left:auto; margin-right:auto;
word-spacing: 15px;
z-index: 2; }
#underline {width: 800px;}
span.jessicamaffia {font-size: 30pt; font-weight: lighter;}
h1 {font-family: courier new; font-weight: lighter; font-size: 10pt; text-align: center;}

a {text-decoration: none;}

a:link {color: black;}

a:visited {color: black;}

a:active {color: black;text-transform: uppercase;}

a:hover {color: black;font-weight: bold;text-transform: uppercase;}

Thank you very very much
-Jessica
头像

Maffia

  • 帖子: 11
  • 注册: 周四 11月 04, 2010 11:01 pm

Re: Layering text on an image

HTML.net » 周三 11月 10, 2010 10:13 am

It is easier than you think...

HTML:

<img src="homepage image.jpg" alt="image" />
<h1 id="navbar">Heading</h1>

CSS:

#navbar
{
position:relative;
top:-50px;
left:0em;
}

Read more about positioning here: http://html.net/tutorials/css/lesson14.php

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Layering text on an image

Maffia » 周五 11月 12, 2010 2:43 pm

Dearest Andreas,
Thank you very much for your help and your speedy replies. I ended up changing the top to -595 so that the text was just where I needed it.

-Jessica
头像

Maffia

  • 帖子: 11
  • 注册: 周四 11月 04, 2010 11:01 pm

Re: Layering text on an image

Maffia » 周五 11月 12, 2010 2:48 pm

Gosh I'm so honored that you took the time out to validate it. Thank you Cubesquare!
Do you suggest I leave the fieldset tags where you placed them for validating purposes?
And what is the function of the <!.. comment tags?
The border wasn't working for me, I will have to try again.

-Jessica


CubeSquare 写道:Hello Jessica,

I've been following your progress with great interest, because your navbar is so elegant. Looks good in Firefox, IE8, and Safari. The CSS validated immediately. I had to wrap your Image in <fieldset> tags to get it to validate. Although, <div> tags may have worked. I don't know, I guess the validitas doesn't care to see an image tag start a new line. What happened to the border? You didn't it in your code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title>JMAW</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

#navbar
{
position:relative;
top:-50px;
left:0em;
}

<!--

#navbar {
display:block; margin-left:auto; margin-right:auto;
word-spacing: 15px;
z-index: 2; }
-->

#underline {width: 800px;}
span.jessicamaffia {font-size: 30pt; font-weight: lighter;}
h1 {font-family: courier new; font-weight: lighter; font-size: 10pt; text-align: center;}

a {text-decoration: none;}

a:link {color: black;}

a:visited {color: black;}

a:active {color: black;text-transform: uppercase;}

a:hover {color: black;font-weight: bold;text-transform: uppercase;}

</style>
</head>


<body>

<fieldset>
<img src="homepage image.jpg" id="homepageimage" width="800" height="600" alt="Mattress Veracruz" style="display:block; margin-left:auto; margin-right:auto;" />
</fieldset>

<!--
<h1 id="navbar">Heading</h1>
-->

<h1 id="navbar">
<span class="jessicamaffia">jessica maffia</span>
<a href="Jessica Maffia Artist Website Drawing.htm">drawings</a>
<a href="Jessica Maffia Artist Website Assemblage">assemblages</a>
<a href="Jessica Maffia Artist Website Photography">photography</a>
<a href="Jessica Maffia Artist Website Bio">bio</a>
<a href="Jessica Maffia Artist Website Contact">contact</a>
</h1>

<hr id="underline" />

</body>
</html>

<!--
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
-->

<!--
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
-->

- CubeSquare
头像

Maffia

  • 帖子: 11
  • 注册: 周四 11月 04, 2010 11:01 pm


+ 发表回复

分页: 1 / 1