[CSS] Radial-gradient, bug?

Czarny Ass · 30 Sierpnia 2013

Mam problem z radial-gradient. Wyświetlają mi się poziome pasy na stronie zamiast pojedynczego tła tj. gradientu (dałem to w <body style="...">). Bug? Jak to naprawić? Wyświetlało się dobrze (jak byłem poza domem), wróciłem do domu i już nie. :(

Być może wprowadziłem jakieś zmiany na stronie, ale na pewno nie takie, które miałyby coś wspólnego z tłem. :|

PsichiX · 30 Sierpnia 2013

jakiś kod? pamiętam, że trzeba było robić dodatkowe wariacje browser-specific

Uzjel · 30 Sierpnia 2013

Sprawdź jak działa na różnych przeglądarkach.

Czarny Ass · 30 Sierpnia 2013

HTML: http://fiscom.com.pl/new/code.txt

CSS: http://fiscom.com.pl/data/style.css

java script: http://fiscom.com.pl/data/scripts.js

Wynik: http://fiscom.com.pl/new/

Testowałem na Mozilli i na Chromie.

Konrad-GM · 30 Sierpnia 2013

Bad, very bad :(

Unikaj korzystania z atrybutów 'style' w tagach. Dodaj wrapper odpowiedzialny za tło, który poprawnie odwzoruje rozdzielczość dokumentu. Do eksperymentalnych parametrów i funkcji CSS dodaje się tzw. prefiksy (np. -webkit-*, -moz-*, -ms-*, -o-*) po więcej czytaj MDN

Czarny Ass · 30 Sierpnia 2013

Z tym tłem chciałem zrobić tak jak mówisz. Strona jest w początkowej fazie, nie ma grafik żadnych. (ale może będą od jutra, jak dostanę się do komptera z działającą kartą graficzną.

A atrybuty style dodałem później, by nie robić większej ilości klas (a dopiero później pomyślałem, że mogę jedną rzecz do kilku klas dać).

Prefiksów nigdy nie używałem. ;(

EDIT:

A tu wersja minimalistyczna: http://fiscom.com.pl/ - czyli bez żadnych upiększaczy, prosta schludna, ale zastąpię ją.

Powiedz, kod zły? Myślałem, że całkiem ok, ale mogłem się mylić. Jest na pewno kilka rzeczy, które muszę na pewno zmienić.

A, i jak zrobić czytelnie kod CSS? Zawsze miałem z tym problem.

Konrad-GM · 30 Sierpnia 2013

Czytelny CSS? Chyba najlepiej posłużyć się wcięciami, oraz grupowaniem.

// glowne style list np 'margin: 0;' czy 'list-style: none;' dla elementów LI
ul.lista {
    prop1: val;
    prop2: val;
}

ul.lista li {
    prop1: val;
}

// navbar w sekcji naglowka
ul.lista.navbar {
    prop3: val;
    prop4: val;
}

ul.lista.navbar li {
    prop2: val;
    prop3: val;
}

gnysek · 30 Sierpnia 2013

U mnie jest gradient

Czarny Ass · 30 Sierpnia 2013

Sprawdzałeś kod u siebie czy bezpośrednio ze strony?

U mnie nie ma gradientu,... to znaczy jest, ale w kilku paskach a nie na całym tle tak jak powinien być.

tramur · 30 Sierpnia 2013

Spróbuj dopisać do CSS w body

body {
  color:white;
  font-family:Verdana;
  height:100%
}

Czarny Ass · 30 Sierpnia 2013

Działa!

Ale jest kolejny problem. 100% to za dużo bo pojawia się scrollbar, a jak dodałem overflow:hidden; problem wrócił... dlaczego?

Na razie jest na 97% i jest ok. ;)

Konrad-GM · 30 Sierpnia 2013

Dlatego pokazuje się scrollbar, gdyż margines elementu body jest ustawiony na pewną wartość. Niby można to zniwelować poprzez box-sizing, ale prościej poprzez 'margin: 0'.

Ja u siebie stosowałem coś takiego:

// CSS
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
}

#wrapper {
    background: -webkit-linear-gradient(top, #000, #fff);
    background: -moz-linear-gradient(top, #000, #fff);
    background: linear-gradient(top, #000, #fff);
    /* (...) */
    min-width: 100%;
    min-height: 100%;
}

// HTML
<body>
  <div id="wrapper">
    <!-- (...) -->

Czarny Ass · 31 Sierpnia 2013

Zrobiłem lekko inaczej z tymi marginesami.

Tylko górny i dolny na 0px, bo się strona rozjeżdża, jak usunę wszystkie marginesy.

Zastosowałem się do waszych porad i... podsumowując.:

- uporządkowałem style.css

- dodałem wcięcia w style.css

- za skórkę odpowiadają oddzielne pliki .css (z własnej inicjatywy)

- dodałem kilka klas, atrybut style zostawiłem tylko w kilku miejscach, tzn tam gdzie nie było sensu tworzyć nowych klas

- uporządkowanie index.html (z własnej inicjatywy)

- minimalnie lepiej z scripts.js (tu także z własnej inicjatywy, ale tu było w zasadzie dobrze)

A z bardziej technicznych spraw:

- usunąłem marginesy dolne i górne

- ustawiłem wysokość i szerokość strony na 100%

I sprawy wyglądu, tu z własnej inicjatywy:

- loga nie da się "podświetlić"

- jestem w trakcie dodawania grafiki, jak skończę to pokażę wam aktualną wersję

Chyba jest dobrze, teraz, kod jest ładny (no poza style.css -> tam nadal poziom niżej, ale już jest całkiem ładnie).

[CSS] Radial-gradient, bug?

Rekomendowane odpowiedzi

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników