| Autor | Zpráva | ||
|---|---|---|---|
| horava2 Profil |
#1 · Zasláno: 2. 7. 2011, 01:10:56
Zdravim,
vytvoril jsem si menu a snazim se to nejak sikovne nakodovat pomoci css. Bezne si oriznu kazdou polozku v menu zvlast (Adobe PS) a takto to skladam. Zvolil jsem pro jednoduchost tuto metodu: 
Chci docilit toho, aby kdyz budu mit treba "o nas", tak aby se zobrazil jen button o nas. A po najeti se zobrazi to co je vpravo. Bojuji s tim uz cely den a dosel jsem akorat k vysledku, ze tim zpusobem, kterym to delam to bude jeste tak na tyden prace :/ Mam to tedy takto: #menu a.aktuality, #menu a.aktuality-selected {
position:absolute;
display: block;
float: left;
width: 236px;
margin: 0 0 0 0px;
height: 34px;
background-image: url('./design/navigation.png');
background-repeat: no-repeat;
}
#menu a.aktuality:hover, #menu a.aktuality-selected {
background-position: 0px 0px -236px 0px;
}
#menu a.o-nas, #menu a.o-nas-selected {
top: 34px;
position:absolute;
display: block;
float: left;
width: 236px;
margin: 0 0 0 0px;
height: 34px;
background-image: url('./design/navigtion.png');
background-repeat: no-repeat;
background-position: 0px -34px;
}
#menu a.o-nas:hover, #menu a.o-nas-selected {
background-position: 0px 0px -236px 0px;
}Hover mi vubec nefunguje. A poskladat to menu je taky boj. (top, height, background-position) zkousim po px jak to vychazi a porad preklikavam a divam se jak to vypada. |
||
| Audio Profil |
#2 · Zasláno: 2. 7. 2011, 01:38:46
Hover ti nefachá, protože máš u background-position 4 hodnoty, mají tam být jen ty dvě poslední (-236px 0px).
Poskládat menu by nemuselo být složité, protože pozici každého tlačítka v obrázku lze jednoduše spočítat (počet předchozích řádků * výška řádku), nicméně tahle metoda je i tak pracná. Kdybys obětoval vnitřní stín u textu, jednodušším řešením by bylo vytvořit pouze jeden obrázek jako pozadí každého tlačítka - názvy tlačítek by byly prostý text. Při hoveru by si pouze přenastavil barvu textu ze šedivé na červenou. To by mělo nesmírnou výhodu i v případě, že by se struktura menu v budoucnu měnila. Jinak vnější stín lze nastavit pomocí CSS vlastnosti text-shadow. |
||
| joe Profil |
#3 · Zasláno: 2. 7. 2011, 01:43:19
Co to trochu zkrátit
#menu a {
float: left;
width: 236px;
height: 34px;
background-image: url('./design/navigation.png');
}
#menu a.aktuality:hover {
background-position: 0 0;
}
#menu a.aktuality:hover,
#menu a.aktuality.selected {
background-position: -236px 0;
}
#menu a.o-nas {
background-position: 0 -34px;
}
#menu a.o-nas:hover,
#menu a.o-nas.selected {
background-position: -236px -34px;
}
|
||
| horava2 Profil |
#4 · Zasláno: 2. 7. 2011, 09:47:48
Díky! To jsem přesně potřeboval.
|
||
| horava2 Profil |
#5 · Zasláno: 2. 7. 2011, 09:50:33
joe: Když se takto upravil i selected, tak potom by to mělo vypadat ve scriptu takto?
echo
"<a class='o-nas"; if ($page=="o-nas") {echo "selected";} echo "'href='/cs/o-nas'></a>"; |
||
| pcmanik Profil |
#6 · Zasláno: 2. 7. 2011, 09:56:04
horava2:
Keby si si to vyskusal? |
||
| horava2 Profil |
#7 · Zasláno: 2. 7. 2011, 10:05:54
Pravda. Omlouvam se. Vyzkousim posleze. Jeste to nemam dodelane.
|
||
| horava2 Profil |
#8 · Zasláno: 2. 7. 2011, 10:14:18 · Upravil/a: horava2
Prosim vas,
jeste se mi tu objevila jedna krpa. Kdyz jsem cele menu dostyloval, tak pod poslednim buttonem se zobrazuje jeste kousek prvniho. 
Zkousel jsem tomu kontakt nastavit pevnou vysku, ale nepomohlo to. |
||
| Plaváček Profil |
#9 · Zasláno: 2. 7. 2011, 10:15:13 · Upravil/a: Plaváček
horava2:
Pokud mohu vstoupit do debaty, dopřál bych ti jednu dobrou radu. Ožel ten stín u písma, abys nemusel jednotlivé položky tvořit obrázkem (každé přidání položky bude totiž vyžadovat znovu nakreslit a napsat další a také zásah do stylopisu), a vystačíš s jedním obrázkem na pozadí a jednoduchou definicí v CSS na pár řádků. Ale je to pouze rada, nikoliv doporučení. |
||
| horava2 Profil |
#10 · Zasláno: 2. 7. 2011, 11:11:17
Plaváček:
Ja vim, ale predpokladam, ze se to menit uz nebude. Z estetickych duvodu to takto vypada lepe. A co se tyce toho predchoziho problemu, tak nevite? Diky |
||
| Plaváček Profil |
#11 · Zasláno: 2. 7. 2011, 11:15:53 · Upravil/a: Plaváček
horava2:
Nemusíme si vykat, zas takový stařec nejsem :) Kdysi dávno jsem dělal návod na obrázkové menu (šlo by to asi vymyslet i lépe, ale poskytnu odkaz) http://klient.plavacek.net/menu.html. Základ je, aby text byl přístupný i při vypnutých obrázcích, což tvůj kód, jak jsem ho zběžně studoval, neřeší. Přesto si myslím, že estetika by nikdy neměla mít přednost před praktičností a vážně bych můj návrh zvážil. |
||
| horava2 Profil |
#12 · Zasláno: 2. 7. 2011, 11:52:41 · Upravil/a: horava2
Plaváček:
Díky. Urcite se na to podivam a do budoucna zacnu pouzivat. Ale asi tady u tohoto uz to necham tak jak to je. Prosimte, nenapada te v cem je krpa?
Na konci celeho menu se mi zobrazi cast zacatku. Nedari se mi to odstranit. |
||
| Plaváček Profil |
#13 · Zasláno: 2. 7. 2011, 12:09:12
horava2:
Bez živé ukázky netuším. Možností je povícero. |
||
| horava2 Profil |
#14 · Zasláno: 2. 7. 2011, 12:12:33
|
||
| pavuk Profil |
#15 · Zasláno: 2. 7. 2011, 12:22:45
Pro
#menu a no-repeat |
||
| horava2 Profil |
#16 · Zasláno: 2. 7. 2011, 12:24:19
Díky!
|
||
| joe Profil |
#17 · Zasláno: 2. 7. 2011, 13:09:00
pavuk:
„ten vykukující kousek "aktualit" je způsobenej tím že se obrázek menu opakuje pod sebou“ To sice ano, ale je to způsobené tím, že poslední položku má vyšší než ostatní, pokud mu fungují. horava2: Abys to měl dobré, je třeba to upravit na <a>normální text<i></i></a> Za tu zvýrazněnou část si můžeš dosadit jakýkoli tag, <i> je krátké, které bude překrývat ten text. #menu a {
position: relative;
}
#menu a i {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* teprve tady budeš nastavovat ten obrázek */
}
|
||
| pavuk Profil |
#18 · Zasláno: 2. 7. 2011, 13:29:20 · Upravil/a: pavuk
joe:
„To sice ano, ale je to způsobené tím, že poslední položku má vyšší než ostatní, pokud mu fungují.“ Nebyla vyšší poslední položka, ale <div menu> byl vyšší než obrázek kterej ho tvoří, a to může bejt úmysl kvůli vzhledu, netuším. A přijde mi přidání no-repeat mnohem čistší než přidání osmi řádků do stylopisu |
||
| joe Profil |
#19 · Zasláno: 2. 7. 2011, 13:46:32
pavuk:
Pokud by byl vyšší kontejner, pozadí by se nemělo kde opakovat... |
||
| pavuk Profil |
#20 · Zasláno: 2. 7. 2011, 15:15:49
joe:
„Pokud by byl vyšší kontejner, pozadí by se nemělo kde opakovat...“ To je zjevně nesmysl, kde jinde by se mělo pozadí opakovat než v kontejneru kterej je větší než obrázek tvořící mu pozadí??? Mělo by se opakovat v obalujícím prvku kterej je menší? To jaksi postrádá smysl přece... |
||
| joe Profil |
#21 · Zasláno: 2. 7. 2011, 15:27:39
pavuk:
Asi mi nerozumíš, v opačném případě totiž tvrdíš, že <div style="height: 300px; border: 1px solid red;">
<div style="height: 30px; background: url('image.jpg');"></div>
</div>v označeném divu by mělo být také pozadí, které je definované v jeho potomku a to je samozřejmě nesmysl. Stejně tak s tím menu, obrázek je definovaný u odkazů, tzn. že na jeho rodiče to nemá vliv a může být klidně 5000px vysoký, pozadí v něm rozhodně nebude. |
||
|
Časová prodleva: 4 dny
|
|||
| horava2 Profil |
#22 · Zasláno: 6. 7. 2011, 11:50:04
Nakonec nejspíš budu muset udělat textové menu s jedním obrázek na pozadí k vůli dynamice. Tedy jeden obrázek, který umožní ten přechod okolo buttonu a jednotlivé buttony. Nějaké tipy či weby s návodem jak přesně takové menu udělat? Díky
|
||
| joe Profil |
#23 · Zasláno: 6. 7. 2011, 11:58:51
horava2:
„kvůli dynamice“ Kvůli jaké dynamice? „Nějaké tipy či weby s návodem jak přesně takové menu udělat?“ VždyŤ je to úplně stejné, jen místo obrázku s textem uvnitř dáš jen obrázek. |
||
| horava2 Profil |
#24 · Zasláno: 6. 7. 2011, 12:02:58
joe:
Celý ten web se dává na administraci. A právě tam by mělo být i zahrnutá úprava menu. |
||
| horava2 Profil |
#25 · Zasláno: 6. 7. 2011, 13:15:32
#navigation {
width: 236px;
float: left;
background-image: url('./design/navigation-x.png');
background-repeat: no-repeat;
}
#navigation ul {
height: 370px;
}
#navigation ul li {
display: list-item;
}
#navigation ul li a {
display: block;
height: 34px;
background-image: url('./desing/button.png');
}
#navigation ul li a:hover { }
#navigation ul li a#active { }Udělal jsem si to tedy takto. Ale "button.png" se mi nezobrazí. |
||
| horava2 Profil |
#26 · Zasláno: 6. 7. 2011, 20:06:03
Nenapadá vás nic?
|
||
| joe Profil |
#27 · Zasláno: 6. 7. 2011, 21:01:28
horava2:
„Celý ten web se dává na administraci.“ Tak proč jsi to tak neudělal dřív? :) > background-image: url('./design/navigation-x.png'); > background-repeat: no-repeat; Dá se zkrátit background: url('./design/navigation-x.png') no-repeat;„height: 370px;“ Proč nastavovat výšku celkového elementu, když výšku určují položky? „display: list-item;“ Můžeš smazat „background-image: url('./desing/button.png');“ Zase zkrátit a máš tam překlep - proto to nefunguje. |
||
| horava2 Profil |
#28 · Zasláno: 6. 7. 2011, 23:44:10
joe:
Díky! Mám ještě jeden dotaz - lze pomocí css ztučnit text víc než nabízí text-weight: bold? Dík |
||
| panther Profil |
#29 · Zasláno: 6. 7. 2011, 23:48:12 · Upravil/a: panther
horava2:
text-weight neexistuje, font-weight. |
||
| horava2 Profil |
#30 · Zasláno: 7. 7. 2011, 01:30:14
http://trumf.webovereseni.cz/
#navigation {
margin-left:-2px;
}
#buttons {
_margin-top:-12px;
width: 236px;
}
#navigation ul li {
margin-left: -28px;
list-style-type: none;
}
#navigation ul li a {
font-size:14px;
padding-top:10px;
padding-left:10px;
font-family: verdana;
font-weight:bold;
display:block;
color: #9d9d9d;
text-decoration: none;
Text-transform:uppercase;
height: 24px;
border-left:2px solid #d7d7d7;
border-right:2px solid #e0e0e0;
background-image: url('./design/button.png');
}
#navigation ul li a:hover { color: #cd281e;}
#navigation ul li a#active {}
Můžete mi prosím poradit jak dostat celé menu o 12px nahoru? Nevím proč, ale je to uskočený. Jedině v IE je to OK. Když použiju "margin-top:-12px;", tak se to v IE o těch 12px zvedne. |
||
|
Téma pokračuje na další straně.
|
|||
0