Bild als mittelpunkt (oder so ^^)

[Sportfreund]

Heyhey

Ich hab eine kurze Frage, finde dazu nichts auf Selfhtml:

Ich hab z.B. ein hintergrundbild und darauf abgestimmte Boxen / Frames etc...

Nun will ich aber dass sich diese Boxen an dem Bild orientieren wenn ich sie mit CSS ausrichte und nicht an der Seite des Browsers... wie stell ich sowas ein?

[Jörg Peschke]

Hallo,

Nun will ich aber dass sich diese Boxen an dem Bild orientieren wenn ich sie mit CSS ausrichte und nicht an der Seite des Browsers... wie stell ich sowas ein?

Du kannst an einem Hintergrundbild nichts ausrichten, denn dafür ist es nicht gedacht. Möglich ist, einem Div das Hintergrund-Bild zu geben, und dann andere DIVs an diesem Div auszurichten.
Die Position des Hintergrund-Bildes kannst Du dabei mit dem CSS-Attribut background-position
beeinflussen.

[Sportfreund]

Hallo,

Nun will ich aber dass sich diese Boxen an dem Bild orientieren wenn ich sie mit CSS ausrichte und nicht an der Seite des Browsers... wie stell ich sowas ein?

Du kannst an einem Hintergrundbild nichts ausrichten, denn dafür ist es nicht gedacht. Möglich ist, einem Div das Hintergrund-Bild zu geben, und dann andere DIVs an diesem Div auszurichten.
Die Position des Hintergrund-Bildes kannst Du dabei mit dem CSS-Attribut background-position
beeinflussen.

Wie kann ich einem Div denn sagen, dass er sich am anderen ausrichten soll??

[Jörg Peschke]

Hallo,

Wie kann ich einem Div denn sagen, dass er sich am anderen ausrichten soll??

Das kommt darauf an, wo du#s hinhaben willst :)

Normalerweise stehen zwei Divs, die im Quelltext Untereinander stehen auch untereinander.
Mit dem CSS-Attribut "float: left" richtet sich das zweite DIV rechts vom ersten aus, mit "float: right" umgekehrt, und "clear: left" bzw. "clear: right" bzw. "clear: both" hebt die Ausrichtung auf.

Soll das DIV darüber hinaus versetzt sein, so kannst Du das mit den Werten "top", "left" und "right" erriechen.
Hierzu muss dann allerdings das Div relativ (position: relative) oder absolut (position: absolute) positioniert werden.

Mehr dazu steht z.b. hier

[Sportfreund]

hab hier mal den Link zu meinem "Experiment":

http://web296.nsi11.miniserver.de/HomepageTim/home.html

Wie müsste mein Quelltext denn dann aussehen ??

Weil float ist doch eigentlich nur mit Text... und was ist mit "div rechts" und "div links" gemeint ? benutzt man da nicht die Namen der div's oder so ? ^^

[Jörg Peschke]

Hallo,
Ich bin mir nicht sicher, ob ich verstanden habe, was Du vorhast.
Du hast dieses große Bild (home.jpg), richtig? Und du möchtest jetzt andere DIVs daran oder darin ausrichten.

Also fangen wir mal so an.
Du baust zuerst ein Div mit deinem home.jpg. Vielleicht zentriert, das geht mit margin: auto.

<style type="text/css">
#home {width: 733px; height: 550px; background-image: url(home.jpg)}
</style>

<div id="hom"></div>

Sodale. Jetzt möchtest Du irgendwas INNERHALB dieses Home-Divs definieren (obs ein Bild oder Text ist ist mal völlig egal). Meinetwegen ungefähr in die Mitte von dem Ding ein farbiges Textfeld.

Wir weritern den Style:

<style type="text/css">
#home {width: 733px; height: 550px; background-image: url(home.jpg)}
#farbfeld {position: relative; background-color: yellow; left: 366px; top: 275px; }

</style>

und schreiben dann

<div id="home">
   <div id="farbfeld">Dies ist ein Farbfeld. Hier könnte auch ein Bild stehen:
   <img src="irgendeinbild.jpg">

</div>
</div>

Oder aber du willst, dass sich das Farbfeld rechts von deinem home-Div befindet, dann könntest du sowas machen:

#home {width: 733px; height: 550px; background-image: url(home.jpg); float: left;}
#farbfeld {background-color: yellow;}

<div id="home">
</div>
<div id="farbfeld">Dies ist ein Farbfeld</div>

und, und, und....

[Jörg Peschke]

Hoppla, da waren etz ein paar fehler drin:

Du baust zuerst ein Div mit deinem home.jpg. Vielleicht zentriert, das geht mit margin: auto.

<style type="text/css">
 #home {width: 733px; height: 550px; background-image: url(home.jpg); margin: auto}
 </style>

Muss das heissen

<div id="hom"></div>

<div id="home"></div>
natürlich

[Christoph Zurnieden]

Hi,

Nun will ich aber dass sich diese Boxen an dem Bild orientieren wenn ich sie mit CSS ausrichte und nicht an der Seite des Browsers... wie stell ich sowas ein?

Indem Du es ganz unterläßt und anders an die Sache herangehst. Z.B. so wie ich es in Deinem originalem Thread beschrieben habe: mit transparenten Hintergründen bei den Einzelbildern. Aber vor allem: in dem Du eines nach dem anderem machst, denn sonst verzettelst Du Dich gnadenlos, wie Du es selber bewiesen hast. Was Du Dir da zusammengebastelt hast ist ein Riesendurcheinander, das durch Flicken auch nicht mehr besser wird.
IFRAME? MAPs? Zusammengeklaubtes Javascript? Gut, das Letzte ist jetzt nicht schlimm, faul sein ist beim Programmieren ja schließlich nicht gleich zwingend eine schlechte Eigenschaft, aber es gibt auch unsinniges Javascript, das sollte mantunlichst unterlassen, das ist für gewöhnlich -- d.h. wenn Du nicht gerade nach Zeile bezahlt wirst -- überflüssige Arbeit. Deine Idee läßt sich in reinem HTML/CSS darstellen. Danach brauchst Du dann zwar ein wenig "Koong-Foo" für den IE und andere ältere Browser, aber auch erst _danach_.

so short

Christoph Zurnieden