Ergebnis 1 bis 6 von 6

Thema: Tabellen Höhe abgleichen

  1. #1
    HTML Newbie
    Registriert seit
    21.10.2012
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Tabellen Höhe abgleichen

    Hallo,

    ich habe drei Tabellen, die als Inline-Elemente nebeneinander dargestellt werden. Jede Tabelle hat eine maximale Breite von 33.3%, sodass jede 1/3 des Bildschirms einnimmt. Da die Tabellen über eine Hintergrundfarbe verfügen, sollen sie alle gleich lang sein. Das Funktioniert auch, so lange eine Zeile nicht länger als 1/3 der Breite ist und somit umgebrochen wird. Dann ist eine Box logischerweise ein Stück größer als die anderen. Ich habe versucht das Problem zu lösen, in dem ich via Javascript die höchste der drei Boxen suche und die anderen zwei auf diese Höhe angleiche:

    Code:
        var boxes = $("#box1, #box2, #box3");
        var maxHeight = 0;
        boxes.each(function() { 
            var currentHeight = parseInt($(this).css("height"));
            if(currentHeight > maxHeight) {
                maxHeight = currentHeight;
            }
        });
        boxes.each(function() {
            $(this).css("height", maxHeight + "px");
        });
    Hier wird der Umbruch bei der Höhe aber nicht berücksichtigt, sodass die eine Box immer noch größer ist als die anderen. Ich habe auch schon versucht, die automatischen Umbrüche zu erkennen und dementsprechend die Höhe zu vergrößern. Hat aber ebenfalls nicht funktioniert, und so wirklich gefällt mir diese Lösung auch nicht.
    Da es optisch mit den Umbrüchen gut aussieht und der User so den kompletten Titel lesen kann, wäre es mir am liebsten, wenn die Umbrüche bleiben, aber die Höhe eben entsprechend angepasst wird. Die Titel aber einfach so zu kürzen, dass kein Umbruch erzeugt wird und z.B. am Schluss '...' angehängt wird, wäre aber auch eine Alternative. Auch das ist aber ein Problem, da ich natürlich alles dynamisch machen will. Also keine feste Containergröße, und dann grobe Schätzungen wann der Titel abgeschnitten werden muss oder ähnliche Murksereien.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Tabellen Höhe abgleichen

    Gib deinen Tabellen eine Höhe von 100%
    Anschließend legst du ein Div mit deiner Hintergrundfarbe drum und packst die Tabellen da rein.
    Fertig.

    Wenn du mit JS die Titel durchgehst, kannst du per
    var title = "Dein Titel der mehr als 20 Zeichen hat";
    var title2 = "Dein Titel";

    Dynamische Anpassung dafür per JS:
    if (title.length > 20) title = substr(title, 0, 19) + "...";

    Dies schneidet den Titel bei Überlänge auf 20 Zeichen zu und setzt ein ... an das Ende.


  3. Folgende User finden die Antwort von Bleistift gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    21.10.2012
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellen Höhe abgleichen

    Den Hintergrund für den Container statt für die Tabelle zu setzen funktioniert, hätte ich eigentlich auch selbst drauf kommen können Danke.
    Den Text auf eine feste Länge abschneiden will ich ja gerade eben nicht. Das ganze passt sich dynamisch an die Bildschirmgröße an. Wenn ich also pauschal bei 20 Zeichen abschneide, wird auf größeren Bildschirmen Platz verschwendet. Aber so ists auch okay. Ich wollte nur nicht, dass die unterschiedliche Höhe optisch so krass sichtbar ist, wenn umgebrochen werden muss. Gar nicht zu kürzen halte ich dann wie gesagt für besser, da man so den kompletten Titel sieht.

  5. #4
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Tabellen Höhe abgleichen

    Naja du kannst ja beim programmieren eigentlich alles erreichen was du möchtest.
    Muss natürlich auch immer die Frage im Raum liegen, ist das sinnvoll ja/nein und ist es vielleicht Ressourcenverschwendung...

    In dem Fall würde ich schon sagen, dass es nicht so sinnvoll ist mehrere Überschriften dynamisch anzupassen.
    Was du machen kannst ist die Spalte mit der Überschrift ein overflow: hidden geben und eine fixxe Größe. Dafür gibts auch noch ne Alternative (für die fixxe Größe)
    kommt mir aber grad nicht in den Sinn. Damit wär der Text dann aber auch einfach nur weg.
    Wenn du es aber für sinnvoll hälst, über window.innerWidth kriegst du beispielsweise die Breite in den meisten Browsern.
    Dann kannst du eine Funktion wie diese machen:
    Code:
    var char_count;
    var wdt = window.innerWidth;
    
    if (wdt > 100 && wdt < 200) char_count = 10;
    else if (wdt > 200 && wdt < 300) char_count = 15;
    else if (wdt > 300 && wdt < 400) char_count = 20;
    ...
    else char_count = 100;
    
    var title = "Der laaaaange Titel...........";
    title = substring(title, 0, char_count);
    
    document.write(title);
    Alternativ kannst du deine font-size auch in Prozent angeben.
    Geändert von Bleistift (10.12.2013 um 20:19 Uhr)


  6. #5
    Youngster
    Registriert seit
    28.12.2013
    Beiträge
    10
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellen Höhe abgleichen

    Für Grundlagen zu Tabellen allgemein: http://www.website-html-template.com/htmlcodes/tables/

  7. #6
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Tabellen Höhe abgleichen

    @ggg111ggg

    Deine Empfehlung ist für die Mülltonne.

    Wenn ich sowas
    HTML-Code:
    bgcolor="white"
    sehe, dann weiss ich, dass der Author die Seite vor 15 Jahren entwickelte oder einfach keine Ahnung hat.

Ähnliche Themen

  1. 2 Tabellen auf eine höhe
    Von !Florian im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 19.08.2010, 23:48
  2. Option selected Wert per PHP abgleichen?
    Von Macrosdesign im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 12
    Letzter Beitrag: 21.12.2008, 16:09
  3. <div> Höhe
    Von No0ob im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 03.09.2006, 17:38
  4. td Höhe
    Von Flux im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 07.11.2005, 13:35
  5. Tabellen-Höhe und Tabellen-Backround
    Von trouble im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 29.10.2004, 18:13

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •