Stylizacja dl i dt za pomocą CSS w celu naśladowania prezentacji podobnej do tabeli

Mam następujące problemy przy użyciu stylów CSS do stylizowania niektórych elementów dl i dt. Wolę używać zawsze bardzo podstawowych plików CSS zgodnych z IE6/IE7 i nowoczesnymi przeglądarkami. Próbuję uzyskać efekt, który dla mnie powinien być raczej prosty do osiągnięcia.Stylizacja dl i dt za pomocą CSS w celu naśladowania prezentacji podobnej do tabeli

Oto okrojona wersja kodu źródłowego początkowej pracuję z, aby spróbować i działa tylko na tę kwestię:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 

     <style type="text/css"> 

     .terms dl { 
      float: left; 
      padding-left: 0px; 
     } 

     .terms dt, .terms dd { 
      text-align: center; 
      margin: 0px; 
      float: left; 
     } 

     .terms dt { 

      border: solid blue 1px; 
      clear: left;  
     } 

     .terms dd { 
      border: solid red 1px; 
      margin-right: 40px; 
      margin-left: 40px; 
     } 

     </style> 
    </head> 
    <body> 
     <div class="terms"> 
      <h1>Terms</h1> 
      <dl> 
       <dt>Term 1:</dt> 
       <dd>Very Long definition for this term here</dd> 

       <dt>Term 2:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 3 with longer term title:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 4:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 5:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 6:</dt> 
       <dd>Definition for term</dd> 
      </dl> 
      <dl> 
       <dt>Term 7:</dt> 
       <dd>Defintion for term</dd> 

       <dt>Term 8:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 9:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 10:</dt> 
       <dd>Very Long definition for this term here</dd> 

       <dt>Term 11:</dt> 
       <dd>Definition for term</dd> 

       <dt>Term 12:</dt> 
       <dd>Definition for term</dd> 
      </dl> 
     </div> 
    </body> 
</html>

Oto efekt wizualny. I stylizowany granic niebieskie i czerwone tak, że łatwiej jest wizualizowane:

enter image description here

Moim celem jest mieć wszystkie niebieskie i czerwone „pola”, aby mieć tę samą szerokość bez względu na zestaw tekstu rozmiar jest . Na przykład. jeśli użytkownik ma domyślny arkusz stylów, aby tekst był bardzo duży, powinien odpowiednio się rozwinąć. Ten problem pojawia się nie tylko wtedy, gdy ludzie używają własnego arkusza stylów, ale pojawia się również w IE6, kiedy ludzie wybierają "rozmiar tekstu" inny niż "średni" - powoduje to, że tekst jest większy i chcę móc to pomieścić.

Nie sądzę, żebym chciał ustawić twardą szerokość na dowolnym z "pudełek", i nie chcę żadnego zawijania tekstu lub upuszczania pływaków z tego dwukolumnowego stylu .

Potrafię edytować odpowiedź, dodając więcej zdjęć i przykładów, jeśli nie byłam wystarczająco czytelna.

To także powiązane, ale osobne pytanie. Jeśli okno przeglądarki ma ponownie rozmiar, przy stole można się spodziewać, że część tabeli stanie się niewidoczna w miarę zmniejszania szerokości. Dzięki tej konfiguracji otrzymujesz bardzo dziwny i brzydki wynik, jak widać poniżej. Jak można tego uniknąć?

enter image description here

UPDATE

Wydaje się, że nie jest to rozwiązanie, które nie pociąga za sobą dając Stała szerokość do elementów (i/lub elementu tworzącego kapsułki). Ponadto, wydaje się, że zmiana wielkości tekstu w IE6 może być rozwiązana tylko poprzez twarde ustawienie tekstu w pikselach i po prostu nie pozwalając na zmianę rozmiaru.

Źródło

2012-03-08 user17753

Dlaczego więc nie używasz stołu? – zgood

Cele semantyczne, marża reprezentuje listę terminów i definicji; nie dane tabelaryczne. Chcę oddzielić semantykę marży od stylu. Według mojej wiedzy jest to celem elementu 'dl' i CSS. – user17753

Tabele nie są z natury złe, których należy unikać za wszelką cenę. Są dobre do wyświetlania, niespodzianek, tabelarycznych danych - i wygląda na to, że będą miały zastosowanie w tym przypadku. – chris

można po prostu określić stałej szerokości XXpx dla każdego z elementów tak

http://jsfiddle.net/XKaKT/1/

Źródło

2012-03-08 15:19:19 Evert

Rozumiem, nie da się tego zrobić bez stałych szerokości? – user17753

dowolna zmienna szerokość oznaczałaby, że kolumny nie byłyby już ustawione pionowo, ponieważ mogły rozciągać się pojedynczo, ale można użyć takich szerokości jak procent, jeśli jest to bardziej użyteczne: http://jsfiddle.net/XKaKT/2/ – Evert

Dla wielkości okna problemu wystarczy dodać szerokość do „.terms” Gr:

.terms{ 
    width:1000px; 
}

Źródło

2012-03-08 15:09:27 zgood

Rozumiem, nie da się tego zrobić bez stałych szerokości? – user17753

Lista i odpowiednio oznakowany dwu-kolumnowy stół są w rzeczywistości całkiem równoważne co do semantyki. Tak więc można bezpiecznie używać tabel tutaj (uwaga na TH elementy z atrybutami scope):

<table> 
    <tr> 
     <th scope="row">Term 1:</th> 
     <td>Very Long definition for this term here<td> 
    </tr> 
    <tr> 
     <th scope="row">Term 2:</th> 
     <td>Definition for term<td> 
    </tr> 
    <tr> 
     <th scope="row">Term 3 with longer term title:</th> 
     <td>Definition for term<td> 
    </tr> 
    <!-- ... --> 
</table>

przypadku korzystania DL jest korzystne, należy rozważyć użycie listę nieuporządkowaną z każdego elementu zawierającego separate DL z dokładnie jednym DT/DD wewnątrz grupy.

Źródło

2012-03-08 16:33:48

miał podobny problem i tu jest rozwiązanie, ale w dużej mierze zależy od każdego DT-DD pary montażu na tylko 1 linię, więc może ona krucha dla swoich celów:

Ogólna strategia jest tu chcesz DL być blokiem inline, a ID blokami, aby automatycznie miały tę samą szerokość. Umożliwia to również wyrównanie do prawej strony wszystkich DT, jeśli pasuje do Twojej stylizacji, i kontrolujesz odstępy między elementami z DT.

dl { 
    line-height: 2; 
    display: inline-block; 
    position: relative; 
} 

dt { 
    text-align: right; 
    margin-right: 1em; 
}

Teraz trzeba ustawić DDS z prawej DTS, który jest co sprawia, że ten kruchy, ponieważ DDS nie można również dostosować do różnej zawartości.

dd { 
    position: absolute; 
    left: 100%; 
    margin-top: -2em; /* negate the DL line-height */ 
    white-space: nowrap; /* without this, DDs will be the same length as DTs 
}

Należy pamiętać, że ograniczenia szerokości ustawień w DL będą napędzać twoje ID, a Twoje DD będą wymiarowane na podstawie danych DT.

Źródło

2012-06-13 23:13:44

Stylizacja dl i dt za pomocą CSS w celu naśladowania prezentacji podobnej do tabeli

Odpowiedz

Powiązane problemy