css - változó számú menüpontok széthúzása
Üdv.
Van egy oldal, aminek a fejléc részében van egy horizontális menü. A menü szélessége 100% az body-hoz viszonyítva (a body fix szélességű). Vannak benne linkek, mint menüpontok. Ezeknek a linkeknek a hossza a rajtuk lévő szöveg hosszától függ, nincs külön gomb háttérkép, vagy bármi ilyesmi. A menüpontok száma változik attól függően, hogy valakinek mihez van joga az oldalon, be van e lépve, stb... A szöveg - ami rajtuk van - is változhat ettől függően.
Több dolog van, ami fontos nekem ezzel a menüvel kapcsolatban:
- szét legyenek húzva a menüpontok a menü teljes szélességében
- a menüpontok közötti hézag egyforma legyen
Jelenleg ezt csak úgy tudom elérni, hogy kézzel állítom be minden egyes menü változatnál minden egyes menüpont szélességét.
Lehetséges ezt valahogy css-el automatizálni?
■ Van egy oldal, aminek a fejléc részében van egy horizontális menü. A menü szélessége 100% az body-hoz viszonyítva (a body fix szélességű). Vannak benne linkek, mint menüpontok. Ezeknek a linkeknek a hossza a rajtuk lévő szöveg hosszától függ, nincs külön gomb háttérkép, vagy bármi ilyesmi. A menüpontok száma változik attól függően, hogy valakinek mihez van joga az oldalon, be van e lépve, stb... A szöveg - ami rajtuk van - is változhat ettől függően.
Több dolog van, ami fontos nekem ezzel a menüvel kapcsolatban:
- szét legyenek húzva a menüpontok a menü teljes szélességében
- a menüpontok közötti hézag egyforma legyen
Jelenleg ezt csak úgy tudom elérni, hogy kézzel állítom be minden egyes menü változatnál minden egyes menüpont szélességét.
Lehetséges ezt valahogy css-el automatizálni?
Tábla
Köszi!Arra jó, hogy
Arra jó, hogy kinyújtsa, de a hézagok nem egyformák a menüpontok között (legalábbis firefox-ban). A hézag nagysága függ a menüpont szélességétől: rövidebb menüpontmellett kisebb lett a hézag, ezt meg szeretném elkerülni.
Hamár itt tartunk, nincs erre valamilyen eszköz css-ben? Muszáj táblázatot használni mondjuk ul-li helyett?
szerk:
Úgy nézem, hogy ul-li-nél is display:table-t használnak erre:
http://stackoverflow.com/questions/5186712/stretch-horizontal-ul-to-fit-width-of-div
szerk2:
Megfelelő számú nbsp-t téve a megfelelő helyre komepnzálható dolog. A hosszabbak mellé 4-6 nbsp kell, a rövidebbek mellé 8-10. Az algoritmusra még nem jöttem rá, nem az egyforma szöveghossz számít. Ez se egy túl automatikus dolog, de azért jobb, mint a semmi...
Hézagok
A cellák közötti réssel nincs
Köszi a választ, szerintem ez a kettő így összekombinálva lesz a megoldás.
Sajnos ez erősen függ attól,
Hézag
Jó, hát scripttel könnyű...
Közben kiszórtam stackoverflow-ra is:
http://stackoverflow.com/questions/16274175/css-stretched-and-evenly-spaced-horizontal-menu
Gondolom ott is scriptet fognak mondani elsőnek, más nekem se jut eszembe, de én nem vagyok valami nagy css guru... (Sőt legszívesebben kiszórnám a kukába, és mindenhol kötelezővé tenném js-t, de ez csak az én egyéni véleményem.)
Srácok! Szerintem ez a
Ha jól értem a problémád, akkor azt szeretnéd, hogy a menü minden eleme azonos szélességű legyen, az elemen belül a tartalom (link) pedig középen legyen. Mivel sem a renderelt szövegek szélessége, sem az elemek száma nem ismert, szerintem legyen egy kis JS, ami az oldal megjelenítésekor elosztja a rendelkezésre álló hely szélességét az elemek számával. A kapott eredmény lesz az aktuális oldalon az elemek szélessége. jQuery-vel ezt így oldanám meg:
A CSS formázáskor érdemes figyelni a box modelre! Hogy ne lődd magad térden, érdemes elkerülni, hogy ugyanannak az elemnek (ul > li menü esetén a li elemnek) ne adj fix szélességet és oldalsó margin, padding értékeket. Ha border is van az elemeken, akkor azzal is számolnod kell.
Érdemes lehet a CSS-t úgy megírni, hogy ha valami miatt ez a JS nem futna le, akkor is átlátható legyenek az elemek. Tennék egy kis margint/paddingot a linkekre és az egészet valamelyik irányba rendezném
- vagy az elemekre tett float szabállyal
- vagy az elemeket inline-block-ra állítva, a menü text-align beállításával
Másik rendkívül érdekes kérdés, hogy egy ilyen nagyon rugalmasra alakított menü hogyan befolyásolja a használhatóságot. Nem zavarja-e össze a felhasználókat, hogy pl a Főoldal menüpont mindig máshova esik?A kérdést azért tettem föl,
Szerintem ez a táblázatos
role="menu"attribútumot, és máris túl sok bitet pazaroltunk el erre a bagatell dologra, mert rajtuk kívül az égvilágon senkit nem érdekel, hogy milyen tag-ben van a tartalom.Ahogy inf3rno is említi, sokkal nagyobb probléma, hogy már egy ilyen alapfeladatnál is a css bedobja a törülközőt.
Spacing?
Ez nem az, amit szeretnék.
Lerajzolnád?
- a menüpontok közötti hézag egyforma legyen
Az én megoldásomban a fentiek teljesülnek. Mindehol 10px a menüpontok közötti távolság, és szét vannak húzva.
http://stackoverflow.com/ques
Valaki megírta:<!DOCTYPE
szerk:
Közben rájöttem, hogy a padding ugyanazt csinálja kb, mint nálam az nbsp. Így sem teljesen azonosak a hézag méretek, de csak akkor tűnik fel, ha nagyon kevés menüpont van nagyon nagy helyen, és nagyon eltérő a szöveg mérete bennük.
Auto
Így elvileg mindegyikhez jobbra-balra 30px hézag lesz, addig, míg az összes együtt nem haladja meg a 800px-t. Arra viszont kíváncsi lennék, hogy mit csinál, mikor a 30-as padding-al a teljes hossz csak mondjuk 600px-re jön ki? Két végén nagyobb az üres hely?
A nem törhető szóközt szerintem is hanyagold...
Szerk.: azt mondjuk én sem igazán értettem, hogy miként gondolod elérni az egyforma "hézagot" és azt, hogy kitöltse a szélességet is. Ehhez vagy betűméretet kéne dinamikusan változtatni, vagy kiszámolni az összes "kitöltendő hézagot", majd leosztani a menük száma + 1 -el és ezt az értéket (felét) kell padding-nek megadni. Ez elég nehéz, nem tudom, hogy pl. PHP-ben van-e fv text-width-re (a különböző betűszélességek miatt minden menünek a szöveg és betűtípus szerint kellene a szélességét számolni). Szerintem ez pontosan JS-el sem oldható meg, nemhogy CSS-el. Engedni kell pl. a teljes szélesség kitöltéséből.
A fix padding azért működik,
A paddingon kívül a margin is auto, azt ne felejtsd el, szóval ha a padding-ot fix-re rakod, akkor a margin-al nyújtja ki a teljes hosszra...
A hézag méret kiszámolását tényleg nem lehet megoldani szerver oldalon. Kliens oldalon esetleg hozzá lehet csapni egy js-t, ami kiszámolja a linkek méretéből és a menü hosszából, hogy mekkorának kell lennie a hézagnak.
A mostani megoldás sem a legtökéletesebb, majd be kell lőni a padding-ot olyanra, hogy a legtöbb menüpontot tartalmazó változatnál még összenyomható legyen a menü, a legkisebbnél viszont rásegítsen a hézag kialakításra. Azt hiszem menni fog.
CSS
Mindig ott rontjátok el a
Le kéne mérni a menüpontokat nyújtás nélkül, aztán közéjük tenni egyforma hézagokat, hogy kitöltsék a maradék teret ...
Én ezt a hézag-dolgot nem
http://stackoverflow.com/ques
Az első képen a normál stretch van, a másodikon, amit szeretnék, hogy a szövegek között egyforma legyen a hézag. Azért nincs ilyen css tulajdonság, mert a margin, border, padding összeadva két szomszédos menüpontnál.
IE
Persze.
Gondolkodom
Király! Mikor küldöd a
Íme
<html>
<head>
<title>Cím</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="hu">
<meta http-equiv="X-UA-Compatible" content="IE=7">
</head>
<body>
<style>
table {
border-collapse: collapse;
}
td {
width: expression(function menu_szelesseg() {
if (this.style.width != 'auto') {
var tabla = this.parentNode.parentNode.parentNode;
var tabla_beallitott_szelesseg = tabla.style.width;
var tabla_szelesseg_px = tabla.offsetWidth;
tabla.style.width = 'auto';
var kulonbseg = tabla_szelesseg_px - tabla.offsetWidth;
var tdk = tabla.getElementsByTagName('td');
var td_szam = tdk.length;
var padding = Math.round(kulonbseg / (td_szam * 2));
tabla.style.width = tabla_beallitott_szelesseg;
for (var i = 0; i < td_szam; i++) {
tdk[i].style.width = 'auto';
tdk[i].style.paddingLeft = tdk[i].style.paddingRight = padding + 'px';
}
}
}.apply(this));
padding: 0px;
border: 1px solid red;
text-align: center;
}
</style>
<table style="width: 800px;" id="tabla">
<tr>
<td>Első</td>
<td>Második</td>
<td>Harmadik</td>
<td>Negyedik</td>
<td>Ötödik</td>
</tr>
</table>
<br>
<table style="width: 80%;" id="tabla2">
<tr>
<td>a</td>
<td>Második</td>
<td>Harmadik</td>
<td>AAAAAAAAAAAAAAAAAAAAAAA</td>
</tr>
</table>
</body>
</html>
Szerkesztve: ezzel az a baj, hogy fix méretű a padding.
Zsír :-)