Søg
Avatar billede tipsen Nybegynder
24. maj 2003 - 19:47 Der er 35 kommentarer og
1 løsning

vertikal positionering af tekst i tabelcelle med css

Hej eksperter

Jeg har en tabel med 2 kolonner og 1 række hvor der i venstre kolonne bl.a. er et menusystem og i den højre er selve tekst-indholdet.

Jeg ønsker at placere noget tekst i den venstre kolonne, som altid vil placere sig nederst i cellen uafhængigt af hvor høj tabellen er! Ydermere skal det være en løsning der ikke er browser-specifik - altså en løsning der overholder CSS1 eller CSS2 standarden!

Mvh

tipsen
Avatar billede schaefner Juniormester
24. maj 2003 - 19:57 #1
style="vertical-align: bottom"
Avatar billede schaefner Juniormester
24. maj 2003 - 19:57 #2
http://blooberry.com/indexdot/css/properties/position/vertalign.htm
Avatar billede tipsen Nybegynder
24. maj 2003 - 20:07 #3
Problems...

CSS:
div.test {
    vertical-align: bottom;
}
HTML:
<div class="test">test</div>

Fungerer ikke...

Tror at teksten justeres i div-boksen, men selve div-boksen flyttes ikke...
Avatar billede schaefner Juniormester
24. maj 2003 - 20:16 #4
vertical-align: bottom skal vel sættes på den td hvor dit div er i?
Avatar billede tipsen Nybegynder
24. maj 2003 - 20:23 #5
Det er et problem fordi resten af elementerne i venstre tabelcelle skal placeres i toppen - det er kun et enkelt element der skal placeres nederst i cellen...
Avatar billede roenving Novice
24. maj 2003 - 21:50 #6
Jeg tror du er nødt til at dele den venstre celle op (eller rettere samle højre sammen) så du kan lave alignment på den ene, altså

table
tr
td /td
td rowspan=2 /td
/tr
tr
td valign=bottom /td
/tr
/table
Avatar billede tipsen Nybegynder
24. maj 2003 - 21:55 #7
Det er ikke en mulighed (vil give mig nogle andre problemer), men det må da også være muligt at løse i ren CSS!?

Altså at sige til et boks-element at det skal placere sig i bunden af det element som er dets parent-boks-element!
Avatar billede roenving Novice
24. maj 2003 - 22:06 #8
prøv:
bottom=0px

-- det står der i min bog !-)

Det lyder ret enkelt ...
Avatar billede roenving Novice
24. maj 2003 - 22:07 #9
og så bliver det jo, som style attribut i et element-tag:
style="bottom:0px"
Avatar billede tipsen Nybegynder
24. maj 2003 - 22:15 #10
nope - heller ikke held med det (havde også prøvet det...)
Avatar billede roenving Novice
24. maj 2003 - 22:23 #11
;-(
Avatar billede schaefner Juniormester
24. maj 2003 - 22:36 #12
hmm, det eneste jeg lige har kunnet komme på er dette:
http://disneyzone.dk/tipsen.html
Avatar billede roenving Novice
24. maj 2003 - 22:38 #13
Hvad sker der hvis du laver den relative ...
Avatar billede roenving Novice
24. maj 2003 - 22:39 #14
>>tipsen
-- schaefners eksempel gør jo præcis det, jeg skrev, hvordan prøvede du det ?-)
Avatar billede roenving Novice
24. maj 2003 - 22:42 #15
-- øv, den bliver skør, hvis den ikke er absolute ...
Avatar billede tipsen Nybegynder
24. maj 2003 - 22:58 #16
Det skal fungere på nedenstående kode-udsnit:

      <table class="middle">
        <tr>
            <td class="navigate">
              <div class="bla1">blalbalbla</div>
              <div class="bla2">blalbalbal</div>
              <div class="nedersticellen">Website by Me :-)</div>
            </td>
            <td class="content">
              <div>her skal være rigtigt meget tekst - så det fylder meget i højden!!</div>
            </td>
        </tr>
      </table>

-tror det er selvforklarende - ellers spørg!
Avatar billede roenving Novice
24. maj 2003 - 23:34 #17
Kan du ikke bruge schaefners:

.nederticellen{
  position:absolute;
  bottom:0px;
}
Avatar billede tipsen Nybegynder
24. maj 2003 - 23:50 #18
Så står det nederst på siden og ikke nederst i cellen.
Avatar billede schaefner Juniormester
24. maj 2003 - 23:51 #19
Har du sat position: relative på den td hvor det er i?
Avatar billede tipsen Nybegynder
25. maj 2003 - 00:14 #20
schaefner: Det har ingen effekt.
Avatar billede roenving Novice
25. maj 2003 - 00:26 #21
schaefners kode med en lille smule tilføjelse -- og den gør da hvad du vil ?-)


<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>

<body>

<table border="1" style="height: 100%"><tr>
<td style="position: relative; height: 100%"><div style="position: absolute; bottom: 0px; background-color: red">Et lille div i bunden</div>gggrrrrrrrrrrrrrrrrrrrrgggh</td>
<td>resten</td>
</tr></table>

</body>
</html>
Avatar billede roenving Novice
25. maj 2003 - 00:27 #22
-- og en ændring af tablens højde ændrede ikke på div'ens forhold til cellen ...
Avatar billede tipsen Nybegynder
25. maj 2003 - 09:44 #23
tabellens højde er styret af tekstindholdet - den er ikke fast.
Avatar billede roenving Novice
25. maj 2003 - 11:52 #24
-- og den der div kunne jeg ikke få til at ligge ved siden af, når cellen var fyldt med tekst :-(
Avatar billede tipsen Nybegynder
25. maj 2003 - 11:56 #25
"ved siden af" ?
Avatar billede roenving Novice
25. maj 2003 - 12:01 #26
Den lægger sig ovenpå teksten ...
Avatar billede tipsen Nybegynder
25. maj 2003 - 12:17 #27
det er jo kun højre tabelcelle der er fyldt med tekst - den venstre har kun noget menusystem øverst og derefter en del tom plads nedenunder - hvor den famøse tekst skal placeres!
Avatar billede tipsen Nybegynder
25. maj 2003 - 12:18 #28
Kunne godt tænke mig en kommentar fra olebole eller jakoba - det er jo ikke sikkert det overhovedet er muligt...
Avatar billede roenving Novice
25. maj 2003 - 12:18 #29
-- har du prøvet den ovenstående ...
Avatar billede tipsen Nybegynder
25. maj 2003 - 12:44 #30
roenwing: Når jeg fjernede height-style for table-elementet fungerede det rent faktisk i IE, men hoppede i havet i både Opera og Mozilla - i sidstnævnte havde det også en mystisk effekt på menusystemet, som jeg ikke lige kunne forstå...
Avatar billede roenving Novice
25. maj 2003 - 12:46 #31
Ja, jeg har ikke prøvet den i opera og mozilla, men det lød, som om du slet ikke kunne få den til at fungere :-(
Avatar billede tipsen Nybegynder
25. maj 2003 - 12:54 #32
Jeg testede ikke så meget - startede bare med at se, at den var baseret på en tabel der fyldte 100% i højden - og skrev derfor "tabellens højde er styret af tekstindholdet - den er ikke fast." - uden at rette koden til - men hvis det ikke fungerer i Mozilla har jeg på fornemmelsen, at det ikke er 100% standard...
Avatar billede roenving Novice
25. maj 2003 - 12:58 #33
-- det har du nok ret i ...
Avatar billede tipsen Nybegynder
21. februar 2004 - 23:43 #34
schaefner+roenving: Smid svar, så kan I dele som tak for indsatsen.
Avatar billede roenving Novice
22. februar 2004 - 05:04 #35
Ja, bedre sent end aldrig !-)

-- et spørgsmål fra min css-barndom ...

-- men lad os bare få lukket her også !o]

'-)
Avatar billede roenving Novice
24. februar 2004 - 01:16 #36
-- og tak for points ;~}
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 14:10 Komme ind på : YouSeeMusic" Af Ikke-ekspert i Musik & videoafspillere
I går 13:27 Send/modtag i Outlook 2024 Af ErikHg i E-mail programmer
10/0915:34 Installer alarmlyd på Samsung Galaxy XCover 7 Pro Af ErikHg i Mobiltelefoner
08/0913:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
White papers
Flere white papers »