Dominik: Positionierung eines Bildes

Hallo, ich habe ein Problem, bzw nicht so wirklich Ahnung von CSS und der Positionierung.

ALso ich habe auf meiner Seite mehrere Tabellen zur Positionierung und Zentrierung....

So nun habe ich innerhalb einer Zelle mehrere Textabschnitte. Da hinein möchte ich ein in DIV integriertes Bild in einen freien Bereich des Textabschnittes positionieren.

Problem an der Sache ist, mit position:absolute verändert sich die Position des Bildes je nach Größe des Browsers.
Mit position:relative habe ich das Problem, dass je nach der Stelle, an der ich den div code eingefügt habe, ein Platzhalter für dieses Feld eingefügt wird... den ich natürlich so nicht haben will...

Nun ist meine Frage... was mache ich nun in so einem Fall? relative? Und wenn, wohin mit dem Code?
Oder wie behebe ich das Absolute Problem? Habe das alles noch nicht so ganz gerafft.

Danke, Dominik

  1. Hi,

    So nun habe ich innerhalb einer Zelle mehrere Textabschnitte. Da hinein möchte ich ein in DIV integriertes Bild in einen freien Bereich des Textabschnittes positionieren.

    Was versteht Du unter Positionieren? Vermutlich nur die Angabe einer bei Deinen Einstellungen - also nicht nur Fenster- sondern auch Schriftgröße - gewünschten absoluten Position. Sowas kann zwar auch mit absoluter Positionierung funktionieren, aber sinnvoll ist das meist nicht und sobald Text mit im Spiel ist, kann es zu unerwünschten Nebenwirkungen kommen.

    Überlege Dir also bitte, wo das Bild hin soll und denke nicht an eine bestimmte Position, sondern wo es in Bezug auf die übrigen Elemente platziert werden soll. Dann sollte es eine Lösung ohne position geben. Die CSS-Eigenschaft float bietet sich nicht nur für einen Textumfluss an, sondern in Verbindung mit margin auch für nebeneinander stehende Elemente.

    freundliche Grüße
    Ingo

    1. Hi,

      So nun habe ich innerhalb einer Zelle mehrere Textabschnitte. Da hinein möchte ich ein in DIV integriertes Bild in einen freien Bereich des Textabschnittes positionieren.
      Was versteht Du unter Positionieren? Vermutlich nur die Angabe einer bei Deinen Einstellungen - also nicht nur Fenster- sondern auch Schriftgröße - gewünschten absoluten Position. Sowas kann zwar auch mit absoluter Positionierung funktionieren, aber sinnvoll ist das meist nicht und sobald Text mit im Spiel ist, kann es zu unerwünschten Nebenwirkungen kommen.

      Also ich habe in einer Tabelle (ja, auch wen die unnötig ist) zentrierten text über mehrere Zeilen, bei denen dann rechts davon, in der Tabelle ja ein Freiraum entsteht. In diesen Freiraum möchte ich ein Bild legen, OHNE dass davon der Text beeinflusst wird.
      Wenn ich das Bild nun einfach reinlege und auch mit style="float:right" arbeite, dann legt er es ja an den Tabellenrand und beeinflusst auch irgendwie die Zentrierung des Textes. Deswegen habe ich mit Position:... rumgebastelt, komme aber irgendwie mit float auch ned weiter

      Überlege Dir also bitte, wo das Bild hin soll und denke nicht an eine bestimmte Position, sondern wo es in Bezug auf die übrigen Elemente platziert werden soll. Dann sollte es eine Lösung ohne position geben. Die CSS-Eigenschaft float bietet sich nicht nur für einen Textumfluss an, sondern in Verbindung mit margin auch für nebeneinander stehende Elemente.

      freundliche Grüße
      Ingo

      1. Hi,

        Also ich habe in einer Tabelle (ja, auch wen die unnötig ist) zentrierten text über mehrere Zeilen, bei denen dann rechts davon, in der Tabelle ja ein Freiraum entsteht.

        Handelt es sich z.B. um ein Gedicht oder warum soll der Text zentriert sein?
        Und wie entsteht dieser Freiram? Lediglich durch manuell gesetzte Zeilenumbrüche? Dann setze die Schriftgöße mal rauf.

        In diesen Freiraum möchte ich ein Bild legen, OHNE dass davon der Text beeinflusst wird.
        Wenn ich das Bild nun einfach reinlege und auch mit style="float:right" arbeite, dann legt er es ja an den Tabellenrand und beeinflusst auch irgendwie die Zentrierung des Textes.

        Den Abstand nach rechts könntest Du ja über margin einstellen. Dass das Bild über float den nebenstehenden Text beeinflussen würde, ist grundsätzlich sinnvoll. Anstatt über position (was auch hier möglich wäre) Überlagerungen z.B. bei Schriftvergrößerung zu provozieren rate ich Dir, das Bild einfach als Hintergrundbild anzugeben. Dann setzt sich der Text schlimmstenfalls über das Bild.

        freundliche Grüße
        Ingo

        1. Hier sieht man, wie es ursprünglich ohne Bild ausschaut:
          http://img236.imageshack.us/img236/1672/ohnebild6ys.jpg

          rechts ist ja durch die Zentrierung der einzelnen Zeilen ein Freiraum.

          Hier das ganze nochmal MIT Bild:

          http://img236.imageshack.us/img236/569/mitbild3tw.jpg

          Das wäre nun mit FLoat

          Wie man sieht, werden die Zeilen in ihrer Zentrierung beeinflusst und das Bild liegt am Rand. Mit Margin hab ich auch schon gearbeitet, aber das beeinflusst den Text selber ebenfalls...

          Keine Beeinflussung habe ich nur mit Position erzielt, aber da wanderte das Bild je nach Browsergröße :(

          1. Hi,

            Hier sieht man, wie es ursprünglich ohne Bild ausschaut:
            http://img236.imageshack.us/img236/1672/ohnebild6ys.jpg

            wie ich es mir gedacht habe: diese Aufzählung muss nicht zentriert sein - dies verschlechtert die Lesbarkeit.

            http://img236.imageshack.us/img236/569/mitbild3tw.jpg

            selbst wenn Du das Bild passend positionierst (was wie gesagt möglich wäre): bei Schriftvergrößerung würde dies unbrauchbar werden.
            Ich würde hier ganz einfach auf die Zentrierung verzichten und das Bild vom Text umfließen lassen; auch für die manuellen Umbrüche sehe ich hier keine inhaltliche Rechtfertigung.

            freundliche Grüße
            Ingo

            1. Hallo,

              ich bin ja wirklich für jede Hilfe und jeden Tip dankbar! Wirklich! Aber ich habe nicht wissen wollen, was ich ändern soll... Ich habe einfach bestimmte Vorstellungen im Kopf, die ich nun mal gern umsetzen möchte, sofern es möglich ist.
              Was nicht sein muß und was doch, ist meiner Meinung nach im Internet keine Frage, denn es ist ein freies Medium. Man fragt sich bei der Bildzeitung doch auch nicht, ob´s die Überschrift nicht eine Nummer kleiner gab.

              Wenn ich Zentrierungen mag, dann muß ich halt schauen, daß ich auch  alles so umsetzen kann - muß ja nicht jeder mögen. Schließlich geht es hier ja auch um eine Privatpage, die ansprechend aussehen soll, und da im Netz der Phantasie keine Grenzen gesetzt sind, halte ich eine Rechtfertigung für die Anordnung einzelner Elemente eh für überflüssig.
              Sorry, aber da haben wir wohl verschiedene Auffassungen von Webseiten.

              Wobei ich allerdings festgestellt habe, daß auf der von Dir angefertigten "Tanzseite" ebenfalls "unnütze" Zentrierungen vorhanden sind. Das war hier zwar nicht das Thema, aber wieso muß eine Bildbeschreibung bzw. Vorstellung eines Teams zentriert sein?

              Nichts für ungut und trotzdem danke. Aber ich versuch´s woanders nochmal.

              1. Hi,

                Was nicht sein muß und was doch, ist meiner Meinung nach im Internet keine Frage, denn es ist ein freies Medium. Man fragt sich bei der Bildzeitung doch auch nicht, ob´s die Überschrift nicht eine Nummer kleiner gab.

                das nicht, aber wen eine Zeitung auf die Schapsidee kommen würde, ihre Fließtexte durchgängig zu zentrieren, hätte sie sicherlich erhebliche Absatzprobleme, weil Viele vermutlich keine Lust hätten, sowas Unübersichtliches zu lesen.

                halte ich eine Rechtfertigung für die Anordnung einzelner Elemente eh für überflüssig.

                Ich habe keine Rechtvertigung verlangt - nur einen wirklich gut gemeinten Tip zu einer sinnvollen und lesefreundlichen Typografie gegeben. das hat auch nichts mit Zentrierung im Allgemeinen zu tun. Es gibt halt Fälle, in denen Zentrierung nicht angemessen ist. Und außerdem würde ein Verzicht auf Zentrierung in Deinem Fall auch Dein Problem gleich mit lösen.

                Wobei ich allerdings festgestellt habe, daß auf der von Dir angefertigten "Tanzseite" ebenfalls "unnütze" Zentrierungen vorhanden sind. Das war hier zwar nicht das Thema, aber wieso muß eine Bildbeschreibung bzw. Vorstellung eines Teams zentriert sein?

                Das ist gehört zwar wirklich nicht zum Thema, aber wenn Du die Seiten meines Tanzsportvereins meinst: den Relounch (und damit auch eine sinnvollere Auszeichnung und Formatierung) schiebe ich schon sehr lange vor mich hin.

                Nichts für ungut und trotzdem danke. Aber ich versuch´s woanders nochmal.

                Die Hilfe bekämst Du auch hier (im Archiv oder der Beschreibung zu position), wenn Du Dich darauf konzentrierst, worauf absolute Positionierung Bezug nimmt. Nur löst das Dein Problem wie schon gesagt nur sehr unbefriedigend, da der Freiraum bei Schriftvergrößerung sehr schnell keiner mehr ist.

                freundliche Grüße
                Ingo

                1. Hi,

                  mal abgesehen davon, daß das jetzt langsam wirklich Off Topic geht:

                  das nicht, aber wen eine Zeitung auf die Schapsidee kommen würde, ihre Fließtexte durchgängig zu zentrieren, hätte sie sicherlich erhebliche Absatzprobleme, weil Viele vermutlich keine Lust hätten, sowas Unübersichtliches zu lesen.

                  Gut, daß ich keine Zeitung verlege oder editiere und daß auf meiner Page nicht wirklich viel Text an einem Stück zu finden ist. Ich glaube, daß man bei einem kleinen zentrierten Stückchen Text noch durchaus mit dem Lesen klarkommt... Aber wie wir ja hier sehen, ist das wirklich Geschmackssache.
                  Und ich persönlich finde Zentrierungen schon lesefreundlich - ich kann ja nur von mir ausgehen, und ich muß sagen, daß ich (bei kleinen Abschnitten) eher Lust habe, einen pfiffig angeordneten als einen rechtsbündigen Text zu lesen.

                  Daß vielleicht manche ihrem Internet Explorer oder sonstigem Browser persönliche Einstellungen verpassen, nehme ich einfach mal in Kauf. Wer eine andere Schriftgröße wählen will, muß mit Verschiebungen rechnen, finde ich - genauso wie ich damit rechnen muß, daß meine Seite nicht vernünftig dargestellt wird.

                  So muß halt jeder selber wissen, was er ästhetisch und was praktisch oder sinnvoll findet. Bei mir steht halt Ästhetik und Textanordnung eindeutig über Sinn und Schlichtheit.

                  Aber ich werde schon eine Lösung finden, die zumindest mich glücklich macht. Und da es eine private HP ist, ist das doch die Hauptsache.

                  LG!

                  Wobei ich allerdings festgestellt habe, daß auf der von Dir angefertigten "Tanzseite" ebenfalls "unnütze" Zentrierungen vorhanden sind. Das war hier zwar nicht das Thema, aber wieso muß eine Bildbeschreibung bzw. Vorstellung eines Teams zentriert sein?
                  Das ist gehört zwar wirklich nicht zum Thema, aber wenn Du die Seiten meines Tanzsportvereins meinst: den Relounch (und damit auch eine sinnvollere Auszeichnung und Formatierung) schiebe ich schon sehr lange vor mich hin.

                  Nichts für ungut und trotzdem danke. Aber ich versuch´s woanders nochmal.
                  Die Hilfe bekämst Du auch hier (im Archiv oder der Beschreibung zu position), wenn Du Dich darauf konzentrierst, worauf absolute Positionierung Bezug nimmt. Nur löst das Dein Problem wie schon gesagt nur sehr unbefriedigend, da der Freiraum bei Schriftvergrößerung sehr schnell keiner mehr ist.

                  freundliche Grüße
                  Ingo

                  1. Hi,

                    Und ich persönlich finde Zentrierungen schon lesefreundlich - ich kann ja nur von mir ausgehen, und ich muß sagen, daß ich (bei kleinen Abschnitten) eher Lust habe, einen pfiffig angeordneten als einen rechtsbündigen Text zu lesen.

                    rechtsbündig? Das wäre in der Tat genauso schlecht lesbar.
                    Der wirklich objektive Nachteil bei nicht linksbündigem Text ist, dass das Auge beim Zeilenwechsel den Anfang der nächsten Zeile erst suchen muss und sich hierbei nicht am Rand orientieren kann.

                    Wer eine andere Schriftgröße wählen will, muß mit Verschiebungen rechnen,

                    In Deinem Fall wären das leider nicht nur Verschiebungen, sondern eine Überlagerung. Wenn Du allerdings wie anfangs vorgeschlagen das Bild im Hintergrund einbindest, würde zumindest der Text nicht überlagert, sondern das Bild.

                    Aber ich werde schon eine Lösung finden, die zumindest mich glücklich macht. Und da es eine private HP ist, ist das doch die Hauptsache.

                    Auf zwei Lösungen sollte ich Dich eigentlich inzwischen gebracht haben...

                    freundliche Grüße
                    Ingo

                    1. Hallo,

                      was das rechtsbündig angeht: Entschuldigung, ich meinte selbstverständlich linksbündig - wieso ich rechtsbündig geschrieben hab´, weiß ich nicht.
                      Da ich mal ein Seminar über Sprache in der Werbung besucht habe (Germanistik), würde ich meine paar zentrierten Zeilen durchaus mit einer Reklameseite in einer Zeitschrift vergleichen. Da geht es schließlich auch um ein ansprechendes Äußeres und darum, die Lust zum Lesen zu wecken. Langweilige Werbung interessiert heutzutage kaum noch jemanden - und so seh´ ich das auch bei HPs.
                      Und bei den paar Zeilen, habe ich persönlich auch nicht das Gefühl, daß mein Auge suchen muß - aber auch da kann ich nur für mich sprechen. Und wie schon gesagt: Die Homepage muß in erster Linie mir gefallen.

                      Lösungen - ja, die hast Du mir gegeben, dafür danke ich Dir ja auch - aber sind sie zufriedenstellend für mich? Nein, eher nicht.
                      Deshalb suche ich ja auch weiter.
                      Nochmals trotzdem danke. Auch gut zu wissen, daß ich das Bild in den Hintergrund einbinden könnte. Aber mal sehen...

                      Schöne Feiertage und alles Gute!

                      1. Hi,

                        Lösungen - ja, die hast Du mir gegeben, dafür danke ich Dir ja auch - aber sind sie zufriedenstellend für mich? Nein, eher nicht.
                        Deshalb suche ich ja auch weiter.

                        Es gibt AFAIK nur diese zwei Lösungen, also entweder als Hintergrundbild für die Box (das kannst Du ja positionieren) oder absolute innerhalb der relative positionierten Box, wobei das Bild wie gesagt den Text überlappen kann.

                        freundliche Grüße
                        Ingo