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.
Beiträge von Th3Dan
-
-
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
Alles anzeigenvar 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. -
Hallo,
ich möchte einen Header aus 3 Elementen aufbauen.
In der Mitte befindet sich ein Banner, rechts und links davon soll passend ein Farbstreifen (PS-Grafik, also über background-image und repeat eingebunden) bis an den Rand der Seite gehen.
Testweise hab ich das ganze erstmal mit 3 farblichen div-Containern gemachtHTML
Alles anzeigen<html> <head> <style> #header{ height:280px; } #header .left{ float:left; height:100px; width:470px; background-color:#0f0; position:relative; top:180px; } #header .right{ float:right; height:100px; width:470px; background-color:#f00; position:relative; top:180px; } #header .center { background-color:orange; width:645px; height:280px; margin:0 auto; } </style> </head> <body> <div id="header"> <div class="left">#l</div> <div class="center">#c</div> <div class="right">#r</div> </div> <br/> </body> </html>Im Anhang habe ich einen Screen gepostet wie das ganze aussieht.
Der orangene Div wäre mein Banner, grün und rot jeweils die Streifen die davon weggehen.
Der grüne passt soweit, allerdings habe ich hier ja eine feste länge angegeben. Ich hätte ihn gerne so, dass er direkt links neben dem orangenen Bild beginnt und bis zum Ende des Bildschirms weiterläuft.Der rote passt irgendwie noch so gar nicht, obwohl ich ihn rechts gefloatet habe.. Er sollte genau wie der grüne verlaufen, nur eben rechts (also wie wenn man rechts neben den orangenen Container einen Spiegel legen würde).