Avatar billede advancedweb Nybegynder
29. maj 2005 - 15:23 Der er 4 kommentarer

Border og padding skal også fraregnes selvom div's width i %

Efter at jeg er gået fra at bruges tables til div fandt jeg hurtigt ud af at den tæller f.eks. border, padding, margin osv. med i bredden/(og højden). Fint nok, det var jo bare lige noget simpel matematik, så i starten gik det fint, indtil jeg skulle bruge %

Det der sker er at jeg har en main-div på width: 580px;. På selve siden/indholdet er der så nogle boksen med width: 100% (af main-diven) og ikke 580px; fordi hvis jeg skifter bredde på main-diven skal jeg skifte højde i alle siderne.

Men selvom det er procent så gjorde jeg den opdagelse at den så åbenbart siger width: 100% + 1px (border) + 5px (padding) osv.
Så bliver det jo, hvis vi erstatter 100% med 580 som det gør når det bliver parset bliver det så 586px, men det skal jo kun være 580px, så "cellen" bliver breddere.

Denne side er nok det der illustrerer det bedst, hvis man kigger i højre side af main'en kan man se det ikke er lige.

http://www.advancedweb.dk/status/

Hvordan klarer jeg den?
Avatar billede olebole Juniormester
29. maj 2005 - 18:15 #1
<ole>

Laver dit design om, så det kan løses med tilgængelige teknikker. Du kan ikke blande procent- og pixel-værdier i beregninger, så du må lave et design, hvor du undgår det  :)

/mvh
</bole>
Avatar billede advancedweb Nybegynder
29. maj 2005 - 18:24 #2
Okay... nu er jeg så så heldig at main/indholdet er generet med min hjemmelavede "html-generator"... der har jeg jo så bare tænkt mig at definere en variabel med main-bredden og så er det bare at lave en funktion der trækker alle padding, border osv. fra og så give den den width :p


Men kunne godt tænke mig at vide hvorfor man egentlig har lavet det på den måde at border, padding osv. bliver lagt oveni?... hvad er fordelen ved det?
Kom bare til at spekulere på det :).. kan ikke selv se nogen "praktisk" forklaring på det...
Avatar billede roenving Novice
30. maj 2005 - 04:14 #3
Ideen, hrmm ...

Men i hvert fald er det lidt praktisk at den fulde størrelse af et element bygges på indholdets størrelse plus det, som er rundt om !o]

Se f.eks. http://www.w3.org/TR/REC-CSS2/box.html

-- så størrelsen af en boks beregnes som (her bredden !-)

margin-left + border-left-width + padding-left + boks-bredde + padding-right + border-right-width + margin-right
Avatar billede olebole Juniormester
30. maj 2005 - 04:35 #4
Det er rart, en organisation holder fast i, at i dét lillebitte hjørne af WWW er det stadig indholdet, der er det væsentlige ... skrev den gamle, sure mand  :D

HTML på WWW begyndte i 1992 som et simpelt tabel-/paragraf-værk, man kunne opstille videnskabelige måleresultater i - og dele dem med andre. De egenskaber, der gør HTML velegnet til den slags, hænger stadig ved, selvom teknologien nu bliver (mis)brugt til alt mulig andet  :)
Et andet eksempel er den måde elementer udvider sig (og ikke gør det), i takt med indholdets størrelse ... det giver også jævnligt anledning til spørgsmål på E.

Det er lidt som at købe sko ... 'æskerne' må indrette sig efter indholdet. Det støder så somme tider mod ens design-ønsker ... that's life  :)
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



IT-JOB

SporingsGruppen ApS

Frontend-udvikler

Udviklings- og Forenklingsstyrelsen

RTE til Data & Analytics