Skocz do zawartości

[CSS] Radial-gradient, bug?


Czarny Ass

Rekomendowane odpowiedzi

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. :|

Odnośnik do komentarza
Udostępnij na innych stronach

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

Odnośnik do komentarza
Udostępnij na innych stronach

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

Odnośnik do komentarza
Udostępnij na innych stronach

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.

Odnośnik do komentarza
Udostępnij na innych stronach

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;
}

Odnośnik do komentarza
Udostępnij na innych stronach

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">
    <!-- (...) -->

Odnośnik do komentarza
Udostępnij na innych stronach

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).

Odnośnik do komentarza
Udostępnij na innych stronach

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

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...