...

View Full Version : Trouble with overlapping image and text?



c.munro
04-07-2011, 08:33 PM
Hi,
I'm relatively new to dreamweaver and creating a site, that has an image as a background.

I'm simply trying to place text on top of the background image, by overlapping elements.

I have managed to get h1{ to appear and positioned correctly, infront of the background image.

The problem is when i tried to add another paragraph of text. (h2{) It does not appear.

A little help with the coding perhaps?



HTML CODE:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href="Make_page.css" rel="stylesheet" type="text/css" />
</head>


<body>


<div id="bg">
<img src="make_bgrnd.png"/>


<h1>

<br/>
<a href="Homepage_makedo.html";>home</a>
<br/>
<a href="make_page.html";> Make</a>
<br/>
<a href="do_page.html";>Do</a>
<br/>community
<br/>About
<br/>Join

</h1>


<h2>


03/11 We are asking you on the 07.03.11 to<br/>
combine brain power, unite as one, and leave the studio for a day,<br/>
take up a handcraft approach and drop the digital.<br/>
We have picked out some of the most creative and alternative<br/>
spots for you and your team to participate in workshops<br/>
organised by Make Do.<br/></p>
<p>Depending on the location you choose, this will impact the<br/>
environment in number of positive ways. click on the map<br/>
below for a full view of what Leicester has to offer.</p>

</h2>

</div>

</body>
</html>




CSS CODE:
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}


#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
z-index:1;

}
h1 {

position:relative;
top: 30%;
left: 35%;
font: 14px/1.5 'Gotham rounded';
color:#282828;
z-index:10;

a {
text-decoration: none;
}

h2 {

position:relative;
top: 30%;
left: 20%;
font: 14px/1.5 'Gotham rounded';
color:#282828;
z-index:20;
}




a:link {
color:#171717;
text-decoration: none;
}
a:visited {
text-decoration: none;
color:#171717;
}
a:hover {
text-decoration: none;
color:#171717;
}
a:active {
text-decoration: none;
color:#171717;
}

teedoff
04-07-2011, 08:45 PM
<h1> tags are not paragraph tags. Instead, replace them with <p></p> tags.

Heading tags are used to give weight and importance to a bit of text, and while I guess they could wrap entire paragraphs of words, you should probably stick with what they're intended for.

Here (http://htmlhelp.com/reference/html40/block/h1.html)is a good article about heading tags.

Did you want your background image to display the full dimensions of the browser? If so try adding it as a background-image to your body tag in your stylesheet.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum