Avatar billede langkiller Nybegynder
31. august 2012 - 00:34 Der er 6 kommentarer og
1 løsning

vertical-align bottom virker ikke

har prøvet at få indholdet i en div til at stå i bunden, men der sker ikke rigtig så meget.. hvilket jeg synes er meget mærkeligt da jeg ved jeg har gjort det flere gange før. Her er koden:

<div style="vertical-align:bottom; height: 80px; float:right; border: 1px solid;">bum bum</div>

nogen ide om hvad der er galt? teksten bliver bare ved med at stå i toppen
Avatar billede DeeDawg Nybegynder
31. august 2012 - 05:11 #1
"hvilket jeg synes er meget mærkeligt da jeg ved jeg har gjort det flere gange før" - Ja, det har da ikke været i denne sammenhæng. Er du vant til at arbejde med tables? Fordi, gør du således

<div style="border: 1px solid;display: table-cell;height: 80px;vertical-align: bottom;">bum bum</div>

vil du se at du får det ønskede resultat. Dog kan jeg kun kraftigt fraråde denne metode. Derimod vil det være bedre at bruge position. Fx:

<div style="border: 1px solid;height: 80px;position: relative;"><p style="position: absolute;bottom: 0;">bum bum</p></div>

Dog burde du, fra starten, designe ud fra de muligheder du har, istedet for at halte dig frem til lappeløsninger som ovenstående. :)
Avatar billede olebole Juniormester
31. august 2012 - 15:04 #2
<ole>

I det tilfælde at noget tekst skal ligge i bunden af et element - og det er et helt naturligt og legitimt designkrav - er der ikke andre løsninger. Det kan næppe kaldes en 'lappeløsning'  =)

Generelt giver jeg dig ret i, at man bør designe udfra de muligheder, teknologien tilbyder - og det gør man jo faktisk her  =)

/mvh
</bole>
Avatar billede DeeDawg Nybegynder
31. august 2012 - 17:34 #3
Faktisk, var det en reference til den øverste stump kode, men fik den vist ikke lige omformuleret da jeg flyttede på afsnittet. ;)
Avatar billede langkiller Nybegynder
31. august 2012 - 20:51 #4
@DeeDawg
har ikke arbejdet med divs i et stykke tid så blander tingene lidt sammen :)

Hvorfor er den første kode bedre end den anden? altså af dem du skrev i #1
Avatar billede DeeDawg Nybegynder
05. september 2012 - 17:06 #5
Jeg beklager mit lidt sene svar, men jeg er i øjeblikket travlt optaget af et ret omfattende projekt, så jeg har desværre ikke tid til at tjekke Eksperten hver dag.

Men for at opsumere:

<div style="border: 1px solid;display: table-cell;height: 80px;vertical-align: bottom;">bum bum</div>

Ovenstående bør ikke benyttes, selvom det virker, fordi det er en lappeløsning. Tables er ikke beregnet til brug i layout og har aldrig været det, førhen havde vi bare ikke andre muligheder. Det har vi nu og derfor giver det ingen mening at falde tilbage på gamle vaner, og prøve at samle det nye og gamle i et. Derfor vil du også være i din gode ret til at fortælle professionelle, som bruger denne løsning, at de ikke har forstand på det de har med at gøre.

<div style="border: 1px solid;height: 80px;position: relative;"><p style="position: absolute;bottom: 0;">bum bum</p></div>

Denne løsning vil være at foretrække. Hvorfor? Helt simpelt fordi du her benytter den teknologi du har til rådighed, og derved bruger elementerne til det de er beregnet til. :)
Avatar billede langkiller Nybegynder
05. september 2012 - 23:12 #6
okay super tak for forklaringen.
Hvis du vil have points må du lige lægge et svar :)
Avatar billede DeeDawg Nybegynder
06. september 2012 - 07:02 #7
Super. :)
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