✔ Div-Kasten "auf" einen Text setzen

CookieBuster

CookieBuster

Erfahrenes Mitglied
Also, ich möchte einen Divkasten, in welchem ein Bild ist, "auf" einen Text (bzw einfach in eine Tabelle in der schon etwas steht, wie z.B. andere Bilder) setzen.

Ich schaffe es aber nicht, dass der Rest der Tabelle unverändert bleibt, der Inhalt schiebt sich beim Einfügen des Div-Kastens jedesmal nach unten.

Versucht hab ich es bisher mit position:relative bzw absolute. Beidesmal das selbe Ergebnis.


Ich wäre überglücklich wenn mir jemand helfen könnte =)
 
Hi,

zeig doch bitte mal den derzeitigen Stand des HTML- und CSS-Codes.

mfg Maik
 
Is ein wenige längeres Codestück, aber ich kann es ein wenig zerhäckseln wenn du/ihr wollt.

Ok, ich habs zerhäckselt, sieht halt jetzt ziemlich kastriert aus.
Der Fehler liegt NICHT an der Tabelle (so wie sie jetzt ist), die ist einfach nur beliebig gelöscht worden dass der Code kürzer ist. Die Tabelle funktioniert wunderbar.


HTML: 
<body>
<table align="center" width="100%" cellspacing="0" cellpadding="0" border="0" id="FirstFloor"> 
    <tr>
        <td align="center" width="100%"><a name="TopOfPage"></a>
            <table width="764" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td valign="middle" id="OuterLogo">
                        <a href="http://www.thw-jugend-muensingen.de"><img src="resources/icons/logo.gif" width="275" height="80" border="0" alt=""></a>
<div style="position:relative; top:-250px; left:750px; background-color:#f00;"><a href="index.php?page=home&amp;lang=<?php UseLanguage("ger", "swab"); ?>"><img src="./resources/icons/langenscheidt.jpg" alt="Sprache W&auml;hlen" /></a></div>      <!-- <---- ################# DA ##################### -->
                    </td>
                </tr>
                <tr>
                    <td id="SecondFloor"><span id="HpCaption"><b><?php UseLanguage("'d jonge im THW", "THW-Jugend M&uuml;nsingen"); ?></b></span></td>
                </tr>
                <tr>
                    <td width="100%" class="TopMenuBar">

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
 
Sprichst du von dem DIV mit negativem top:-250px-Wert?

Und was funktioniert daran nun nicht?

Bei mir wird das Element entsprechend den Positionsangaben nach oben über die Tabelle hinaus positioniert, und verschwindet mit dem Codeschnipsel im oberen nicht-sichtbaren Bereich des Viewports.

Achja, und wo ist nun "so weit oben" und "außerhalb" der Tabelle der Text versteckt, über dem das Element gelegt werden soll?

mfg Maik
 
ah, das -250px war noch vom letzenmal, eig gehört da 15px hin.

Das problem ist nicht, dass er nicht dargestellt wird, sondern alles in der Zeile verschiebt. In der selben Zeile ist noch ein Menu untergebracht, das schiebt der Div-Kasten dann um mehrere Pixel nach unten, was er aber nicht machen soll.


e:/ zu betrachten wäre das ganze auf dieser Seite wobei hier der Div-Kasten nicht! eingefügt ist. Am Schluss soll er oben rechts auf dem Luftbild "aufsitzen". Das Mittlere Menu (
dohoim des semmer wa mer so dend 's neuschd G'schwätz gruaschd) soll dabei nicht nach unten verschoben werden (was aber atm immer passiert, und da liegt auch mein Problem))
 
Zuletzt bearbeitet:
Dann positionier mal das DIV absolut in einem relativ positionierten DIV, um es aus dem normalen Textfluß zu nehmen, so wird der nachfolgende Inhalt auch nicht nach unten verschoben:

HTML: 
<div style="position:relative;">
    <div style="position:absolute; top:15px; left:750px; background-color:#f00;">...</div>
</div>


mfg Maik
 
Vielen dank, das hat geholfen.

Eine frage bliebe da noch offen... wird das in "jedem" Browser wenigstens annähernd gleich dargestellt? (wobei wohl Firefox und IE am wichtigesten wären)
 
Wenn du zu Beginn des Stylesheets dafür sorgst, dass im Dokument alle diskrepanten Polsterungseigenschaften auf null zurückgesetzt werden, seh ich da keine weiteren Probleme.

CSS: 
* {
margin:0;
padding:0;
}


mfg Maik
 
Die Seite hat eh ein etwas längeres Stylsheet. Unteranderm Ist margin und padding 0 gesetzt.

Habs mal getestet mit IE6. Naja, es macht 1!! Pixel unterschied in der Höhe. Im IE ist der Kasten 1 Pixel weiter unten =/

Naja, mir reichts erstmal, der absolute Feinschliff muss jetzt nicht sein.


Dir nochmal ein rieeeßen dankeschön, bin überglücklich dass es endlich funktioniert. Wäre selbst wohl nie auf die Idee gekommen :)


*bewert*
 
Zeichne mal das eingebundene Grafikelement mit display:block aus, und berichte, wie der IE6 darauf reagiert.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück