Forum Blogowe 17 lat!

Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów, fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu
FAQFAQ    UżytkownicyUżytkownicy  grupa Blogger Polska! na FBBlogger Polska!  GrupyGrupy  regulaminRegulamin RejestracjaRejestracja  ZalogujZaloguj

»  »  »  ::
Autor Wiadomość
Eisen 
Blogger.Klub


Dołączył/a: 29 Sty 2013
Posty: 61
Wysłany:    [CSS] formatowanie tabelki
Wiadomość (widoczna dla zarejestrowanych)


ktoś mi powie, czemu w poście się normalnie wyświetla, a jak otwieram pusty dokument xhtml z tą tabelką, to jest błąd w table id="osom"? Ponadto chciałbym, żeby po najechaniu na dany wiersz, tło podświetlało się w całym wierszu, a nie tylko w drugiej kolumnie? Mam nadzieję, że widać o co chodzi

[ Dodano: 30-12-2013, 02:16 ]
Naprawdę nikt nie ma żadnego pomysłu?
 
  podziel si� tym postem na:



Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do grupy Bloggerów na FB

Lukem 
Blogowicz.Friend

Pomógł: 89 razy
Dołączył/a: 01 Kwi 2006
Posty: 1739
Wysłany: 2014-01-06, 13:45   
Wróciłem po bardzo długim urlopie i teraz dopiero przeczytałem.

Po kolei:

1. Zapisując stronę z rozszerzeniem .xhtml zmuszasz przeglądarkę do tego, aby traktowała Twoją stronę z maksymalną surowością i każdy najmniejszy błąd w kodzie XHTML może spowodować niewyświetlenie dokumentu. Zapisuj dokumenty jako .html (ewentualnie .htm) i wtedy przeglądarki zaczną przymykać oko na poprawność kodu (tzn. spróbują go wyświetlić tak, jak jest, zamiast krzyczeć o błędach składniowych). Nie rozwiązuje to oczywiście problemu błędów w kodzie, ale o tym w następnym punkcie.

XHTML to taka zaszłość historyczna, która poza bardzo specyficznymi zastosowaniami niespecjalnie ma rację bytu. Jakkolwiek, jeśli chcesz przy nim pozostać, to polecam kurs w BrowseHappy oraz krytyczny artykuł na temat używania XHTML.

W innym przypadku zapisuj strony z rozszerzeniem .html (lub .htm) i udawaj, że XHTML nie istnieje. ;)

2. Natomiast przyczyną wyświetlonego błędu jest to, że kod, który wkleiłeś, nie jest poprawnym dokumentem HTML (ani XHTML). Zacznij od przykładowego dokumentu HTML5 i wklej swój kod w ramy dokumentu.

Blok

Kod

<style type="text/css">
#osom {
border: 1px solid black;
}

// i tak dalej aż do zamknięcia znacznika style

</style>


wklej do sekcji <head> (czyli np. linijkę wyżej podnad tagiem zamykającym </head>), zaś resztę (kod tabelki) do sekcji <body> (analogicznie). W ten sposób strona stanie się poprawnym dokumentem HTML.

Poprawność składniową stron HTML możesz sprawdzać walidatorem W3C.

Eisen napisał/a:

Ponadto chciałbym, żeby po najechaniu na dany wiersz, tło podświetlało się w całym wierszu, a nie tylko w drugiej kolumnie?


Zmień nastepujący fragment stylu:

Kod

#osom tbody tr:hover {
background: #0b232c;
color: #fff;
}


na

Kod

#osom tbody tr:hover td {
background: #0b232c;
color: #fff;
}


Przyczyną takiego zachowania tabelki jest ta deklaracja:

Kod

#osom tbody td:first-child {
background: #f3f3f3;;
font-weight: bold;
width: 24%;
}


która z racji specyficzności CSS jest ważniejsza od

Cytat

#osom tbody tr:hover {
background: #0b232c;
color: #fff;
}


i powoduje, że tło dla pierwszej komórki wewnątrz <tr> ma pierwszeństwo nad tłem ustawionym przy najechaniu myszą.

Kod z Twoją tabelką i powyższą poprawką wrzuciłem na jsfiddle, gdzie możesz podejrzeć efekt.
 
  podziel si� tym postem na:
Eisen 
Blogger.Klub


Dołączył/a: 29 Sty 2013
Posty: 61
Wysłany: 2014-01-07, 22:25   
Dzięki wielkie, naprawdę bardzo mi pomogłeś ;)

Jeśli mogę jeszcze o coś zapytać, to ta stopka. Jest tam jak widać

[Jakiś link] i Tekst ze spacją...

Chciałbym, żeby ten link zachowywał się jak wszystkie Teksty1,2,3 w tej kolumnie, z takim samym marginesem, itd.
Natomiast Tekst ze spacją, linkami był w tym samym wierszu co jakiś link, pod kolumną z Odpowiedziami (z tym samym marginesem do lewej, itd.) a tekst, który wyjdzie poza wers, zaczynał się nie pod Jakimś linkiem, tylko pod tym Tekstem ze spacjami. Próbowałem się bawić, ale jak złączyłem stopkę już wcześniej, to coś się spieprzyło. Dzięki raz jeszcze, również za te linki - ciekawa lektura
 
  podziel si� tym postem na:
Lukem 
Blogowicz.Friend

Pomógł: 89 razy
Dołączył/a: 01 Kwi 2006
Posty: 1739
Wysłany: 2014-01-29, 00:46   
Kurde. Refleksem to ja nie grzeszę, ale to nie czas na usprawiedliwienia. :(

Cytat

Chciałbym, żeby ten link zachowywał się jak wszystkie Teksty1,2,3 w tej kolumnie, z takim samym marginesem, itd.


Możesz doprecyzować efekt końcowy, który chcesz uzyskać (ewentualnie go naszkicować w Paincie)? Co rozumiemy przez "zachowywał się jak wszystkie Teksty1,2,3"? Taki sam kolor tła, wyrównanie tekstu, coś innego?

Co mógłbym doradzić ogólnie:

- pobaw się CSSowymi właściwościami padding (wewnętrzny margines/odstęp danego elementu od krawędzi) i text-align (wyrównanie tekstu) - możliwe, że za ich pomocą osiągniesz zamierzony efekt.

- być może trzeba będzie dobrać się do konstrukcji tabeli i np. dodać nowy wiersz pod tymi, które już są - konstrukcje tabeli są wytłumaczone w większości kursów HTML/CSS, np. tutaj, ale nie wiem, czy na pewno o to Ci chodzi ;)
 
  podziel si� tym postem na:
Eisen 
Blogger.Klub


Dołączył/a: 29 Sty 2013
Posty: 61
Wysłany: 2014-01-30, 02:24   
Rozumiem, ostatnio też mam bardzo napięty grafik. Jak mówiłeś, wrzucam na szybko projekt w paincie

o coś takiego mi chodzi
 
  podziel si� tym postem na:
Wyświetl posty z ostatnich:   
»  »  »  ::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegły.
Nie możesz odpowiadać w tematach. Zobacz szczegły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
 Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2024 Wrocław | modified by Przemo © 2003 phpBB Group.
↑ skocz na górę ↑   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony blogów i stron na wordpress
ogromna baza motywów WP, podzielona na kategorie tematyczne. Proste, jednostronicowe wizytówki lub zaawansowane układy, także z funkcją sklepu internetowego (ecommerce).
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz