Avatar billede oergaard Nybegynder
19. maj 2008 - 11:35 Der er 10 kommentarer og
1 løsning

Padding og firefox

Jeg er ved at lave en side, hvor jeg ønsker at inddele min side i tre div-bokse.

1. En logoboks øverst på siden
2. En menuboks i venstre side
3. En indholdsboks på resten af skærmen

Min style er som følgende:
.logo {
    position: absolute;
    width: 100%;
    height: 120px }

.menu {
    position: absolute;
    width: 150px;
    height: 100% }

.content {
    position: absolute;

    margin-left: 155px;
    margin-top: 125px;
    height: 100%;
    width: 100% }

Men her gøres <div class="content"></div> blot 155 px bredere og 125 px højere.

Hvad gør jeg forkert?
Avatar billede w13 Novice
19. maj 2008 - 11:36 #1
Kan vi se et link?
Avatar billede aners Nybegynder
19. maj 2008 - 11:43 #2
Kom med et link til siden
Avatar billede oergaard Nybegynder
19. maj 2008 - 11:48 #3
Avatar billede w13 Novice
19. maj 2008 - 11:54 #4
I dit eksempel her skriver du:
    margin-left: 155px;
    margin-top: 125px;
men i koden står der:
    padding-left: 155px;
    padding-top: 125px;
Det var derfor, jeg ikke lige forstod det.
Avatar billede w13 Novice
19. maj 2008 - 11:59 #5
Du kan få det til at virke med:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>DIV-BOKS TEST</title>
        <meta http-equiv="pragma" content="no-cache">
       
        <style type="text/css">
            html,body {
                margin: 0 }
            .logo {
                position: absolute;
                width: 100%;
                height: 120px;
                padding: 0;
                background: red }
            .menu {
                position: absolute;
                width: 150px;
                height: 100%;
                padding: 0;
                background: blue }
            .content {
                position: absolute;
                padding-left: 0;
                padding-top: 0;
                height: 100%;
                width: 100%;
                background: yellow }
        </style>       
    </head>
   
    <body>
        <div class="content">
            <div style="padding-left:155px;padding-top:125px">Content</div>
        </div>

        <div class="menu">Menu</div>
        <div class="logo">Logo</div>       
    </body>
</html>

Bemærk at jeg har måtte lægge en div ind i content-div'en.
Denne div har så padding'en.
Avatar billede w13 Novice
19. maj 2008 - 11:59 #6
Padding tolkes nemlig som en forøgelse til en div's højde og bredde.
Avatar billede oergaard Nybegynder
19. maj 2008 - 12:34 #7
Kommentar: w13
19/05-2008 11:54:42> jeg har prøvet med begge dele, hvorfor denne lille fejl har sneget sig ind :-)
Avatar billede oergaard Nybegynder
19. maj 2008 - 12:36 #8
Kommentar: w13
19/05-2008 11:59:43> Hvordan tolkes margin så?
Avatar billede w13 Novice
19. maj 2008 - 12:41 #9
Uden at det lægges til højde og bredde, ville jeg da mene.
Har du prøvet min kode?
Avatar billede oergaard Nybegynder
19. maj 2008 - 12:43 #10
Ja jeg har prøvet din kode og den virker perfekt og skulle også til at acceptere dit svar, men forstår bare ikke helt padding/margin - idet de giver samme fejl. :-)

Men pyt med det, mit oprindelige problem blev løst, tak for hjælpen. :-)
Avatar billede w13 Novice
19. maj 2008 - 12:46 #11
Tak for point! :)
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