php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 21-05-2009, 00:38
fabio
 Registrierter Benutzer
Links : Onlinestatus : fabio ist offline
Registriert seit: Aug 2003
Ort: Wetzikon, ZH, CH
Beiträge: 408
fabio ist zur Zeit noch ein unbeschriebenes Blatt
Standard DIVs in zwei Spalten aufteilen

hi

angenommen, ich hätte 6 DIVs ( oder sonst ne Anzahl) die unterschiedlich gross sind (Breite bei allen gleich, Höhe nach Inhalt).
Nun wollte ich die dass diese 6 DIVs in zwei Spalte verteilt werden, und zwar so, dass möglichst beide Spalten gleich lang sind.

Leider kann ich nicht einfach sagen DIV 1-3 linke Spalte, DIV 4-6 rechte Spalte, de vielleicht 1-3 zusammen nur 400px hoch wären, und 4-6 über 2000px.
Etwa so:

Das sind drei verschiedene Beispiele à je 2 Spalten.

Mir ist glaubs bekannt, dass die aktuellen CSS Spezifikationen Text Kolumnen noch nicht unterstützen, CSS3 (oder zumindest FF und Webkit) dies aber ermöglicht.

Nun, gibt es trotzdem einen Workaround?

Was ich mir vorstellen könnte, wenn auch etwas umständlich, nach dem Rendern die Höhen der DIVs per JS auszulesen, und mit einer Rechnung zu entscheiden wo getrennt wird.

Aber eben, etwas umständlich und ohne JS nicht möglich -> Barrierefreiheit.

Kennt jemand sonst noch eine Lösung?
Miniaturansicht angehängter Grafiken
DIVs in zwei Spalten aufteilen-twocol.png  
Mit Zitat antworten
  #2 (permalink)  
Alt 21-05-2009, 01:01
jmc
 PHP Junior
Links : Onlinestatus : jmc ist offline
Registriert seit: Mar 2006
Beiträge: 868
jmc befindet sich auf einem aufstrebenden Ast
Standard

Genau gleich hoch ist bei unbekanntem Inhalt mit HTML und CSS bei DIVs nicht möglich, aber du kannst dir ein Container erstellen mit zwei gefloateten DIVs als Spalten. Der Container wird dann immer für beide Spalten gleich gross sein, wenn du z.B. am Schluss im Container ein "clear:both" einfügst.
Mit Zitat antworten
  #3 (permalink)  
Alt 21-05-2009, 03:42
fabio
 Registrierter Benutzer
Links : Onlinestatus : fabio ist offline
Registriert seit: Aug 2003
Ort: Wetzikon, ZH, CH
Beiträge: 408
fabio ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Gut, dass die beiden Spalten nicht genau gleich gross sein können ist mir klar.
Es geht halt nur optisch darum, dass die ungefähr gleichgross sind.
Nicht dass die linke Spalte ganz kurz ist, und die rechte super lang.

Auf dem Bild oben sieht man es denke ich gut. Die dunkelgrünen Felder sind die DIV-Absätze, das Hellgrüne ist eigentlich nur da, damit man sieht es sind 3 Beispiele à zwei Spalten, und nicht ein Beispiel à 6 Spalten.
Sichtbar wäre der Hellgrüne Bereich nicht.
Mit Zitat antworten
  #4 (permalink)  
Alt 21-05-2009, 16:29
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Nicht dass die linke Spalte ganz kurz ist, und die rechte super lang.
das hängt einzig und allein vom inhalt ab. mehr kann man da nicht machen. oder du haust einfache so lange leere absätze in ein div, bist es passt. ist zwar nicht die feine englische art, aber imho die einzige möglichkeit

peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #5 (permalink)  
Alt 21-05-2009, 17:04
Blackgreetz
 PHP Junior
Links : Onlinestatus : Blackgreetz ist offline
Registriert seit: Oct 2005
Beiträge: 901
Blackgreetz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Bleibt ansich wirklich nur die Möglichkeit über JS: http://de.selfhtml.org/javascript/ob...#offset_height

Brauchste nur noch einen tollen Algorithmus, welcher ein ausgewogenes Bild errechnet mit den Höhen

Wenn du die Länge der Texte indirekt schon nach den Boxen 1 - 5 vergibst, dann wäre der Algorithmus 1 + .. + x = 5 - ... - x . (wäre natürlich ein Sonderfall)
Wenn die Boxen alle unterschiedlich sein können, dann müsstest du wohl tatsache etwas knobeln bzw. vlt doch alle Varianten durchrechnen lassen..

mfg
Mit Zitat antworten
  #6 (permalink)  
Alt 21-05-2009, 17:22
jmc
 PHP Junior
Links : Onlinestatus : jmc ist offline
Registriert seit: Mar 2006
Beiträge: 868
jmc befindet sich auf einem aufstrebenden Ast
Standard

Oder du verwendest einfach dennoch eine Tabelle... Das wäre meiner Meinung nach noch eine bessere lösung als mit Javascript.
Mit Zitat antworten
  #7 (permalink)  
Alt 21-05-2009, 17:50
Blackgreetz
 PHP Junior
Links : Onlinestatus : Blackgreetz ist offline
Registriert seit: Oct 2005
Beiträge: 901
Blackgreetz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
Zitat von jmc Beitrag anzeigen
Oder du verwendest einfach dennoch eine Tabelle...
..und die bringt was?
Mit Zitat antworten
  #8 (permalink)  
Alt 21-05-2009, 19:04
fabio
 Registrierter Benutzer
Links : Onlinestatus : fabio ist offline
Registriert seit: Aug 2003
Ort: Wetzikon, ZH, CH
Beiträge: 408
fabio ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Die DIVs werden dynamisch erstellt, es kann also sein, dass mal der DIV-1 zwanzig Zeilen hat, DIV-2 nur 2 Zeilen, und DIV-3 bereits 40 Zeilen Text.

Aber wie es ausschaut, muss ich wohl wirklich nach dem Rendern mit JS die Höhen auslesen und mit einem Algo ausrechnen wo ich "umbrechen" soll.

Schade, dachte es gäbe bereits eine besser Lösung, aber egal, ein wenig Knüffeln muss auch sein
Mit Zitat antworten
  #9 (permalink)  
Alt 21-05-2009, 19:42
Benutzerbild von onemorenerd onemorenerd
  Moderator
Links : Onlinestatus : onemorenerd ist offline
Registriert seit: Mar 2005
Ort: Berlin
Beiträge: 9.471
onemorenerd wird schon bald berühmt werdenonemorenerd wird schon bald berühmt werden
Standard

Das ist ein Fehler im Designkonzept. Wenn du unterschiedlich lange, aber gleichwertige Inhalte hast, dann solltest du sie nicht zweispaltig darstellen. Das erschwert die Lesbarkeit und macht die ganze Seite "unordentlich". Mit Bildern kann man das mal so machen, aber nicht mit Text.
Zieh jedes DIV über die gesamte Breite und alles ist gut.
Mit Zitat antworten
  #10 (permalink)  
Alt 21-05-2009, 20:50
fabio
 Registrierter Benutzer
Links : Onlinestatus : fabio ist offline
Registriert seit: Aug 2003
Ort: Wetzikon, ZH, CH
Beiträge: 408
fabio ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Nun, es ist zu sagen, dass es sich beim Inhalt der DIV nicht um Text handelt, sondern es sind Daten (Jahreszahlen mit kurzem Beschreib à ~4 Wörtern).

Die verschiedenen DIVs sind die verschiedenen Kategorien in wechle die Daten unterteilt sind (Ausstellungen, Werke, Ausbildung, etc).

Im Design benötigen die etwas weniger als die Hälfte von der Seite. Ich denke es wäre eher ein Fehler im Design wenn ich die Seite sehr lang und dafür in der Breite nur halb genutzt machen würde.

Ähnlich wie bei wikipedias alphabetischer Auflistung. Anstatt eine Spalte zu machen die super lang wäre, und welche die Breite nicht nutzen würden, haben sie auch drei Spalten gemacht die +/- gleichlang sind.

Wenn es jetzt wirklich einfach nur ein normaler Text wäre dann, ja klar würde ich die ganze Breite einfach nutzen, aber da es sich hierbei um Auflistungen handelt welche die Breite nicht ganz nutzen würden wäre es eine a) Platzverschwendung und b) unnötige Scrollorgie.

Edit:
ähnliches Prinzip hier zu finden.
http://www.fit-inn.ch/power-plate.htm
Ist irgendwie angenehmer (meiner Meinung nach) das in zwei Spalten zu lesen, als in einer einzigen.
Mit Zitat antworten
  #11 (permalink)  
Alt 21-05-2009, 20:55
Abraxax
  THE REAL HAXE (Administrator)
Links : Onlinestatus : Abraxax ist offline
Registriert seit: Jul 2002
Ort: neuss.nrw.de
Beiträge: 22.623
Abraxax befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
(Jahreszahlen mit kurzem Beschreib à ~4 Wörtern).
Das ist doch auch "nur" Text. ;-)

Zitat:
Ähnlich wie bei wikipedias alphabetischer Auflistung.
Hier ist die Anzahl der Einträge bekannt. Im Normalfall ist ein Eintrag exakt eine Zeile hoch .. Damit gibt es nicht das Problem wie bei dir. Du hast n Boxen mit unterschiedlichen Höhen. Korrekt?

Zitat:
ähnliches Prinzip hier zu finden.
Ich vermute, dass diese Seite NICHT dynamisch so ausgerichtet wird.
__________________
INFO: Erst suchen, dann posten! | MANUAL(s): PHP | MySQL | HTML/JS/CSS | NICE: GNOME Do | TESTS: Gästebuch | IM: Jabber.org |


Mit Zitat antworten
  #12 (permalink)  
Alt 21-05-2009, 20:59
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fabio Beitrag anzeigen
aber da es sich hierbei um Auflistungen handelt
Gut erkannt. Aber warum klatschtst du das ganze dann in Divs?
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #13 (permalink)  
Alt 21-05-2009, 21:54
fabio
 Registrierter Benutzer
Links : Onlinestatus : fabio ist offline
Registriert seit: Aug 2003
Ort: Wetzikon, ZH, CH
Beiträge: 408
fabio ist zur Zeit noch ein unbeschriebenes Blatt
Standard

die DIVs sind dann lediglich als Wrapper zuständig.

also etwa so:
Code:
<div>
<h3>Ausstellungen</h3>
<ul>
<li>1997, Kunsthaus Wattwil</li>
<li>2001, Villa Zürich</li>
<li>2003, Schränligarten</li>
<li>2007, Private Ausstellung Winterthur</li>
</ul>
</div>
Mit Zitat antworten
  #14 (permalink)  
Alt 21-05-2009, 22:32
jmc
 PHP Junior
Links : Onlinestatus : jmc ist offline
Registriert seit: Mar 2006
Beiträge: 868
jmc befindet sich auf einem aufstrebenden Ast
Standard

Dann hast du es ja ziemlich einfach... Du hast da eine Bestimmte Anzahl von <li>s - wieviele wirst du ja wohl herausfinden können wenn sie Dynamisch erstellt werden. Dann hast du einen bestimmten Abstand zwischen jedem Div und du kannst das ganze ziemlich einfach ausrechnen.
Wie genau es dann aussehen soll, bzw. wie die DIVs angeordnet sein sollen und wie genau sie dynamisch erstellt werden müsstest du hier noch etwas genauer reinschreiben, wenn du iene genauere Antwort willst.
Mit Zitat antworten
  #15 (permalink)  
Alt 21-05-2009, 22:40
fabio
 Registrierter Benutzer
Links : Onlinestatus : fabio ist offline
Registriert seit: Aug 2003
Ort: Wetzikon, ZH, CH
Beiträge: 408
fabio ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Wie gesagt, ausrechnen könnte ich es scho, und auszählen wieviele <li>-Elemente ausgegeben werden ist auch kein Problem.
Ich dachte nur, vielleicht gibt es eine einfache Lösung ohne Rechnerei. Vielleicht ja sogar ein einfacher CSS-Tag den ich nicht kenne (à la columns:2).

Aber wen es nichts fertiges gibt mach ich das per JS (PHP ist nicht gut, da die einzelnen LI nicht immer gleichgross sind, einige haben noch kleinere (40*40px) Icons drinnen.

Anyway, ich werd das mit JS erledigen
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
(langer) Text in zwei Teile aufteilen (für zwei spalten) fabio BRAINSTORMING PHP/SQL/HTML/JS/CSS 6 17-03-2007 20:58
Zwei DIVs per Drag tauschen Screw Driver HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 25-02-2007 15:34
Ausgabe auf 3 Spalten aufteilen SLSB02 BRAINSTORMING PHP/SQL/HTML/JS/CSS 3 26-01-2006 10:00
db daten in eine 3 spalten tab aufteilen ! Frashier PHP Developer Forum 19 18-02-2004 18:23
Ergebnisliste über mehrere Spalten aufteilen agenth0815 PHP Developer Forum 7 03-02-2003 18:03

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 16:06 Uhr.