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.
Gast
#3073998
Bei Fragen dieser Art: http://de.selfhtml.org/
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.
Gast
#3074022
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.
Gast
#3074027
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 | |
2 | |
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.
Gast
#3074041
such nach css grid http://thisisdallas.github.com/Simple-Grid/
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.
Gast
#3074051
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 :-))
Gast
#3074160
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.
span ist ein inline-Element, hat also kein align.
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.
Gast
#3074750
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.
Gast
#3075203
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.
Gast
#3075288
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.
Gast
#3075762
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.
Gast
#3075880
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 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
Fertig. Meine Seite die ich neulich hier beworben habe, habe ich auch damit erstellt, kannst dir ja mal den Quelltext davon ansehen.
Gast
#3075902
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.
Angehängte Dateien:
-
Browsershot.gif
34 KB
Gast
#3075908
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.
Gast
#3075918
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)
Antwort schreiben
Bitte melde dich an, um einen Beitrag zu schreiben.