Panda


Poprzedni temat «» Następny temat
chmurki
Autor Wiadomość
corazon



Mów mi:
Kasia/corazon

Gram na:
forum



Posty: 633
Wysłany: 17 Grudzień 2012, 17:22   chmurki

Może kilka słów ode mnie nieco pomoże w tych chmurkach, wiem, że używacie(zresztą ja też) tego do przedstawienia administracji czy czegoś podobnego.

Ze stron, które mogą wam się przydać w czymś co ja nie będę tłumaczyć, żeby nie przedłużać, a wy po prostu możecie się tam odnieść i najwyżej podkręcicie swoje dzieła ;d:
generator
Temat z divami
i jak ktoś chciałby coś więcej to temat z hoverami

Mam nadzieję, że ktoś ogarnie ten mój chaos, heh.

zaczynamy od podstaw czyli wklejamy do generatora czy innej strony/programu, który używacie:
Kod:
<style type="text/css"></style>


Między ">" a "<" mamy miejsce dla naszego mini css'a gdzie pokierujemy co ma się dziać z naszymi chmurkami/obrazkami/czymkolwiek co sobie zachcecie.

przykładowo:
Kod:
.chmurka{
position:absolute; display:none; left:-50px;top:10px;
background-color: #ffffff; border-radius: 20px;


w .chmurka{} to są wasze wartości do chmurki, która ma się pojawić :3
Tu polecam dawać position:absolute, bo to nam nic nie rozjedzie.
Display kieruje naszym wyświetlaniem dlatego najlepiej służy mi i pewnie jeszcze innym "none".
Left i top to nic innego jak nasze marginy, więcej o nich znajdziecie w temacie z divami. On kieruje naszą chmurką czy ona ma być pod zdjęciem/napisem nad, po prawej czy też po lewej. Jeżeli nie damy nic to nam przykryje nasze zdjęcie/napis.
Resztę ustawiacie według was, jaki kolor ma mieć tło chmurki, jaka czcionka ma na niej być, zaokrąglenia itp, jak wam wygodnie - znów odnoszę do tematu z divami, bo na przykładzie dałam 2 losowe.

dalej można powiedzieć, że idziemy z górki
Kod:
<span style="position:relative"></span>


kolejne skrypty, ile tego może być? akurat ten jest ważny, bo pozycjonuje. Tu "relative" się sprawdza.

Znów między to musimy wpisywać coś czyli:
Kod:
<div style="./redir/./ADMIN width=" 100"="" height="100" "="" onmouseover="Chmurka(this,1)" onmouseout="Chmurka(this,0)" title=""></div>


wygląda dziwnie...
"ADMIN" na przykładzie możecie zastąpić innym słowem, to taki ułatwiacz znajdywania, dobrze coś takiego mieć, bo szybciej to potem znajdziemy przy ewentualnych poprawkach.
Width i height wiemy, że służą do szerokości i wysokości.

Nie odchodzimy od tego divu! między znaczniki teraz dajemy odnośnik do zdjęcia, ewentualnie napis. Ja przedstawię to na zdjęciu:
Kod:
<img src="LINK DO ZDJĘCIA" width="szerokość" height="wysokość">


dodatkowo* równie dobrze możemy sterować tu zdjęciem, jego zaokrągleniem itp, dając na początek "style" czyli: <img style="border-radius: 60px; border: 2px solid blue" src="link do zdjęcia itd...">

Nie zapominajmy, że dalej siedzimy między "spanami", natomiast wyszliśmy już z divu między, którym było zdjęcie (proste bardzo xd)
kolejnym punktem zaczepienia będzie już nasza chmurka czyli jak co ma być przedstawione na tej chmurce, którą sobie ukształtowaliśmy na początku.

Kod:
<div class="chmurka" style="display: none;">wartości</div>


w wartościach możecie posłużyć się zwykłymi divami albo tabelkami przy bardziej rozbudowanych chmurkach. Nie zapominajmy, że właśnie tu kończy się nasz "</span>"!
No to już kończymy, jeżeli macie wpisane wartości, jeżeli chmurka na początku jest ładnie dopasowana do tego co wpisaliście to nie pozostaje nam nic innego jak dokończyć całość regułką, którą mało kto rozumie, ale jest xd:

Kod:
<script type="text/javascript">
function Chmurka(T,t){
T.title=''
T.parentNode.lastChild.style.display=t?'block':'none'
}
</script>


bez tego nam się nie pojawi chmurka, wystarczy dodać to na koniec albo początek kodu.

Uff, koniec. Skończyłam, jest ogólnikowo, nie chciałam tu tworzyć jakiegoś wybitnego kodu, który można skopiować, nie rozpisałam za dużo, żeby nie zabierać miejsca, macie więcej tego co wam się przyda w tych linkach na górze gdzie ktoś mnie wyręczył :)
Chyba o niczym nie zapomniałam, w razie pytań czy problemów pisać ;3
[Profil] [WWW]
   
 
dirty lies



Mów mi:
Dirty Lies

Gram na:
Tworzę swoje forum oparte na serialu Pretty Little Liars


Posty: 5
Wysłany: 21 Kwiecień 2017, 10:59   

chyba jestem tępakiem, bo nie pokazuje mi się chmurka po najechaniu na zdjęcie ;/ nie wiem nawet czy dobrze skleiłam wszystko ze sobą, ponieważ nie widzę jak kod ma wyglądać w całości :-(
_________________
xxxXXXxxx
[Profil]
 
 
dirty lies



Mów mi:
Dirty Lies

Gram na:
Tworzę swoje forum oparte na serialu Pretty Little Liars


Posty: 5
Wysłany: 21 Kwiecień 2017, 11:13   

już doszłam do tego co było nie tak.
_________________
xxxXXXxxx
[Profil]
 
 
Wyświetl posty z ostatnich:   
[ ODPOWIEDZ ]
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Dodaj temat do Ulubionych
Wersja do druku

Skocz do: