ugrás a tartalomhoz

HTML linkek megjelenítése behúzással

Homecsiga · 2005. Dec. 10. (Szo), 03.00
Sziasztok!

Elnézést, ha már volt erről szó, de miután jópár cikket elolvastam, amit hasonló témának véltem, nem találtam meg a megoldást.
A következőben szeretném kérni a segítségeteket: van egy táblázat, amiben linkek vannak. A táblázat szélessége fix, nem lehet megváltoztatni. Egymás alatt, felsorolásszerűen vannak linkek, azonban vannak köztük un. "allinkek", amik kicsit beljebb kezdődnek. A gondom az, hogyha egy ilyen link nem fér ki egy sorba, az tördelődik. Ez önmagában még nem lenne gond. Az vele a probléma, hogy a tördelt sor második fele a sor elejétől kezdődik, nem tarja meg a "behúzást".
Ha esetleg segít, nagyjából így néz ki az ide vonatkozó kód:
print "&nbsp &#149 <a href=link.html</a><br>";

Nagyjából így né ki a probléma:
link1
link2
...allink1
...allink2
...túl hosszú
allink <--- ennek kéne behúzva lenni a többi "allink" alá.

Ha esetleg valakinek van valami 5lete, szívesen venném!

Előre is köszi!
‹ Webcím automatikus linkké tétele PHP-ben MySQL szöveges adattítpusok tárigénye ›
 ■
1

UL LI

Jano · 2005. Dec. 10. (Szo), 04.21
Jelöljed a kódban UL (unordered list - rendezettlen/számozatlan lista) és LI (list item - lista elem) elemekkel a menüt, az allinkek pedig alkossanak értelemszerűen beágyazott saját UL-LI listát.

CSS-ben állítsad az ul-ek list-style tulajdonsagat none-re (ezzel leveszed a kis pötyöt a felsorolás elemek elől), a margin és padding-ot pedig 0-ra.

Végül az allinkekeket tartalmazó belső ul-eknek add meg bal margónak a kívánt behúzási értéket.
  1. <ul id="menu">  
  2.  <li>link1  
  3.   <ul>  
  4.    <li>allink1</li>  
  5.    <li>allink2</li>  
  6.   </ul>  
  7.   </li> <!-- itt zarjuk le a link1 li-jet -->  
  8.  <li>link2</li>  
  9.  <li>link...</li>  
  10. </ul>  
  1. /* ez a szabaly a főmenü UL, az almen UL és minden li elemre érvényes */  
  2. #menu, #menu ul, #menu li {  
  3.  list-style:none;  
  4.  margin:0;  
  5.  padding:0;  
  6. }  
  7.   
  8. /* a belso ul-ek behúzása */  
  9. #menu ul {  
  10.  margin-left:10px;  
  11. }  
2

Köszi szépen!

Homecsiga · 2005. Dec. 10. (Szo), 05.36
Először is köszi a tanácsot. Az 5let jó, csak nem működik :(
Amint beírom az első <ul id="menu">-t, lehal az egész oldal.
Lehet, hogy az a baja, h php-be rosszul írtam át, amit írtál? Vagy az, hogy a linkeket tartalmazó változót 3 tömbből szedi össze (3 mélységű a link), amiből 2 tömb 3 dimenziós, egyenként egy asszociatív tömbbe ágyazott tömböket tartalmaz? :( nem vok nagy php guru, nem rég kezdtem a dolgot. Ha esetleg segít, akkor itt az algoritmus tömör vázlata:
  1. <?php  
  2. print "<ul id="menu">";  
  3. végig megyek az első tömbön{  
  4.   $linklista = $linklista."<li><a href=link.php?változók</a><br>";  
  5.    bizonyos feltételek esetén (ha kibontok egy linket) tovább megyek a második tömbre, és végig járom azt is{  
  6.     print "<ul>";  
  7.   $linklista = $linklista."<li><a href=allink1.php?valtozok</a><br></li>";  
  8.    szinten bizonyos feltetelek eseten tovabb a 3. tömbre{  
  9.    $linklista = $linklista."<a href=allink2.php?valtozok</a><br>";  
  10. }  
  11.    print "</ul>";  
  12. }  
  13. print "</li>";  
  14. }  
  15. print "</ul>";  
majd ezt a változót rakom be egy táblázat cellájába, s ime, kész a linkekből álló menüm, amit egy kattintással ki tudok bontani almenükre.

nagyjából :) Remélem nektek is olyan bonyolult mint nekem :) És ha ide megpóbálom beilleszteni az általad adott kódot (ahogy azt itt is feltüntettem), már meg sem jeleníti az oldalt. Nincs tipped, hogy mi a gondj? Rosszul értelmeztem, amit írtál, vagy a php kódolásom a rossz? A 3 szintű menüt amúgy rendben megcsinálja, leszámítva az eredeti problémát.

És mégeccer thx a segítséget!
3

Link elem

fberci · 2005. Dec. 10. (Szo), 11.29
Nálad így néznek ki a linkek.
  1. <a href=link.php?valtozok</a>  
A linkek így néznek ki helyesen:
  1. <a href="/link.php?valtozok">szöveg (akár a webcím)</a>  
Ajánlanám neked, hogy nézz körül a html terén.

Ha a hozzászólás küldésekor a BBCode jelölőkre kattintasz (a hozzászólásod alatt), akkor ott megtalálsz minden formázási eszközt.

Üdv.: fberci
4

Pontosabban

Jano · 2005. Dec. 10. (Szo), 11.48
Próbáld meg pontosabban definiálni, hogy mit jelent az hogy szétesik az oldal. Egy PHP hibaüzenetet kapsz, nem jelenik meg semmi, vagy elcsúsznak a dolgok?

Ha hibaüzenet, akkor a PHP-ben szúrtál el valamit, ha második akkor nem jó az algoritmusod, vagy ki van kapcsolva a hibaüzenetek küldése, ha a 3. akkor rossz HTML-t küldesz.

Két dologra kell figyelni, mást a HTML-ben nem nagyon lehet elszúrni:
A tag kiírásakor a " jeleket le kell védeni ha te is " jellel jelölöd a stringet.
  1. <?php echo "<div id=\"menu\">";  
A másik, hogy a elemek szabályosan legyenek egymásba ágyazva, tehát a belső UL biztos az adott LI elemen belül legyen, ne zárd le mielőtt kiírod az UL-t.

Használd ellenőrzésre a W3C validátorát az szólni fog, ha hiba van a HTML-ben. Addig ne is kezdj neki a CSS megírásának amíg a HTML nem hibátlan, mert nincs értelme.

A metakodódból nem derült ki, hogy rekurzív megoldást alkalmazol-e, de az ilyen bármilyen mélységű listáknál jól használható:
  1. <?php  
  2. function menuGeneralo($tomb,$id="") {  
  3.  $menuHTML = "";  
  4.  $menuHTML .= (id == "") ? "<ul>" : "<ul id=\"".$id."\">";  
  5.  for (tomb elemein vegig) {  
  6.   $menuHTML .= "<li>";  
  7.   $menuHTML .= adottTombElemLinkje;  
  8.   if (ha vannak gyerekelemek arra meghivjuk onmagat a gyerekek tombjevel) {  
  9.    $menuHTML .= menuGeneralo($tomb[aktulisElem][gyerekTomb]);  
  10.   }   
  11.   $menuHTML .= "</li>";  
  12.  }  
  13.  $menuHTML .= "</ul>";  
  14. }  
  15.   
  16. echo menuGeneralo($menuTomb,"menu");  
Ha ezt egyszer megírod, többet nem is kell majd hozzányúlni mert CSS-sel szinte mindenféle kinézetet tudsz adni a menünek.
5

ismét kössz!

Homecsiga · 2005. Dec. 10. (Szo), 13.16
Jesszusom, de profik vagytok! :) Végre egy hely, ahol segítik is a kezdőket! Nos, a hrefem úgy néz ki, ahogy te írtad fberci, csak hajnali 6kor már kicsit kapkodtam :) Janó, már ott elszúrtam, h a belső idézőjeleket elfelejtettem levédeni. A jelenség, egyébként, hogy betölti az oldalt odáig, amíg a kérdéses kódrészhez ér, és onnantól kezdve üres oldalt tölt, és semmi hiba. A hibaküldés a php.ini-ben be van kapcsolva, de külön a php oldalon nem foglalkoztam még a hibaküldéssel. Az algoritmu magában működik rendesen, csak ugye, kicsit eltolva a túl hosszú és tördelt sorokat. Ígérem megnézem alaposan amit most írtál, de sajnos erre mos nincs lehetőségem. Köszi addigis mindkettőtöknek a segítséget!
6

Kipróbáltam, majdnem jó

Homecsiga · 2005. Dec. 10. (Szo), 14.14
Nos, most jobb a dolog. A probléma csak az, hogy nem a megfelelő a formázás. Azzal, hogy beállítottam a 10px behúzást, az egész táblázatot beljebb tolta, és nem csak az almenüket. Úgy néz ki a dolog, hogy egy file-ban megcsinálom a táblázatot, és annak a tartalmát (a menüket) egy másik file-ban, majd egyszerűen (persze a megfelelő php kóddal) berakom a táblázat cellájába az adott menuváltozót. Ezt az ul - li menüt pedig ugyebát a menü elkészítésénél használom, nem a táblázat fileban. Így magam sem értem, hogy miért a teljes táblázatot tolja beljebb, miért nem csak a megfelelő menüket.
8

Összeérő margók

Jano · 2005. Dec. 10. (Szo), 15.42
A jelenség oka az összeérő margók viselkedésében keresendő. Erről itt már írtam: Collapsing margins - Összecsúszó margók.

A problémát ha design engedi a táblázat, vagy az adott cellának vagy akár a főmenü UL vagy LI-nek adott padding vagy border mególdhatja.

Ha ez nem müködik akkor a margin-left helyett a padding-left értéket is lehet állítani a belső listákon. Ezt azért nem javasoltam először, mert itt már az IE régi rossz doboz modell értelmezése is bezavarhat. Ha a belső UL-eknek nem kell direktben megadnod szélesség értéket akkor egyszerűen cseréld ki a margin-leftet padding-leftre.

Ha meg kell akkor az egy következő bejegyzés lehet.

A list-stlyenál valamit elírtál. CSS-re is van validátor esetleg próbáld meg.
7

<Nincs cím>

Homecsiga · 2005. Dec. 10. (Szo), 14.17
Még annyit szeretnék hozzá tenni, hogy megcsináltam ezt a css file-t, de ez a list-style: none semmit nem csinált, ugyan úgy kint vannak a pöttyök. Lehet hogy ez azt jelenti, hogy valamit még mindig rosszul írtam meg a kódban??
9

És így?

janoszen · 2005. Dec. 10. (Szo), 18.03
  1. list-style-type:none;  
Így is?