Hi! Ich komme nicht auf den einfachsten HTML-Code, um Element so anzuordnen: 1. Block: Text links und ein Bild rechts davon 2. Block: Bild links und Text rechts Dabei darf aber der Text von Block 2 nicht in den Text von Block 1 rutschen! Egal, wie die Schriftskalierung eingestellt ist. Wie sollte man nach sowas mit Google suchen? <br> oder <p> scheinen hier als Blocktrennelemente nicht zu funzen, <div> schon, aber nur mit Chrome. Also zumindest wenn ich es mir in IE6 und FF2 anschaue, machen die Fehler.
Ja, ist schon klar. Da steht aber nicht die Lösung, selbst wenn man sich die Elemente dort durchliest. Also jedenfalls nicht für mich. Bliebe nur noch die Suche nach Webseiten, die sowas realisieren. Leider wird man meist mit Quellcode erschlagen. Daher die einfache Frage.
Auch wenn ich solche Antworten hasse. Tabelle, da bist du fertig bevor du die frage ins nächste forum postest
Probiere es mal mit einer definition list. zB file:///F:/selfhtml8/selfhtml81/html/text/listen.htm#definition <dl> <dt>linke Spalte</dt> <dd>>der blinde Rest</dd> </dl> Per CSS dann dt eine feste Breite geben und links floaten lassen.
Du kannst die Texte in <div>,<p> einfügen und die Bilder mit align="left/right" dazu bringen, dass diese umflossen werden. Ist so ziemlich der gleiche Effekt wie float. Wenn die Texte nicht höher als die Bilder sind dann sollte man evtl. noch ein:
1 | p { |
2 | clear:both; |
3 | }
|
verbauen. Hoffe ich habe dich richtig verstanden. Ansonsten (ja ist nicht mehr up to date und verpönt) benutz einfach eine Tabelle.
Ups, Lionks falsch und läßt sich nicht mehr korrigieren. http://de.selfhtml.org/html/text/listen.htm#definition
table da wo es semantisch sinnvoll ist, halt nicht als Gestaltungsmitel.
@Mr. Mo: Hab ich jetzt nicht so recht verstanden, aber ich werde die neuen Elemente finden. Ich glaube, du hast es auf den Punkt gebracht! HTML scheint eine Vorliebe dafür zu haben, Bilder zu umfließen. Das scheint mir der eigentliche Störenfried zu sein. 'Fehlerhafte' Umfließung sieht man ja sehr oft. An Tabelle dachte ich schon, aber es hätte ja einfacher sein können.
Ah. Grid ist ein guter Begriff. Danke!
Viele Wege führen zum Ziel ... ;) Das Grid gibt eine üble div-Suppe. Da kannst Du auch gleich tables nehmen. Mache es mit Hirn.
Joachim Drechsel schrieb: > Viele Wege führen zum Ziel ... ;) > > Das Grid gibt eine üble div-Suppe. Da kannst Du auch gleich tables > nehmen. Mache es mit Hirn. "hirn" ist was für ein css framework?
Joachim Drechsel schrieb: > Das Grid gibt eine üble div-Suppe. Da kannst Du auch gleich tables > nehmen. Womit wir wieder bei der Tatsache "semantischer Müll" wären.
LoL schrieb: > "hirn" ist was für ein css framework? brain.exe ... unerreicht. Mir ist nicht so ganz klar wieso es für jede Banalität gleich ein "Framework" oder ein "Projekt" braucht. Es ist so einfach wenn man sein brain.exe mal anwirft.
Hm. Werds ausprobieren ob div oder Tabelle. Sorry, oben müßt ihr <div> durch <span> ersetzen. Habe mir gerade die Source nochmal angesehen. Mein Ansatz war VOR der Fragestellung dieser: <span align="left"> blubber Block 1 </span> <br> <span align="right"> blubber Block 2 </span> Und Chrome versteht das anscheinend richtig; ordnet also die Bilder dem Text strukturell unter! Scheint mir aber nicht ganz korrekter Code - oder? Ich gebe zu, daß das ein paar Tage her ist und ich zwischenzeitlich schon wieder völlig andere Dinge machen mußte. Diese Umschalterei ist irgendwie nichts für mich. Heute HTML, morgen ne Sat-Antenne, übermorgen der Küchenschrank. Naja, vielleicht habe ich zu viel Testosteron :-))
Abdul, Eine Tabelle ist einfacher wie ein CSS, ausser man ist mit CSS sehr vertraut. Bei CSS ist es ein DIV. Ein DIV macht auch Fliesstext.
Hm. Naja, was oben steht war der Zeitpunkt wo es auf einmal in Chrome ging (Nach diversen Probiereien, denn ich habe nicht wirklich Plan) und ich mich damit abgefunden hatte, das vermutlich IE6 und FF2 einfach blöde sind. Vielleicht ist es anders. Erklärt aber, daß obiger Code vermutlich sowieso falsch ist. Kommen wir nochmal zu dem Punkt Hierarchie: Wie macht man das? Also Elemente anderen strukturell unterzuordnen? Hier in dem Beispiel, also der Textstring kann nicht über die obere und untere Kante des Bilders expandieren. Ich würde ja gerne verstehen, wie das mit CSS div usw. zusammenhängt. Bei Tabellen ist das klar, aber auch nicht schön in der Source anzusehen.
Das sind mir die besten, Tabellen "verteufeln" und dann mit align attributen rumhampeln... Was für einen "Dokumentenstil" verwendest du überhaupt? XMTML HTML4 HTML5 ...? Ohne Tabellen und viel frickeln ist das leider nur möglich wenn die Bilder relativ konstante Abmessungen haben, aber gerade die älteren Browser "verstehen" einige CSS Konstrukte nicht. Ach ja: http://giveupandusetables.com/ ;-)
Toller Hecht. Lösch dich selbst für diesen sinnlosen Post. Ich benutze HTML-uralt, damit es einfach zu verstehen und überall lauffähig ist. Und wenn das nicht geht, nehme ich HTML5, z.B. für Videos anstatt youtube-Blödsinn.
Also ich seh das Problem nicht, wenns schnell gehen soll und trotzdem vernünftig aussehen, warum man nicht zu Twitter Bootstrap oder YAML als CSS Framework greifen sollte. Die funktionieren, sind einfach zu benutzen und viele Standardprobleme sind vernünftig gelöst. Wenn du natürlich wieder mit FF2 und IE6 anfängst, ... dann brauchen wir hier eigentlich gar nicht weitermachen.
Wie ich schon andeutete, versuche ich die Sachen möglichst einfach zu realisieren, im Sinne das es auch ältere Systeme verstehen. Wenn das nicht funzt, ist mein Standard nur noch Chrome in der aktuellen Version. Alles dazwischen interessiert mich nicht - schlicht aus Zeitmangel und Desinteresse an putzigen Lösungen! Neue Frameworks fallen also meist flach, denn ich brauche die generelle Lösungen auch um sie in andere Sachen einbauen zu können. Es bringt mir ja wenig, wenn ich zig-mal Spezialwissen lerne. Obige Sache muß ich z.B. in wordpress einbauen. Die meisten Leute, die dieses hier benutzen, haben mit HTML aber auch wirklich nix am Hut. Sie schreiben also Entwurf und ich korrigiere die Sachen, daß sie dann so aussehen wie wir das wollen. Das klappt wunderbar. Falls deine beiden Kits irgendwie mit Wordpress kompatibel sind, wäre es eventuell interessant. Tja, und dann habe ich viele völlig verschiedene Projekte. Alles was ich lerne, muß also auch nach einem Jahr noch erinnerbar sein! Das heißt konkret, daß komplizierte eigenerdachte Strukturen möglich sind, aber nicht komplizierte fremde Sachen! Oder anders ausgedrückt: Wenn ich den Eindruck habe, daß die Einarbeitungszeit in ein fremdes Projekt größer ist als ein völlig eigener Entwurf, der zu nichts kompatibel ist, dann gehe ich den eigenen Weg. Bislang habe ich damit immer die besten Erfahrungen gemacht.
Ja mich hat das 15 Minuten gekostet mich in die Struktur von Twitter Bootstrap einzulesen und anzuwenden. Wenn du dir schneller was eigenes ausdenkst sei dir der Weg unbenommen.
Abdul K. schrieb: > Neue Frameworks fallen also meist flach Probier' mal YAML. Selbst bei Nichtgefallen kannst Du aus der Doku eine Menge für die eigene Umsetzung lernen, insbesondere Dinge wie div, float, align.
Die ganzen Frameworks sind ein fauler Kompromiß, meist überladen (man will sich ja gegenseitig mit Features abschießen). An HTML/CSS Lernen führt kaum ein Weg vorbei. Ein kleines CMS ist schneller geschrieben wie ein Framework gelernt. Das System wird kleiner und schneller.
Joachim Drechsel schrieb: > Die ganzen Frameworks sind ein fauler Kompromiß, meist überladen > (man will sich ja gegenseitig mit Features abschießen). An HTML/CSS > Lernen führt kaum ein Weg vorbei. > > Ein kleines CMS ist schneller geschrieben wie ein Framework gelernt. > > Das System wird kleiner und schneller. Hast du schonmal mit einem CSS-Framework wie YAML gearbeitet?
Ich habe mir die beiden Kandidaten kurz angesehen. Respekt, wenn du in 15min da eine anwendbare Übersicht hast. Ich nicht. Und dann habe ich in Wordpress reingeschaut und das mit denen verglichen. Offensichtlich machen die was ähnliches. Kompatibilität wäre ich jetzt sehr skeptisch. Wobei ich sagen muß, daß ich die Sachen von Wordpress nur möglichst rudimentär verwende. Ich weiß ja nicht, ob ich morgen Wordpress noch nutze und dann müssen die Informationen transportabel sein.
Abdul K. schrieb: > Ich habe mir die beiden Kandidaten kurz angesehen. Respekt, wenn du in > 15min da eine anwendbare Übersicht hast. Ich nicht. Naja dein Eingangsbeispiel sähe mit Bootstrap in etwa so aus, falls ich es richtig verstanden habe, ansonsten stell mal ne Skizze rein wie du es dir vorstellst und ich sag dir wies aussehen könnte: (sorry dass ichs in HAML schreibe, bin zu faul für HTML zuviel Tipparbeit):
1 | .container |
2 | .row |
3 | .span3 |
4 | %img{src: '...'}/
|
5 | .span9 |
6 | %p text bla bla |
7 | .row |
8 | .span9 |
9 | %p text bla bla |
10 | .span3 |
11 | %img{src: '...'}/
|
Fertig. Meine Seite die ich neulich hier beworben habe, habe ich auch damit erstellt, kannst dir ja mal den Quelltext davon ansehen.
Angehängte Dateien:
-
Browsershot.gif
34 KB
Warum so viel Aufwand? Eine simple Tabelle tuts doch eigentlich auch oder?! > Ich komme nicht auf den einfachsten HTML-Code, um Element so anzuordnen: > 1. Block: Text links und ein Bild rechts davon > 2. Block: Bild links und Text rechts > Dabei darf aber der Text von Block 2 nicht in den Text von Block 1 > rutschen! Egal, wie die Schriftskalierung eingestellt ist. Alles erfüllt, egal wie man skaliert.
Proxxon schrieb: > Warum so viel Aufwand? Eine simple Tabelle tuts doch eigentlich auch > oder?! Bis man tables mal ein bisschen stylen will, dann fängt der Krampf an :) Ganz abgesehen von der semantischen Vergewaltigung.
D. I. schrieb: > Proxxon schrieb: >> Warum so viel Aufwand? Eine simple Tabelle tuts doch eigentlich auch >> oder?! > > Bis man tables mal ein bisschen stylen will, dann fängt der Krampf an :) Man sein, wenn's (stylen) denn gleich für Claudia Schiffer sein soll (für die dicken Weiber vom Kegelclub reicht doch ein simples Tabellchen). ;-)
entweder zwei div (evtl. mit einem clearer dazwischen) und floatenden bildern in den divs oder ein wiederholter tipp: bootstrap, damit kann man wirklich schnell brauchbare layouts basteln (auch responsive ist recht einfach möglich)
Thread beobachten
Seitenaufteilung abschalten
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.