21. august 2003 - 11:35Der er
46 kommentarer og 2 løsninger
Positionering nederst til højre i tabelcelle
Hej eksperter
Jeg har følgende kodestump:
<table> <tr> <td>18-08-2003</td> <td>blalbalbla bla bla bla klasd fl ka slkasd flkas dflaks fd [Læs mere]</td> </tr> </table>
Jeg vil gerne have CSS-kode der kan få teksten [Læs mere] til at flytte ud til højre i tabelcellen. Hvis der ikke er plads ude til højre på samme linie, skal teksten i stedet flytte ned på næste linie, men stadig ude til højre i cellen.
Jeg har prøvet noget i retning af at pakke det ind i en div-tag og højre-aligne det, men det bevirker blot at det altid kommer ned på næste linie - what to do?
Indholdet kommer fra en db og jeg har gjort således at [Læs mere] teksten afhænger af, hvorvidt indholdet er blevet forkortet eller ej - det er ikke problemet!
Problemet er blot at få flyttet teksten "Læs mere" ud til højre i den omkrandsende boks (tabelcelle, div eller andet) - vel at mærke uden at tilføje en unødvendig ekstra linie - dvs. ud til højre med den tekst - blot på samme linie som "blalbalba" teksten - og "blablalba" teksten kan fylde adskillige linier!
<table> <tr> <td colspan="2">18-08-2003</td> <td>blalbalbla bla bla bla klasd fl ka slkasd flkas dflaks fd</td> <td align="right">[Læs mere]</td> </tr> </table>
-dette er tæt på - vi er ude til højre og der tages hensyn til den øvrige tekst, men "Læs mere" placeres altid øverst i cellen, hvor jeg gerne vil have det nederst i cellen!
Kan ikke få den ned i bunden, men det er vel bare et spørgsmål om at prøve sig frem...
Dette er mit bedste bud: <span style="float:right; vertical-align:bottom;">[Læs mere]</span><span>En tekst for at vise hvordan det virker. Så det er vel nærmest en fyldtekst...</span>
alternativt kan man aflæse størrelsen på den div den tilhører, og så gøre <span style="float:right; vertical-align:bottom;"> lige så høj via height: **px
Jeg har forsøgt og prøvet og gennemgået en hver css-egenskab jeg kunne komme i tanke om, og der er bare ikke noget at gøre... Enten kommer det ene til at køre, ellers gør det andet!!
Hvis du VIL have det på den måde skal der noget mere kode til, og så må du bruge position i din css, hvilket også fungerer genialt!!
Nå, men jeg nåede her til:
<html> <body> <table style="border: 3px solid black; border-collapse: collapse"> <tr> <td style="border: 1px solid black">18-08-2003</td> <td style="border: 1px solid black; width: 120px;">blalbalbla bla bla bla klasd fl ka slkasd flkas dflaks fd <span style="white-space: nowrap;">[Læs mere]</span></td> </tr> </table> </body> </html>
Eneste forskel er at jeg gør brug af "white-space: nowrap", hvilket burde forklare sig selv, men hvordan fanden du lige får den højrestillet, den er sværere...
Hvis du ved PRÆCIST hvor den ligger, kan du bruge position: relative (måske position: absolute) og så right: ??px, hvilket jeg tror kunne gøre det, men som sagt: Hvis jeg skal løse det skal jeg bruge mere kode så jeg ved præcist hvor [Læs mig] ligger henne på siden...
Den er tricky :) Jeg prøvede også en masse kombinationer med div og span og float hid og her, men intet hjalp. Anyway jeg kom frem til http://www.justrandb.dk/div.htm Måske ikke en helt igennem ren css-løsning, men hvis jeg har forstået dit problem rigtigt, så tror jeg det måske er løst.
hermandsen: Det essentielle er højrestillingen af "Læs mere" - og min sideopbygning er ikke i fast størrelse - den tilpasser sig størrelsen af browservinduet, så jeg har ingen chance for at kende en pixel-placering af teksten "Læs mere".
Jeg har overvejet om det måske er muligt at opnå effekten ved kun at bruge div og span-tags - altså helt skrotte tabellen?
Jeg er faktisk overrasket over at det er så svært/umuligt, at lave - det virker jo umiddelbart som en temmelig simpel opgave!
Det er klart det sjoveste at lave siden vha. div/span og så en hulens masse css!!
Hvis din sides størrelse er angivet i procent er det heller ikke noget problem at bruge position, eftersom du bare kan skrive right: ??%, men jeg ved ikke hvordan du har opbygget din side...
Jeg vil lige forske lidt mere uden din table, bare for at se om der måske er andre metoder... Begynder faktisk at tro at det er "umuligt"!
hermandsen: Det virker som om der stadig bliver gjort plads til en ekstra linie - den bliver blot ikke benyttet - derudover er datoen blevet smidt ovenpå feltet nu i stedet for ude til venstre - men Læs mere er ganske korrekt blev rykket op på samme linie som den øvrige tekst - det er så lidt ærgeligt, at det også vil blive stående selvom der rent faktisk ikke er plads...
exp, 7th og hermandsen: Drop et svar - problemet er godt nok ikke løst ordentligt - men der har været mange "tæt-på" løsninger - så I fortjener som minimum lidt for indsatsen :-)
Måske du kunne løse det med lidt JavaScript... Jeg skal ikke kunne sige det, for jeg fatter ikke så meget JavaScript, men prøv!! Måske du bedre kunne få information om hvor meget plads du har tilbage at skrive [Læs mere] på og så indsætte den ekstra linie hvis det var nødvendigt... Men som sagt, ved ikke om det er muligt!!
Jeg vil ikke løse det med client-side scripting - hvis det ikke kan løses med CSS, må det bare se mindre godt ud - synes bare det ville være logisk, hvis man kunne placere en boks relativt til den parent-boks som den befinder sig i!
Altså bruge noget i retning af
position: relative; right: 0; bottom: 0;
- men det er lagt i bero i første omgang - jeg siger hvertfald mange tak for jeres forslag og ideer - det kan være vi finder en løsning med CSS3, IE10 (=IE2010), Mozilla 2.379 og Opera 12 :-)
...hvad så hvis man lader den anden tekst være indeholdt i en span, hvor der er en right-padding på x em - altså måler hvor lang den anden tekst ("Læs mere") ca. er!
<body> <table> <tr> <td>18-08-2003</td> <td>blalbalbla bla bla bla klasd fl <br>ka slkasd flkas dflaks fd<br>blalbalbla bla bla bla klasd fl <br>ka slkasd flkas dflaks fd<br>blalbalbla bla bla bla klasd fl <br>ka slkasd flkas dflaks fd<br>blalbalbla bla bla bla klasd fl <br>ka slkasd flkas dflaks fd<br> <span class="hoejre">[Læs mere]</span></td> </tr> </table>
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.
