Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]problem z obramowaniem na forum
Forum PHP.pl > Forum > Przedszkole
lamcpp
Forum: phpbb3,
Cel: chciałbym aby każda pozycja forum (czyli dt oraz dd) zostaly obramowane. Dałoby się to zrobić za pomocą tabelek jednak forum jest zbudowane za pomocą list rozwijalnych.
Schemat wygląda tak:
  1. <ul>
  2. <li>
  3. <dt>temat i opis tematu</dt><dd>ilosc_tematow</dd><dd>ilosc_postow</dd>
  4. </li>
  5. </ul>

Dokładny kod prezentuję na samym dole.
Opis problemu: każdemu z elementów <dt> i <dd> nadaje obramowanie border-left i border-right i wszystko wygląda dobrze i odpowiada mi do momentu, gdy
"temat i opis tematu" ma dwie linijki. W przypadku gdy temat i opis tematu jest dłuższy, automatycznie zwiększa się wysokość tego konkretnego dt. Niestety jednocześnie nie zwiększa się wysokość <dd> ilości tematów i ilosci postow, przez co mają one mniejszą wysokość i obramowanie nie siega do samego dołu.
Jak zrobić by przy jednoczesnym zwiekszaniu wysokości selektora <dt> zawierającego temat i opis tematu, automatycznie zwiekszał się selektor <dd> i by miał identyczną wysokość, dzięki czemu border będzie sięgał do konca selektora.
Kod dostępny poniżej, w załaczniku również daję zdjęcie w którym obramowanie nie sięga do końca selektora.

wyświetlanie wygląda tak:
  1. <ul class="topiclist forums">
  2. <!-- ENDIF -->
  3.  
  4. <!-- IF not forumrow.S_IS_CAT -->
  5. <li class="row">
  6. <dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
  7. <dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
  8. <!-- IF S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED --><!-- <a class="feed-icon-forum" title="{L_FEED} - {forumrow.FORUM_NAME}" href="{U_FEED}?f={forumrow.FORUM_ID}"><img src="{T_THEME_PATH}/images/feed.gif" alt="{L_FEED} - {forumrow.FORUM_NAME}" /></a> --><!-- ENDIF -->
  9.  
  10. <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}</span><!-- ENDIF -->
  11. <a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
  12. {forumrow.FORUM_DESC}
  13. <!-- IF forumrow.MODERATORS -->
  14. <br /><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}
  15. <!-- ENDIF -->
  16. <!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --><br /><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}<!-- ENDIF -->
  17. </dt>
  18. <!-- IF forumrow.CLICKS -->
  19. <dd class="redirect"><span>{L_REDIRECTS}: {forumrow.CLICKS}</span></dd>
  20. <!-- ELSEIF not forumrow.S_IS_LINK -->
  21. <dd class="topics">{forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
  22. <dd class="posts">{forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
  23. <dd class="lastpost"><span>
  24. <!-- IF forumrow.U_UNAPPROVED_TOPICS --><a href="{forumrow.U_UNAPPROVED_TOPICS}">{UNAPPROVED_IMG}</a><!-- ENDIF -->
  25. <!-- IF forumrow.LAST_POST_TIME --><dfn>{L_LAST_POST}</dfn>
  26. <!-- IF forumrow.LAST_POST_LINK --><i>{forumrow.LAST_POST_LINK}</i><br/><!-- ENDIF -->
  27.  
  28. autor: {forumrow.LAST_POSTER_FULL}
  29. <!-- IF not S_IS_BOT --><a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a> <!-- ENDIF --><br />{forumrow.LAST_POST_TIME}<!-- ELSE -->{L_NO_POSTS}<br />&nbsp;<!-- ENDIF --></span>
  30. </dd>
  31. <!-- ENDIF -->
  32. </dl>
  33. </li>
  34. <!-- ENDIF -->
  35.  
  36. <!-- IF forumrow.S_LAST_ROW -->
  37. </ul>




Uploaded with ImageShack.us
Sephirus
A możesz podać adres tej strony?

1. Nie widzę tam w ogóle DL jesli są DT i DD to gdzie DL? Ale może nie jest wymagane nie pamiętam...
2. Spróbuj dać LI, które zawiera te trzy elementy display:table-row a dt i dd daj display:table-cell

EDIT: Ok jednak jest DL - zatem zamiast LI daj ten display znacznikowi DL smile.gif
jackussa
Masz tutaj użyte klasy, więc moim zdaniem najłatwiejszym rozwiązaniem będzie dodanie obramowań w css'ie

np.
  1. dl.icon dd { border: 1px solid #000000; }
lamcpp
Sephirius dzięki Twojej pomocy problem rozwiązany. Dodałem jeszcze do elementu nadrzędnego display: table. Dziękuję!
jackussa przy Twoich ustawieniach obramowanie nie miałoby całej wysokości, zostałoby ucięte.

Pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.