Skocz do zawartości

Nie masz jeszcze konta?

Zarejestruj nowe konto, aby mieć pełny dostęp do forum. To zajmie Ci 1 minutę!

Przejdź do rejestracji

Zablokowane Pomoc


LuxiStudioPL
 Udostępnij

Rekomendowane odpowiedzi

Witam Chciałbym się dowiedzieć jaki kod trzeba mieć żeby zrobić kółko np w środku tego kółka Avatar i na dole zrobić  2 przyciski FB i Twitch lub hitbox czy ktoś by mógł na moją stronę takie coś zrobić ??Z góry dziękuje
[url=http://ts-offline.xaa.pl/]HTML 5 Strone jak by co xd [/url]
Odnośnik do komentarza
Udostępnij na innych stronach

  • Administrator
[code]<img src="linkdoavka.png" class="avatar"> <a href="#" class="facebook"></a> <a href="#" class="hitbox"></a>[/code]  
.A w css np : [code].avatar { height:70px; width:70px; border:2px solid #fff; position:absolute; margin-top:50px; margin-left:0px; } .facebook { background: url("images/facebook.png") no-repeat; height:50px; width:50px; position:absolute; margin-top:50px; margin-left:0px; } .hitbox { background: url("images/hitbox.png") no-repeat; height:50px; width:50px; position:absolute; margin-top:50px; margin-left:0px; }[/code]  
Wiadomo że obrazek i inne robisz sam podajesz link no i zmieniasz pozycje elementów [code]margin-top:50px; margin-left:0px;[/code]  
 
Odnośnik do komentarza
Udostępnij na innych stronach

[quote][code]<img src="linkdoavka.png" class="avatar"> <a href="#" class="facebook"></a> <a href="#" class="hitbox"></a>[/code]  
.A w css np : [code].avatar { height:70px; width:70px; border:2px solid #fff; position:absolute; margin-top:50px; margin-left:0px; } .facebook { background: url("images/facebook.png") no-repeat; height:50px; width:50px; position:absolute; margin-top:50px; margin-left:0px; } .hitbox { background: url("images/hitbox.png") no-repeat; height:50px; width:50px; position:absolute; margin-top:50px; margin-left:0px; }[/code]  
Wiadomo że obrazek i inne robisz sam podajesz link no i zmieniasz pozycje elementów [code]margin-top:50px; margin-left:0px;[/code]  
  [/quote]
Coś nie wychodzi zobacz sobie na stronie zrobiłem wszystko dodałem do css dodałem grafiki do images i tak dalej i nie działa
Odnośnik do komentarza
Udostępnij na innych stronach

  • Administrator
gdzie ty ten kod wpisałeś ?


Do .avatar {}
dodaj ten kod [code]-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;[/code]  
To doda ci okrągły avek
Czyli powinno wyglądać to tak : [code].avatar { height:70px; width:70px; border:2px solid #fff; position:relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-top:50px; margin-left:0px; }[/code]  
Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę
http://upload.spacecms.eu/server/php/files/2015-11-10%2010_16_46-TS-OFFLINE.PL%20_%20OFICJALNA%20STRONA.png[/img]
Odnośnik do komentarza
Udostępnij na innych stronach

  • Administrator
A więc tak
aby uzyskać taki efekt :
Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę
http://upload.spacecms.eu/server/php/files/2015-11-10%2010_23_47-TS-OFFLINE.PL%20_%20OFICJALNA%20STRONA.png[/img]
 
Zmień kody te co podałem na takie :
html : [code]<img src="http://ts-offline.xaa.pl/lyaj%20na%20ts.png" class="avatar"> <a href="http://facebook.com" class="facebook"><i class="fa fa-facebook"></i></a> <a href="http://hitbox.tv" class="hitbox"><i class="fa fa-steam"></i></a>[/code]  
CSS: [code].facebook { height: 30px; width: 30px; position: relative; margin-top: 20px; margin-left: 0px; float: left; background-color: rgb(167, 4, 113); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .hitbox { height: 30px; width: 30px; position: relative; margin-top: 20px; margin-left: 0px; float: right; background-color: rgb(4, 109, 167); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .avatar { height: 70px; width: 70px; border: 2px solid #FFF; position: relative; margin-top: 50px; margin-left: 0px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }[/code]  
 
Edytowane przez Gość
Odnośnik do komentarza
Udostępnij na innych stronach

[quote]gdzie ty ten kod wpisałeś ?
Do .avatar {}
dodaj ten kod [code]-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;[/code]  
To doda ci okrągły avek
Czyli powinno wyglądać to tak : [code].avatar { height:70px; width:70px; border:2px solid #fff; position:relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-top:50px; margin-left:0px; }[/code]  
Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę
http://upload.spacecms.eu/server/php/files/2015-11-10%2010_16_46-TS-OFFLINE.PL%20_%20OFICJALNA%20STRONA.png[/img][/quote]
tera mi powiedz dla czego nie ma icon fb i np hitbox dodałem do folder images i tak dalej i dupa i linki są w avatarze
dobra to już mam
a jak będzie z icon np twitch ??
Edytowane przez Gość
Odnośnik do komentarza
Udostępnij na innych stronach

[quote][url=https://fortawesome.github.io/Font-Awesome/icons/]https://fortawesome.github.io/Font-Awesome/icons/[/url]
 
Tutaj masz liste dostępnych ikon. [/quote]
Ok thx za pomoc :)
Oczywiście Reputacja musi być xd

[quote][url=https://fortawesome.github.io/Font-Awesome/icons/]https://fortawesome.github.io/Font-Awesome/icons/[/url]
 
Tutaj masz liste dostępnych ikon. [/quote]
a jeszcze jedno pytanie mam jak mogę zrobić jak tam dałeś na ss żeby np koło siebie były takie 3 kartki ??
Odnośnik do komentarza
Udostępnij na innych stronach

  • Administrator
Chodzi ci o coś takiego ?
Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę
http://upload.spacecms.eu/server/php/files/2015-11-10%2010_45_00-TS-OFFLINE.PL%20_%20OFICJALNA%20STRONA.png[/img]
 
Jak masz kod html [code]<div class="content box style2"> <header> <h2>LJAY</h2> </header> <img src="http://ts-offline.xaa.pl/lyaj%20na%20ts.png" class="avatar"> <a href="https://www.facebook.com/LJayPL" class="facebook"><i class="fa fa-facebook"></i></a> <a href="http://www.hitbox.tv/LJay" class="hitbox"><i class="fa fa-bitbucket"></i></a> </div>[/code]  
To musisz zamienić na podwójny czyli skopiować ten kod i dodać po nastepny [code]<div class="content box style2"> <header> <h2>LJAY</h2> </header> <img src="http://ts-offline.xaa.pl/lyaj%20na%20ts.png" class="avatar"> <a href="https://www.facebook.com/LJayPL" class="facebook"><i class="fa fa-facebook"></i></a> <a href="http://www.hitbox.tv/LJay" class="hitbox"><i class="fa fa-bitbucket"></i></a> </div> <div class="content box style2"> <header> <h2>LJAY</h2> </header> <img src="http://ts-offline.xaa.pl/lyaj%20na%20ts.png" class="avatar"> <a href="https://www.facebook.com/LJayPL" class="facebook"><i class="fa fa-facebook"></i></a> <a href="http://www.hitbox.tv/LJay" class="hitbox"><i class="fa fa-bitbucket"></i></a> </div>[/code]  
Odnośnik do komentarza
Udostępnij na innych stronach

[quote]Chodzi ci o coś takiego ?
Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę
http://upload.spacecms.eu/server/php/files/2015-11-10%2010_45_00-TS-OFFLINE.PL%20_%20OFICJALNA%20STRONA.png[/img]
 
Jak masz kod html [code]<span><div</span><span> </span><span>class</span><span>=</span><span>"content box style2"</span><span>></span><span> </span><span><header></span><span> </span><span><h2></span><span>LJAY</span><span></h2></span><span> </span><span></header></span><span> </span><span><img</span><span> </span><span>src</span><span>=</span><span>"http://ts-offline.xaa.pl/lyaj%20na%20ts.png"</span><span> </span><span>class</span><span>=</span><span>"avatar"</span><span>></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"https://www.facebook.com/LJayPL"</span><span> </span><span>class</span><span>=</span><span>"facebook"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-facebook"</span><span>></i></a></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"http://www.hitbox.tv/LJay"</span><span> </span><span>class</span><span>=</span><span>"hitbox"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-bitbucket"</span><span>></i></a></span><span> </span><span></div></span>[/code]  
To musisz zamienić na podwójny czyli skopiować ten kod i dodać po nastepny [code]<span><div</span><span> </span><span>class</span><span>=</span><span>"content box style2"</span><span>></span><span> </span><span><header></span><span> </span><span><h2></span><span>LJAY</span><span></h2></span><span> </span><span></header></span><span> </span><span><img</span><span> </span><span>src</span><span>=</span><span>"http://ts-offline.xaa.pl/lyaj%20na%20ts.png"</span><span> </span><span>class</span><span>=</span><span>"avatar"</span><span>></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"https://www.facebook.com/LJayPL"</span><span> </span><span>class</span><span>=</span><span>"facebook"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-facebook"</span><span>></i></a></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"http://www.hitbox.tv/LJay"</span><span> </span><span>class</span><span>=</span><span>"hitbox"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-bitbucket"</span><span>></i></a></span><span> </span><span></div></span><span> </span><span><div</span><span> </span><span>class</span><span>=</span><span>"content box style2"</span><span>></span><span> </span><span><header></span><span> </span><span><h2></span><span>LJAY</span><span></h2></span><span> </span><span></header></span><span> </span><span><img</span><span> </span><span>src</span><span>=</span><span>"http://ts-offline.xaa.pl/lyaj%20na%20ts.png"</span><span> </span><span>class</span><span>=</span><span>"avatar"</span><span>></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"https://www.facebook.com/LJayPL"</span><span> </span><span>class</span><span>=</span><span>"facebook"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-facebook"</span><span>></i></a></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"http://www.hitbox.tv/LJay"</span><span> </span><span>class</span><span>=</span><span>"hitbox"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-bitbucket"</span><span>></i></a></span><span> </span><span></div></span>[/code]   [/quote]
ooooo o takie coś mi chodziło thx czyli jak chce dodać jeszcze 1 kartke to muszę zrobić tak ??
[code][/code] [code]<span><div</span><span> </span><span>class</span><span>=</span><span>"content box style2"</span><span>></span><span> </span><span><header></span><span> </span><span><h2></span><span>LJAY</span><span></h2></span><span> </span><span></header></span><span> </span><span><img</span><span> </span><span>src</span><span>=</span><span>"http://ts-offline.xaa.pl/lyaj%20na%20ts.png"</span><span> </span><span>class</span><span>=</span><span>"avatar"</span><span>></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"https://www.facebook.com/LJayPL"</span><span> </span><span>class</span><span>=</span><span>"facebook"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-facebook"</span><span>></i></a></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"http://www.hitbox.tv/LJay"</span><span> </span><span>class</span><span>=</span><span>"hitbox"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-bitbucket"</span><span>></i></a></span><span> </span><span></div></span><span> </span><span><div</span><span> </span><span>class</span><span>=</span><span>"content box style2"</span><span>></span><span> </span><span><header></span><span> </span><span><h2></span><span>LJAY</span><span></h2></span><span> </span><span></header></span><span> </span><span><img</span><span> </span><span>src</span><span>=</span><span>"http://ts-offline.xaa.pl/lyaj%20na%20ts.png"</span><span> </span><span>class</span><span>=</span><span>"avatar"</span><span>></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"https://www.facebook.com/LJayPL"</span><span> </span><span>class</span><span>=</span><span>"facebook"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-facebook"</span><span>></i></a></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"http://www.hitbox.tv/LJay"</span><span> </span><span>class</span><span>=</span><span>"hitbox"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-bitbucket"</span><span>></i></a><span><span> </span></div></span></span>[/code] [code]<span><div</span><span> </span><span>class</span><span>=</span><span>"content box style2"</span><span>></span><span> </span><span><header></span><span> </span><span><h2></span><span>LJAY</span><span></h2></span><span> </span><span></header></span><span> </span><span><img</span><span> </span><span>src</span><span>=</span><span>"http://ts-offline.xaa.pl/lyaj%20na%20ts.png"</span><span> </span><span>class</span><span>=</span><span>"avatar"</span><span>></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"https://www.facebook.com/LJayPL"</span><span> </span><span>class</span><span>=</span><span>"facebook"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-facebook"</span><span>></i></a></span><span> </span><span><a</span><span> </span><span>href</span><span>=</span><span>"http://www.hitbox.tv/LJay"</span><span> </span><span>class</span><span>=</span><span>"hitbox"</span><span>><i</span><span> </span><span>class</span><span>=</span><span>"fa fa-bitbucket"</span><span>></i></a></span><span> </span><span></div></span>[/code] ??
Odnośnik do komentarza
Udostępnij na innych stronach

Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij



Wypoczywam.com Wypoczywam.com - Domki Wypoczywam.com - Pokoje Wypoczywam.com - Apartamenty Wypoczywam.com - Pensjonaty Wypoczywam.com - Hotele
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę.