|
|||
Table-Layout auf ol/li umstellen - Versatz in der Anzeige
Ich versuche seit zwei Tagen ein Tabellenkonstrukt umzubauen, so dass es mit einer geordneten Liste dargestellt werden kann.
Für das CSS nutze ich Bootstrap 3. Worauf ich die ganze Zeit einfach komme, ist dieser Versatz zur führenden Zahl bei der geordneten Liste. Angenommen die Nummerierung steht in der richtigen Höhe, dann ist der nachfolgende Text nach unten versetzt. Als ob dort irgendwo ein "padding-top:20px" gesetzt wäre. Was ich bisher mit Firebug finden konnte, wenn ich auf das "li"-Element ein "line-height:0" setze, dann ist alles in einer Zeile. Falls ich aber zwei- oder mehrzeiligen Text verwende, steht dieser ebenfalls in einer Zeile. Was dann aussieht wie Wortsalat, da man nichts mehr lesen kann. Eventuell kann es auch sein, dass mein Vorhaben überhaupt nicht funktioniert. Hat jemand einen Hinweis für mich? Tabellen-Gerüst: http://bootply.com/80793 Und mein Umbau sieht so aus: http://bootply.com/80794 Geändert von Tipo (13.09.2013 um 16:06 Uhr) |
Sponsored Links |
|
|||
Zitat:
Ohne Link zur Seite kann dir eh keiner helfen, weil wir nicht wissen können was du da genau gebastelt hast.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Zitat:
Ich verwende es, da der Rest der Seite damit funktioniert. Nur diese Konstruktion im Moment noch nicht. Auf herkömmliche Weise funktioniert es auch. Und der Code ist doch ausführlich beschrieben. Mehr gibt für diesen Kasten nicht. Oder brauchst du noch das HTML-Gerüst drum herum? Nein, mal im Ernst. Wenn etwas drum herum wäre, hätte ich das definitiv mitgeschickt. Mir ist schon bewusst, dass andere Bereich stören könnten. Die Seite enthält aufgrund des Problems aber nur diese Tabelle. Eine Seite kann ich leider nicht bieten, da ich keine besitze. |
|
||||
Sehr hilfreich, denn dann würdest du verstehen wieso es nicht funktioniert
Ich geb dir einen Hinweis: das Problem liegt beim clear. Wenn du dich damit auskennst, wirst du den Fehler finden können via Firebug. Das ist das witzige bei Frameworks: entweder man versteht die Logik solcher oder man hat sich damit nicht genug auseinander gesetzt
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
Ok, ich habe jetzt mal alles ersetzt und Bootstrap raus gelassen.
So klappt es, aber ich sehe nicht, wo Bootstrap ein "clear" erzeugt. HTML-Code:
<ol> <li> <div style="float:left;width:50%;">Text</div> <div style="float:left;width:50%;"> <span class="glyphicon glyphicon-sort"></span> <span class="glyphicon glyphicon-check"></span> <div class="btn-toolbar pull-right clearix"> <div class="btn-group"> <a class="btn btn-primary" href="#"> <span class="glyphicon glyphicon-plus"></span> </a> </div> <div class="btn-group"> <a class="btn btn-info" href="#"> <span class="glyphicon glyphicon-edit"></span> </a> </div> <div class="btn-group"> <form class="clearfix" accept-charset="UTF-8" action="#" method="POST"> <button title="Löschen" class="btn btn-danger"> <span class="glyphicon glyphicon-trash"></span> </button> </form> </div> </div> <!-- end btn-toolbar --> </div> <!-- end div right --> </li> </ol> Aber Firebug zeigt mir hier nichts an. Geändert von Tipo (14.09.2013 um 00:56 Uhr) |
|
|||
Und noch einmal.
Wenn ich das folgendermaßen aufbaue: HTML-Code:
<ol> <li> <div style="display:inline-table;width:50%;">Titel<br />Text</div> <div style="display:inline-table;width:49%;"> rechte Spalte </div> </li> <li> <div style="display:inline-table;width:50%;">Titel<br />Text</div> <div style="display:inline-table;width:49%;"> rechte Spalte </div> </li> </ol> Allerdings musste ich sämtliches Bootstrap-Zeug entfernen. Ich denke du meintest das "clear", welches einerseits von der Klasse ".row" erzeugt wird und zusätzlich von den Grid-Klassen "col-md-6". Es ist ein :after clear. Also wie gesagt, wenn ich die einzelnen Elemente als inline-table deklariere, dann funktioniert es. Warum ich allerdings beim zweiten Div-Container die Breite auf 49% setzen muss, verstehe ich noch nicht. Setze ich sie auf 50% springt die Zeile in die nächste Zeile. Als ob es nicht passt. |
|
|||
Du kannst es auch so machen:
HTML-Code:
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="UTF-8"> <title>test</title> <style> li { clear: both; } li div { float: right; width: 50%; } li div:first-child { float: left; } </style> </head> <body> <ol> <li> <div> Titel<br /> Text </div> <div> rechte Spalte </div> </li> <li> <div> Titel<br /> Text </div> <div> rechte Spalte </div> </li> </ol> </body> </html>
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Klasse, das wird ja immer einfacher.
Allerdings merke ich gerade, dass das für den Firefox super aussieht. Nur im Google Chrome, sind plötzlich die Aufzählungszeichen hinter dem ersten Text anstatt am Zeilenanfang. Und ich hab gedacht, die beiden Browser sind mittlerweile recht aneinander angenähert. Das scheint aber irgendetwas mit dem HTML-Code:
li div { float: right;} |
|
|||
Wie wäre es auf das "float" zu verzichten und alles mit "display: inline-block" zu gestalten?
Das einzige Problem was ich dabei bekomme, die Listennummer rutscht bei mehrzeiligen Inhalten immer auf die unterste Zeile anstatt oben stehen zu bleiben. HTML-Code:
<style> .inline-block { display: inline-block; width: 50%; } .text-right { text-align: right; width: 49%; } </style> <ol> <li> <div class="inline-block">Zeile eins<br />Zeile zwei</div> <div class="inline-block text-right">Ein paar buttons rechts</div> </li> </ol> Geändert von Tipo (14.09.2013 um 14:59 Uhr) |
Sponsored Links |
|
|||
Ich werde verrückt.
HTML-Code:
li div { vertical-align: top; } Um ehrlich zu sein, das war mehr geraten. Und ich hatte gedacht, dass die Top-Ausrichtung standard sei. Ok "baseline" ist der default Wert. Aber warum ausgerechnet das vertikale Ausrichten der DIV-Container jetzt die auch die Nummerierung der Liste oben ausrichtet ist mir schleierhaft. Und noch so schleierhaft, warum ich den zweiten DIV-Container auf 49% Breite setzen muss, ansonsten bricht er mir um in die nächste Zeile. Kann mir jemand den Zusammenhang erklären? |
Sponsored Links |
Stichwörter |
bootstrap, css, liste, versatz |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
4-Spalten Layout / Anzeige der Unterseiten | xtractor | (X)HTML | 9 | 25.09.2011 20:14 |
Myspace Fehler zwischen FF und IE? | soren.designs | (X)HTML | 1 | 05.09.2009 17:02 |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 22:19 |
Myspace problem... Rechte Säule verschiebt sich im IE. | calledmarcel | CSS | 1 | 27.02.2009 10:12 |
Falsche Darstellung im Internet Explorer | Janizzle | CSS | 0 | 30.08.2007 20:44 |