text über bild legen

[salva]

Hallo,

ich habe natürlich, bevor ich diesen thread gestartet habe, die Suchfunktion genutzt. Leider habe ich keine Lösung für dieses spezielle Problem gefunden.
Es geht um Folgendes:

  
<div id="x">  
	  
	<div id="a">Lorem ipsum dolor</div>  
	  
	  
	<img id="b" src="img/img.jpg" alt="ein Bild"  />  
			  
</div>  

Ich möchte gerne erreichen, dass der Text sich über das Bild legt.
Nur ist das nicht alles. Die Bedingungen sind, dass das Bild nicht als Hintergrund definiert und der Text nicht absolut positioniert werden darf.
Das lässt sich doch mit Sicherheit irgendwie bewerkstelligen, oder?
Für eine Lösung wäre ich unendlich dankbar.

bis dann

[Malcolm Beck´s]

hi,

<div id="x">

<div id="a">Lorem ipsum dolor</div>

<img id="b" src="img/img.jpg" alt="ein Bild"  />

</div>

  

> Nur ist das nicht alles. Die Bedingungen sind, dass das Bild nicht als Hintergrund definiert und der Text nicht absolut positioniert werden darf.  
  
Lass den Text nach links floaten und richte ihn mit margin/padding auf dem Bild aus.  
  
  
Wobei der Text Sinnvollerweise in ein Absatz gehört, aber dass nur am Rande.  
  
mfg

-- 
[Word!](http://www.youtube.com/watch?v=8IYTxTeMzA0) -- [Wenn man genauer hinschaut ist Deutschland schon ganz in Ordnung](http://www.youtube.com/watch?v=MeNdOpw90-M&feature=SeriesPlayList&p=917773458BC1E8DD)

[Salva]

Danke, aber leider funktioniert das nicht.

Hast du vielleicht noch eine andere Idee?

[Malcolm Beck´s]

hi,

leider funktioniert das nicht.

Kann ich mir nicht vorstellen ... Was hast du denn probiert, zeig mal ein bisschen CSS (nur den Relevanten teil).

mfg

[Salva]

  
#a p{  
float:  left;  
margin: 50px;  
}

  
<div id="x">  
	  
	<div id="a"><p>Lorem ipsum dolor</p></div>  
	  
	  
	<img id="b" src="img/content/01.jpg" alt="ein Bild"  />  
			  
</div>  

[Malcolm Beck´s]

hi,

#a p{
float:  left;
margin: 50px;
}

>   
> ~~~html
  

> <div id="x">  
> 	  
> 	<div id="a"><p>Lorem ipsum dolor</p></div>  
> 	  
> 	  
> 	<img id="b" src="img/content/01.jpg" alt="ein Bild"  />  
> 			  
> </div>  
> 

Habe es gerade getestet, und stimmt -- so leicht wird das nicht.

Wie der Martin schon schreibt, einer der wenigen Situationen, in denen absolute: positionierung Sinnvoll ist.

Es sei denn, die Breite von id="x" ist fest (px oder em), also nicht Flexibel, dann könnte man da noch ein wenig mit Negativen margin tricksen.

mfg

[Salva]

Ich habe mal das hier veruscht:

  
#x{  
margin: 0 auto;  
width: 960px;  
}  
#a p{  
margin-left: -700px;  
}  
#b{  
float: left;  
}  

  
<div id="x">  
	  
	<img id="b" src="img/content/01.jpg" alt="ein Bild"  />  
	  
	<div id="a"><p>Lorem ipsum dolor</p></div>  
			  
</div>  

funktioniert aber auch nicht.

[Der Martin]

Hi,

<div id="x">

<div id="a">Lorem ipsum dolor</div>
<img id="b" src="img/img.jpg" alt="ein Bild"  />

</div>

  

> Ich möchte gerne erreichen, dass der Text sich über das Bild legt.  
> Nur ist das nicht alles. Die Bedingungen sind, dass das Bild nicht als Hintergrund definiert und der Text nicht absolut positioniert werden darf.  
  
schade, wer verbietet dir das? Das wäre nämlich einer der wenigen Fälle, in denen absolute Positionierung sinnvoll anzuwenden ist:  
  
~~~css
#x  
 { position: relative;  
 }  
  
#a  
 { position: absolute;  
   top: 2em;  
   left: 4em;  
 }

Eventuell möchtest du dabei noch die Größe von div#x an die des Bildes anpassen, so dass das div zwar das Bild umschließt, aber nicht größer ist.

Für eine Lösung wäre ich unendlich dankbar.

Wie dankbar? Brauchst du meine Kontonummer?

Ciao,
 Martin

[Salva]

Danke, aber wie gesagt, das Ganze sollte ohne absolute Positionierung funktionieren.
Verboten wird es mir nicht, aber wenn Jemand die Fenstergröße ändert oder dergleichen, macht mir das mein Layout kaputt.

[Gunther]

Hallo Salva!

Danke, aber wie gesagt, das Ganze sollte ohne absolute Positionierung funktionieren.
Verboten wird es mir nicht, aber wenn Jemand die Fenstergröße ändert oder dergleichen, macht mir das mein Layout kaputt.

Sorry, aber das ist ja Unsinn. Gerade die Variante mit der absoluten Positionierung innerhalb eines relativ positionierten Containers ist so ziemlich das "Robusteste", was du in dem Fall bauen kannst.

Du hast vermutlich sowieso das Problem, was bei einer Schriftgrößenänderung seitens des Users passiert. Denn ich nehme mal an, dass dein Image nicht mitskaliert, oder? Und was soll dann mit dem überlagerten Text passieren?

Da du aber hier bisher immer nur sehr vage Andeutungen gemacht hast, und dich auch über das Gesamt-Konzept deines Layouts nicht weiter ausgelassen hast, kann man auch nur entsprechend antworten.

Gruß Gunther

[Salva]

Hallo Gunther,

es geht um folgendes:

Ich habe mit Hilfe von jQuery einen Image-Slider programmiert, nur mal zum ausprobieren.
Jetzt brauche ich genau diesen für ein neues Projekt, nur ein bißchen abgewandelt. Damit du eine Vorstellung bekommst, kannst du dir das hier mal anschauen.Slider

Damit das jetzt auch funktioniert, muss es genau so verpackt sein:

  
	<div id="slider">  
		<div id="slider-left"><div class="btn"><img class="click next" src="img/layout/btn_left.jpg" alt="nach links" /></div></div>  
		<div id="slider-main">  
			<div id="wrapper">  
				<div class="ele"><img src="img/content/01.jpg" alt="service"/><div class="slider-over"><p>Lorem ipsum dolor</p></div></div>  
				<div class="ele"><img src="img/content/01.jpg" alt="service"/><div class="slider-over"></div></div>  
				<div class="ele"><img src="img/content/01.jpg" alt="service"/><div class="slider-over"></div></div>  
			</div>  
		</div>  
		<div id="slider-right"><div class="btn"><img class="click prev" src="img/layout/btn_right.jpg" alt="nach rechts" /></div></div>  
	</div>  
  

Der unterschied zu dem Beispiel im Link ist der, dass sich über das Bild eine halbtransparente Fläche legen soll, nämlich .slider-over, und auf dieser Fläche ein Text zu lesen sein soll.

Der äußerste div-Container ist folgendermaßen formatiert:

  
#main{margin: 0 auto; width: 960px;}  

Und entschuldige falls ich mich täusche, aber macht das eine absolute Positionierung nicht unmöglich?
Ich werde gerne eines besseren belehrt.

[Malcolm Beck´s]

hi,

Und entschuldige falls ich mich täusche, aber macht das eine absolute Positionierung nicht unmöglich?

Ja, das macht es.

Ich habe jetzt auf das letzte st. Code, nicht dieses jetzt ein wenig CSS geschrieben, teste es doch einfach mal aus.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>SELFHTML Forum</title>  
  
<style type="text/css">  
[code lang=css]  
* {margin:0;padding:0;}  /* <- nicht für den Produktiven Einsatz gedacht */  
  
.x{  
  margin:35px auto;  
  width: 960px;  
  position:relative;  
  border:4px double #F00;  
}  
.a {  
  position:absolute;  
  top:0;  
  left:0;  
  width:960px;  
  height:200px;  
  z-index:2;  
  background:#CCC;  
  opacity:.5;  
}  
.a p {  
  position:absolute;  
  top:40px;  
  left:120px;  
  font-size:3.2em;  
}  
.b {  
  margin:0 auto;  
  display:block;  
  width:960px;  
  height:200px;  
  position:relative;  
  z-index:1;  
  background:#000;  
}

</style>

</head>
<body>
<!-- Das Bild in Original, nur die grösse stimmt nicht -->
<p> <img class="b" src="http://dj-tut.de/images/tonarm.jpg" alt=""  />   </p>

<div class="x">
        <img class="b" src="http://dj-tut.de/images/tonarm.jpg" alt=""  />
        <div class="a"><p>Lorem ipsum dolor</p></div>
</div>

<div class="x">
        <img class="b" src="http://dj-tut.de/images/tonarm.jpg" alt=""  />
        <div class="a"><p>Lorem ipsum dolor</p></div>
</div>

<div class="x">
        <img class="b" src="http://dj-tut.de/images/tonarm.jpg" alt=""  />
        <div class="a"><p>Lorem ipsum dolor</p></div>
</div>

</body>
</html>
[/code]

mfg

[Salva]

Vielen Dank, in der Zwischenzeit hab ich es fast genauso gemacht und es scheint wunderbar zu funktionieren.
Bisher hab ich es aber nur im FF unter Mac OSX getestet. Mal sehen, was der IE daraus macht.

[nemoinho]

Moin,

Ich möchte gerne erreichen, dass der Text sich über das Bild legt.
Nur ist das nicht alles. Die Bedingungen sind, dass das Bild nicht als Hintergrund definiert und der Text nicht absolut positioniert werden darf.

joa kann man bestimmt machen, probier doch mal das aus:

  
#x {position: relative;}  
#a {position: relative; z-index: 100;}  
#b {position: absolute; top: 0 left: 0;}  

hoffentlich hilfts dir weiter.

mfG Felix Nehrke

P.S.: Besuche unseren Blog:  http://www.pommes-blog.de

[Salva]

Moin,

Ich möchte gerne erreichen, dass der Text sich über das Bild legt.
Nur ist das nicht alles. Die Bedingungen sind, dass das Bild nicht als Hintergrund definiert und der Text nicht absolut positioniert werden darf.

joa kann man bestimmt machen, probier doch mal das aus:

#x {position: relative;}
#a {position: relative; z-index: 100;}
#b {position: absolute; top: 0 left: 0;}

>   
> hoffentlich hilfts dir weiter.  
>   
> mfG Felix Nehrke  
>   
> P.S.: Besuche unseren Blog:  <http://www.pommes-blog.de>  
>   
  
Ein Danke auch an dich, aber ich möchte nicht mit position: absolute; arbeiten.

[Gunnar Bittersmann]

@@Salva:

nuqneH

Ein Danke auch an dich, aber ich möchte nicht mit position: absolute; arbeiten.

Der Grund wäre welcher?

Entweder Text oder Bild musst du auf jeden Fall positionieren (relativ oder absolut), weil 'z-index' nur auf positionierte Elemente wirkt. 'z-index' benötigst du, weil das Bild im Quelltext nach dem Text kommt, aber unter ihm liegen soll.

Qapla'

[Salva]

@@Salva:

nuqneH

Ein Danke auch an dich, aber ich möchte nicht mit position: absolute; arbeiten.

Der Grund wäre welcher?

Dieser hier...

[Gunnar Bittersmann]

@@salva:

nuqneH

Ich möchte gerne erreichen, dass der Text sich über das Bild legt.
Nur ist das nicht alles. Die Bedingungen sind, dass das Bild nicht als Hintergrund definiert und der Text nicht absolut positioniert werden darf.

Warum nicht? Und: heißt „[darf] nicht absolut positioniert werden“ wirklich keine Angabe von 'position: absolute' oder lediglich keine Angaben von 'top', 'left', 'right', 'bottom'?

Das lässt sich doch mit Sicherheit irgendwie bewerkstelligen, oder?

Positionierung des Bildes und negativer z-Index.

Qapla'