Autor Zpráva
kolemjdoucí
Profil *
dobrý večer, řeším ted jeden problém ohledně navigace, potřeboval bych u každé položky ve vertikálním menu zarovnat text na střed a na každou stranu dát stejný obrázek, bohužel mi ale nevychází ani obrázkové odrážky, ani zarovnání obrázku jako takového, nevíte jak na to? přikládám můj poslední obrázkový pokus, díky za všechny rady :)
background-image: url(../images/list.png) left center, right center;
Bubák
Profil
Mají všechny položky menu deklarovanou stejnou šířku, nebo šířka menu záleží na délce textu položky menu?
Které prohlížeče mají být podporovány?
Jako nejjednodušší je mi jeví použít obrázek, která simuluje odrážky na obou stranách, ale nevím, zda je takové řešení ve tvém případě použitelné.
5ešení napříč prohlížeči může využít toho, že menu zpravidla obdahuje položlu menu <li> a odkaz <a...>, je tedy jednoduše možné deklarovat pozadí pro oba elementy.
Moderní řešení, tedy nejméně kompatibilní, je použít multiple byckground, doporuřuji vygůglovat si patřičnou specifikaci a teprve potom co to to nebude jasné, položit dotaz. Z tvého kódu mám dojem, že jsi specifikaci pro vícenásobné pozadí viděl z ponorky při kalné vodě.
Tomáš123
Profil
kolemjdoucí:
background-image: url(../images/list.png) left center, right center;
V prvom rade zápis nefunguje kvôli použitiu nesprávnej vlastnosti. Hodnotou vlastnosti background-image je totižto iba cesta ku obrázku. Ostatné hodnoty patria ku vlastnosti background-position. Najlepšie teda bude nemeniť zápis, a uviesť ako vlastnosť iba samotný background.

Čo sa týka dvoch pozícii, nie som si istý, či to bude fungovať takto (či nebude potrebné uviesť cestu ku obrázku dvakrát). Niektorý prehliadač sa s tým možno vysporiada, ale za pravidlo by som to nepovažoval.

Prečítaj si o viacerých obrázkoch na pozadí.
kolemjdoucí
Profil *
:-D poslední věta pobavila, je to tak, tohle jsem nikdy neřešil a ted když to přišlo, tak jsem absolutně mimo, zajímavá varianta je možná použít pro každý ten element rozdílné pozadí, jenže samotná položka menu má vždy stejnou šířku, neodvíjí se tedy od šířky textu ... proto by to bylo dost komplikované, nevím jak bych to nastavil u "a" ... co se týče těch odrážek na obou stranách, tak to jsem zkoušel, ale nezobrazila se ve výsledku ani jedna ... :)
Tomáš123
Profil
Bubák:
Jako nejjednodušší je mi jeví použít obrázek, která simuluje odrážky na obou stranách
Súhlasím, keďže sú položky rovnako široké, stačilo by vytvoriť obrázok s priehľadným pozadím (poprípade aj obrázok s požadovanou farbou) okolo odrážok v požadovanej šírke.

kolemjdoucí:
tak to jsem zkoušel, ale nezobrazila se ve výsledku ani jedna ...
Môžeš nám poslať kód.
Bubák
Profil
kolemjdoucí:
Typický chat, informace co přesně máš a co přesně potřebuješ z tebe lezou jak z chlupaté deky, nediv se, že odpovídám obecně, mohl jsem sem v prvém sem nasypat 7 řešení pro různé varianty zadání, ale neměl pro to důvod, snad chceš něco takového: http://kod.djpw.cz/yzib
Pokud my měly být podporovány starší IE, dalo by se to řešit přidáním dalšího elementu do odkazu menu.
kolemjdoucí
Profil *
díky, to je ono, jenže to potřebuji umístit tak, aby to bylo u každé položky stejné (tzn. v levém a pravém rohu) :) přemýšlel jsem, že to vyřeším tak, jak jste psali, tím obrázkem s průhledným pozadím, ale nedalo by se to vyřešit nějak v kódu? :) dík
Tomáš123
Profil
Typický chat, informace co přesně máš a co přesně potřebuješ z tebe lezou jak z chlupaté deky
A môžeš nám poskytnúť bližšie informácie. Čo keby si sem poslal kód a bavili sme sa konkrétne o tvojom prípade? Alebo by si radšej, keby sme ti posielali riešenia jedno za druhým a ty by si si vyberal?

kolemjdoucí:
ale nedalo by se to vyřešit nějak v kódu?
Opäť! HTML alebo CSS kód?

I keď mi napadá pár riešení, nebudem sa obťažovať písať ich tu všetky naraz. Pridaj kód a dostaneš radu.

Ak na niekoho reaguješ, stlač prosím „odpovedať“ v pravom rohu príspevku. Je to potom prehľadnejšie a neodpovedám na to, čo nepatrí mne.
kolemjdoucí
Profil *
Tomáš123:
ok, zasílám tedy část css kódu, o kterém je řeč, toto už je kód bez toho obrázku i odrážek (pokus s obrázkem jsem posílal výše a odrážky dopadly uplně stejně = 0...), takže jsem to odebral. jak to nejlépe vyřešit s tímto kódem? (v css samozřejmě), v html bych tam prostě hodil obrázky a dal bych jim vlastnost, aby se zobrazily uplně na kraj, ale je to nevalidní a nechci to, další možností je samozřejmě obrázek se dvěma odrážkama na krajích a průhledným pozadím a dám to jako pozadí, ale to je krajní varianta, dá se to nějak vyřešit v kódu? :) díky Alex
#navmainlist {        
    width: 200px;
}

#navmainlist li {
    list-style-type: none;
    margin-bottom: 2px;
    line-height: 2em;
    text-align: center;
}

#navmainlist ul {    
    margin: 0;
    padding: 0;
}

#navmainlist ul li ul {
    padding-left: 10px;
}

#navmainlist li a {
    text-decoration: none;
    font-weight: normal;
    text-indent: 0px;
    vertical-align: middle;
    background-color: #f4f4f4;
    display: block;
    width: 100%;
}

#navmainlist li a:hover, #navmainlist .activeMainMenuItem {
    color: #669933;
    background-color: #fff;
    text-decoration: none;
}
Bubák
Profil
kolemjdoucí:
jenže to potřebuji umístit tak, aby to bylo u každé položky stejné
Špatně jsem pochopil zadání, takže úplně jednoduše a funguje to napříč prohlížeči, jedno pozadí pro položku a druhé pozadí pro odkaz.
Netestoval jsem ve starších IE, ale tuším, že pro zprovoznění v IE6 bude nutné zapnout haslayout (třeba deklarováním šířky) a v od IE7 by to mělo jít bez problémů.
http://kod.djpw.cz/fajb

Jak jsem psal výše, můžeš použít modernější, ale méně podporované řešení se dvěma pozadími pro jeden element.
http://kod.djpw.cz/cajb

Pochopitelně, že si můžeš namalovat obrázek, kde budou obě odrážky.
kolemjdoucí
Profil *
perfektní, to je přesně ono, jenže ted se pro změnu smazala barva políčka a změnila se na bílou... a při najetí na políčko zmizí jedna odrážka, to ale vyřeším tím, že to dám i do a:hover .. spíš co s tou barvou a pokud budu potřebovat posunout odrážkami blíž ke středu, tak jen zmenším procenta? :)dík
Bubák
Profil
kolemjdoucí:
Nastuduj si, jak se pracuje s pozadím.
Třeba http://kod.djpw.cz/gajb
kolemjdoucí
Profil *
vyřešil jsem to tím, že jsem nadefinoval barvu do li a v těch procentech jsem měl pravdu :-D, takže děkuji moc :) moc jde mi pomohli Bubák a Tomáš123
Bubák
Profil
kolemjdoucí:
a v těch procentech jsem měl pravdu
Silně pochybuji jsem pochyboval o tom, že se ti podařilo posunout levou odrážku "zmenšeném procent". Ale během psaní mne napadlo, že jsi pozici levé odrážky zmenšil o zápornou hodnotu.
0% - (-20%) = 20%

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: