Egyéb problémák

[Rimelek]

Bocs, nem megoldást mondok, csak hogy ha nagyon összehúzom minimumra az ablakot, akkor meg eltolódnak az átméretezés pontjai. Nem a sarokban, hanem 2 centivel feljebb lehet megfogni.

[ThompsoN]

Van egy kérdésem, már sokat googliztam ez ügyben, de nem találtam semmi hasznosat.

A lényeg a következő: van egy div. Erre a divre a jquery UI-ból ráteszem a resizable widgetet. Ettől átméretezhető lesz. Eddig minden oké. Ebben a divben van egy táblázat. A div szélességének és magasságának a 100%-a a mérete. Amikor a divet átméretezem, szépen nyúlik. Viszont túl keskenyre húzom össze a divet, akkor a táblázat a benne lévő tartalom miatt lefelé elkezd nyúlni, és kilóg a divből.

A tartalmat tartalmazó résznek megadtam az overflow: auto-t, de nem jelenik meg benne a scrollbar.

Itt a HTML része:

Kód: HTML

1. <div class="min_window" id="program3">
2.         <table>
3.                 <tr>
4.                         <td class="left_top_corner"></td>
5.                         <td class="top_repeat">
6.                                 <ul class="xbuttons">
7.                                         <li class="in_tray_button"></li>
8.                                         <li class="size_button"></li>
9.                                         <li class="x_button"></li>
10.                                 </ul>
11.                         </td>
12.                         <td class="right_top_corner"></td>
13.                 </tr>
14.                 <tr>
15.                         <td class="left_repeat"></td>
16.                         <td class="content">
17.                                 Tartalom
18.                         </td>
19.                         <td class="right_repeat"></td>
20.                 </tr>
21.                 <tr>
22.                         <td class="left_bottom_corner"></td>
23.                         <td class="bottom_repeat"></td>
24.                         <td class="right_bottom_corner"></td>
25.                 </tr>
26.         </table>
27. </div>

Ez pedig a CSS:

Kód: CSS

1. div.min_window {
2.         width: 800px;
3.         height: 600px;
4.         position: absolute;
5.         top: 100px;
6.         left: 100px;
7. }
8. div.min_window table {
9.         width: 100%;
10.         height: 100%;
11.         border-spacing: 0;
12. }
13. /*Közepe*/
14. div.min_window table td.left_repeat {
15.         width: 8px;
16.         background-image: url('../image/window_border_left_repeat.png');
17. }
18. div.min_window table td.content {
19.         background-color: #F0F0F0;
20.         padding: 12px;
21.         overflow: auto;
22. }
23. div.min_window table td.right_repeat {
24.         width: 8px;
25.         background-image: url('../image/window_border_left_repeat.png');
26. }

A kiemelt rész vonatkozik a tartalmat tartalmazó cellára.

Itt pedig működés közben lehet megnézni:
http://thompson.bplaced.net/resizable/

Légyszi segítsetek! Köszi.

[ThompsoN]

Különböző képet is megadhatsz, és a CSS-t aszerint módosítod.
Ha mindegyik kép ugyan akkora, akkor az id-re írod meg a selectort, és átírod a kép url-jét. A többi az maradhat.
Például:
HTML

Kód: HTML

1. <ul id="menu_nav">
2.         <li class="menu" id="menu1">
3.                 <a href="#"></a>
4.         </li>
5.         <li class="menu" id="menu2">
6.                 <a href="#"></a>
7.         </li>
8. </ul>

2 különböző kép: legyen az egyik a menu1.gif és a másik a menu2.gif -> mindkettő tartalmazza a 3 állapotot (link, hover, active)

CSS

Kód: CSS

1. ul#menu_nav li a {
2.         display: block;
3.         width: 300px; /*300 * 60-as kép esetén*/
4.         height: 20px;
5. }
6. /*Háttérképek betöltése*/
7. ul#menu_nav li#menu1 a {
8.         background-image: url('menu1.gif'); /*menu1.gif lesz a menu1 id-jű felsorolás elemben lévő link háttérképe*/
9. }
10. ul#menu_nav li#menu2 a {
11.         background-image: url('menu2.gif'); /*menu2.gif lesz a menu2 id-jű felsorolás elemben lévő link háttérképe*/
12. }
13.  
14. /*Ugyan akkora képek estén egyszer kell a pozícionálás*/
15. ul#menu_nav li a:hover {
16.         background-position: left center;
17. }
18. ul#menu_nav li a:active {
19.         background-position: left bottom;
20. }

Ilyenkor minden egyes képnek ugyan akkorának kell lenni (a példában 300*60px), és mindegyiken mind a három állapot rajta van. A közös jellemzőket (megjelenés, és az állapotok háttér pozíciója) egy helyen definiáljuk, a különbözőt (háttérkép) pedig külön-külön.

[M. Tamás]

A CSS-t. Ha valaki olyan nézi meg az oldalad, akinél a JS ki van kapcsolva, attól még működni fog, mert nem azzal csináltad meg.

[chouji]

Köszönöm Isti, közben a másik problémára is rájöttem.
Egyébként most akkora melyik megoldást használjam? Thompson módszerét, miszerint egy képre teszem a képeket és pozicionálom vagy a js-es megoldás?

chouji

[Isti861]

Kód: HTML

1. <img border="0" src="kezdolap.png" onmouseout="this.src='kezdolap.png'" onmouseover="this.src='kezdolap2.png'">

[chouji]

Srácok!
Kipróbáltam mindkét megoldást. Köszi Thompson, működik rendesen. Csak ezzel annyi gond van, hogy így minden menünek ugyanaz a képe. Próbálgattam módosítani a css-en, de nem jött össze. :/

Keveqiah
A scriptes megoldás egyszerűnek tűnik, viszont ha ezt alkalmazom,

Kód: [Kijelölés]

<img src="kezdolap.png" onmouseout="this.src='kezdolap.png'" onmouseover="this.src='kezdolap2.png'">akkor keretet ad a képemnek, méghozzá kéket, ha kattintok pirosat. Hogy tudom azt eltüntetni?

chouji

[ThompsoN]

Tehát, van két képed. A menu1.gif és a menu4.gif
A menu1.gif kell háttérképnek akkor, ha nincs rajta az egér és a kattintás sem ott történik, a menu4.gif pedig kattintásra és a hover eseményre kell , hogy bekövetkezzen.

Na ezt én úgy csinálnám meg, hogy készítek egy új képet, amelyre a menu1.gif és a menu4.gif kerül egymás alá/mellé, ahogy tetszik, csak ne legyenek egymáson.

Utána pedig CSS-el kezeljük az eseményeket.

Kód: CSS

1. ul#menu_nav li a {
2.     background-image('menu1_es_menu4_egyben.gif');
3.     display: block; /*Ez azért kell, hogy a link tartalom nélkül is működjön, mert nem kap tartalmat, ahogy a példámban is látod*/
4. }
5. ul#menu_nav li a:hover, ul#menu_nav li a:active {
6.     background-position: left bottom;/*ha egymás alatt vannak*/
7. }

Közben készítettem egy bugyuta kis példát, de a célnak tökéletes, ami a probléma, azt szépen bemutatja.
(Bocsi a reklámért)
http://thompson.bplaced.net/

[chouji]

Fúú, nem sikerül. Thompson, letudnád írni nekem konkrétan, hogy hogy működik ez? Mentségemre szóljon, hogy zöldfülű vagyok még a css és a html terén.

[tomi6230i]

js-el a kép src értékét cseréld le kattintásra. (onclick)

arra meg ott a :active, ha nem értettem félre

[chouji]

JavaScripthez nem értek, ezért kipróbálom css-el, ahogyan Thompson írta.

[Keveqiah]

js-el a kép src értékét cseréld le kattintásra. (onclick) a hovert pedig mehet css-el ThompsoN javaslatára.

http://www.google.hu/search?q=js+menu+img+change

[ThompsoN]

CSS-el ezt úgy tudod megoldani, hogy a menu1.gif-et és a menu4.gif-et egy képre teszed. Azután a :hover pszeudo osztállyal megadod a background-position-t a megfelelő helyre.

[chouji]

Srácok!
Azt szeretném megoldani - bár úgy tűnik, nehéz fába vágtam a fejszém, mégis úgy érzem, közel járok a megoldáshoz -, hogy pár menün. Egyszerűség kedvéért menu1, menu2, és menu3. Ezek a menük nem szövegek, hanem képek. A menu1-hez a menu1.gif, a menu2-höz a menu2.gif és a menu3-hoz a menu3.gif tartozik. Azt szeretném tehát, hogy ha az egérrel rámutatok a menu1-re akkor a menu1.gif helyett a menu4.gif jelenjen meg és ha rá is kattintok, maradjon is menu4.gif a képe.
Mutatom meddig jutottam.

Kód: HTML

1. <div id="main_menu">
2.                         <ul class="balmenu" id="menu_nav">
3.                                 <li id="button_menu1">
4.  
5.                                         <a id="kezdolap" href="menu1.html">
6.                                         <img src="menu1.gif" id="menu1">
7.                                         </a>
8.                                 </li>
9.                                 <li id="button_menu2">
10.                                         <a id="kavek" href="menu2.html">
11.                                                 <img src="menu2.gif" id="menu2">
12.                                         </a>
13.  
14.                                 </li>
15.                                 <li id="button_menu3">
16.                                         <a id="forro" href="menu3.html">
17.                                                 <img src="menu3.gif" id="menu3">
18.                                         </a>
19.                                 </li>
20.                         </ul>
21. </div>

És ehhez már nem tudtam elkészíteni a css-t. Ha nem képekről van szó, akkor egyszerűbb, de nekem képekkel kellene.
Előre is hálás köszönetem,
chouj

[NoNametheone]

 :beer: kösz mindkettőtöknek!  :beer: