Forum Moderators: not2easy
I'm trying to put an image over a centered div-element. The image needs to be relative to the centered div-element, so it scrolls with the centered div-element. (or should I say relative inside the div-element ...?)
I've tried a lot of different css-settings, but I can't get it the way I want.
If you execute the following code you see that the "content-div" does not start at the top, but about the hight of the image too far down ...
I really hope you understand what I'm trying to say ... :D
Thanks in advance!
------------------------------------------
style2.css:
------------------------------------------
body
{
font-family:Verdana;
font-size:10px;
text-align:center;
} #centerdiv
{
width:750px;
margin:0px auto;
text-align:left;
border:dashed 1px #000000;
}
h1 {font-size:25px;color:#000000;margin:0px;}
h2 {font-size:14px;color:#000000;}
h3 {font-size:12px;color: grey; font-weight:bold;margin:0px; text-transform:uppercase}
/* Der Inhalt */
#content {
clear: both;
border-top:1px solid Red;
padding:5px;
color:#000000;
}
.box{
border: 1px solid black;
position: relative;
left: 200px;
top: 400px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<link href="style2.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body><!-- Gesamter Inhalt -->
<div id="centerdiv">
<!-- Hingugger ;-) -->
<img src="faenger2.gif" title="faenger" height="646" width="425" class="box">
<div id="content">
<h2>Text</h2>
<p>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
</p>
</div>
<div id="content">
<h2>Text</h2>
<p>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
Irgendein Text um die Seite vollzumachen!<br>
</p>
</div>
</div>
</body>
</html>
OK, forget this thread ...
Changed "relative" to "absolute" and used margin for positioning and it works:
for example:
.box{
border: 1px solid black;
position:absolute;
margin-left:150px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Secondly, what browsers are you testing in? I just want to ensure the solution to your problem works in at least mozilla and IE. I don't know what you want to do though, you didn't word it too well.
