table.forumline

ODPOWIEDZ ]

#33996 19 paź 2017, 21:48

Cześć.
Piszę z problemem dotyczącego liczbę wierszy w kolumnie forum. Otóż wiersze podzielone są na 4 części, a ja chciałabym mieć tylko 1 kolumnę z tematem forum.
Ktoś pomoże kodem??
Obrazek

Awatar użytkownika
O mnie
Alex Turner is my lil daddy
Moje fora
Nie gram, dajta mi spokój.

#34000 20 paź 2017, 4:04

Kod: Zaznacz cały

.forumline { background-color: #fff;}

td.row1	{ background-color: transparent; }
td.row2	{ background-color: transparent; }
td.row3	{ background-color: transparent; }
td.row_helped { background-color: transparent; }
Chodzi o takie coś? :>
Obrazek
there ain't no romance around there

Awatar użytkownika

 Luxter#4127

#34025 20 paź 2017, 21:19

Trudno stwierdzić, co tak naprawdę chcesz osiągnąć. Wnioskuję, że chcesz usunąć wszystkie kolumny (ikona, liczba postów, liczba tematów oraz ostatni post), tak żeby w ogóle ich nie było widać, a pozostały tytuł forum zajmował całą dostępną przestrzeń. W takim wypadku rozwiązaniem może być poniższy kod CSS:

Usunięcie "nagłówków" kolumn:

Kod: Zaznacz cały

#<id_forum> tr:first-child > *:not(:first-child) {
    display: none;
}
Usunięcie "zawartości" kolumn:

Kod: Zaznacz cały

#<id_forum> tr:not(:first-child) > *:not(:nth-child(2)) {
    display: none;
}
Gdzie w miejsce <id_forum> należy wstawić odpowiednie id forum. Jeśli ustawi się dla wszystkich takie samo, to oczywiście zadziała na wszystkie. Można by rzeźbić bardziej wysublimowane selektory, ale nie jestem przekonany czy to ma sens, bo ciężko wyodrębnić jakiś unikalny podzbiór.

UWAGA! Być może należy zmienić :first-child oraz nth-child(X) na inne wartości, jeśli chodzi nam o inne kolumny (trudno zgadywać w ciemno jakie dokładnie masz rozmieszczenie).

Generalnie można by udzielić dokładniejszej odpowiedzi jakby podany został link do forum, albo stosowny fragment HTML.
Common sense is so rare that it should be classified as a super power. ~ Bill Murray.
Where ignorance is bliss, 'tis folly to be wise. ~ Thomas Gray.

#34027 20 paź 2017, 22:59

Może będzie łatwiej przedstawić to za pomocą zdjęcia.

Obrazek
Ja widać na zdjęciu, zniknęły "Tematy", "Posty" i "Ostatni post". Oto mi właśnie chodzi.

Nie jestem do końca pewna, czy kod jaki wstawiam jest do końca wystarczający, ale wstawiam.

Kod: Zaznacz cały


table.forumline { border-bottom: 5px back double;  box-shadow:0 1px 2px 1px #7EB8F7;}

/* Main table cell colours and backgrounds */
td.row1	{ background-color: #C2EDFF; }
td.row2	{ background-color: #C2EDFF; }
td.row3	{ background-color: #B2E1FF; }
td.row_helped { background-color: #B2E1FF; }

td.rowpic {
background-color: #B2E1FF;
background-image: url('images/cellpic2.gif');
background-repeat: repeat-y; height: 22px;
}

td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(images/cellpic1.gif);
background-color:#B2E1FF; border: #B2E1FF; border-style: solid; height: 28px;
}

td.cat,td.catHead,td.catBottom { background-color: #C2EDFF; border-width: 2px; background-image: url('images/cellpic1.gif'); height: 28px; }
th.thHead,th.thSides,th.thLeft,th.thRight,th.thBottom {
font-weight: bold; border: #C2EDFF; height: 28px;
}

th.thCornerL,th.thTop,th.thCornerR {color: #000129; font-size: 19px; font-weight: bold; background-color: #C2EDFF; background-image: url('images/cellpic2.gif'); height: 28px; }

td.row3Right,td.spaceRow { background-color: #C2EDFF; border: #C2EDFF; border-style: solid; }

th.thHead,td.catHead { font-size: 16px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow	 { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right	 { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft	  { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop	 { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }


Awatar użytkownika

 Luxter#4127

#34053 21 paź 2017, 13:39

Eee... na zdjęciu nie ma "Tematy", "Posty" i "Ostatni post", na podrzuconym linku do forum nie ma "Tematy", "Posty" i "Ostatni post" - czyli problem jest rozwiązany? Nie ogarniam dalej co chcesz osiągnąć.
Common sense is so rare that it should be classified as a super power. ~ Bill Murray.
Where ignorance is bliss, 'tis folly to be wise. ~ Thomas Gray.

Awatar użytkownika
O mnie
Jestem częścią układu, jedną z gwiazd w galaktyce. Zgubiłam duszę i mam dwie pomocne dłonie. W lewej ręce trzymam pióro tworzenia, a w prawej nożyczki niszczenia.
Moje fora
San Jose, Shadow York, Caledonia i tworzę M.A.R.S!

 Noritoshi#2699
 6016244

#34055 21 paź 2017, 15:27

Prawdopodobnie chodzi ci o to, żeby ukryć nagłówki w tabelce typu tematy, posty, ostatni post. Zrobisz to w następujący sposób:

Kod: Zaznacz cały

/* tutaj ustawiasz, zeby się zadna z kolumn nie pokazywa;a */
.forumline > tbody > tr > th {
    height: 0px;
    color: transparent;
    font-size: 0px;
    padding: 0px;
    margin: 0px;
}
/* ..a tutaj ustawiasz styl dla tej kolumny z nazwą forum */
.forumline > tbody > tr > th:nth-child(1) {
    height: initial;
    color: #fff;
    font-size: initial;
}
A jeśli nie o to ci chodzi, to przepraszam ;c
x x x x

#34067 22 paź 2017, 14:05

Prawie to miałam. Wiem już jak usunąć górę. Dzięki ;)

Ok, to forum, które podałam... to do tego dążę, aby w tym 'nagłówku' nie pojawiało się "tematy", "posty", "ostatnie posty".

Może tak to lepiej zobrazuje:
Obrazek

Pierwszy widok jest to co teraz mam. Chcę się pozbyć tego co zaznaczone, aby uzyskać taki efekt jak pod spodem (przerobione w paincie).

Tylko nie wiem jak to ugryźć. A jedyne do czego doszłam, to do tego, że te nagłówki były pod sobą, więc wolę już nie kombinować ;D

Awatar użytkownika
O mnie
Jestem częścią układu, jedną z gwiazd w galaktyce. Zgubiłam duszę i mam dwie pomocne dłonie. W lewej ręce trzymam pióro tworzenia, a w prawej nożyczki niszczenia.
Moje fora
San Jose, Shadow York, Caledonia i tworzę M.A.R.S!

 Noritoshi#2699
 6016244

#34068 22 paź 2017, 14:48

No to wysłałem ci kod, który właśnie to robi :D
x x x x

Awatar użytkownika

 Luxter#4127

#34070 22 paź 2017, 15:52

Dobra, chyba wreszcie zrozumiałem istotę problemu. Nie jestem znawcą wxv (więc jak ktoś jest, to niech mnie poprawi), ale typowo struktura widoku forum (w bardzo dużym uproszczeniu, bez CSS itd. itp.) wygląda jakoś tak:

Kod: Zaznacz cały

<table class="forumline">
  <tr>
    <th colspan="2">Kategoria forum</th>
    <th>Tematy</th>
    <th>Posty</th>
    <th>Ostatni post</th>
  </tr>
  <tr>
    <td colspan="2">Kategoria forum</td>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td>Obrazek</td>
    <td>Nazwa kategorii</td>
    <td>1</td>
    <td>1</td>
    <td>01-01-2017</td>
  </tr>
</table>
Co wygląda tak: Wypróbuj.

Jak widać zwykle są te nagłówki różne, a pod nimi jest dodatkowo osobny nagłówek na kategorię (tak jest na przytoczonym camp-of-shadows, tu na edenie i wszędzie tam gdzie teraz na szybkości zajrzałem), ale nie na załączonych przez Ciebie zdjęciach. Wnioskuję więc, że można to jakoś włączyć/wyłączyć w Panelu Administracyjnym (tutaj wyjadacze wxv mogą nam podpowiedzieć jak jest naprawdę). Jest to kluczowe spostrzeżenie, bo zwykle ukrywany jest cały rząd z tymi nagłówkami <th> a zostawiany jest ten drugi rząd z osobnym nagłówkiem na kategorię.

Idąc tym tropem możemy ukryć cały pierwszy rząd nagłówków poprzez prosty kod:

Kod: Zaznacz cały

.forumline > tbody > tr:first-child {
  display: none;
}
Co wygląda tak: Wypróbuj.

W tym miejscu podrzucę widok z pokolorowaniem poszczególnych elementów: Wypróbuj.

Jak widać, chcielibyśmy się tutaj pozbyć tego niebieskiego pustego miejsca, tak żeby tylko zaznaczony na żółto nagłówek od kategorii został. Jest jednak pewien problem, gdyż nieważne co zrobimy by go ukryć, w tym konkretnym przypadku nie uda nam się odzyskać zajmowanego przezeń miejsca (czyli będzie niewidoczny, ale będzie zajmował przestrzeń). W tym celu ukrywamy go poprzez kod:

Kod: Zaznacz cały

.forumline > tbody > tr:nth-child(2) > td:last-child {
  background-color: blue;
  display: none;
  visibility: collapse;
}
Co wygląda tak: Wypróbuj.

Zarówno "display: none" jak i "visibility: collapse" ukrywa element zwalniając miejsce (tutaj użyłem obu na raz, żeby pokazać, że żaden nie daje oczekiwanego rezultatu). Czemu tak się dzieje? Czemu ani "display: none" ani "visibility: collapse" nie zwolniło miejsca, mimo że powinny?

Cała zagadka leży w ustawionych atrybutach "colspan". Tak naprawdę i "display: none" i "visibility: collapse" zadziałały jak trzeba, zwolniły miejsce, lecz nasza żółta kolumna ma w HTML:

Kod: Zaznacz cały

    <td colspan="2">Kategoria forum</td>
colspan="2" mówi, że ta kolumna ma zajmować miejsce TYLKO I WYŁĄCZNIE 2 kolumn podrzędnych. W tym momencie mamy tylko jedno wyjście. Albo zmienimy colspan="2" na colspan="5", co wygląda tak: Wypróbuj albo nie możemy tego zrobić (z jakichś względów może wxv to uniemożliwiać? Znowu specjaliści od wxv mogą się wypowiedzieć i wyjaśnić) i wtedy nie można z tym zrobić nic (a przynajmniej tak mi się wydaje) tylko usiąść i zapłakać.

Sorki za przydługą odpowiedź, ale chciałem dokładnie wyjaśnić panujące w tej strukturze mechanizmy oraz bolączkę opierania układu strony na tabelach oraz ręcznego ustawiania "colspan".
Common sense is so rare that it should be classified as a super power. ~ Bill Murray.
Where ignorance is bliss, 'tis folly to be wise. ~ Thomas Gray.

ODPOWIEDZ ]