Søg
Avatar billede krogstrup Nybegynder
12. november 2004 - 11:56 Der er 9 kommentarer og
1 løsning

Problemer med DIV som har 100% width og 10px padding i Mozilla

Jeg har de sidste par dage belært mig selv om boxmodellen og hvorledes denne bliver fortolket anderledes af IE i forhold til andre browsere der fortolker udfra W3´s retningslinier.

Men men - når jeg nu accepterer at border og padding er noget der ligges TIL den angive width, synes jeg at følgende giver mig problemer.

Jeg ønsker ganske simpelt at kreere en DIV som er 100% i bredden men som har en padding på 10px således at mit indhold ikke ligger klods op ad min DIV border.

Men skriver jeg følgende:

<div style="width:100%; border:1px solid black; padding:10px;">indhold</div>

....vil Mozilla jo forsøge at vise en DIV der er bredere end 100% eller hvad ?

Hvorledes gøres dette smartest og hvad skal man i øvrigt huske på når man arbejder med divs med width og padding og border i forhold til Mozilla´s tolkning af disse parametre ?

Findes der nogle generelle smarte måder at skrive divs på - f.eks. at man altid benytter 2 divs til indhold, hvor første div f.eks. angiver padding og det nestede div angiver noget andet.....?

Jeg er lidt på bar bund her..... ?!?

:-)

referencer:
ttp://www.webdesign101.dk/xhtml/css/hacks/hack_1.php
http://www.webdesign101.dk/xhtml/css/hacks/hack_7.php
Avatar billede krogstrup Nybegynder
12. november 2004 - 11:56 #1
reference link skulle selvfølgelig have været:
http://www.webdesign101.dk/xhtml/css/hacks/hack_1.php
Avatar billede schaefner Juniormester
12. november 2004 - 12:04 #2
Mozilla lægger så netop de 10px til i hver ende. Derfor bliver kassen 100% plus 20px.

div#box {
  width: 100%;
  border: 1px solid #000;
}
div#box div {
  padding: 10px;
}

<div id="box">
  <div>Indhold</div>
</div>

Er en måde at løse det på.
Avatar billede schaefner Juniormester
12. november 2004 - 12:08 #3
Men det burde være nok at skrive:

div#box {
  padding: 10px;
  border: 1px solid #000;
}

<div id="box">Indhold</div>

En div er som standard 100% i bredden da det er et block-element.
Avatar billede krogstrup Nybegynder
12. november 2004 - 12:11 #4
ja, den sidste løsning du nævner virker fint nok.

Men så snart man ligger et nyt element indeni denne div hvor man specificerer bredden til 100% går det galt.

Hvis jeg f.eks. smider en TABLE med width=100% i DIV´en får jeg atter problemet med at min DIV nu vises bredere end 100%.

Jeg vil gerne have mulighed for at smide elementer indeni min div hvor bredden sættes til 100% uden at dette giver problemer.
Avatar billede krogstrup Nybegynder
12. november 2004 - 12:13 #5
en anden ting (dog en bagatel)

border lægges vel også til bredden, ikke ?
dvs at det første eksempel du skriver rent faktisk vil blive udført hvor DIV er 100% + 2 pixels ?

Ved godt det måske er flueknepperi, men det irriterer mig hvis jeg ikke 100% kan styre hvorledes mine DIV´er bliver vist helt ned i eksakt pixel niveau.
Avatar billede olebole Juniormester
12. november 2004 - 13:07 #6
<ole>

Undlad at sætte bredden på div'et til 100%. Et div er et block-level element og har derfor fra fødslen en bredde på 100% af det omkransende element.

<div style="border:2px solid red;padding:30px;">
<table style="width:100%" cellspacing="0" cellpadding="0" border="2">
<tr>
    <td>jkjjkjlkjlkj</td>
    <td>jkjjkjlkjlkj</td>
    <td>jkjjkjlkjlkj</td>
    <td>jkjjkjlkjlkj</td>
</tr>
<tr>
    <td>jkjjkjlkjlkj</td>
    <td>jkjjkjlkjlkj</td>
    <td>jkjjkjlkjlkj</td>
    <td>jkjjkjlkjlkj</td>
</tr>
</table>
</div>

Fungerer fint ... eller misforstår jeg dig, Krogstrup?

/mvh
</bole>
Avatar billede krogstrup Nybegynder
12. november 2004 - 13:25 #7
I har begge ret. Metoden med at undlade at specificere width:100% virker fint i både Mozilla og IE, når man vel at mærke husker at angive doctype med DTD fil !!!

Hvis man ikke gør det, vises det ikke korrekt i IE.

Tak til jer begge :-)

Smider du et svar schaefner ?
Avatar billede olebole Juniormester
12. november 2004 - 14:10 #8
... en fornøjelse at følge din stædige kamp henmod forståelsen og den gode kode, Krogen. Keep up the good work  ;o)
Avatar billede krogstrup Nybegynder
12. november 2004 - 14:51 #9
hehe - takker :-)
Avatar billede schaefner Juniormester
15. november 2004 - 15:55 #10
Jamen, så vil jeg da lægge et svar.
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 16:51 Links m.m. virker ikke Af Kjeld Aage Christiansen i PC
I går 11:04 Outlookproblem Af g91 i E-mail programmer
I går 09:21 Firefox - Bøvl med idelig genbekræftelse af identitet Af andershl i Browsere
17/0815:14 Sætte billeder ind i google sheets ark ud fra elev nummer Af lurup i Excel
16/0822:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
White papers
Flere white papers »