CrazyC0de píše:Zde máš provizorní buttony :Kód: Vybrat vše
<ul>
<li><p>Domů</p></li>
<li><p>Domů</p></li>
<li><p>Domů</p></li>
<li><p>Domů</p></li>
</ul>
<style>
body ul li{width:200px;height:60px;background: lightgreen;border: 2px solid black;font-family:Verdana;font-size: 25px;text-align:center;color:black;list-style-type:none;}
body ul li p{padding-top:15px;}
body ul li:hover{background:black;color:lightgreen;}
</style>
Jsou udělané s pomocí čistého CSS, ale můžeš je udělat i přes obrázky...
Jak udělat buttony na web (viz. přiložený obr)?
-
sergej2002
- Level 1.5
- Příspěvky: 121
- Registrován: listopad 12
- Pohlaví:
- Stav:
Offline
Re: buttony
to jsem udělal podle CrazyC0de
Re: Jak udělat buttony na web (viz. přiložený obr)?
To co ti poslal je k hovnu.
Zkus toto:
Obrázky si stáhni z endory.
viz. :
nebo :
--- Doplnění předchozího příspěvku (21 Pro 2012 10:42) ---
zde to máš celý v příloze.
Zkus toto:
Kód: Vybrat vše
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style>
div#layer1 {position: absolute; top: 0; left: 0; width: 100%;}
div#layer1-box {position: relative; width: 990px; margin: 0 auto;}
/* Zakladni */
html {background: black;}
body {color: #4f4f4f; font: 13px/1.5 arial, sans-serif; background: url('body.jpg') center top no-repeat;}
/* Menu1*/
div#menu1 {position: absolute; top: 58px; right: 18px; /*width: 100%;*/}
div#menu1 ul.m11 {margin: 0; padding: 0; float: right;}
div#menu1 li.m11 {margin: 0 0 0 4px; padding: 0; float: left; display: inline; zoom: 1;}
* html div#menu1 li.m11 {padding-bottom: 8px;}
div#menu1 li.m11-sub:hover,
div#menu1 li.m11-sub.m11-selected {padding-bottom: 8px; background: url('menu12-arrow.gif') center bottom no-repeat;}
div#menu1 li.m11:hover ul,
div#menu1 li.hover ul,
div#menu1 li.m11-selected ul {/*visibility: visible;*/ display: block;}
div#menu1 a.m11 {
display: block;
width: 102px;
height: 29px;
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 29px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
background: url('menu1.png') 0 0 no-repeat;
outline: none;
}
div#menu1 span {}
div#menu1 a.m11:hover,
div#menu1 a.m11:focus,
div#menu1 a.m11:active,
div#menu1 a#m11active,
div#menu1 li.m11-selected a.m11,
div#menu1 li.m11-sub:hover a.m11 {color: #fff; background-position: -102px 0;}
div#menu1 ul.m12 {/*visibility: hidden;*/ display: none; position: absolute; top: 37px; right: 0; margin: 0; padding: 0;}
div#menu1 li.m12 {margin: 0; padding: 0; list-style: none; float: left; display: inline;}
div#menu1 a.m12 {
float: left;
display: inline;
padding: 0 10px;
color: #8a988c;
line-height: 27px;
text-decoration: none;
background: url('menu12.png') center top no-repeat;
outline: none;
zoom: 1;
}
div#menu1 a.m12i1 {background-position: left top;}
div#menu1 a.m12il {background-position: right top;}
div#menu1 a.m12:hover,
div#menu1 a.m12:focus,
div#menu1 a.m12:active,
div#menu1 a#m12active,
div#menu1 li.m12-selected a.m12 {color: #fff; background-position: center bottom;}
div#menu1 a.m12i1:hover,
div#menu1 a.m12i1:focus,
div#menu1 a.m12i1:active,
div#menu1 li.m12-selected a.m12i1 {background-position: left bottom;}
div#menu1 a.m12il:hover,
div#menu1 a.m12il:focus,
div#menu1 a.m12il:active ,
div#menu1 li.m12-selected a.m12il {background-position: right bottom;}
</style>
</head>
<body>
<div id="layer1">
<div id="layer1-box">
<div id="menu1">
<ul class="m11">
<li class="m11 m11-selected"><a class="m11" href="/">Homepage</a></li>
<li class="m11"><a class="m11" href="uvod.html">Úvod</a></li>
<li class="m11"><a class="m11" href="tipyatriky.html">Tipy a triky</a></li>
<li class="m11 m11-sub">
<a class="m11" href="/navody.html">Návody</a>
<ul class="m12">
<li class="m12 m12i1"><a class="m12 m12i1" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12 m12il"><a class="m12 m12il" href="/">Zde je podmenu</a></li>
</ul>
</li>
<li class="m11 m11-sub">
<a class="m11" href="kestazeni.html">Ke stažení</a>
<ul class="m12">
<li class="m12 m12i1"><a class="m12 m12i1" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12 m12il"><a class="m12 m12il" href="/">Zde je podmenu</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Obrázky si stáhni z endory.
viz. :
nebo :--- Doplnění předchozího příspěvku (21 Pro 2012 10:42) ---
zde to máš celý v příloze.
- Přílohy
-
- menu.rar
- (3.57 KiB) Staženo 10 x
"Cíle by měly být třešínky na dortech, ne na hromadách hoven."
To nejlepší z country muziky:http://country.funsite.cz/
To nejlepší z country muziky:http://country.funsite.cz/
Re: Jak udělat buttony na web (viz. přiložený obr)?
Gizzer : 2x body tam je, protože to styluje text, odstavec a hover odstavce....
A ten kdo dělal to photoshop.bluefile.cz, je magor, nechápu proč tam cpe html a tag <style>, když je to v css dokumentu, opravdu nechápu, není divu že to nefunguje...
A ten kdo dělal to photoshop.bluefile.cz, je magor, nechápu proč tam cpe html a tag <style>, když je to v css dokumentu, opravdu nechápu, není divu že to nefunguje...
Vtípek
Alenka v říši divů : <div> <div><div><div><div>ALENKA</div> </div> </div> </div></div>
Alenka v říši divů : <div> <div><div><div><div>ALENKA</div> </div> </div> </div></div>
-
CZechBoY
- Master Level 9.5
- Příspěvky: 8813
- Registrován: srpen 08
- Bydliště: Brno
- Pohlaví:
- Stav:
Offline
- Kontakt:
Re: Jak udělat buttony na web (viz. přiložený obr)?
celý obsah máš totiž v tagu <style>, který indikuje kod pro CSS, proto se ti neukáže žádný obsah
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
-
sergej2002
- Level 1.5
- Příspěvky: 121
- Registrován: listopad 12
- Pohlaví:
- Stav:
Offline
Re: Jak udělat buttony na web (viz. přiložený obr)?
Gizzer2 píše:To co ti poslal je k hovnu.
Zkus toto:Kód: Vybrat vše
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style>
div#layer1 {position: absolute; top: 0; left: 0; width: 100%;}
div#layer1-box {position: relative; width: 990px; margin: 0 auto;}
/* Zakladni */
html {background: black;}
body {color: #4f4f4f; font: 13px/1.5 arial, sans-serif; background: url('body.jpg') center top no-repeat;}
/* Menu1*/
div#menu1 {position: absolute; top: 58px; right: 18px; /*width: 100%;*/}
div#menu1 ul.m11 {margin: 0; padding: 0; float: right;}
div#menu1 li.m11 {margin: 0 0 0 4px; padding: 0; float: left; display: inline; zoom: 1;}
* html div#menu1 li.m11 {padding-bottom: 8px;}
div#menu1 li.m11-sub:hover,
div#menu1 li.m11-sub.m11-selected {padding-bottom: 8px; background: url('menu12-arrow.gif') center bottom no-repeat;}
div#menu1 li.m11:hover ul,
div#menu1 li.hover ul,
div#menu1 li.m11-selected ul {/*visibility: visible;*/ display: block;}
div#menu1 a.m11 {
display: block;
width: 102px;
height: 29px;
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 29px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
background: url('menu1.png') 0 0 no-repeat;
outline: none;
}
div#menu1 span {}
div#menu1 a.m11:hover,
div#menu1 a.m11:focus,
div#menu1 a.m11:active,
div#menu1 a#m11active,
div#menu1 li.m11-selected a.m11,
div#menu1 li.m11-sub:hover a.m11 {color: #fff; background-position: -102px 0;}
div#menu1 ul.m12 {/*visibility: hidden;*/ display: none; position: absolute; top: 37px; right: 0; margin: 0; padding: 0;}
div#menu1 li.m12 {margin: 0; padding: 0; list-style: none; float: left; display: inline;}
div#menu1 a.m12 {
float: left;
display: inline;
padding: 0 10px;
color: #8a988c;
line-height: 27px;
text-decoration: none;
background: url('menu12.png') center top no-repeat;
outline: none;
zoom: 1;
}
div#menu1 a.m12i1 {background-position: left top;}
div#menu1 a.m12il {background-position: right top;}
div#menu1 a.m12:hover,
div#menu1 a.m12:focus,
div#menu1 a.m12:active,
div#menu1 a#m12active,
div#menu1 li.m12-selected a.m12 {color: #fff; background-position: center bottom;}
div#menu1 a.m12i1:hover,
div#menu1 a.m12i1:focus,
div#menu1 a.m12i1:active,
div#menu1 li.m12-selected a.m12i1 {background-position: left bottom;}
div#menu1 a.m12il:hover,
div#menu1 a.m12il:focus,
div#menu1 a.m12il:active ,
div#menu1 li.m12-selected a.m12il {background-position: right bottom;}
</style>
</head>
<body>
<div id="layer1">
<div id="layer1-box">
<div id="menu1">
<ul class="m11">
<li class="m11 m11-selected"><a class="m11" href="/">Homepage</a></li>
<li class="m11"><a class="m11" href="uvod.html">Úvod</a></li>
<li class="m11"><a class="m11" href="tipyatriky.html">Tipy a triky</a></li>
<li class="m11 m11-sub">
<a class="m11" href="/navody.html">Návody</a>
<ul class="m12">
<li class="m12 m12i1"><a class="m12 m12i1" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12 m12il"><a class="m12 m12il" href="/">Zde je podmenu</a></li>
</ul>
</li>
<li class="m11 m11-sub">
<a class="m11" href="kestazeni.html">Ke stažení</a>
<ul class="m12">
<li class="m12 m12i1"><a class="m12 m12i1" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12"><a class="m12" href="/">Zde je podmenu</a></li>
<li class="m12 m12il"><a class="m12 m12il" href="/">Zde je podmenu</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Obrázky si stáhni z endory.
viz. :
--- Doplnění předchozího příspěvku (21 Pro 2012 10:42) ---
zde to máš celý v příloze.
1.já používám HTML5
2.Právě že nechci používat obrázky
3.můžu si to najít přes zdroják
CZechBoY:to jsem udělal já když jsem se to pokoušel zprovoznit
-
CZechBoY
- Master Level 9.5
- Příspěvky: 8813
- Registrován: srpen 08
- Bydliště: Brno
- Pohlaví:
- Stav:
Offline
- Kontakt:
Re: Jak udělat buttony na web (viz. přiložený obr)?
sry, nevšiml jsem si, že je tu už druhá stránka
když nechceš používat obrázky tak co chceš používat?
ten šedý a žlutý jsou přechody, lze udělat pomocí CSS3
ten 3. (zelený) můžeš udělat taky přes css3, ale musel bys ještě použít border-radius (css3 )
když nechceš používat obrázky tak co chceš používat?
ten šedý a žlutý jsou přechody, lze udělat pomocí CSS3
ten 3. (zelený) můžeš udělat taky přes css3, ale musel bys ještě použít border-radius (css3
)PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
-
sergej2002
- Level 1.5
- Příspěvky: 121
- Registrován: listopad 12
- Pohlaví:
- Stav:
Offline
Re: Jak udělat buttony na web (viz. přiložený obr)?
Už mi to funguje
Ale mám to jako "seznam"
http://prntscr.com/msza0
nevíte jak to dát do jednoho řádku, aby ta položka na který jsem byla jinou barvou a aby to nebylo ve tvaru čtverce?
CZechBoY: ten kaskádovej styl
Ale mám to jako "seznam"
http://prntscr.com/msza0
nevíte jak to dát do jednoho řádku, aby ta položka na který jsem byla jinou barvou a aby to nebylo ve tvaru čtverce?
CZechBoY: ten kaskádovej styl
-
CZechBoY
- Master Level 9.5
- Příspěvky: 8813
- Registrován: srpen 08
- Bydliště: Brno
- Pohlaví:
- Stav:
Offline
- Kontakt:
Re: Jak udělat buttony na web (viz. přiložený obr)?
jakej kaskádovej styl? to co jsem psal (CSS3)?
nechápu co chceš, aby ty hnusný azurový kostičky byly vedle sebe (namísto pod sebou)?
tak jim dej třeba float:left
nechápu co chceš, aby ty hnusný azurový kostičky byly vedle sebe (namísto pod sebou)?
tak jim dej třeba float:left
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
-
sergej2002
- Level 1.5
- Příspěvky: 121
- Registrován: listopad 12
- Pohlaví:
- Stav:
Offline
Re: Jak udělat buttony na web (viz. přiložený obr)?
kakskádovej styl je překlad pro CSS
jj
a kam to mám dát?
jj
a kam to mám dát?
Re: Jak udělat buttony na web (viz. přiložený obr)?
Kouknul jsem se do zdrojového kodu toho tvýho webu a nevím co to má společného s HTML5 je to totální chaos. Třeba tag font už se dávno nepoužívá!!!
A máš tam i neuzavřené tagy a pokračuješ s dalšímy.
A máš tam i neuzavřené tagy a pokračuješ s dalšímy.
"Cíle by měly být třešínky na dortech, ne na hromadách hoven."
To nejlepší z country muziky:http://country.funsite.cz/
To nejlepší z country muziky:http://country.funsite.cz/
-
sergej2002
- Level 1.5
- Příspěvky: 121
- Registrován: listopad 12
- Pohlaví:
- Stav:
Offline
Re: Jak udělat buttony na web (viz. přiložený obr)?
no a?
je součástí HTML 5,a neznám žádnej HTML tag který by to udělal míst něho
můj web, moje volba co tam napíšu(až na to co nevím jak napsat xDDD)
je součástí HTML 5,a neznám žádnej HTML tag který by to udělal míst něho
můj web, moje volba co tam napíšu(až na to co nevím jak napsat xDDD)
-
CZechBoY
- Master Level 9.5
- Příspěvky: 8813
- Registrován: srpen 08
- Bydliště: Brno
- Pohlaví:
- Stav:
Offline
- Kontakt:
Re: Jak udělat buttony na web (viz. přiložený obr)?
je to cool boy, používá html5 a css3, ale nepoužívá standardy
gradient: http://www.colorzilla.com/gradient-editor/
kulatý rohy: http://border-radius.com/
gradient: http://www.colorzilla.com/gradient-editor/
kulatý rohy: http://border-radius.com/
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
Zpět na “Programování a tvorba webu”
Kdo je online
Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 12 hostů