Avatar billede thundergod Nybegynder
03. august 2004 - 13:08 Der er 11 kommentarer og
1 løsning

Vertikal alignment af element i tabelcelle

Jeg har en JSP side, der i en tabel viser henholdsvis et billede og en tekst. Begge elementer udgør samlet set et link i en menu.
Billedet skal være til venstre for teksten og være vertikalt centreret i den celle den indgår i.
I samme celle skal der også være et tekstelement. Dette tekstelement er nogle gange længere end den tildelte celle, hvorefter teksten bliver ombrudt. Ombrydningen er ikke et problem. Problemet er at jeg gerne vil have en effekt, hvor billedet står fast vertikalt centreret til venstre, og lidt til højre kommer teksten så, ombrudt eller ikke ombrudt.

Link, billede og tekst er indsat ved hjælp af Struts, men det burde ikke påvirke løsningen.
Herunder kan ses et forsøg på at illustrere problemet..

Det ønskede resultat:
____________    ____________
|  En tekst |  |          |
|@ der er  |  |@ En tekst |
|__ombrudt__|  |___________|

Det uønskede resultat:
____________    ____________
|O En tekst |  |          |
|der er    |  |@ En tekst |
|ombrudt____|  |___________|

Jeg går ud fra at jeg kan ordne det ved at pakke billedet ind i <div class="billede"></div>.
Så det jeg spørger om er følgende:

Hvad skal jeg skrive i min .css fil, for at få den ønskede effekt?

Kode:
...
<html:link  page="/visenside"
          paramId="screen"
          paramName="menu"
          paramScope="page">
  <td class="menuimg">
    <html:img  page="/imgs/enside.gif"
              border="0"
              align="middle"
              width="15"
              height="12"
              altKey="menu.enside.label"/>
  </td>
  <td class="menuenside">
    <bean:message key="menu.link.category"/>
  </td>
</html:link>
...

Spørgsmålet er tidligere stillet i Programmering>JSP (Struts): http://www.eksperten.dk/spm/525784
Se linket for uddybende info.
Avatar billede thundergod Nybegynder
03. august 2004 - 13:12 #1
Hold da op for en dårlig ide at illustrere med tekst..
Nå, men jeg håber i forstår alligevel, ellers kopier teksten ind i notepad..
Avatar billede dcheng Novice
03. august 2004 - 13:45 #2
Hvorfro i alverden laver du ikke bare en celle mere når tekst og billede ikke skal over skrive hinanden?
Avatar billede thundergod Nybegynder
03. august 2004 - 14:07 #3
Sagen er at jeg gerne vil have at både billedet og teksten (samt gerne hele cellen) skal fungere som et link.
Jeg bruger Struts, og dermed skriver jeg <html:link> og ikke <a href="">.
Problemet er at jeg ikke kan indsætte en <td> i et <html:link>, uden at den brokker sig i visse browsere.
Så derfor kunne jeg godt tænke mig at det var i samme celle, men jeg er nok nødt til at bide i det sure æble (gentagen kode) da jeg ikke har fundet en løsning endnu.
Med mindre du altså er css haj, og kan se løsningen?
Avatar billede detverdner Nybegynder
04. august 2004 - 16:53 #4
Prøv at se dette eksempel:
http://www.compulations.dk/test/vertalign/

Ideen er at bruge et baggrundsbillede på tabellens celler og så skyde teksten tilsvarende mod højre. Her er de vigtige properties:

background: url("my_icon.gif") transparent left center no-repeat;
padding-left: 20px;
vertical-align: middle;

Er det sådan noget i dén stil?
Avatar billede thundergod Nybegynder
04. august 2004 - 20:20 #5
Det er smukt 'detverdner'.
Men jeg har i aften kun adgang til en MSIE, jeg kigger på det igen i morgen fra NS og Safari.
Jeg har nemlig tidligere haft problemer med at lade hele <td> agere link.
Det virker kun i MSIE, og slet ikke i NS7.1 og specielt ikke på MAC.

Smid et svar, så får du point hvis det virker..
Kunne godt bruge lidt info om hvordan javascript delen virker, med henblik på at lave linket..
Avatar billede detverdner Nybegynder
04. august 2004 - 22:06 #6
Jeg har lavet det i moz 1.5, så Netscape (og Firefox) skulle være ok. Og Safari bygger vist på moz, så mon ikke...

Javascriptet er egentlig simpelt: på eventet onload henter jeg alle TD-elementer og tildeler dem en funktion på click-eventet (svarer til at skrive 'onclick="..."' i alle TD'er - men jeg var doven ;). I mit eksempel laver funktionen en alert, men du kan tildele dem forskellige URL'er i stedet - fx ved at give hver TD et id. Jeg har skrevet et par kommentarer i script-delen.

Fælles for både CSS og JS er, at du vil få problemer i ældre browsere, tekstbaserede osv. Så det er dine krav til brugervenlighed og tilgængelighed der afgør, om løsningen kan bruges.

Du kan evt. lave en "dobbelt" løsning: smid et A-tag med URL rundt om teksten - så sikrer du tilgængeligheden. (Men aldrig A-tags rundt om TD'er - det er ikke valid HTML, og så vil de gode browsere ikke være med.)

Jeg laver et par eksempler, hvis du har brug for det.
Avatar billede thundergod Nybegynder
05. august 2004 - 08:24 #7
Jeg har prøvet med <html:link> tag rund om <td>, og det virkede sjovt nok heller ikke i andet end MSIE.. :-)
Jeg er på arbejde nu, så jeg kigger lige på det i de browsere jeg vælger at understøtte.
Avatar billede thundergod Nybegynder
05. august 2004 - 09:07 #8
OK Har kigget og det virker jo som du siger.
Problemet er at jeg er nødt til at anvende Struts, så jeg kan ikke bare skrive løs med onclick i hver <td>. Jeg er nødt til at sende de parametre med til struts kaldet som der står i <html:link> tagget.. Se her:
----Kode start----
<td class="menuimg">
  <html:link  page="/execute/noget"
              paramId="screen"
              paramName="menu"
              paramScope="page"
              titleKey="menu.img.noget.label">
    <html:img  page="/imgs/noget.gif"
              border="0"
              align="middle"
              width="16"
              height="11"
              altKey="menu.img.noget.label"/>
  </html:link>
</td>
<td class="menulinktilnoget">
  <html:link  page="/execute/noget"
              paramId="screen"
              paramName="menu"
              paramScope="page"
              titleKey="menu.img.noget.label">
    <bean:message key="menu.link.noget"/>
  </html:link>
</td>
----Kode slut----
For at bruge Struts ordentligt, er jeg nødt til at sende paramId, paramName, paramScope og titleKey med.

Men jeg kan da i hvert fald bruge noget af din løsning med at lægge billedet ind som baggrund. Desværre virker det jo så ikke som link..

Når jeg prøver at indsætte mit billede (transparent gif med hvidt ikon) så kommer det ikke frem.. Mystisk.. Har du en idé til hvorfor?
Avatar billede thundergod Nybegynder
05. august 2004 - 10:24 #9
Hvis der er nogen der har en idé til hvordan jeg kan få hele <td> til at fungere som et link, uden at fjerne struts-delen, så er jeg meget modtagelig for forslag.

Tak for hjælpen indtil videre 'detverdner'..
Avatar billede detverdner Nybegynder
05. august 2004 - 10:37 #10
Jeg har ikke arbejdet med struts før, så her skal du nok tilbage til din "gamle" tråd. Men som udgangspunkt må du kunne hente din URL frem og levere den til et javascript.

Jeg har tilpasset koden, så der nu er et A-tag i cellerne. Javascriptet tager href'en og bruger den, når du klikker på TD'en. På den måde bliver billedet også klikbart - og de gamle browsere kan stadig bruge linket (for det er vel et link, der kommer ud af din kode?)

Tak for point'ene :)
Avatar billede roenving Novice
05. august 2004 - 13:15 #11
-- kan du ikke bare selv skrive en event ind i cellen ?-)

<td onclick="location.href='http://www.etNytDomaine.dk'">
Avatar billede detverdner Nybegynder
05. august 2004 - 14:26 #12
Det kunne man selvfølgelig godt. Ulempen ved min metode er, at den udelukker BOM-kompatible browsere (fx NS4.x). De må nøjes med linket.

Fordelen er til gengæld, at du ikke skal skrive URL'en mere end ét sted: nemlig i A-tag'et. Og din HTML forbliver mere ren. Du kan også nemt ændre og tilføje til TD'ernes events (fx arbejde dynamisk med styles onmouseover eller tilføje onkeypress til glæde for tastaturbrugere).

Nå, måske bør det flyttes ud i den generelle DHTML-del - det er mest JS efterhånden :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester