CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

herberth Juniormester

02. februar 2012 - 19:04 Der er 21 kommentarer og
1 løsning

Centrer tekst i tabel

Hej

Jeg har kigget lidt rundt og prøvet mange forskellige muligheder...men jeg kan sgu ikke finde ud af at lave en tabel hvor teksten/indholdet i de enkelte celler bliver vertikal centreret.

Herunder er min aktuelle udfordring.

Er der nogen som kan fortælle mig hvorledes jeg kan få indholdet af min tabel til at blive vertikal centret?

<table width="100%" border="0">
<tbody>
<tr align="left" valign="middle">
<td rowspan="2" width="200" height="80">
<div align="center">Tilmeld dig i dag.</div></td>
<td align="right" width="45" height="40"><img src="http://www.airpeep.com/wp-content/uploads/2012/01/icons-about-icons-lock2.png" alt="" width="25" height="27" align="middle" /></td>
<td width="180" height="40">Vi beskytter dig</td>
<td align="right" width="45" height="40"><img src="http://www.airpeep.com/wp-content/uploads/2012/01/icons-about-icons-puzzle2.png" alt="" width="26" height="24" align="middle" /></td>
<td valign="bottom" width="180" height="40">Nemt og ligetil</td>
<td rowspan="2" width="200" height="80"><img src="http://www.airpeep.com/wp-content/uploads/2012/01/knap-mere-info.jpg" alt="" width="97" height="39" /></td>
</tr>
<tr>
<td align="right" valign="middle" width="45" height="40"><img src="http://www.airpeep.com/wp-content/uploads/2012/01/icons-about-icons-money2.png" alt="" width="25" height="25" align="middle" /></td>
<td align="left" valign="middle" width="180" height="40">Alle får en fair deal</td>
<td align="right" valign="middle" width="45" height="40"><img src="http://www.airpeep.com/wp-content/uploads/2012/01/icons-about-icons-relations2.png" alt="" width="25" height="25" /></td>
<td align="left" valign="middle" width="180" height="40">Bliv anbefalet</td>
</tr>
</tbody>
</table>

Synes godt om

madslundholm Novice

02. februar 2012 - 19:32 #1

Du skal blot skrive:

align="center" i TD'tagget

//MadsLundholmDk

Synes godt om

keysersoze Ekspert

02. februar 2012 - 19:46 #2

Og det helt perfekte råd/svar ville være helt at omskrive koden så den nåede op på et tidssvarende niveau - der bør ikke benyttes inline attributter til design, det skal i stedet flyttes ud til CSS og så ville svaret være text-align: center;

Synes godt om

herberth Juniormester

02. februar 2012 - 20:23 #3

Tak for svar...men det virker ikke

Jeg indsætter det som du skriver - se nedenfor.. men det ændres ikke - se www.airpeep.com - tabellen står nederst og her kan du se at det ikke er vertikal centreret.

<table width="100%" border="0">
<tbody>
<tr align="left" valign="middle">
<td rowspan="2" width="200" height="80" align="center">
<div align="center">Tilmeld dig i dag.</div></td>
<td align="right" width="45" height="40"><img src="http://www.airpeep.com/wp-content/uploads/2012/01/icons-about-icons-lock2.png" alt="" width="25" height="27" align="middle" /></td>
<td width="180" height="40">Vi beskytter dig</td>
<td align="right" width="45" height="40"><img src="http://www.airpeep.com/wp-content/uploads/2012/01/icons-about-icons-puzzle2.png" alt="" width="26" height="24" align="middle" /></td>
<td valign="bottom" width="180" height="40">Nemt og ligetil</td>
<td rowspan="2" width="200" height="80"><img src="http://www.airpeep.com/wp-content/uploads/2012/01/knap-mere-info.jpg" alt="" width="97" height="39" /></td>
</tr>
<tr>
<td align="right" valign="middle" width="45" height="40"><img src="http://www.airpeep.com/wp-content/uploads/2012/01/icons-about-icons-money2.png" alt="" width="25" height="25" align="middle" /></td>
<td align="left" valign="middle" width="180" height="40">Alle får en fair deal</td>
<td align="right" valign="middle" width="45" height="40"><img src="http://www.airpeep.com/wp-content/uploads/2012/01/icons-about-icons-relations2.png" alt="" width="25" height="25" /></td>
<td align="left" valign="middle" width="180" height="40">Bliv anbefalet</td>
</tr>
</tbody>
</table>

Synes godt om

olebole Juniormester

02. februar 2012 - 20:48 #4

<ole>

Hvorfor ikke bare gøre, som jeg har vist dig her? Det fungerer jo fint

/mvh
</bole>

Synes godt om

olebole Juniormester

02. februar 2012 - 21:44 #5

Der er en hel del grunde til, at tingene ikke virker for dig:

1) Koden er fyldt med fejl - primært, men ikke kun - fordi, din kode ikke er skrevet i HTML5, som DTD'en ellers påstår.

2) Undlad at bruge HTML-attributter tilo visuelle formål (f.eks. valign). De overskrives af reglerne i evt. CSS-filer.

3) På linje 16 i style.css smadrer du en hel masse elementtyper med et af de dummeste modeluner på WWW (og jeg ved godt, koden ikke er din egen). Her 'nulstilles' en hel masse elementers default-CSS - og TD'er sættes helt generelt til vertical-align:baseline.

Desværre er det ofte vanskeligt at finde templates, skrevet af folk, der faktisk evner at kode. Den, du sidder med, er et klart eksempel på et stykke skidt amatørarbejde :o|

Synes godt om

herberth Juniormester

03. februar 2012 - 11:29 #6

Tak for det fine svar.

Grunden til at jeg ikke bruger din kode er at den ikke virker. Det kan man jo se nederst på siden - og det skyldes nok som du siger - ikke din kode, men at den bliver overskrevet af reglerne i CMs'et.

I stedet for at ændre i hoved cms'et - kan jeg så ændre i børnecms'et - kan jeg skrive noget heri som får den til at glemme fx vertical-align:baseline?

Folk advarer mod at rette direkte i hoved CMS'et da det bliver overskrevet ved opdateringer. Men et børne CMs er jo ikke til nogen nytte hvis indholdet alligvel bliver styret af hoved CMSet.

Under alle omstændighedr så virker det i hvert fald stadig ikke som man kan se af tabellen nederst på siden airpeep.com

Synes godt om

olebole Juniormester

03. februar 2012 - 15:39 #7

CSS er indrettet således, at enhver styleregel overskriver forudgående regler med samme selector. Desuden overskriver en regel med en mere specifik selector andre regler med mindre specifikke selectors. Det betyder, at:

.minklasse td {
// CSS kommandoer her
}

- f.eks overskriver denne regel:

td {
// CSS kommandoer her
}

- uanset, hvilken af de to der står først.

Derfor kan du sætte en ID på tabellen i din template. Det kan der ikke ske noget ved. F.eks:

Så kan du skrive sådan i din CSS-fil:

#moreInfoTable td {
vertical-align: middle;
}

Så burde det virke for dig.

Specielt, når der er tale om et system med templates, kan det være lidt svært at anvise en præcis fremgangsmåde, men jeg håber, forklaringen hjalp lidt. Ellers spørger du bare videre =)

Synes godt om

olebole Juniormester

03. februar 2012 - 15:48 #8

PS: En af grundene til, jeg bliver så irriteret over 'udvikleren' (læs: indvikleren) bag din template, er bl.a, at han sætter vertical-align:baseline på alle disse elementer:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td

Det er komplet tåbeligt - og læg f.eks. mærke til de to elementer sup og sub. Her tale om henholdsvis hævet og sænket tekst - f.eks. 2-tallet i forkortelsen for kvadratmeter. Det er jo himmelråbende ubegavet at sætte disse på den omkringliggende teksts grundlinje!

'Udvikleren' ville helt klart haft gavn af at tage badehætten ud af vakuumpakningen, inden han tog den på! *o)

Synes godt om

herberth Juniormester

03. februar 2012 - 16:14 #9

:-)

Tak Olebole. Jeg forsøger mig lidt frem igen.

Synes godt om

olebole Juniormester

03. februar 2012 - 16:30 #10

Ellers spørger du bare igen. Hmmmmm ... kom lige til at tænke på, om man mon kunne pendulere sig til en god løsning? You're the expert there! *D

Synes godt om

keysersoze Ekspert

03. februar 2012 - 18:41 #11

ikke at jeg skal forsvare det, men "udvikleren" er et relativt kendt og brugt cssreset stylesheet, der benyttes i mange applikationer.

Synes godt om

olebole Juniormester

03. februar 2012 - 18:53 #12

Nuvel, Sidney Lee og Amalie er jo også ganske kendte, men det siger ikke noget om, hvor begavede de er. Jeg ved også godt, det er et meget udbredt stylesheet, men skræmmende mange af de, der skriver webkode, har yderst begrænset indsigt i det, de laver. Så det siger heller ikke ret meget - andet end, at lemmingers og menneskers psykologi slet ikke er så forskellige endda *o)

Under alle omstændigheder er det pågældende stylesheet noget af det dummest 'tænkte', der har ramt WWW! =)

Synes godt om

herberth Juniormester

03. februar 2012 - 19:03 #13

Det virkede sørme! Stor tak.

Synes godt om

keysersoze Ekspert

03. februar 2012 - 19:30 #14

For en gangs skyld er jeg ikke helt enig - jeg vil ikke selv bruge det konsekvent, og gør jeg er det med lidt tilretninger, men det kan alligevel være med til at løse mange udfordringer for udviklere på alle niveauer. At det så stadig kræver basal viden om kode er jeg enig i :)

Synes godt om

olebole Juniormester

03. februar 2012 - 19:57 #15

@herberth: Selvtak. Fedt, det endelig lykkedes *o)

@keysersoze: Det er ikke uden grund, W3C har svedt spande over at udarbejde et så generelt brugbart default stylesheet, som tilfældet er. Det er ikke smart at ændre på det.

Der, hvor det kan give mening, er ved de egenskaber, som standarden ikke definerer værdier for, men at ændre alle mulige veldefinerede og fornuftige egenskaber er i min verden komplet hul i hovedet.

Et rigtig godt eksempel er ændringerne af de nævnte SUB og SUP elementer. Det er guddommelig dumt - grænsende til hysterisk komisk!

Masser af udviklere har ingen problemer med at få deres sider til at se rimelig ens ud i alle browsere uden den slags hacks. Det kan sagtens lade sig gøre - og helt uden problemer =)

Synes godt om

keysersoze Ekspert

03. februar 2012 - 20:15 #16

Men hvordan man end vender og drejer det er der stadig masser af elementer der opfører sig eller er visuelt differentieret på tværs af browsere og versioner - ingen tvivl om at det sagtens kan løses uden et cssreset, men for mange er det pludselig at skulle tage stilling til hvert enkelt element en fremragende ting.

Jeg er for så vidt ikke uenig med dig - jeg mener bare at man nogle gange bliver nødt til at opveje fordele og ulemper ved diverse former for hjælp, om det så er i form af et cssreset, jQuery eller noget helt tredje.

Synes godt om

keysersoze Ekspert

03. februar 2012 - 20:16 #17

... men det kræver selvfølgelig at man kender fordele og ulemper ved hvert muligt valg ;)

Synes godt om

olebole Juniormester

03. februar 2012 - 20:37 #18

"Jeg er for så vidt ikke uenig med dig - jeg mener bare at man nogle gange bliver nødt til at opveje fordele og ulemper ved diverse former for hjælp, om det så er i form af et cssreset, jQuery eller noget helt tredje." >> Naturligvis! Jeg bruger selv masser af den slags 'hjælpende hænder'. jQuery bruger dog kun, når jeg er tvunget til det. I stedet bruger jeg som oftest mit eget - og af og til YUI.

Nej, der er faktisk ikke ret mange elementer, der opfører sig væsentligt forskelligt på tværs af browsere. Hvis ens udseende nede på den enkelte pixel er et ufravigeligt krav, skal man dog nok finde noget andet at lave. Det er urealistisk og helt uden grund =)

Synes godt om

keysersoze Ekspert

03. februar 2012 - 21:38 #19

Det er de underligste ting der kan blive skrevet ind i en kravspecifikation ;)

Synes godt om

olebole Juniormester

03. februar 2012 - 21:45 #20

*LoL* I wrote that book! :D

Synes godt om

herberth Juniormester

22. juni 2012 - 03:04 #21

spørgsmål lukkes

Synes godt om

keysersoze Ekspert

23. juni 2012 - 10:02 #22

og svaret blev en Transitional løsning - suk...

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS