nicht angemeldet
"Ecke unten rausbeißen" mit CSS+HTML: Geht nicht?
Moin, liebe Teilnehmer!
Ich habe ein ganz kleines Problem mit einem Konstrukt, welches ich entwerfen wollte, wofür ich aber noch keine wirklich gute Lösung gefunden habe. Vermutlich ist die Lösung doch nicht so trivial.
Gewöhnlich haben alle Strukturen in HTML rechteckige Ausmaße. Also sowas:
+---------------+
!Content...... !
!........... !
!............. !
!....... !
+---------------+
<div>Content......</div>
Was ich auch schon vorgefunden habe in SelfHTML ist "Ecke oben rausbeißen (siehe Beispiel zu "CSS:float" - </selfhtml/css/eigenschaften/anzeige/float.htm>):
+----------+
!Content.. !
+----+....... !
!............. !
!.... !
+---------------+
Da wird einfach ein ein Bereich zuerst definiert, der mit "float:left" umflossen wird.
<div><div style="float:left; width:100px;"> </div>Content......</div>
Was ich aber nicht gefunden habe, und die Frage ist, ob das überhaupt geht: "Ecke unten rausbeißen"
+---------------+
!Content...... !
!........... !
+-----+....... !
!....... !
+---------+
Randbedingungen: Der Content ist irgendein fortlaufender Text gewisser Menge, welcher möglicherweise Absätze enthält, oder auch nicht. Die rausgebissene Ecke hat aber gefälligst eine feste Position einzunehmen, um die der Text also je nach Gegebenheit herumzufließen hat.
Folgendes Konstrukt funktionierte nicht:
<div>Content.......<div style="float:left; width:100px"> </div></div>
Der Fließtext füllt die volle Breite aus, und die "Ecke" hängt ganz am Ende aus dem Layer heraus.
Interimslösung bislang: Manuell hingucken und dem in etwa passenden Textabsatz im äußeren DIV ein passend dickes 'padding-left' verpassen, so daß der Platz entsteht. Für Seiten, die danach nie wieder angefaßt werden, sicher kein großes Problem. Aber wenn der Content variabel ist, was dann?
Wenn jemand schon mal unten eine Ecke rausgebissen hat, und das ganze möglicherweise in den großen drei Browsern (Opera, Netscape 4 und notwendigerweise auch IE <eg>) auch noch gleichartig aussieht, wäre eine Nachricht toll. Wer nicht glauben will, daß sowas mit CSS meiner Ansicht nach nicht wirklich funktioniert (ja, ich habe auch mit 'position:irgendwas', 'bottom:0px' etc. rumprobiert), darf gerne auch etwas rumspielen. :)
Oder falls jemand herausgefunden hat, wie man Text, der in das eine DIV nicht mehr reinpaßt, in ein zweites DIV überlaufen lassen kann - auch gut.
Hinweise, daß das alles mit CSS3 möglich sein wird, nehme ich ebenfalls gerne zur Kenntnis (ich halte meine Frage für grundsätzlich interessant, und man will ja am Ball bleiben).
Danke für jede Wortmeldung.
- Sven Rautenberg
-
Sup!
Vielleicht kannst Du einen rechteckigen, leeren Kasten relativ zum content positionieren, so ungefähr so:
<div>
<div style="float:left;"> content bla bla bla</div>
<div style="position:relative;bottom:0px;left:0px;width:100px;height:100px;"> </div>
</div>Keine Ahnung, ob das funzt, aber ich will das ja auch nicht ;-)
Gruesse,
Bio
-
ja, Bio ...
Vielleicht kannst Du einen rechteckigen, leeren Kasten relativ zum content positionieren
das müßte es bringen. Ich hab das Problem auch schonmal gehabt, hab das Beispiel aber nicht hier zuhause, sondern auf nem "Dientrechner" liegen ... Ich weiß nur, daß ich das mal nicht mit DIV's, sondern mit ner Tabelle gemacht hatte. Wichtig war die _relative_ Positionierung des links unten liegenden <td>, wobei als Bezug für "relative" ein _absolute_ positioniertes <tr> herhalten mußte
Grüße aus Berlin
Christoph S.
-
hallo,
Vielleicht kannst Du einen rechteckigen, leeren Kasten relativ zum content positionieren
das müßte es bringen.
bringt es aber nicht.
grüße
thomas
-
-
-
Wenn jemand schon mal unten eine Ecke rausgebissen hat, und das ganze möglicherweise in den großen drei Browsern (Opera, Netscape 4 und notwendigerweise auch IE <eg>)
mit dieser definition von "große 3" wäre ich sehr vorsichtig..
Der IE gehört definitiv dazu. Netscape 4 auch. Allerdings ist Mozilla/Netscape 6 inzwischen gleichstark vertreten - mit der 0.9.8 hat er massiv aufgeholt, auf meinem Server Netscape 6 überholt. Opera und konqueror, die ja beide auch noch CSS können hängen dann so bei 3,5% bzw. 0,6%
..grundsätzlich kann man sagen, dass sich Opera, Mozilla und konqueror bei CSS in etwa gleich verhalten - nämlich so, wie es in der Spec steht. Bugs gibt's allerdings überall mehr als genug. Der IE kann das meiste auch darstellen, aber er stell es auch noch richtig dar, wenn der HTML-Code total im Eimer ist... Netscape 4 macht gerne mal irgendwelchen Mist. -
Hallo ...
Hmmm hört sich kompliziert an. Ich steig da auch nich so ganz durch. Aber mir ist eben so eingefallen, vieleicht kann man ja nen transparentes Gif unten links in die Ecke drücken. Dann sollte der Text eigentlich rumm-eumeln.
Wenn das funzt... und du das meinst ... sieht das bestimmt ("sehr geil") aus.
Hab ich aber noch nicht probiert !!!
good luck
code2i
-
Hallo Sven,
es geht alles! Diese Sache geht jedoch nur mit Javascript. Da braucht man schon ne kleine function dafür.
Hab da mal ne spezielle Datei gebastelt. Begucken kann man die unter:
man folge dem Link "Life" auf der linken Seite, dann is man schon bei mir daheim ( dsl-flat ;-) ). Dann habe ich extra für Dich nen Link reingehangen. Siehste dann schon.
Das Teil läuft auf alle Fälle unter Netscape 6.1 unter Linux und wahrscheinlich auch unterm IE - wollte ich aber nicht testen, weil da müßte ich erst den zweiten PC anschalten. Für Netscape 4 müßte "offsetHeight" durch "height" ersetzt werden und "offsetTop" durch "top".
document.getElementById müßte unter ne4 auch noch entsprechend ersetzt werden. Wie das mit dem innerHTML beim ne4 läuft - keine Ahnung.
Opera - weiß ich nicht, weil nehm ich nicht.
das reinragende DIV habe ich mal zart-rosa eingefärbt. Kannst Dir ja die Quelle nehmen und den Text nach Herzenslust verlängern und kürzen. Wie Du das nun in Dein Projekt bekommst, überlasse ich Dir. Optimierungen sind sicher auch möglich. Das ist sicher nicht die schnellste Variante, aber ging am schnellsten zu schreiben.
Für Javascript-Muffel geht's halt nicht. Aber man kann ja den Text auch nochmal unten ins DIV reinschreiben.
Kurzes Feedback is natürlich erwünscht.
Gruß
Andreas-
Moin!
Für Javascript-Muffel geht's halt nicht. Aber man kann ja den Text auch nochmal unten ins DIV reinschreiben.
Kurzes Feedback is natürlich erwünscht.
Längeres Feedback kommt per Mail. Hier der Vollständigkeit halber nur soviel:
Eine Lösung mit Javascript ist nicht genau das, was ich suchte. Opera macht mit deiner Lösung Probleme (kennt den Layer "corner" nicht, weil es den wohl zu der Zeit noch nicht gibt), und da ich bislang nur "getElementById" sehe, ist Netscape 4 und IE 4 auch erstmal draußen. Vielleicht kein großes Thema, das einzubauen, aber nur für ein simples Layout ganz doof. Zumal der Text durch Javascript eingefügt wird. Tritt dabei ein Fehler auf oder ist Javascript ganz aus, dann bleibt die Seite leer.
Schade, daß HTML+CSS noch keine Lösung bieten.
- Sven Rautenberg
-