Bild über Text legen

Diskutiere Bild über Text legen im Web & Grafik Forum im Bereich Internet & Telekomunikation Forum; Hallo zusammen, habe ein kleines HTML/CSS Problem. Es geht um folgenden Code (auf das Wichtigste reduziert, so dass man es direkt als Datei...
Neues Thema erstellen Antworten
  • Bild über Text legen Beitrag #1
Okraml

Okraml

Bekanntes Mitglied
Dabei seit
02.11.1999
Beiträge
1.687
Reaktionspunkte
0
Ort
Ossi
Hallo zusammen,

habe ein kleines HTML/CSS Problem.
Es geht um folgenden Code (auf das Wichtigste reduziert, so dass man es direkt als Datei abspeichern und Testen kann):

HTML: 
<html>
<head>
	<style type="text/css">
	<!--
	.menu { padding:5px; margin-top:0px; margin-bottom:0px;
			text-align:justify; font-size:16px; }
	.menu LI { list-style-type:none; margin-left:0px; }
	.menu LI a { display:block; vertical-align:bottom; white-space:nowrap; overflow:visible; height:22px; }
	-->
	</style>
</head>
<body>
	<ul class="menu">
		<li><a href="">Test <img src="http://evilx99.ev.funpic.de/net/png-test.png" align="top"></a></li>
		<li><a href="">mehr Text </a></li>
		<li><a href="">nochmehr Text </a></li>
	</ul>
</body>
</html>
Mein Problem ist, dass das Bild unter dem Text (2. und 3. "li"-Eintrag) steht. Ich möchte das Bild aber drüber legen.
Jemand eine Idee für ein paar CSS-Anweisungen? Der Code sollte nicht umgestellt höchstens erweitert werden müssen.

:) Okraml
 
  • Bild über Text legen Beitrag #2
sebhoff

sebhoff

Bekanntes Mitglied
Dabei seit
07.09.2006
Beiträge
5.209
Reaktionspunkte
2
schonmal mit "z-index" versucht?
 
  • Bild über Text legen Beitrag #3
BioaSharky

BioaSharky

Super-Moderator
Teammitglied
Dabei seit
25.01.1999
Beiträge
18.511
Reaktionspunkte
9
Verstehe dein Problem nicht so ganz, es kommt doch darauf an, wo du deinen img-Tag hinpackst.
Es ist doch die Frage, ob das Bild zum ersten Menülink gehört, du es aber trotzdem drüber möchtest.

HTML: 
<html>
<head>
	<style type="text/css">
	<!--
	.menu { padding:5px; margin-top:0px; margin-bottom:0px;
			text-align:justify; font-size:16px; }
	.menu LI { list-style-type:none; margin-left:0px; }
	.menu LI a { display:block; vertical-align:bottom; white-space:nowrap; overflow:visible; height:22px; }
	-->
	</style>
</head>
<body>
	<ul class="menu">
		<li><a href=""><img src="http://evilx99.ev.funpic.de/net/png-test.png" align="top"></br>Test</a></li>
		<li><a href="">mehr Text </a></li>
		<li><a href="">nochmehr Text </a></li>
	</ul>
</body>
</html>

Oder ob du das Bild separat drüber haben möchtest und darunter die drei menü-Links

HTML: 
<html>
<head>
	<style type="text/css">
	<!--
	.menu { padding:5px; margin-top:0px; margin-bottom:0px;
			text-align:justify; font-size:16px; }
	.menu LI { list-style-type:none; margin-left:0px; }
	.menu LI a { display:block; vertical-align:bottom; white-space:nowrap; overflow:visible; height:22px; }
	-->
	</style>
</head>
<body>
	<ul class="menu">
	<img src="http://evilx99.ev.funpic.de/net/png-test.png" align="top">
		<li><a href="">Test</a></li>
		<li><a href="">mehr Text </a></li>
		<li><a href="">nochmehr Text </a></li>
	</ul>
</body>
</html>

[Edit] Oder geht's tatsächlich um Layer?
 
  • Bild über Text legen Beitrag #4
Okraml

Okraml

Bekanntes Mitglied
Dabei seit
02.11.1999
Beiträge
1.687
Reaktionspunkte
0
Ort
Ossi
Dann hab ich jetzt doch mal Screenshots erstellt.

Aktuell sieht es so aus:
attachment.php


Ich möchte aber, dass es so aussieht:
attachment.php


Die Reihenfolge und inhalte der "li" Tags soll nicht geändert (höchstens erweitert) werden. Es braucht in diesem Beispiel keinen Sinn für euch zu ergeben, warum ich dies so machen will. Wenn es klappt, dann kann ich euch später (wenn es fertig ist) gerne mein Ergebniss zeigen.

@sebhoff
z-index war eines der ersten Dinge, dich ich versucht habe, leider erfolglos.

:) Okraml
 

Anhänge

  • test1.png
    test1.png
    5,8 KB · Aufrufe: 43
  • test2.png
    test2.png
    4,9 KB · Aufrufe: 40
  • Bild über Text legen Beitrag #5
WhiskeyCola16

WhiskeyCola16

Bekanntes Mitglied
Dabei seit
22.12.2001
Beiträge
971
Reaktionspunkte
1
Ort
Österreich
Hallo Okraml,

z-index ist schon richtig, nur nicht auf das img anzuwenden.
Wenn du das img in ein div packst, welches du wie gewollt dann positionierst, und dem div z-index gibst, dann bekommst du auch den gewünschten Effekt hin.

lg,
Patrick
 
  • Bild über Text legen Beitrag #6
Flex

Flex

Senior Moderator
Dabei seit
30.12.1999
Beiträge
9.284
Reaktionspunkte
0
Ort
München
Ich würde auch das Bild in einen eigenen div-Container stecken und diesen dann über css positionieren.
 
  • Bild über Text legen Beitrag #7
Okraml

Okraml

Bekanntes Mitglied
Dabei seit
02.11.1999
Beiträge
1.687
Reaktionspunkte
0
Ort
Ossi
Flex schrieb:
Ich würde auch das Bild in einen eigenen div-Container stecken und diesen dann über css positionieren.
Zum Vergrößern anklicken....

Wenn ich das Bild so abändere:
HTML: 
<span style="z-index:10;"><img src="http://evilx99.ev.funpic.de/net/png-test.png" align="top"></span>
passiert nix. (Bei div statt span wird das Bild nur umgebrochen.)
Soweit ich gelesen habe, benötigt z-index absolute Positionierung. Da ich das Bild allerdings nicht absolut positionieren kann (da sich der Text bzw. die Position des Textes ändert), fällt absolute Positionierung weg.

:) Okraml
 
  • Bild über Text legen Beitrag #8
WhiskeyCola16

WhiskeyCola16

Bekanntes Mitglied
Dabei seit
22.12.2001
Beiträge
971
Reaktionspunkte
1
Ort
Österreich
Du kannst das div auch relativ positionieren.
 
  • Bild über Text legen Beitrag #9
Okraml

Okraml

Bekanntes Mitglied
Dabei seit
02.11.1999
Beiträge
1.687
Reaktionspunkte
0
Ort
Ossi
  • Bild über Text legen Beitrag #10
WhiskeyCola16

WhiskeyCola16

Bekanntes Mitglied
Dabei seit
22.12.2001
Beiträge
971
Reaktionspunkte
1
Ort
Österreich
Okraml schrieb:
Die Position des Bildes ist aber abhängig von der Position des Textes.
Kannst du vielleicht einfach mal meinem Qelltext entsprechend anpassen?

:) Okraml
Zum Vergrößern anklicken....

HTML: 
<html>
<head>
    <style type="text/css">
    <!--
    .menu { padding:5px; margin-top:0px; margin-bottom:0px;
            text-align:justify; font-size:16px; }
    .menu LI { list-style-type:none; margin-left:0px; }
    .menu LI a { display:block; vertical-align:bottom; white-space:nowrap; overflow:visible; height:22px; }
    .picdiv { z-index:1000; position:relative; top:-50;}
    -->
    </style>
</head>
<body>
muhuhu<br>
muhuhu<br>
muhuhu<br>
muhuhu<br>
muhuhu<br>
muhuhu<br>
muhuhu<br>
muhuhu<br>
muhuhu<br>
    <ul class="menu">
        <li><a href="">Test</a></li>
        <li><a href="">mehr Text </a></li>
        <li><a href="">nochmehr Text </a></li>
    </ul>
    <div id="picdiv" class="picdiv">
        <img src="http://evilx99.ev.funpic.de/net/png-test.png" align="top">
    </div>
</body>
</html>

gerne
 
  • Bild über Text legen Beitrag #11
Okraml

Okraml

Bekanntes Mitglied
Dabei seit
02.11.1999
Beiträge
1.687
Reaktionspunkte
0
Ort
Ossi
Das hilft mir leider nicht weiter.
Ich zeige euch mal wofür ich es genau benötige, vielleicht wird mein Problem so besser erkennbar:
http://okraml.de/neu/neu.html
Die Links werden generiert, daher kann ich keine festen Positionen für die Bilder festlegen.

Mit Javascript wäre das ganze kein Problem, aber ich versuche es ohne Javascript hinzubekommen.

:) Okraml
 
  • Bild über Text legen Beitrag #12
Flex

Flex

Senior Moderator
Dabei seit
30.12.1999
Beiträge
9.284
Reaktionspunkte
0
Ort
München
Ich hatte das auch so wie Whiskey gepostet hat gemeint.

Hmmm... so wie ich das sehe, hast du mehrere Menüpunkte und dahinter soll ein Bild. Wieso kannst du das nicht absolut positionieren. Orientiere dich halt am "längsten" Menüpunkt.

Wobei, jetzt fällt mir gerade nochwas ein. Setze das Menü auch in einen div-Container, dann sollte es klappen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Neues Thema erstellen Antworten
Thema:

Bild über Text legen

ANGEBOTE & SPONSOREN

https://www.mofapower.de/

Neueste Beiträge

Statistik des Forums

Themen
213.180
Beiträge
1.579.173
Mitglieder
55.879
Neuestes Mitglied
stonetreck
Oben