Nefungují obrázky v menu

Prosím o radu.

Potřebuju udělat menu špatně se mi natahuje pozadí na „buňky“. Nepoužívám tabulku, ale DIV. Buňkou jsem teď nazval pár DIV /DIV na kterým mám natažené pozadí. Každé tlačítko menu se skládá ze tří částí: levý okraj, prostředek a pravý okraj. V IE to funguje dobře (až na to, že nezarovná celé žluté menu doprava). Ale Mozzila a Opera dělá šílenosti.

Takže jedna položka menu: <DIV třída , id> <DIV třída , id > </DIV> odkaz</DIV> <DIV třída , id > </DIV>
Pomocí třídy nastavuju obrázky na pozadí (html kód se zkrátí než když bych použil IMG).

Okrajové obrázky se vůbec neukáží (musl bych tam uvést text, což nemohu nebo bych musel nastavit místo display:inline display:block, to taky nemohu).

Takže jak to musím nastavit aby se to zobrazovalo správně? Díky za pomoc.

http://pravatvar.wz.cz/menu.jpg

CSS:

DIV#menu_cells {display: inline;vertical-align:middle; margin:0; padding: 0; height:21; width:7;
}


/* MENU - pozadí*/
DIV.menu_left_fire { background-image : url(menu/left_fire.gif);}
DIV.menu_left_yell { background-image : url(menu/left_yell.gif);}
DIV.menu_mid_fire { background-image : url(menu/mid_fire.gif);}
DIV.menu_mid_yell { background-image : url(menu/mid_yell.gif);}
DIV.menu_right_fire {background-image : url(menu/right_fire.gif);}
DIV.menu_right_yell { background-image : url(menu/right_yell.gif);}

Ještě dotaz jak zarovnat menu žluté doprava?
přes tabulku jsem to pred tim mel tak :
TR: TD (left) ... TD (RIGHT)
takže jedno bylo v levo a druhé vpravo.

Podobně řeším obrázky které mají být nad menu:
měl jsem tam
TR: TD (left) ... TD (CENTER) ... TD (RIGHT)
ale to pro DIV nelze.

Nastavil jsem v IE width=30 procent, ale to v MOZZILE A OPERE nefungovalo. Chtělo by to aby se ty tři nebo dva DIVy roztáhly automaticky podle šířky stránky ale to asi nejde?

Doplnění jednotek jsem už zkoušel, ale bez odezvy. Na ten float jsem zapomněl, tak ho zkusím, myslím, že by to mělo zabrat. Ale ještě ten obrázek. Proč se nezobrazí ani ten poslední. Jak to že to v IE bezproblému jede a v ostatních ne? Která vlastnost dělá problém? Nejde ta prázdná bunmka s obrazkem na pozdai roztahnout?

Uvozovky nehrajou roli, ale mohu to zkusit.

Přečtu si pár věcí http://www.jakpsatweb.cz, možná tam něco najdu.

Povedlose mi vyřešit to float vs display inline. Tedy sirka podle procent funguje.
Ale nefunguje v Moz a Op. to natahovani bunek na pozadi... kdo poradi?

Možná zabere toto
V Mozille existuje nestandardní vlastnost -moz-background-origin s hodnotami content | border | padding, které určují, odkud se to v Mozille bude počítat.

Další nestandardní vlastnost Mozilly je -moz-background-clip s hodnotami border a padding, které určují, zda se má pozadí kreslit pod rámečkem.

Float jsem už pochopil, na ul - li bych to předělat mohl... Ještě řeším nežádoucí zalomování v Mozzile a Opere - v kodu delam zalomovani aby by l prehlednmy. To se ale zobrazi i na vystupu. Viz css problem s prohlizeci - poradite?

http://pravatvar.wz.cz/gif.gif

* * *
PROSÍM O RADU.
Asi jsem přišel na to, co vytváří ty „okraje u obrázků“. Nejde o okraje obrázků, ale o to, že se LI roztáhne do nežádoucí velikosti. Každý LI by měl být stáhnutý na velikost 1) obrázku GIF uvnitř 2) odkazu/textu uvnitř . To se ale neděje a tak vzniknou mezi LI mezery, které vypadají jako okraje. Nevím jak mám docílit toho stáhnutí (zmenšení velikosti x na minimum).

$head.= "<UL id=menu_main class=menu_cell_".$styl.">\n";
foreach ($sections as $section=>$titles)
{
$head.= " <li id=menu_cells class=menu_left_".$styl."><img class=im src='7x21.gif'></li>\n";
$head.= " <li id=menu_cells class=menu_mid_".$styl."><img class=im src='7.gif'><a class=".$styl." title='".$titles[2]."' href='".$titles[1]."'>".$titles[0]."</a><img class=im src='7.gif'></li>\n";
$head.= " <li id=menu_cells class=menu_right_".$styl."><img class=im src='7x21.gif'></li>\n";
}
$head.= " <li id=menu_cells2></li>\n"; // toto je jen pokus
$head.= "</UL>\n";

* * *
NORMÁLNĚ SE OPAKOVALO POZADÍ. Roztažením LI to ale začalo dělat neplechu. Pro přehlednost ukázky jsem to u levého obrázku vypnul, takže vidíte mezeru vlevo (světle žluté pozadí vlevo od popisku „Restart“).

* * *
<PRE id=main_cell_1></PRE>

<UL id=menu_main class=menu_cell_fire>
<li id=menu_cells class=menu_left_fire><img class=im src='7x21.gif'></li>
<li id=menu_cells class=menu_mid_fire><img class=im src='7.gif'><a>Restart</a><img class=im src='7.gif'></li>
<li id=menu_cells class=menu_right_fire><img class=im src='7x21.gif'></li>
<li id=menu_cells class=menu_left_fire><img class=im src='7x21.gif'></li>
<li id=menu_cells class=menu_mid_fire><img class=im src='7.gif'><a >Program</a><img class=im src='7.gif'></li>
… atd…
</UL>

* * *


/* TOP - OBRAZOVÁ ČÁST */
DIV#main_top { padding:12;}
PRE#main_cell_1 { background-image: url(top.gif);background-repeat:no-repeat;
margin:0;text-align:left; height:80; }

/* MENU - rozvržení*/
UL#menu_main {margin:0;display:inline;}
UL.menu_cell_fire {float:left;clear:left;padding-left:12;} /* width pro umístiní 2. ul */
UL.menu_cell_yell {float:right;clear:right;padding-right:12;}
li#menu_cells {
border:0 solid;
margin:0;padding:0;
display:inline;vertical-align:top;
min-width:min;
/*background-position : 0; background-repeat : repeat-x; */

}

/* MENU - pozadí*/
li.menu_left_fire { background-image : url(menu/left_fire.gif);background-repeat :no-repeat;}
li.menu_left_yell { background-image : url(menu/left_yell.gif);}
li.menu_mid_fire { background-image : url(menu/mid_fire.gif);}
li.menu_mid_yell { background-image : url(menu/mid_yell.gif);}
li.menu_right_fire { background-image : url(menu/right_fire.gif);}
li.menu_right_yell { background-image : url(menu/right_yell.gif);}
.im{ padding:0; margin:0; /* border-style:solid;border-width:1; */
border:1 solid;
}

A jak se vám líbí ten obrázek? :-)

Lidi, nikdo mi nechce poradit nebo neumite?

K cemu to mam davat na web kdyz mi to tam stejne nepojede. Ja hlavne nechci aby to zaregistroval vyhledavac seznamu dokud to neni hotove. Na net to hodinm az kdyz mi nezbude zadna jina moznost...
Ale vzdyt jsem tu dal obrazek jak to vypada i dotaz.

Asi jsem přišel na to, co vytváří ty „okraje u obrázků“. Nejde o okraje obrázků, ale o to, že se LI roztáhne do nežádoucí velikosti. Každý LI by měl být stáhnutý na velikost 1) obrázku GIF uvnitř 2) odkazu/textu uvnitř . To se ale neděje a tak vzniknou mezi LI mezery, které vypadají jako okraje. Nevím jak mám docílit toho stáhnutí (zmenšení velikosti x na minimum).

NORMÁLNĚ SE OPAKOVALO POZADÍ. Roztažením LI to ale začalo dělat neplechu. Pro přehlednost ukázky jsem to u levého obrázku vypnul, takže vidíte mezeru vlevo (světle žluté pozadí vlevo od popisku „Restart“).

<PRE id=main_cell_1></PRE>

<UL id=menu_main class=menu_cell_fire>
<li id=menu_cells class=menu_left_fire><img class=im src='7x21.gif'></li>
<li id=menu_cells class=menu_mid_fire><img class=im src='7.gif'><a>Restart</a><img class=im src='7.gif'></li>
<li id=menu_cells class=menu_right_fire><img class=im src='7x21.gif'></li>
<li id=menu_cells class=menu_left_fire><img class=im src='7x21.gif'></li>
<li id=menu_cells class=menu_mid_fire><img class=im src='7.gif'><a >Program</a><img class=im src='7.gif'></li>
… atd…
</UL>

http://pravatvar.wz.cz/gif.gif


SHRNU TO:

1. problem: mam blockovy prvek do ktereho jsou vnoreny polozky menu. Vsechny prvky floatujou doleva. Vzdycky levy, prostredni a pravy patri k sobe. Levy a pravy maji sirku 7px. Prostredni se natahuje podle potreby. V podstate jakoby v kazdem tom prvku byl obrazek, ale to neni dulezite. Dulezite je to, ze se bezi bunkami vytvari mezery, misto aby se stlacili k sobe.

2) jeste jeden problem zase nefunguje oramovani - http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=37 172 -

Ahoj Bubák
Tak mohu to zkrátit ty nazvy, ale kdybys videl jak se zprehlednil kod po odstraneni tabulek asi bys chapal ze tohle je uz maly detail:-)
Odkaz si přečtu

Tak po přečtení odkazu „Webdesign / Jak funguje "float" a "clear"“ se mi povedlo vyřešit dva hlavní problémy týkající se uspořádání prvků ve výpisu z formulářů. Díky moc za tento odkaz. Problém menu se mi povedlo omezit na problém s Operou a Mozillou. Zopakuju současný problém jednoduše:

Menu tvořím takto: dva inline prvky (UL, zkoušeno také jako block) - uvnitř, kterých bude skupina položek LI - jedena skupina vlevo a jedna vpravo (float). Tyto UL mají nastavenou šířku podle procent (zkoušeno také s konstantní hodnotou). V této úrovni problém není. Každý ale obsahuje skupinu potomků LI.

<UL><li><IMG></li><li><IMG></li>
</UL>

Během ladění jsem to zjednodušil a odstranil ty ostatní. Li jsou inline. Kdybych to odstranil nebo dal jako block, tak se nebudou LI zarovnávat do stejného řádku. Proto inline. Každý LI má jako potomka jeden obrázek. LI i IMG mají margin a padding 0. IMG i LI má konstantní velikost 7px (během testu).

Zdánlivě vše v pořádku. Přesto se velikost LI zvětší asi o 2px za každé strany, takže vznikají nepříjemné mezery mezi obrázky.

Zaznamenal jsem jedno zlepšení, když jsem nastavil pevně šířku 7px pro LI. Pro IE se to vyřešilo, ale Opera a Mozzila nezareagovali žádnou změnou. Myslím, že tu někde by mohla být cesta.

Jestli vám je tento problém povědomí tak prosím napiště. Jsem vděčný za každý odkaz.

Díky všem za dobré odkazy, záhada float je vyřešena (ač na drobné maličkosti, které budu dořešovat později.
Díky