Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Ułożenie grafik na stronie

CSS  Założony przez  TheShadooow.

13.09.2016, 14:35
#1
Witam, nie wiedziałem jak nazwać wątek, aczkolwiek chodzi mi o pewną rzecz, a mianowicie...

[Obrazek: 53sQ6XZ.png]

Chodzi mi o te czerwone kółka... a dokładniej to jak je ustwić na stronie, na środku jest logo w kółku i chciałbym aby grafiki w kształcie kółka były ustawione tak jak na obrazku, mógłby ktoś mi pomóc jak to zrobić? ;/
Z góry dziekuje
13.09.2016, 14:43
#2
Zależy jak chcesz to zrobić. Jedną z opcji jest nadanie dla kontenera pozycji relatywnej, a następnie ustawienie kółeczek wg twoich upodobań za pomocą: left right top bottom. Inną opcją jest narysowanie tego w svg.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
13.09.2016, 14:56 (Ten post był ostatnio modyfikowany: 13.09.2016, 15:03 przez TheShadooow.)
#3
Rozumiem, ale co mam rozumieć przez .svg?
I jak umieścić to na stronie?
Cytat:a następnie ustawienie kółeczek wg twoich upodobań za pomocą: left right top bottom.

A z takim ustawieniem to na ekranie innego użytkownika będzie to ustawione inaczej :/
13.09.2016, 15:28 (Ten post był ostatnio modyfikowany: 13.09.2016, 15:28 przez NiespecjalnieUzdolniony.)
#4
(13.09.2016, 14:43)Divir napisał(a): Zależy jak chcesz to zrobić. Jedną z opcji jest nadanie dla kontenera pozycji relatywnej, a następnie ustawienie kółeczek wg twoich upodobań za pomocą: left right top bottom. Inną opcją jest narysowanie tego w svg.
Zapomniałeś o dodaniu pozycji absolutnej dla kółeczek :P
SVG to format grafiki wektorowej, możesz zrobić taką za pomocą np Inkskape czy jakoś tak lub Corel'a
Jak czytasz mój post to sprawdź czy go nie zedytowałem bo niezdecydowany jestem.
13.09.2016, 15:29
#5
Do czego potrzebne są te kółka?
(13.09.2016, 14:56)TheShadooow napisał(a): A z takim ustawieniem to na ekranie innego użytkownika będzie to ustawione inaczej :/
Zależy jak to zrobisz. Jeżeli główny blok będzie miał stałe wymiary z pozycją relatywną to wszystkie elementy wewnątrz jego z pozycją absolutną będą wyglądały wszędzie tak samo.
13.09.2016, 16:27 (Ten post był ostatnio modyfikowany: 13.09.2016, 16:28 przez TheShadooow.)
#6
Cytat:Do czego potrzebne są te kółka?

Chce zrobić logo (duże kółko) i wokół niego latające małe kółeczka w sensie takiej nawigacji ;DD

Cytat:Jeżeli główny blok będzie miał stałe wymiary z pozycją relatywną to wszystkie elementy wewnątrz jego z pozycją absolutną będą wyglądały wszędzie tak samo.

Czyli jak background będzie z pozycją relatywną i ustawię dla kułeczek i loga pozycję absolutną to wszystko będzie cacy na każdej rozdzielczości? Dobrze rozumiem?
A co do samego wstawiania kółeczek mam to zrobić w html (typowe "<img src...>") czy raczej przez css ("<div class=...>") ?
13.09.2016, 17:05
#7
(13.09.2016, 16:27)TheShadooow napisał(a): A co do samego wstawiania kółeczek mam to zrobić w html (typowe "<img src...>") czy raczej przez css ("<div class=...>") ?
Skoro ma to być nawigacja użyj tagu a.

(13.09.2016, 16:27)TheShadooow napisał(a): Czyli jak background będzie z pozycją relatywną i ustawię dla kółeczek i loga pozycję absolutną to wszystko będzie cacy na każdej rozdzielczości? Dobrze rozumiem?
Tak, o ile ustawisz stałe wymiary dla pojemnika z tym. Chociaż to też zależy jak rozumiesz "będzie cacy". Na telefonie dostaniesz pewnie scrolla. Coś mi się wydaje, że takie menu w wersji mobilnej byłoby bez sensu, więc raczej do wersji mobilnej i tak będziesz musiał coś innego wykombinować. ;)
Możesz jeszcze używać jednostek typu % lub vh i vw, ale o tym to musisz googlować.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
13.09.2016, 17:06
#8
http://www.o2.pl/
zbadaj elementy na tej stronie :P
Jak czytasz mój post to sprawdź czy go nie zedytowałem bo niezdecydowany jestem.
13.09.2016, 17:19 (Ten post był ostatnio modyfikowany: 14.09.2016, 06:45 przez TheShadooow.)
#9
Cytat:Tak, o ile ustawisz stałe wymiary dla pojemnika z tym

Moje body na chwilę obecną wygląda tak: 


.background {
  height: 600px;
  background-image: url(images/background.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
13.09.2016, 17:25
#10
Dlaczego body? Robisz blok w którym będziesz miał logo oraz nawigację i dla niego nadajesz relatywną pozycję.
<div class="main-logo">
    <div class="logo">
    </div>

    <div class="nawigacja">
    </div>
</div>
13.09.2016, 17:58 (Ten post był ostatnio modyfikowany: 14.09.2016, 13:45 przez TheShadooow.)
#11
Aaa racja ;) Dzięki :p
Witam otóz w końcu za to się wziąłem, na razie byle jakie grafiki, ale chciałbym wiedzieć czy zrobiłem to dobrze.

U mnie wygląda to tak:
[Obrazek: 7EjIrDy.png]


Moglibyście zerknąć? :D 
http://187clan.xaa.pl/kupa/



Użytkownicy przeglądający ten wątek:

2 gości