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.

<ul id="menu">
 <li>link1
  <ul>
   <li>allink1</li>
   <li>allink2</li>
  </ul>
  </li> <!-- itt zarjuk le a link1 li-jet -->
 <li>link2</li>
 <li>link...</li>
</ul>


/* ez a szabaly a főmenü UL, az almen UL és minden li elemre érvényes */
#menu, #menu ul, #menu li {
 list-style:none;
 margin:0;
 padding:0;
}

/* a belso ul-ek behúzása */
#menu ul {
 margin-left:10px;
}
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:
<?php
print "<ul id="menu">";
végig megyek az első tömbön{
  $linklista = $linklista."<li><a href=link.php?változók</a><br>";
   bizonyos feltételek esetén (ha kibontok egy linket) tovább megyek a második tömbre, és végig járom azt is{
    print "<ul>";
  $linklista = $linklista."<li><a href=allink1.php?valtozok</a><br></li>";
   szinten bizonyos feltetelek eseten tovabb a 3. tömbre{
   $linklista = $linklista."<a href=allink2.php?valtozok</a><br>";
}
   print "</ul>";
}
print "</li>";
}
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.

<a href=link.php?valtozok</a>
A linkek így néznek ki helyesen:

<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.

<?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ó:
<?php
function menuGeneralo($tomb,$id="") {
 $menuHTML = "";
 $menuHTML .= (id == "") ? "<ul>" : "<ul id=\"".$id."\">";
 for (tomb elemein vegig) {
  $menuHTML .= "<li>";
  $menuHTML .= adottTombElemLinkje;
  if (ha vannak gyerekelemek arra meghivjuk onmagat a gyerekek tombjevel) {
   $menuHTML .= menuGeneralo($tomb[aktulisElem][gyerekTomb]);
  } 
  $menuHTML .= "</li>";
 }
 $menuHTML .= "</ul>";
}

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

 list-style-type:none;
Így is?