<ul><li> bez mezery – CSS – Fórum – Programujte.com

Dobrý večer na této stránce www.filand.wz.cz nemůžu přijít na to jak udělat nebo proč vůbec je mezi red a grenn prvkem mezera.Vážně si připadám jako lama.Předem děkuji za odpověď.

Tady index

Zdravím FIFLAND
Ta mezírka je jen v IE, mám pocit, že když je img řádkový (inline) prvek, tak IE přidá místo pod obrázkem (pro případ kdyby měl nožičku jako má jqgy). Špatné řešení je nastavit font-size:0. Lepší je nastavit blokový obrázek:

#inmenu li img {display:block}
#inmenu {
.........
padding-top:12px;
padding-left: 8px;
}
Kdyby to nepomohlo (hlavně v ie6) napiš

Děkuju moc v IE i FF to pomohlo ale v Opeře ne!!! Poprvé kdy mě zklamala Opera. Nevíte jak na to?

Máš tam chybu.
Zkus používat HTML validator (třebas ve FF Tidy - prohlídni si obrázek, v IE použij Developer ToolBar ale pro rychlé hledání nemá Tidy konkurenci)
Je škoda mít to i s vypnutým JS docela hezké, ale na pár místech zkažené...viz obrázek: http://exstream.atlasweb.cz/dofora.jpg.
(kdybys chtěl, tak se ozvi, a já si na to udělám čas)

Koukám že tenhle vložený soubor je nepoužitelný ?!?

Ještě jednou díky, nepřestáváš mě překvapovat. Na validaci jsem úplně zapoměl a hnal jsem se jen za tou mezerou díky. Ten HTML Validátor fo FF je skvělý .Chyby jsem odstranil, ale nevím jak odstranit ty s vypnutým JS, teď se to tím menu ještě zkomplikovalo. Jenom tak mimo nevíš náhodou z hlavy jak udělat pomocí CSS aby po najetí myší na černou položku menu se posunula třeba o 40px do prava a po najetí na bílou o 40px doleva? Jestli víš, tak mě prosím jen naveď.

Tak změna v IE6 to nefunguje jsou tam mezery na to menu jsem přišel, ale když použiju position: absolute; na ten img co se zvětšuje, aby se při hoveru neposouvaly ostatní obrázky dolů, tak jsou mezery i v Opeře a FF.

IE6 ano první problémy (a až přidáš do seznamu ještě odkazy budou další)
Z této stránky http://www.brunildo.org/test/ je (pro tvé potíže se seznamy v IE6) užitečný odkaz: http://www.brunildo.org/test/IEWlispace.php
(a pokud ti hasLayout u IE nic neříká tak ještě tahle: http://www.satzansatz.de/cssd/onhavinglayout.html)
Bohužel - není to lehké,navíc v anglině - ale dobrota v nesnázích
Bez mezer >>
#inmenu li {clear:both; float:left; }
#inmenu li img{ display:block; }
Tohle mi funguje, ale třebas by to šlo líp (zrovna se chystám na kutě a nápady se moc nehrnou)
------------------------
Zkus tohle:
#inmenu li img {margin-left:10px}
#inmenu li:hover img {margin-left:50px}
#inmenu li {clear:both; float:left; }
#inmenu li img{ display:block; }

K tomuto zpusobu fungování donuť ty první dvě položky
Máš seznam:
<ul>
<li id="Prvni"><img src="dos.jpg" alt="Dos" /></li>
<li id="Druhy"><img src="dos.jpg" alt="Články" /></li>
<li><img s ....
máš img{margin-left:AApx}
Posun doprava: Prvni#li:hover img {margin-left:(AA+40)px}
Posun doleva: Druhy#li:hover img {margin-left:(AA-40)px}

Lepší je to s obrázky v odkazech v položkách ( pak to změň na a:hover )

DObrý už to funguje.Díky.To menu vypadalo blbě proto jsem se rozhodl použít onmouseover s img a po najetí myší se načte druhý obrázek který je o 10px na výšku větší, dle mého to vypadá lépe, ale mám problém s tím že chci aby druhý obrázek překrýval ty ostatní a ne aby e posouvaly podle jeho velikosti,Jde to s <li> vůbec nastylovat?Napadlo mě použít position absolute a na <li> se vykašlat.Jak by jste to udělali vy? www.fifland.wz.cz

To Petroff :
Zdravím,

myslíte, že podobný problém je i mezírka v menu na stránce http://nara.macs.cz např. u spolubydlících mezi jednotlivými odkazy?? Je to vidět jen v IE, ve FF je to OK...

To Chiquita_CZ :
Určitě myslíš mezírky,1pixel vysoké, které se objevují jen mezi někt.položkami ve vnořených menu viď? Blbne jak ei6/ie7...
A ve spolubydlících pod 1.řádkem mezera vidět není a přesto dojde ke ztrátě focusu. Nepříjemné.
Ta nepravidelnost výskytů říká, že ve stylech chyba (ve smyslu bugu) není (to by byly mezírky všude).
(silně to připomíná zaokrouhlovací chybu IE,kt. má taky hodnotu 1px; řešení hrubou silou je překrýt ty LI bloky - pomocí záporného marginu)
Mrknu se na to...později (zatím zkus najít co nejpodobnější menu ve sbírce http://css.maxdesign.com.au/listamatic/index.htm >> http://css.maxdesign.com.au/listamatic/index.htm a porovnávej. )
Taky se vyplatí zjistit, že za to nemůže obsah explicitní =to co je v odkazech a implicitní =mezery,kt. tam dává IE bez tvého vědomí
Prostě HTML značky celého menu sraz do 1řádku bez jediné mezery mezi tagy a do všech <li> a <a> dej stejné (1 krátké slovo) a výsledek porovnej s orig.menu. Tím bych začal- pro jistotu

Nakonec jsem to menu vyřešil pomoví a:hover, ale mám několik problémů.JAk udělat aby se green zobrazil přes ostatní položky a okolní neovlivňoval?Celé odpoledne se stím peru a nevím jak na to.

To Chiquita_CZ :
Hotovo - OK v IE6+7 - řádkování stejné jako v FF a mezírky jsou pryč. Menu při pohybu myší drží.

ul#hlavniMenu

{

position:absolute;

left:10px;

top:240px;

width:200px;

background-image: url('bod00000.gif');

}



ul#hlavniMenu, ul

{

padding:0;

margin:0;

list-style-type:none;

}



ul#hlavniMenu ul

{

position:absolute;

top:0;

left:200px;

visibility:hidden;

}



ul#hlavniMenu li

{

position:relative;

font:18px cursive;

width:200px;

}



ul#hlavniMenu a

{

color:black;

display:block;

text-decoration:none;

display:block;

min-height:1em;                         /* HACK IE7 */

}

* html ul#hlavniMenu a { height: 0.5em} /* HACK IE6 */



ul#hlavniMenu a:hover, ul#hlavniMenu li:hover a, ul#hlavniMenu li.hover a

{

color:black;

text-decoration:underline;

}



ul#hlavniMenu li:hover ul a, ul#hlavniMenu li.hover ul a

{

padding-left: 1ex;

color:black;

text-decoration:none;

}



ul#hlavniMenu li:hover ul a:hover, ul#hlavniMenu li.hover ul a:hover

{

padding-left: 1ex;

color:black;

text-decoration:underline;

}



ul#hlavniMenu li:hover ul, ul#hlavniMenu li.hover ul

{

visibility:visible;

}



ul#hlavniMenu li li

{

margin:0px;

padding:2px;

border: solid white 1px;

text-decoration:none;

font: 16px cursive;           /* u liché hodnoty špatně zaokrouhluje */

background-color: #fbbc44;

}

/****** ten hover.htc je nějaký zepsutý a ani není třeba, ten font-style: expression se ti moc povedl !!! *****/



ul#hlavniMenu li /* IE:hover */ {

  font-style: expression(

    this.onmouseover = new Function("this.className += ' hover';"),

    this.onmouseout = new Function("this.className = this.className.replace(' hover', '')")

  );

}

To Petroff prosím aspoň mě naveď.

To Figa
Měl by si na chvíli dát oraz...
Dotaz:
A takhle se má roztahovat (bez hýbání s ostatníma) jedna obr.položka nebo všechny ???
-------
asi všechny:
li {height:30px}
a:hover {position:relative; z-index:222; height:40px; background....}

Ale v IE6 bude problém...uvidíš... asi na to budem muset jít jinak

To Petroff : Proč oraz?Chápu, že otravuju tebe a moc se omlouvám, ale jsi vždycky moje záchrana ze zoufalství.ANo všechny, mezitím jsem na to přišel, ale pořád je a:hover pod tím výchozím obrázkem ???

Já by si měl spočnout, neboť celé odpoledne sem neměl ani minutku pauzu
Hover bude nad tím dalším OBRÁZKEM, zkus to ve FF

TAk to jo ty na to máš právo, nechápu kde nereš ty vědomosti a energii tak pomáhat a kodovat.I v FF je to stejné však koukni sám.

Funguje to.
Jenom když je těch odkazů víc , každý následující z-index musí být nižší třeba 299 288 277 266 .... (šlo by to i po -1 )

Asi mě nechápeš, výsledný efekt by měl být takový že se ten obrázek zvětší, takže teď by to mělo být tak, aby když najedu na články, tak se překryjou green obrázkem.Udělal bych to tak, že bych určil styl i img pro každou položku zvlášť a té nastavil z-index menší, než položkám v hoveru, ale to se mi zdá moc složitý.

Opravdu ti nerozumím - nemohl bys udělat 2 obrázky (jakési virtualní screenshoty první bez hoveru druhý s hoverem) a dát do zipky připojit soubor
nebo slepit lep.páskou
zítra se na to mrknu

TAk nejdřív jsem udělal ty screeny, ale nebylo to nic moc, chvíli jsem hledal a našel tohle http://css.interval.cz/clanky/horizontalni-menu-se-zvetsenim/ takhle nějak to má vypadat.

Tak v tom případě ty moje styly fungovaly ve svislém směru, pochopitelně bys musel mít dvojici obrázků na každý odkaz.
Ale v IE6 to selže.
Naštěstí je náprava velice jednoduchá.

li { clear:both; float:left; width:XXXpx; height:30px; position:relative}

a {background: url(obrA) no-repeat left top; width:XXXpx; height:30px;}

a:hover {background: url(obrB) no-repeat left top; position:absolute; left:-LLLpx;top:-TTTpx;width:NewXXpx; height:NewHHpx;}

Děkuju mnohokrát, nakonec jsem z index použít musel u odkazu.Jenom taková poslední otázka, nevíš jaký font by se do toho menu hodil.Jen tak kdyby tě něco napadlo.Ještě jednou díky.

To Petroff : Díky moc, byl jsem nějakou dobu mimo, takže jsem nestihl ihned reagovat :-)

To Figa :
S typografii ti asi nepomůžu - ani neznám ten font kt. tam máš teď (že by vlastní?)

Je to font z Dooma a moje tvorba to není. To nevadí i tak díky.No ale určitě máš nějaké pěkné fonty už nainstalované nechceš uploadnout třeba v ZIPu?Nějak už nemám inspiraci a tenhle font se k DOSu fakt nehodí a 16bit font není vůbec pěkný.

staženo bohužel nic nemám, ale zkus to na netu http://www.pcfonts.com/index.php http://www.pcfonts.com/index.php

Díky o této stránce vím, já jen jestli nemáš nějaký už vybraný i tak díky.Už snad poslední věc taky jen teoretická a na 5s.Které menu vypadá lépe?http://www.fifland.wz.cz/menudoom.jpg
http://www.fifland.wz.cz/menu16bit.jpg

Zkrácená verze tvýho seznamu (zkoušeno v FF):

#inmenu  li {

  height: 30px;

  position: relative

  }



#inmenu a {

  width: 130px; 

  height: 30px;  

  display: block; 

  }  



#inmenu li a:hover { 

  position: absolute;

  left: 0px;

  top: -5px;

  height: 40px;

  }



#inmenu a.dos {background: url(dos.jpg) no-repeat left top}

#inmenu a:hover.dos {background: url(doshover.jpg) no-repeat left top}



#inmenu a.clanky {background: url(clanky.jpg) no-repeat left top}

#inmenu a:hover.clanky {background: url(clankyhover.jpg) no-repeat left top}



#inmenu a.recenze {background: url(recenze.jpg) no-repeat left top}

#inmenu a:hover.recenze {background: url(recenzehover.jpg) no-repeat left top}



#inmenu a.forum {background: url(forum.jpg) no-repeat left top}

#inmenu a:hover.forum {background: url(forumhover.jpg) no-repeat left top}



#inmenu a.download {background: url(download.jpg) no-repeat left top}

#inmenu a:hover.download {background: url(downloadhover.jpg) no-repeat left top}



#inmenu a.kontakt {background: url(kontakt.jpg) no-repeat left top}

#inmenu a:hover.kontakt {background: url(kontakthover.jpg) no-repeat left top}



#inmenu a.odkazy {background: url(odkazy.jpg) no-repeat left top}

#inmenu a:hover.odkazy {background: url(odkazyhover.jpg) no-repeat left top}

 

 

Díky, taky mě napadlo, že to je moc dlouhý, ale nechtělo se mi to zkracovat.Funkčnost v Opeře,FF i IE a ušetřeno cca. 1kB. Mockrát děkuji.Ještě jsem si všimnul jedné zajímavé věci, koukni na #dir v IE i když má nastaveno height: 25px; tak je větší.

Tak další ptoblém s IE.Nefunguje korektně z-index: a tím pádem i menu.Koukněte sami www.fifland.wz.cz

IE6:
Mám pocit že za to může li img - poslední položka . Vyhoď ji. Vždyť je to seznam odkazů (tak ať to nekazí).
IE7:
Zkus, jestli má velikost a:hover (hlavně height) vliv na posunutí celého zbytku seznamu, dej třeba a:hover{height:10px} a dej vědět

V IE6 nepomohlo a IE7 budu mít až zítra.Já už fakrt nevím co by to mohlo být celý den nad tím sedím a nic.

Než použiješ ten soubor se styly - tohle je popis úprav/oprav:
----------------------------------------------
Rámečky nad položkama a pod poslední položkou:
horní bordery u LI a dolní u UL (ALE obrázky musí být bez rámečků, tak zatím zruš ty LI bordery !!!)
-----------------------------------------------
Třídy dávej do LI a ne do A (má to mnoho výhod):
<ul>
<li class="dos"><a href="index.html" ></a></li>
<li class="clanky"><a href="index.html"></a></li>
<li class="recenze"><a href="index.html"></a></li>
<li class="forum"><a href="index.html"></a></li>
<li class="download"><a href="index.html"></a></li>
<li class="kontakt"><a href="index.html"></a></li>
<li class="odkazy"><a href="index.html"></a></li>
</ul>

Upravené CSS pro odkazy:

#inmenu .dos a {background: url(dos.gif) no-repeat left top}
#inmenu .dos a:hover {background: url(doshover.gif) no-repeat left top}

#inmenu .clanky a {background: url(clanky.gif) no-repeat left top}
#inmenu .clanky a:hover {background: url(clankyhover.gif) no-repeat left top}

#inmenu .recenze a {background: url(recenze.gif) no-repeat left top}
#inmenu .recenze a:hover {background: url(recenzehover.gif) no-repeat left top}

#inmenu .forum a {background: url(forum.gif) no-repeat left top}
#inmenu .forum a:hover {background: url(forumhover.gif) no-repeat left top}

#inmenu .download a {background: url(download.gif) no-repeat left top}
#inmenu .download a:hover {background: url(downloadhover.gif) no-repeat left top}

#inmenu .kontakt a {background: url(kontakt.gif) no-repeat left top}
#inmenu .kontakt a:hover {background: url(kontakthover.gif) no-repeat left top}

#inmenu .odkazy a {background: url(odkazy.gif) no-repeat left top}
#inmenu .odkazy a:hover {background: url(odkazyhover.gif) no-repeat left top}
-----------------------------------------------
Poznej blíž IE:
- nelíbí se ti odlišnost (oproti Opeře či FF) ?
Zde je to řešené(a k nápravě použij css - ne html)
http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=56742
- Zkus do mého css vrátit LI {clear: float:} i to by to mělo spravit
------------------------------------------------
Tady jsou hotové styly - hlavně si oprav ten HTML seznam, jinak by pochopitelně nefungovaly (já mezitím zjistím, jestli je nějaká šance, aby se odkaz s obrázkem mohl i v IE roztáhnout přes další položku - přes předchozí položku to lze):

Díky.Tohle se mi taky povedlo, ale v IE mi zůstalo jakoby li velké 40px, tak jsem přidal něco podobného jako to
#inmenu li {
clear: both;
float: left;
width: 100%;
}

Jenže pořád se tech 5px nevykreslí dole.Proč nemůžu mít ty čáry na obrázkách?

Nejde to (pomocí absolutní pozice).
Protože v IE má ten další prvek seznamu LI takzvaný Layout (mají je všechny LI v našem seznamu), což zjednodušeně znamená, že je pánem ve svém prostoru. A to co bylo nakresleno dříve (=předchozí LI) bez milosti překryje. (a to přesto,že odkaz má z-index nastaven velmi vysoko ).

Ale mám hotové 2 jiné způsoby, fungují. (ten co používá samé floaty a záporné okraje sice funguje v IE7, ale IE6 ho ořízne)
Takže zbyl jeden co je bez vady. Do zipky jsem ti dal i SnapShot s kresbou vyznačující jak je třeba vyrobit nové obrázky (nové jsou rozměry nikoliv obsah)

Do css jsem ti psal poznámky přímo ke stylům (i starším), zkontroluj si to

Když budeš mít obrázek bez čáry (tu ti vyrobí úplně stejnou css : LI {border-top: xxxxx} a s většími rozměry (vyplněné barvou podkladu), stačí ti 1 pro a + a:hover
Jsou další důvody pro úpravu obrázků......viz obrázekJPG v souboru RAR

Mě to stejně nefunguje mám img a to má height 29px a width 160px a hover img ten má height 38px a width 160px, pochopiljsem že to funguje tak, že to přidává border, ale ten se stejně v IE schová.Tady je aktuální CSS jestli máš chvilku času zkus to proím do toho.Jenže tohle pro mě asi není ideální řešení, protože já potřebuji aby i hover měl ty bordery na okrajích.Jinak kloubouk dolů jsi vážně machr.

Edit: jeden obrázek mít nemůžu, protože chci aby se mi zvětšovalo i písmo.

Promiňte zapoměl jsem na to css

Tak ještě jednou promiň někde mám chybu já protože když to funguje s tím indexem1 tak musí i s těma mejma obrázkama, ale stejně nepřiřadim border borderu aby byly okraje hoveru černé.

Já jsem si říkal, kdy se ozveš, že hover není orámovaný ....

Stačí ti horní a dolní (boky zůstávají na stejném místě).
#inmenu li a:hover {
.........
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

Musíš pochopit, jak se z těchto údajů:
tyto bordery 2x1px , výška obrázku s hoverem , výška obrázku bez hoveru=height bez hoveru
vypočtou tyto údaje:
height s hoverem, top, margin-top

#inmenu li a {
display: block;
width: 100%;
height: 30px;
z-index: 0;
}

#inmenu li a:hover {
display: block;
position: relative;
margin-top: -10px; /** o tolik se height zvětší - obrázek se natáhne nahoru */
top: 5px; /* a pak se o tolik celý obrázek posune dolů */
height: 40px;
width: 100%;
z-index: 300;
}

A rozhodně uprav velikost těch obrázků, tedy šířku - a do stylů si zkopíruj odkazy z css2.css tam mají správně CENTER CENTER zarovnání (v css1 je to postaru).

Slituju se nad tebou - udělal jsem si obrázky 29px a 38px vysoké a 160px široké, spočítal, dal do stylů >> perfekt
v FF,IE6 i IE7
Operu jsem nezkoušel
Hlavně si správně vycentruj ten větší nápis ať ten hover efekt vypadá přirozeně. Může ti to usnadnit hodnota top, kterou můžeš libovolně měnit - udává o kolik poklesne spodní hrana hover obrázku oproti normál.obr.

CSS:

Mhohokrát díky, tak a je to hotové už jsem ani nedoufal v to že to bude fungovat.Jenom potřebuji něco jako hover, ale aby to zobrazilo div i s obsahem.Nevíš jak to udělat?To už jen kdyby se ti chtělo, tak mě jen naveď.Jinak ještě jednou dík.

Jestli chceš spravit vzhled s vypnutým JS - chybí jen pár maličkostí - a máš photoshop, zkusil jsem postup, který vykreslí oba weby přes sebe, postup je trivialní.(pokud nemáš tak ve složce je výsledný obrázek ->pouze už nejde posouvat vrstvama)
Jinak ty dva bílé "stripes" se musí v css napozicovat pro "vypnutý" JS (kdežto zapnutý JS jejich pozice změní)

Promiň ale nějak jsem to nepochopil.Vždyť vypadá dobře i teď akorát to chce nastylovat ty stripes jak jsi psal.Což nevím jak se dělá, ale google pomůže.Snad....

Podívej se na obrázek, ty abs.pozice jsou jiné při zapnutým JS a jiné při vypnutém (rozdíl víc jak 10pixelů), dyť na tom červeno-modrém obrázku jsou pozice těch mezer krásně vidět (dej si zoom).

Ale řešit se to dá ... pošlu ti javascript, který to napozicuje.

To jo, ale nekazí to design, jestli existuje řešení tak budu jedině rád.Snažím se teď naučit JS mohl by jsi k tomu scriptu napsat co kder a a jak dělá?

Místo IMG použij DIV (o jedno stahování méně).
Pouze je třeba nastavit také width,height a background.
Princip/postup je tento:
1.Vypni JS. Hodnoty top jsou nastaveny tak, aby DIVy zakrývaly správná místa.
2.Jakmile zapneš JS, tak ten vyrobí kulaté rohy čímž posune vnitřek layoutu o 18px nahoru,
ale zároveň se spustí nově přidaná JS funkce, která u obou DIVů sníží top o 18px,
takže se posunou nahoru tam,kam patří.

javascript:	elementUP.style.top    elementDOWN.style.top

------------------------------------------------------------

  vypnutý	187                    495

  zapnutý	187-18=169             495-18=477

 HTML: 

<div id="menuwhitestripes2x8up" style="top:187px"></div>

<div id="menuwhitestripes2x8down" style="top:495px"></div>



CSS:

#menuwhitestripes2x8up,#menuwhitestripes2x8down {

width:2px;

height:8px;

position:absolute;

/*** left:xxxpx (nejsem si jistý - nejspíš není nutné) ***/

z-index:11;

background:white;

}



JAVASCRIPT:

function moveUpBy18(id){

var element = document.getElementById(id); 

/**** POZOR: element.style.top je řádkový styl (proto nemůžeš top dát do css souboru) ****/

var old = element.style.top;    /* old je řetězec - např. "187px" */

old = parseInt(old) - 18;       /* numerická operace */

element.style.top = old + "px"; /* řetězcový součet a nová hodnota top */

}



JS musí být spuštěn v ovladači onload (až po načtení celé stránky):



<script type="text/javascript">

  window.onload = function()

  {  

    ........

    

    /* <Umístit až nakonec> */

    function moveUpBy18(id){

    var element=document.getElementById(id); 

    element.style.top=parseInt(element.style.top)-18+"px";/*kratší zápis*/

    }

    moveUpBy18("menuwhitestripes2x8up");

    moveUpBy18("menuwhitestripes2x8down");

  } 

</script>