| Autor | Zpráva | ||
|---|---|---|---|
| FraMeRr Profil |
Dobrý den, mám dotaz. Chtěl bych si udělat rámeček ale nevím jak na to a zda to vůbec jde pomocí programování nebo se to bude muset vložit obrázkem. Obrázek na levo to co mám teď na pravo to co bych chtěl. Děkuji
Moderátor Petr ZZZ: Původní titulek: „Ramecek-úprava“
|
||
| Sir Tom Profil |
#2 · Zasláno: 13. 9. 2011, 21:15:07 · Upravil/a: Sir Tom
FraMeRr:
Také dobrý den, lze to například udělat za použití pozicování. Stačí udělat jeden velký <div>, který bude pozicován relativně a v něj 2 další divy s absolutní pozicí. Ten menší div může mít např. obrázkové pozadí nebo styl border-radius a bude napozicován tak, aby byl v pravém horním rohu relativního divu. Ten větší div můžeš napozicovat tak, aby horní okraj končil tam, kde menší div končí... Také to samozřejmě jde vyřešit i obrázkem - záleží na dané situaci, co přesně pro tvůj případ bude výhodnější. EDIT: Jedná se o rámeček, který je na hlavní stránce tersource.cz? |
||
| FraMeRr Profil |
#3 · Zasláno: 13. 9. 2011, 21:40:56
Sir Tom:
Ano jedna se o ten ramecek jak je tam vytvorene to menu tak bych to chtel udelat jako je to na obrazku ale nevim jak :-( |
||
| Sir Tom Profil |
FraMeRr:
Zkus: #Menu{
width: 500px;
height:25px;
font-size: 18px;
border:solid #440000;
margin-left:545px;
padding:3px;
margin-top:22px;
border-radius: 20px 20px 0 0; position: relative; right: 50px; text-align: center;}Je tam použit border-radius, který nemusí fungovat ve všech prohlížečích správně... Dá se nahradit případně obrázkovým pozadím... |
||
| FraMeRr Profil |
#5 · Zasláno: 13. 9. 2011, 23:18:38
Sir Tom:
Dekuju funguje to :-) A neslo by nejak smazat ten spodni jakoby jak je to na obrazku ? :( |
||
| Bubák Profil |
#6 · Zasláno: 14. 9. 2011, 00:12:23
Smazat ne, ale překrýt, dej tomu menu šedé dolní orámování.
|
||
| FraMeRr Profil |
#7 · Zasláno: 14. 9. 2011, 00:12:55
Bubák:
Dekuju :-) |
||
| Petr ZZZ Profil |
#8 · Zasláno: 14. 9. 2011, 03:08:26
<OT>
Vytvářet zrovna na tuto ukázku extra HTML-stránku bylo zbytečné – porovnej následující dvě adresy: http://www.tersource.cz/obrazek.html http://www.tersource.cz/Ramy.jpg Jinak řečeno: Adresu obrázku lze zapsat i přímo, není nutné na to vytvářet HTML soubor. :) </OT> |
||
| FraMeRr Profil |
#9 · Zasláno: 14. 9. 2011, 11:50:05
Petr ZZZ:
Jeste bych mel dotaz. Mam na Web menu v pravo. Mam nastaveny hover po najeti se zmeni barva pozadi ale nevim jak do rozsirit aby se roztahlo do celyho toho ctvrecku. Zkousel sem pridelit mu Width Height a padding ale nic :-( NEvitep rosim nekdo co stim? |
||
| Sir Tom Profil |
#10 · Zasláno: 14. 9. 2011, 14:07:31
FraMeRr:
„Mam nastaveny hover po najeti se zmeni barva pozadi ale nevim jak do rozsirit aby se roztahlo do celyho toho ctvrecku“ Do celého boxu s menu? No to musíš dát :hover pro celý div, ne jenom pro samostatné položky... |
||
| FraMeRr Profil |
#11 · Zasláno: 14. 9. 2011, 14:51:35
Sir Tom:
To sme nepochopil? Chtel bych to tak ze kdyz najedete na jedn ucast treba na home zabarvi se home tak jako ted ale vic roztazene az do okraju :( |
||
| Petr ZZZ Profil |
#12 · Zasláno: 14. 9. 2011, 16:27:11
FraMeRr:
1. Hned na začátku místo <html> napiš <!doctype html>.
2. Pohrej si s vlastnostmi margin, padding a height (případně i width).
3. Jak máš v menu stylované odkazy, doplň si rámeček i do ostatních deklarací ( 1px solid transparent;), menu pak přestane poskakovat – teď máš rámeček jen u hoveru, proto to při hoveru poskakuje):
a.Menu:link { color: black; border:1px solid transparent; }
a.Menu:visited { color: black; border:1px solid transparent; }
a.Menu:active { color: black; border:1px solid transparent; }
a.Menu:hover { background-color:red; border:1px solid black; }a.Menu:link, a.Menu:visited, a.Menu:active { color: black; border:1px solid transparent; }
a.Menu:hover { background-color:red; border:1px solid black; }width:1024; a správně: width:1024px;
5. Nemáš uzavřený jeden div (řekl bych hned ten první: <div id="Web">).
Asi tam toho bude k vylepšení víc, ale tohle jsem viděl já. Piš prosím s diakritikou a vůbec pečlivěji; tato diskuse se archivuje pro budoucí generace a lépe to vypadá. Děkuji. |
||
| FraMeRr Profil |
#13 · Zasláno: 14. 9. 2011, 16:41:31
Petr ZZZ:
Děkuji za rady. Už sem to opravil. A omlouvám se za tu diakritiku bohužel jsem zvyklý z Skype/Icq/FB ale už to napravým. Nicméně to bohužel neřeší můj problém. Nevíte tedy prosím jak to rozšířit? Děkuji |
||
| Bubák Profil |
#14 · Zasláno: 14. 9. 2011, 18:14:12
FraMeRr:
„Nevíte tedy prosím jak to rozšířit?“ Věděl, ale tvůj kód je tak šílený, že si netroufám na úpravy a jako jednodušší a rychlejší možnost vidím začít napsat HTML a hlavně CSS znova, ale normálně. |
||
| FraMeRr Profil |
#15 · Zasláno: 14. 9. 2011, 18:36:28
Omlouvám se ale začínám takže veškeré kódy píšu pomocí rad a diskuzí. Učím se programovat od začátku takže moje kódy asi nejsou zrovna stručné a jak by měli být. Tak prosím o nějakou radu jak je zlepšit aby byli správně? Dekuji
|
||
| Petr ZZZ Profil |
#16 · Zasláno: 14. 9. 2011, 19:42:37
FraMeRr:
Zkus napsat dva divy, do jednoho dát celé menu a do druhého celý zbytek stránky. Hornímu s menu dát nulový pravý a nulový spodní margin, tomu druhému nulový horní margin. Oba obalit do třetího divu a tomu dát margin:0 auto;. Hrej si s šířkami a výškami, marginy a paddingy. Když něco nefunguje, zkontroluj syntaxi (např. zda máš v CSS jednotky nebo zda jsi nezapomněl uzavřít nějaký element). K těm jednotkám – v případě nuly se psát nemusí, protože nula čehokoli je vždycky nula (např. margin:0 auto; ale margin:20px 40px;).
A hoď si celé CSS přímo do html souboru do hlavičky mezi <style type="text/css"> a </style>, líp se ti bude CSS ladit. Teprve až bude stránka hotová, dej to do externího souboru. Když máš někde dejme tomu margin:10px; a nevíš, zda je to ten, který má dělat to či ono, dej mu na zkoušku třeba 150px a koukni, co se změnilo. Tak zjistíš, která vlastnost co dělá.
„veškeré kódy píšu pomocí rad a diskuzí“ To není nejlepší začátek. Zkus začít studiem návodů a až v pokročilejším stádiu se ptát. Jinak hrozí, že budeš dostávat všeobecné rady, kterých nebudeš umět využít, protože ti chybí základy. |
||
| FraMeRr Profil |
#17 · Zasláno: 14. 9. 2011, 20:17:48
Četl sem si rady a návody a stále čtu ale u některých případů mi to nepomohlo :-( Ale děkuji moc za rady. :-)
|
||
|
Časová prodleva: 13 let
|
|||
0