zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Table-Layout auf ol/li umstellen - Versatz in der Anzeige

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.09.2013, 15:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2013
Beiträge: 8
Tipo befindet sich auf einem aufstrebenden Ast
Standard 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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.09.2013, 17:35
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Tipo Beitrag anzeigen
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.
Warum verwendest du etwas mit dem du nicht klarkommst. Lasse Bootstrap erst mal weg und versuche es auf herkömmliche Weise hin zu bekommen.
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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.09.2013, 18:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2013
Beiträge: 8
Tipo befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Warum verwendest du etwas mit dem du nicht klarkommst. Lasse Bootstrap erst mal weg und versuche es auf herkömmliche Weise hin zu bekommen.
Ohne Link zur Seite kann dir eh keiner helfen, weil wir nicht wissen können was du da genau gebastelt hast.
Wenig hilfreich.
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.
Mit Zitat antworten
  #4 (permalink)  
Alt 13.09.2013, 21:54
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von Tipo Beitrag anzeigen
Wenig hilfreich.
Ich verwende es, da der Rest der Seite damit funktioniert.
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?
Mit Zitat antworten
  #5 (permalink)  
Alt 14.09.2013, 00:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2013
Beiträge: 8
Tipo befindet sich auf einem aufstrebenden Ast
Standard

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>
Hm, es kann ja nur beim "li" oder "ol" sein, da es die beiden einzigen Objekte sind, die ich außerhalb von Bootstrap neu erzeugt habe.
Aber Firebug zeigt mir hier nichts an.

Geändert von Tipo (14.09.2013 um 00:56 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 14.09.2013, 02:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2013
Beiträge: 8
Tipo befindet sich auf einem aufstrebenden Ast
Standard

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>
Das sieht dann meiner Tabelle am ähnlichsten.
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 14.09.2013, 04:21
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 14.09.2013, 12:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2013
Beiträge: 8
Tipo befindet sich auf einem aufstrebenden Ast
Standard

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;}
zusammenzuhängen.
Mit Zitat antworten
  #9 (permalink)  
Alt 14.09.2013, 14:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2013
Beiträge: 8
Tipo befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.09.2013, 16:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2013
Beiträge: 8
Tipo befindet sich auf einem aufstrebenden Ast
Standard

Ich werde verrückt.
HTML-Code:
li div {
  vertical-align: top;
}
Und jetzt passt alles. Die führende Nummer ist nun oben ausgerichtet.

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?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bootstrap, css, liste, versatz

Themen-Optionen
Ansicht

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 aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:19 Uhr.