Autor Zpráva
noobiq
Profil
zdravim..

mam taky mensi problem a neviem si rady. mam lave menu, ktore by malo vyzerat asi takto:

ten obrazok sa sklada z troch casti: vrchna cast je

stredna cast alebo vypln:



a spodok


ked pridam dalsi riadok tak ta stredna cast sa proste roztiahne lebo je cez css nastavena ako pozadie
vrchna a spodna cast su vlozene normalne cez html tag <img src="url">

a teraz.. jak by som tam vlozil tu vrchnu a spodnu cast cez css? nikde som nic take nenasiel a ani vlkadanie obrazkov cez css, takze neviem ci je to mozne pripadne ako to obist
Leo
Profil
Nějak si odporujete. Ve střední části přes CSS obrázek vkládáte, ale pak tvrdíte, že jste nic takového nenašel.... možná vám jen chybí CSS vlastnost background-repeat: no-repeat, plus background-position. Leo
RockFire
Profil
Problém je v tom, že on vkládá pozadí, které se roztáhne pod položkami (ten rovný střed) a chce vložit ty další dva obrázky (vrchní a spodní) přes CSS a né přes HTML tagem <img>.

HTML:
<span id="horni-cast">&nbsp;</span>
<menu>
BLABLA
</menu>
<span id="spodni-cast">&nbsp;</span>


CSS:
#horni-cast
{
display: block;
width XYpx;
height: YZpx;
background: url('ADRESAOBRÁZKU') no-repeat ALTERNATIVNÍBARVA;
}

#spodni-cast
{
display: block;
width XYpx;
height: YZpx;
background: url('JINÁADRESAOBRÁZKU') no-repeat ALTERNATIVNÍBARVA;
}
panther
Profil
RockFire:
ve tvém řešení je jeden span navíc. Horní - anebo dolní - pozadí může noobiq nastavit přímo k <menu>. Ušetří si tak jeden zbytečný kousek plevele v HTML souboru.
Bubák
Profil
RockFire
Navíc jde použít místo SPANu rovnou prázdný blokový DIV. Nevím, kde se vzala pověra, že uvnitř musí být tvrdá mezera.
noobiq
Profil
musi tam byt ten tag <menu>? s nim som sa este nestretol a mam to zapisane bez <menu> a funguje to v tak jak som si to (cca) predstavoval

inak vdaka vsetkym za rady ;)

ale este preca jedna vec.. ked odtial display: block; vymazem tak sa nic nezmeni, tak naco to tam je?
panther
Profil
noobiq:
musi tam byt ten tag <menu>?
mělo by být. Přečti si něco o sémantice.
Bubák
Profil
noobiq:
musi tam byt ten tag <menu>?
Můžeš to udělat jako seznam odkazů, tagem <ul>. Ať už použiješ <menu>, nebo <ul>, jednotlivé odkazy patří do <li>.

funguje to v tak jak som si to (cca) predstavoval
Jde o sémantiku a s tím souvisí třebas i vzhled při vypnutých stylech, menu pak vypadá přehledně.

ked odtial display: block; vymazem tak sa nic nezmeni, tak naco to tam je?
Neznám kód tvého menu, kdybys dal odkaz, dostal bys odpověď.
noobiq
Profil
http://www.leso.sk/ostatne/stranka/info/ly.html
v lavo je menu, v strede bude vlastne obsah a v pravo nejake odkazi pripadne anketa a pod.
inak menu vlavo sa uz nezmeni (okrem odkazov :))
priadne style dokument
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.leso.sk%2Fostatne%2Fstranka%2Fstyle.css&profile=css21&usermedium=all&warning=1&lang=en

edit:
teraz som si spomenul ze toto je starsia "stranka/.css". v tej novsiej som to lave menu dal do <menu> a do css som pridal styl na menu {margin: 0px;} a il {margin-left: xypx;margin-top:xypx;}
mam to doma na pc, ale som v skole na pozicanom mobile :p
Bubák
Profil
Nad a pod menu jsi použil DIVy, které jsou blokové.

Řádkový SPANům nejde dát rozměty, proto je RockFire deklaroval jako blokové. Protože pro použití SPANů nebyl důvod, poradil jsem rovnou použít blokové DIVy, s tím, že je v CSS je nebudu duplicitně deklarovat jako blokové.
www.jakpsatweb.cz/div-span.html#rozdil
noobiq
Profil
tak som tam dal to menu, ale teraz je problem s prehliadacmi.. chrome a firefox to zobrazuju dobre (resp. tak ako to chcem aby to vyzeralo) ale IE8 a opera stranku zobrazuju inak (rovnako alebo aspon priblizne rovnako ak neratam to ze IE zobrazuje farby tych obrazkov trochu inak)

http://www.leso.sk/ostatne/stranka/info/ly.html
(css je teraz v tom .html)
SiSt3M-DOWN
Profil *
Mrknu na CSS a vidim ze to psalo nejaky prase... chce to cely prepsat
panther
Profil
noobiq:
chrome a firefox to zobrazuju dobre[...] ale IE8 a opera stranku zobrazuju inak
je to tím levým marginem, který jsi vynuloval.

Na seznamech je defaultně odsazení zleva 40px. Některé prohlížeče odsazují levým marginem, jiné levým paddingem. Chromu a Firefoxu zůstal nezměněný padding (tedy defaultní levý 40px), IE si nastavil levý margin na nulu => zrušil jsi 40px odsazení, které mělo.

Bude stačit, když v CSS nahradíš
margin:-9px 0 0;

za
margin-top: -9px;
panther
Profil
SiSt3M-DOWN:
Mrknu na CSS a vidim ze to psalo nejaky prase... chce to cely prepsat
nejsme v hodnotící sekci, takže tvůj příspěvek je naprosto mimo mísu, nikdo se tě o něj neprosil.

Prosímmm o smazání příspěvku [#12]. Děkuji.
noobiq
Profil
panther:
Na seznamech je defaultně odsazení zleva 40px. Některé prohlížeče odsazují levým marginem, jiné levým paddingem. Chromu a Firefoxu zůstal nezměněný padding (tedy defaultní levý 40px), IE si nastavil levý margin na nulu => zrušil jsi 40px odsazení, které mělo.
aha tak to som fakt netusil, a kto vie kedy by som to zistil... vdaka moc

ale ked som nahradil to jak si napisal, tak sa nic nezmenilo ^^ ale spravil som to tak ze som dal padding: 0px; pozmenil som margin a us to zobrazuje v ie/ff rovnako

SiSt3M-DOWN:
Mrknu na CSS a vidim ze to psalo nejaky prase... chce to cely prepsat
moc nechapem co je na tom zle napisane.. validatorom to preslo bez chyby a je to prehladne (hmm sice asi ne pre kazdeho)
za dalsie, nejsom ziaden expert na css
SiSt3M-DOWN
Profil *
Kazdy ma jinej styl kodovani... Ale aby to jelo v Opere , Exploreru, Firefoxu, Chrome tak bych to trosku nakodoval kompaktibilneji
SiSt3M-DOWN
Profil *
Dřív jsem taky používal margin-top: -9px; (mínusové hodnoty xD) časem jsem zjistil jak je to nekompaktibilni a jak to nahradit za kvalitni kod :)
Bubák
Profil
SiSt3M-DOWN:
Dřív jsem taky používal margin-top: -9px; (mínusové hodnoty xD) časem jsem zjistil jak je to nekompaktibilni
Podle CSS specifikace jsou záporné hodnoty směroplatné a na žádnou nekompaktibilitu jsem nenarazil.

noobiq:
Ovšem třebas místo záporné hodnoty margin-bottom pro položky <li> by bylo rozumnější dekrarovat line-height, chceš přece změnit rozestup řádků v menu.

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: