Suche
Teilen
startseite » forum

[Frage] Tabelleformat durch CSS ersetzen [Gelöst] TYPO3-Version: -

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    12. 05. 2016, 00:45

    Hallo alle zusammen,

    ich bin auf der Suche nach der Lösung zu folgendem Problem:

    Ich habe folgendes HTML

    1. <div id="rahmen">
    2.    <div id="spaltea">Das ist Inhalt 1</div>
    3.    <div id="spalteb">Das ist Inhalt 2 mit mehr Text, weshalb der DIV-Container größer wird</div>
    4. </div>

    und die dazugehöirge CSS

    1. #rahmen{max-width:1000px; float:left;}
    2. #spaltea{float:left; width:50%; background-color:#cccccc; padding:5px;}
    3. #spalteb{float:left; width:50%; background-color:#888888; padding:5px;}

    Befindet sich in der rechten Box (spalteb) nun sehr viel mehr Text, als in der linken, dann wird diese Box nach unten hin länger als die linke. Ich hätte sehr gerne eine Methode, dass die boxen in der Höhe aber immer gleich abschließen, egal ob in einer Box mehr oder weniger Text ist als in der anderen.

    Gibt es eine Möglichkeit das umzusetzen, ohne Tabellen zu verwenden?

    Vielen Dank
    Saludos
    Sunny

    Tags: Tabelleformat durch CSS ersetzen
  • jenses jenses
    Flash Gordon
    0 x
    3087 Beiträge
    106 Hilfreiche Beiträge
    12. 05. 2016, 10:39 - Lösung

    Beispielsweise so:

    1. <div class="grid">
    2.   <div class="col col1">
    3.     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    4.   </div>
    5.     <div class="col col2">
    6.     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
    7.   </div>
    8. </div>

    1. * { box-sizing: border-box; }
    2.  
    3. body{
    4.     font-family:sans-serif;
    5. }
    6.  
    7. .grid{
    8.   display: table;
    9.   width: 100%;
    10.   border-spacing:0;
    11. }
    12.   .col{
    13.     padding:1em;
    14.     width:25%;
    15.     display:table-cell;
    16.     border:none;
    17.   }
    18.  
    19.   .col1 {
    20.     background-color: pink;
    21.   }
    22.   .col2 {
    23.     background-color: lime;
    24.   }

  • 1
  • jenses jenses
    Flash Gordon
    0 x
    3087 Beiträge
    106 Hilfreiche Beiträge
    12. 05. 2016, 10:39

    Beispielsweise so:

    1. <div class="grid">
    2.   <div class="col col1">
    3.     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    4.   </div>
    5.     <div class="col col2">
    6.     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
    7.   </div>
    8. </div>

    1. * { box-sizing: border-box; }
    2.  
    3. body{
    4.     font-family:sans-serif;
    5. }
    6.  
    7. .grid{
    8.   display: table;
    9.   width: 100%;
    10.   border-spacing:0;
    11. }
    12.   .col{
    13.     padding:1em;
    14.     width:25%;
    15.     display:table-cell;
    16.     border:none;
    17.   }
    18.  
    19.   .col1 {
    20.     background-color: pink;
    21.   }
    22.   .col2 {
    23.     background-color: lime;
    24.   }

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    12. 05. 2016, 20:49

    Hi Jenses,

    genial. Sehr geil. Vielen Dank

    LG
    Sunny

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2016, 01:36

    Hi,

    jetzt habe ich doch noch eine kurze Frage.
    Bei einer einfachen Tabellenstruktur via CSS ... ist es möglich einen Umbruch innerhalb einer Tabelle hervorzurufen?

    1. <div class="grid">
    2.       <div class="eventspalte spalte1">###T4###</div>
    3.       <div class="eventspalte spalte2">###T3###</div>
    4.       <div class="eventspalte spalte3">###T2###</div>
    5.       <div class="eventspalte spalte4">###T1###</div>     
    6.    </div>

    1. .grid{
    2.    display: table;
    3.    padding-left:25px;
    4.    padding-right:25px;
    5.    padding-bottom:25px;
    6.    max-width: 1300px;
    7.    margin:0 auto;
    8. }
    9.  
    10. .eventspalte{
    11.    width:25%;
    12.    display:table-cell;
    13.    border:none;
    14. }
    15.  
    16. .spalte1{background-color: #000000;}
    17. .spalte2{background-color: #555555;}
    18. .spalte3{background-color: #999999;}
    19. .spalte4{background-color: #cccccc;}

    Nun habe ich 4 Infokästen nebeneinander, die immer die gleiche Höhe haben.

    1 2 3 4

    Jetzt will ich es allerdings respsonsiv haben mittels Media-Query.

    1. @media only screen and (max-width : 900px) {}

    Also bei einer Breite von 900px soll die erste und zweite Spalte je 50% erreichen und oben stehen, und die dritte und vierte Spalte mit je 50% darunter. Also:

    1 2
    3 4

    Mit einem clear:both; komme ich da leider nicht weiter. Hat jemand eine Idee, wie ich diese Tabelle nach der zweiten Tabellenzelle umbrechen kann?

    Vielen Dank
    Saludos

  • 1
Präsentiert von