PDA

View Full Version : i dont know how to accurately place text over my background div


silverglade
12-09-2008, 04:43 PM
i dont know how to accurately place text over my background div, and the div box wont tightly wrap around the image even when i specify the same dimensions as the image. the text floats outside of the image, and the div is too large for the image. any help greatly appreciated. here is the code. thanks. derek

<!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=iso-8859-1" />
<title>CSS Slicing Guide </title>
<style type="text/css">
body {
margin: 0; padding: 0;
text-align: center;
}
#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}
#bg {
background-image:url('template_14.gif');
background-repeat:no-repeat;
width: 177px;
height: 172px;

}
</style>
</head>
<body>
<div id="container">
<div id="bg">
</div>
</div>
</body>
</html>

Corrosive
12-09-2008, 04:52 PM
i dont know how to accurately place text over my background div, and the div box wont tightly wrap around the image even when i specify the same dimensions as the image. the text floats outside of the image, and the div is too large for the image. any help greatly appreciated. here is the code. thanks. derek

<!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=iso-8859-1" />
<title>CSS Slicing Guide </title>
<style type="text/css">
body {
margin: 0; padding: 0;
text-align: center;
}
#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}
#bg {
background-image:url('template_14.gif');
background-repeat:no-repeat;
width: 177px;
height: 172px;

}
</style>
</head>
<body>
<div id="container">
<div id="bg">
</div>
</div>
</body>
</html>



Have you got this on line anywhere Derek? I can't really work out what you are asking.

Ricky55
12-09-2008, 05:28 PM
Working for me mate, I'm not sure what you can't get wokring.

Try colouring your divs while you work this will help you understand whats going on. Also try using CSS Short Hand Code


<!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=iso-8859-1" />
<title>CSS Slicing Guide </title>
<style type="text/css">
body {
margin: 0; padding: 0;
text-align: center;
}
#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}
#bg {
background: #666 url(image.jpg) no-repeat;
width: 177px;
height: 172px;

}
</style>
</head>
<body>
<div id="container">
<div id="bg">
<p>Some Test text</p>
</div>
</div>
</body>
</html>

silverglade
12-09-2008, 06:13 PM
i made a style and put my text in a div #testtext. that positioned it properly on the image where i wanted it, also , i made a mistake, the div does fit the image. but i was wondering, is this the only way to position the text exactly where i want it, like say, a list of links? over the image.
any help greatly appreciated. dererk

here is the new code. note the new style "testtext".

<!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=iso-8859-1" />
<title>CSS Slicing Guide </title>
<style type="text/css">
body {
margin: 0; padding: 0;
text-align: center;
}
#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}
#bg {
background-image:url('template_14.gif');
background-repeat:no-repeat;
width: 177px;
height: 172px;
}

div#testtext {
position: relative;
height: auto;
width: 150px;
left: 25px;
top: 25px;
}
</style>
</head>
<body>
<div id="container">
<div id="bg">
<div id="test"><div id="testtext">Superimposed Text</div>
</div>
</div>
</div>
</body>
</html>

Corrosive
12-09-2008, 06:17 PM
i made a style and put my text in a div #testtext. that positioned it properly on the image where i wanted it, also , i made a mistake, the div does fit the image. but i was wondering, is this the only way to position the text exactly where i want it, like say, a list of links? over the image.
any help greatly appreciated. dererk

here is the new code. note the new style "testtext".

<!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=iso-8859-1" />
<title>CSS Slicing Guide </title>
<style type="text/css">
body {
margin: 0; padding: 0;
text-align: center;
}
#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}
#bg {
background-image:url('template_14.gif');
background-repeat:no-repeat;
width: 177px;
height: 172px;
}

div#testtext {
position: relative;
height: auto;
width: 150px;
left: 25px;
top: 25px;
}
</style>
</head>
<body>
<div id="container">
<div id="bg">
<div id="test"><div id="testtext">Superimposed Text</div>
</div>
</div>
</div>
</body>
</html>



You should try and use a list or <li> tag for links. You can position a list tag in the same way as you position other tags. If you view>source on this site you can see how Domedia has used the <li> tags...

<ul id="nav-top">
<li><a href="http://www.dreamweaverclub.com/">Home</a></li>
<li><a href="http://www.dreamweaverclub.com/forum/">Forum</a></li>
<li><a href="http://www.dreamweaverclub.com/tutorials.php">Tutorials and Articles</a></li>
<li><a href="http://www.dreamweaverclub.com/templates/">Templates</a></li>
<li><a href="http://www.dreamweaverclub.com/software.php">Software</a></li>
<li><a href="http://www.dreamweaverclub.com/books/">Books</a></li>
<li><a href="http://www.dreamweaverclub.com/about-us.php">About Us</a></li>
</ul>

To create the menu bar at the top. Then he has styled the list to be a menu.

domedia
12-09-2008, 06:22 PM
Maybe it's just me but; silver can you rephrase your question?

silverglade
12-09-2008, 07:29 PM
i want to position text accurately above my div background image.

domedia
12-09-2008, 07:48 PM
Just put the text inside the div and you should be fine..
The answer is so easy I think I still misunderstood :)

If your text is in the wrong place inside the div, put some margins on the text.

silverglade
12-09-2008, 08:02 PM
ok thanks very much

Ricky55
12-09-2008, 09:46 PM
To position the text within the box just use padding

padding-top: 5px;
padding-left: 5px;

for example