✔ relativ zu zentriertem div-Element

Status
Nicht offen für weitere Antworten.
A

alter_Sack

Grünschnabel
Hallo,

ich versuche gerade ein Bild über einem zentrierten div-Element relativ zum "zentrierten div-Element" einzufügen.
Nur leider will das nicht so wie ich mir das gedacht habe.

Die box wird zwar an der richtigen Stelle angezeigt, aber der Text fängt erst nach etwa der höhe des Bildes an ... ?
Kann mir jemand sagen wie ich es hinkriege, dass die "content-divs" bereits oben beginnen und nicht erst nach der Höhe des Bildes ... ?


Tja, da IE und Firefox das aber gleichermassen verunstalten, liegt es diesmal an mir und nicht am Browser ... :D

Hier die nicht funktionierende Syntax:

----------------------------------------
style2.css:
----------------------------------------
Code: 
 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;

 }

----------------------------------------
index.html:
----------------------------------------
HTML: 
<!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>
----------------------------------------

Besten Dank schonmal im voraus !
 
Hi,

wenn der Text oberhalb des Bildes sitzen soll, dann notiere ihn doch einfach im Quellcode zu allererst.

Und noch ein Hinweis: eine ID muß in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vergeben werden. Wandel also die ID #content in die Klasse .content um.
 
Hey,

das Bild soll nicht oberhalb oder unterhalb des Textes sein ... sondern "drüber" ... ;-)

mit "position:fixed" krieg ich zwar das Bild "drüber" aber dann scrolled das Bild nicht mit ...

Jetzt klarer ?

Das mit id-klasse ist korrekt, ändert aber an meinem Problem nichts ...
 
Ich hoffe ich hab dich richtig verstanden.

Code: 
#hingugger{
  position:absolute;
  margin-left:150px;
 }

/* Der Inhalt */
 #content2 {
 	clear: both;
 	border-top:1px solid Red;
 	padding:5px;
 	color:#000000;
 }

HTML: 
<!-- Hingugger ;-) -->
<div id="hingugger"><img src="faenger2.gif" title="faenger" height="646" width="425" ></div>

Das Abändern dann sitz es mittig.
 
Hallo ssurfer,

B I N G O !


position:absolute;
margin-left:150px;


Oh Mann, zwei simple Zeilen und die ärgern mich schon den ganzen Tag ... :rolleyes:


Besten Dank !
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück