Megoldva: Logikai HTML kérdés

Internet: PHP, CGI, stb.

Sziasztok! :)

Szeretnék létrehozni egy html (+css) oldalt, aminek a tartalma ilyesmi lenne:


       |    kép    |
      szöveg a képről

       |    kép    |
      szöveg a képről

       |    kép    |
      szöveg a képről

A képek középre lennének igazítva. A képek alatti szöveg vízszintes margói kicsit szélesebbek lennének, mint a képek (a képek átlagos szélessége kb. 320 képpont), és a szöveg középre lenne igazítva. Az a kérdésem, ezt mivel illene megcsinálni - egy kép és a képről szóló szöveg milyen logikai egység(ek)nek felel meg a html szerint?

Nekem a legszimpatikusabb az lenne, ha listák segítségével hoznám létre, mert végül is az egész egy képekből álló lista. Valahogy így gondoltam: 


<ul>
  <li>kép</li>
  <li>
    <ul>
      <li>szöveg a képről</li>
    </ul>
  </li>

  <li>kép</li>
  <li>
    <ul>
      <li>szöveg a képről</li>
    </ul>
  </li>

  <li>kép</li>
  <li>
    <ul>
      <li>szöveg a képről</li>
    </ul>
  </li>
</ul>

A második szimpatikus megvalósítás bekezdések használatával történne. Logikailag ez azért lehetne helyes, mert egy kép szavak nélkül is rengeteget mesél, ami azt jelenti, hogy egy kép alkalmas önmagában is bekezdés lenni, csak a szavak nem a html dokumentumban lennének tárolva, hanem az emberek fejében jönnének létre a látott kép által.

A lista és a bekezdés kombinációja is szóba jöhet.

A harmadik-, egyáltalán nem szimpatikus megoldás a táblázat lenne.

Lehetne div és span címkéket is használni, de így elveszne a logikai összefüggés.

Lehetséges, hogy a logikai kifejezés helyett a tartalmit kellett volna használnom.

Az is egy szempont, hogy css nélkül hogyan jelenik meg az oldal.

Mit javasoltok?

---

Ilyen lett: 


<ul>
  <li>
    <div>
      <img>
      <div></div>
    </div>
  </li>

  <li>
    <div>
      <img>
      <div></div>
    </div>
  </li>
<ul>

Köszönöm a segítséget! :)

---

Sokkal jobb jó: 


<dl>
  <dt><img></dt>
  <dd></dd>
</dl>

<dl>
  <dt><img></dt>
  <dd></dd>
</dl>

Köszönöm! :)

  • 1836 megtekintés

( nrgie | 2008. 07. 23., sze – 16:58 )

Én valahogy így : 


<div id="main-container-page">
   <div id="kep-szoveg-1">
      <table width="100%" border="0">
         <tr>
            <td height="150" width="75%">
               <div class="kep1"> <a href="index.php"><img src=images/top.png border="0" align="middle"></a></div>        
            </td>
         </tr>
         <tr>
            <td height="150" width="75%">
               <div class="szoveg1">Lorum Ipsum..................</div>
            </td>
         </tr>
      </table>
   </div>
   <div id="kep-szoveg-2">
      <table width="100%" border="0">
         <tr>
            <td height="150" width="75%">
               <div class="kep2"> <a href="index.php"><img src=images/top2.png border="0" align="middle"></a></div>        
            </td>
         </tr>
            <td height="150" width="75%">
               <div class="szoveg2">Lorum Ipsum 2..................</div>
            </td>
         </tr>
      </table>
   </div>         
        .
        .
        .
        .

</div>

Így lehetőséged van jó pár helyen módosítani az elhelyezkedést vagy bármit.

Üdv.

Az igaz, hogy a képet és az azt magyarázó/kiegészítő/stb. szöveget felfoghatjuk, mint egy táblázat elemeit: 


 ------------------------------
|    kép    |    magyarázat    |
|===========|==================|
|  -------  |                  |
|  |kép01|  |    blablabla     |
|  -------  |                  |
|-----------|------------------|
|  -------  |                  |
|  |kép02|  |   bla bla bla    |
|  -------  |                  |
|-----------|------------------|
|  -------  |                  |
|  |kép03|  |   bla-bla-bla    |
|  -------  |                  |
 ------------------------------

Ugyanakkor az egyoszlopos és "dupla soros" táblázat nem tudom, mennyire táblázat, mint inkább lista: 


 ---------------
|               |
|    -------    |
|    |kép01|    |
|    -------    |
|   blablabla   |
|               |
|---------------|
|               |
|    -------    |
|    |kép02|    |
|    -------    |
|  bla bla bla  |
|               |
|---------------|
|               |
|    -------    |
|    |kép03|    |
|    -------    |
|  bla-bla-bla  |
|               |
 ---------------

A te megoldásoddal nincsenek meg a táblázatoktól megszokott tulajdonság-érték párok, amik táblázattá teszik a táblázatot.

"A legjobban elterjedt böngészők semmit sem jelenítenek meg, amíg a táblázat teljes egészében le nem töltődött, ami figyelembe veendő körülmény, ha az egész oldalt táblázatos elrendezéssel tervezzük meg." - Ez ma mennyire aktuális?

:)

( wwrreecckk | 2008. 07. 23., sze – 18:32 )

Igazad van, a table-t hagyjuk meg a pistikéknek... 


<div class="imgwithcaption">
<img src="..." class="img"/>
<span class="imgcaption">Képfelirat</span>
</div>

innentől kezdve css-ből tudod állítani, hogy kép/sor legyen, vagy sem.
a span helyett lehetne div is.
html-ben sztm a logikai összefüggés a class-on keresztül biztosítható.

A listával meg úgy lehetne frankó,
ha a 


<ul>
<li><img ../><span>képfelirat</span></li>
..
</ul>

struktúra lenne (feleslegesnek tűnik a példádban li-n belüli 1 db elemből álló ul-t).

Logikai összefüggés alatt azt értem, hogy a tartalomnak megfelelő címkék közé kerüljön a tartalom. Például bekezdés a bekezdés címkék közé, cím a megfelelő címsor címkék közé, stb. A 

div

és a 

span

általános címkék, bármi beléjük kerülhet.

Szerintem azért kéne két 

ul

, mert ha ugyanabba a "folyamba" kerülne a szöveg, mint maga a kép, akkor a kép és a szöveg logikailag/tartalmilag egyenértékű lenne, pedig egyértelműen nem egyenértékűek, hanem kiegészítik egymást. Azért is jó a két 

ul

, mert stíluslap nélkül is egyértelműen látszik, hogy az elemek összefüggenek, míg egy 

ul

esetében nem az összefüggésük látszódna, hanem az, hogy ugyanazon listának az elemei.

:)

Az ilyen jellegű kapcsolatot, amilyenről te beszélsz, az 

img alt

-attribútuma jelenti (fájdalom, hogy az IE, konqueror, firefox nem jól értelmezi az 

:after

css selectort).

Szerintem azért kéne két ul, mert ha ugyanabba a "folyamba" kerülne a szöveg, mint maga a kép, akkor a kép és a szöveg logikailag/tartalmilag egyenértékű lenne, pedig egyértelműen nem egyenértékűek, hanem kiegészítik egymást

Ebben az esetben viszont akkor közös li alatt kellene lennie, mert valamilyen szempontból azért összefüggnek.

Ha ennyire szó szerint akarod értelmezni a dolgot, akkor
az 

img

+ 

p

blokkok is jöhetnek, bár itt elég nehéz az egyes img-k és p- közötti kapcsolatot létrehozni html szinten (hacsak nem 

div

-vel :-)).

Megmutatom, mire gondolok:

  • kép01
    • blablabla
  • kép02
    • bla bla bla
  • kép03
    • bla-bla-bla

Látható, hogy a szöveg a képhez tartozik, mert a kép az ő szülője.

Megmutatom, mire gondolsz:

  • kép01
  • blablabla
  • kép02
  • bla bla bla
  • kép03
  • bla-bla-bla

Ez egy lista, amiben a kép és az alatta megjelenő szöveg között nincs semmilyen összefüggés, ami arra utalna, hogy a szöveg a képhez tartozik. A képek és a szövegek is egyenrangúak.

:)

az első verzó, amit írsz, az az alt attributum.

Megmutatom, mire gondolsz:

én ezt sehol sem írtam, olvasd vissza lszi az előző hozzászólásaimat...

én ezt írtam: 


<ul>
   <li>
      <img />
      <span>...</span>
   </li>
</ul>

:)
Az összetartozást a parent node jelképezi függetlenül attól, hogy az div, vagy li.
Egy másik lehetőség az összetartozás szimbolizálására, az az attributum (jelen esetben az alt)...

Ezt nem értem: "az első verzó, amit írsz, az az alt attributum." Az 

alt

a kép tartalma helyett van, ha a kép nem jelenik meg. Azt tartalmazza szavakkal, ami a képen látható. Elvileg kb. egyenértékű a kép tartalmával, de semmi köze ahhoz, amit a képről írni szeretnék.

:)

Te vargya'...

Sz'al odaig, hogy van egy lista az odaig rendben van, a kepek listaja, rendben, ertem.

De mi a fenenek van meg egy lista, ha a kephez egyetlen felirat tartozik? 


<ul id="keplista">
<li>kep1</li>
<li>kep2</li>
</ul>

Ugye ez az altalanos. Egy kep pedig leirhato ugy, hogy egy olyan szakasz (=>div), aminek ket eleme van: egy kep, es egy felirat.
Azaz: 


<div id=kep1 class="kepfelirattal">
<img src="kep1.jpg" caption="kepfelirat"/>
<span class="caption">kepfelirat</a>
</div>

es akkor aszondja hogy: 


.keplista .kepfelirattal {

}
.keplista .kepfelirattal img {
}
.keplista .kepfelirattal span.caption{
}

Az, hogy a ket elem osszetartozik, jelzi az, hogy egyazon div-ben vannak, azaz azonos szovegszakasz (szovegdoboz) reszei. Nem igazan latom, miutan a tovabbiakban nincs egyenrangu, sorrendfuggetlen felsorolasod (a kep es a felirat nem egyenrangu, ala- nem pedig mellerendelo viszonyban allnak, lasd meg "sarga, kek, osszekent kepeket lattam almaimban - na, ez a sarga, kek, osszekent, ez az item; az hogy "egy kep, melynek eroforrasa 1.jpg,felirata pediglen..." ez nem ilyen mellerendelt szerkezet szerintem, a latin item szo nem ezt jelenti szamomra legalabbis)

itt van egy olyan szovegfolyam - span - aminek a tipusa - vagy osztalya - kepfelirat, azaz caption, es a vele egyutt levo img-vel egyazon szakaszba - divbe - tartoznak. Szerintem ez a logikus megoldas.

A bekezdes pedig - wikipediat idezve - "A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing or dealing with a particular point or idea", amennyiben ez a kep egysorosa, en azt hiszem, erre ez a definicio nem igaz.

Igen, egy div-ben lehet tobb p elem is. Szerintem viszont kepalairas - marmint ha tenyleg errol van szo, es nem pedig arrol, hogy egy keprol cikket irunk - az maximum egy bekezdes lehet -> paragraph -> p.

Itt alapvetoen eloszor a tartalom felepiteset kell reszletesebben elkepzelni, mit szeretnenk a kep alatt latni. Mert ha pl. a keprol egy cikk szol, az megint mas teszta. Szoval, mi a feladat?
--
Ki oda vagyik, hol szall a galamb, elszalasztja a kincset itt alant.

( Kiskübi v | 2008. 07. 23., sze – 22:23 )

Szerintem se kell <li> alatt <ul>; ha a kép és a szöveg egy <li> alatt vannak, akkor azok logikailag már összetartoznak. Úgymond közös ősük van a dokumentumfában.
A CSS nélküli megjelenést links-szel vagy hasonlóval érdemes tesztelni. Ez azért is jó, mert egyben képek nélkül is látod az oldalt. Az szerintem nem baj, ha egy mai weboldal CSS nélkül nem túl dizájnos, én jobban szoktam aggódni, ha nem elérhető, vagy ha a design miatt a HTML tele van túrva.