Bild in erster Spalte einer table an bestimmter pos fixen?
0 0 
Felix Riesterer
0 0 Felix Riesterer
0 0 0 
Der Martin
Bild in erster Spalte einer table an bestimmter pos fixen?
Hallo.
ich hab ein grundlayout in dieser form hier:
<html>
<body>
<table border=1 width="100%" height="100%">
<tr>
<td style="background:green" align="center">
<div style="width:500px;background:yellow;height:20px"></div>
<div style="width:800px;background:white;height:20px; margin-top:40px"></div>
<div style="width:400px;background:black;height:20px; margin-top:50px"></div>
</td>
<td style="width:300px;background:red">
</td>
</tr>
</table>
</body>
</html>
Jetzt soll aber noch ein bild mit rein.
das bild soll auf der weißen div links liegen.
Weis jemand wie ich so ein Bild dahin bekomme?
klar ^^mit position absolute und die richtigen top left werte.
Das Problem ist, das die Divs eine feste breite haben. und das bild auf die oberkante von der weißen div links liegen soll.
Zudem kann ich nicht mit prozentangaben arbeiten, da die erste spalte der table zwar variiert, aber die divs darin eine feste breite haben und zentriert in der td liegen.
Könnt ihr mit helfen mit dem bild?
-
Hi!
Ich stelle einfach mal dein merkwuerdiges HTML nicht in Frage und komme als mal direkt und ohne Verbesserungsvorschlaege zum Thema:
Wie Du ein Bild einbaust, weisst Du? Du moechtest es links im weissen Div. Nun. Ueberraschung! Wenn Du ein Bild in das Div einfuegst wird es dort am linken Rand vor sich hinduempeln. Und wenn Du es genauer haben willst, dann mit position. Meinetwegen absolute.
Was genau aber ist jetzt Dein Problem?
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett -
Lieber capgeti,
<html>
<body>
<table border=1 width="100%" height="100%">
<tr>
<td style="background:green" align="center">
<div style="width:500px;background:yellow;height:20px"></div>
<div style="width:800px;background:white;height:20px; margin-top:40px"></div>
<div style="width:400px;background:black;height:20px; margin-top:50px"></div>
</td>
<td style="width:300px;background:red">
</td>
</tr>
</table>
</body>
</html>nennst Du das Dokument-Struktur? Ich nenne es Tag Soup und finde, Du solltest Dich davon auf Nimmerwiedersehen verabrschieden. Wie es besser geht, kannst Du schön gebündelt hier nachlesen: [SELFHTML9-Preview: Tutorial für Anfänger](http://redaktion.selfhtml.org/selfhtml-preview/tutorial/html_css/anfaenger01.html) Wenn Du's etwas plakativer habenb möchtest: [Warum Layout mit Tabellen dumm ist](http://seybold.jan-andresen.de/) > das bild soll auf der weißen div links liegen. Du denkst zusehr an "das soll hier abgebildet werden", anstatt "die inhaltliche Struktur verlangt dieses passende Markup dazu". Sobald Du aus dieser Phase endlich herausgewachsen bist, wist Du an Deine Layouts viel sinnvoller herangehen, z.B. indem Du ein <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=externes Stylesheet> benutzt, anstatt dieses unsäglichen inline-Codes. > Könnt ihr mit helfen mit dem bild? Nein, denn das wäre keine Hilfe. Dir wäre wesentlich mehr geholfen, wenn man Dir zeigt, wie man solche Layoutfragen wesentlich sinnvoller angeht, damit Du Dir in Zukunft Deine Probleme nicht selbst machst. Für Rückfragen stehe ich Dir hier wieder zur Verfügung - wenn Du die verlinkten Seiten durchgearbeitest hast. Liebe Grüße, Felix Riesterer. -- ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber capgeti,
nennst Du das Dokument-Struktur? Ich nenne es Tag Soup und finde, Du solltest Dich davon auf Nimmerwiedersehen verabrschieden. Wie es besser geht, kannst Du schön gebündelt hier nachlesen: SELFHTML9-Preview: Tutorial für AnfängerWenn Du's etwas plakativer habenb möchtest: Warum Layout mit Tabellen dumm ist
das bild soll auf der weißen div links liegen.
Du denkst zusehr an "das soll hier abgebildet werden", anstatt "die inhaltliche Struktur verlangt dieses passende Markup dazu". Sobald Du aus dieser Phase endlich herausgewachsen bist, wist Du an Deine Layouts viel sinnvoller herangehen, z.B. indem Du ein <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=externes Stylesheet> benutzt, anstatt dieses unsäglichen inline-Codes.
Könnt ihr mit helfen mit dem bild?
Nein, denn das wäre keine Hilfe. Dir wäre wesentlich mehr geholfen, wenn man Dir zeigt, wie man solche Layoutfragen wesentlich sinnvoller angeht, damit Du Dir in Zukunft Deine Probleme nicht selbst machst.
Für Rückfragen stehe ich Dir hier wieder zur Verfügung - wenn Du die verlinkten Seiten durchgearbeitest hast.
Liebe Grüße,
Felix Riesterer.
nun.dies ist nur ein einfaces beispiel, welches mein problem darstellt.
Aber da ich gwt für die entwicklung benötige, kann ich die automatische table generierung nicht verhindern.
ich weis selber das tables fürs layout schlecht sind.Hi!
Ich stelle einfach mal dein merkwuerdiges HTML nicht in Frage und komme als mal direkt und ohne Verbesserungsvorschlaege zum Thema:
Wie Du ein Bild einbaust, weisst Du? Du moechtest es links im weissen Div. Nun. Ueberraschung! Wenn Du ein Bild in das Div einfuegst wird es dort am linken Rand vor sich hinduempeln. Und wenn Du es genauer haben willst, dann mit position. Meinetwegen absolute.
Was genau aber ist jetzt Dein Problem?
Das Bild soll nicht in die Div box rein, sondern soll drüberliegen über die elemente der weißen divbox. Das dumme ist nur, das ich das wie gesagt mit gwt mache. Dort gibt es nur zum glück (^^) panels. Und wenn ich da ein bild einfügen will, muss ich es einen panel unterordnen.
-
Lieber capgeti,
nun.dies ist nur ein einfaces beispiel, welches mein problem darstellt.
ach, Dein Problem ist in Wirklichkeit ein ganz anderes?
Aber da ich gwt für die entwicklung benötige,
Was soll dieses gwt denn sein? Machst Du nun eine Website, oder spielst Du mit irgend so 'nem Homepage-Baukasten-Gedöhns (auch wenn's von Google ist) herum?
kann ich die automatische table generierung nicht verhindern.
Wenn Du nicht willst, dann kannst Du nicht. Schon klar. Aber wenn Du einmal wollen solltest, dann wirst Du es vielleicht tatsächlich auch können. Also ist Dein wahres Problem: Du willst [es] nicht [anders].
ich weis selber das tables fürs layout schlecht sind.
Und Du tust nix dagegen. Der Rest siehe oben.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
ach, Dein Problem ist in Wirklichkeit ein ganz anderes?
Ja mein Problem ist ein anderes...siehe oben -.-
Was soll dieses gwt denn sein? Machst Du nun eine Website, oder spielst Du mit irgend so 'nem Homepage-Baukasten-Gedöhns (auch wenn's von Google ist) herum?
Ich arbeite mit an einem Internetshop für einen Kunden von unserer Firma.
Was gwt ist kannst du bei wikipedia nachlesen link
Weiteres darf ich nicht sagen!Wenn Du nicht willst, dann kannst Du nicht. Schon klar. Aber wenn Du einmal wollen solltest, dann wirst Du es vielleicht tatsächlich auch können. Also ist Dein wahres Problem: Du willst [es] nicht [anders].
Wenn du mir helfen willst, dann schreib nicht so ein müll, sondern hilf mir lieber. Ansonsten brauchst du nicht mehr zu antworten...
-
Ich habs inzwischen selber hinbekommen.
-
Ich habs inzwischen selber hinbekommen.
Haett mich jetzt interessiert, wie.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
Haett mich jetzt interessiert, wie.
naja. Die lösung ist noch nicht wirklich zufriedenstellend. Ich such noch ne alternative zu margin für den IE. Ich hab in der weißen div (siehe oben) das bild eingefügt und mit margin ins minus verschoben, aber das macht ja der IE nicht mit, bzw anders als FF.
Hast du ne idee?-
Hast du ne idee?
versetzt du den IE etwa in den Quirksmodus?
-
versetzt du den IE etwa in den Quirksmodus?
nein. Der Ie ist im CSS1Compat modus. haben die verschiedenen modis was mit der darstellung von padding und so zu tun?
-
-
Hoi!
naja. Die lösung ist noch nicht wirklich zufriedenstellend. Ich such noch ne alternative zu margin für den IE. Ich hab in der weißen div (siehe oben) das bild eingefügt und mit margin ins minus verschoben, aber das macht ja der IE nicht mit, bzw anders als FF.
Aha. Mir ist grad noch nicht so ganz klar, was genau du machen willst.
Hast du ne idee?
Ja. Du kannst Das Bild in jedes Element stecken von dem aus Du die relativen Kooerdinaten fur die endgueltige Position festlegen kannst (das Element, das betroffen ist, ein Elternelement, ein Element davor oder danach...). Dann positioniere Das Bild absolut.
Eventuell brauchst Du aber auch keine absolute Positionierung. Ich schaetze das nur, weil es so klingt, als wolltest Du das Bild vor dem Div. Absolut positionieren ist etwas tricky und sollte, falls moeglich, vermieden werden.
Ein kleines Beispiel (eine Grafik, eine bessere Beschreibung) koennte helfen. Im Moment stelle ich mir das so vor:
<div>
<div>toller Inhalt</div>
<div> noch viel toller Inhalt</div>
<div> bloeder Inhalt</div>
</div>----------------
|DIV1 |
... ----------------
:PIC?|DIV2 |
... ----------------
|DIV3 |
------------------
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
Ein kleines Beispiel (eine Grafik, eine bessere Beschreibung) koennte helfen. Im Moment stelle ich mir das so vor:
<div>
<div>toller Inhalt</div>
<div> noch viel toller Inhalt</div>
<div> bloeder Inhalt</div>
</div>----------------
|DIV1 |
... ----------------
:PIC?|DIV2 |
... ----------------
|DIV3 |
----------------nicht ganz so wie ich es meine... ich hab mal schnell was in gimp gemalt:
Und das hab ich bis jetzt mit negativ margin gelöst, was aber im IE nicht funktioniert.
-
Hallo,
Jau. Damit kann man was anfangen. Das Bild soll immer an der gleichen Stelle des weissen Div sitzen?
Dann positioniere es wirkich absolut. Platziere es dazu in einem Element, von dem Du die relative Position des Bildes bestimmen kannst:
Ein Beispielkonstrukt:
<div id="Elter">
<div>toller Inhalt</div>
<div>noch viel tollerer Inhalt der ein Bild verpasst bekommen soll.</div>
<div>bloeder Inhalt</div>
</div>Du kannst das Bild natuerlich in den mittleren Container einfuegen. Sollte das nicht gehen kannst Du es auch in einen der anderen Container verfrachten. Solange aber der obere Container eine feste Groesse hat bietet es sich an das Bild in den Elterncontainer zu packen:
<div id="Elter">
<img/>
<div>toller Inhalt</div>
<div>noch viel tollerer Inhalt der ein Bild verpasst bekommen soll.</div>
<div>bloeder Inhalt</div>
</div>So. Der Rest ist Mathe. Positioniere das Bild absolut und verschiebe es von der oberen linken Ecke des Elternelements auf den weissen Container.
Solltest Du den weissen Container bearbeiten koennen ist es ja noch einfacher:
<div id="Elter">
<div>toller Inhalt</div>
<div> <img/>noch viel tollerer Inhalt der ein Bild verpasst bekommen soll.</div>
<div>bloeder Inhalt</div>
</div>Das Bild etwas hoeher und etwas nach links. (top:-xpx; left:-ypx)
Was war dabei dein Problem? Du meintest absolut wuerde nicht gehen. Wenn Du es so machst ist das Bild an den mittleren (deinen weissen) Container genagelt und geht ueberall hin, wo der auch hingeht. <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=Du darfst nur nicht vergessen die Elemente auch entsprechend mit postition zu versehen>.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
mhm. Das mit den Elternelement würde vllt klappen. Das muss ich gleich mal ausprobieren.
Das Problem ist, das ich noch zisch andere Probleme habe, betreffs FF <-> IE ^^ich muss den shop für 5 browser kompatipel machen, man man man ^^
Ich antworte wieder, sobalt ich es ausprobiert hab.
Danke dir erstmal!PS: Wie gesagt: Das "Layout" im ersten Post war nur ein Beispiel. Ich weis das man StyleSheets auslagern sollte, und auch das tables schlecht sind... Divs machen es ja auch =)
-
-
-
-
-
-
-
Hallo,
Ich arbeite mit an einem Internetshop für einen Kunden von unserer Firma.
Was gwt ist kannst du bei wikipedia nachlesen link
Weiteres darf ich nicht sagen!
Wenn du mir helfen willst, dann schreib nicht so ein müll, sondern hilf mir lieber.sorry, aber wenn der Doc dem Patienten wirklich helfen will, muss er ihm leider dem Tumor rausoperieren - auch wenn das dem Patienten *im Moment* noch mehr Schmerzen zufügt.
Klar, er kann den Patienten auch mit Morphium volldröhnen und ihn seinem Schicksal überlassen. Das würde aber seinem Berufsethos widersprechen.Glaub mir: Die Leute, die sich hier bemühen zu helfen, haben zwar keinen hippokratischen Eid geschworen. Aber sie haben dennoch das Anliegen, den Fragenden wirklich zu helfen und nicht, sie nur bis zur nächsten Frage zu vertrösten.
Ansonsten brauchst du nicht mehr zu antworten...
Wenn du Hilfe willst, solltest du auch bereit sein, sie anzunehmen und das Geschwür wirklich loswerden *wollen*.
So long,
Martin--
Time's an illusion. Lunchtime doubly so.
(Douglas Adams, "The Hitchhiker's Guide To The Galaxy")
-
-
-
-