Avatar billede htx98i17 Professor
07. april 2010 - 17:19 Der er 8 kommentarer og
1 løsning

hvorfor denne position?

kan nogen forklare mig hvorfor position i class A4 og billede_lag skal være henholdsvis relative og absolute for at få det indre lag til at holde sig inden for det ydre lag og være højre centreret? med egne ord og ikke dokumention :-) tak


.A4 {
    background-color    :    #FFFFFF;
    border-left                :    1px SOLID #b0d4f7;
    border-right            :    1px SOLID #b0d4f7;
    border-bottom            :    1px SOLID #b0d4f7;
    font-family                : Arial;
    font-size                    : 10pt;
    min-height                : 600px;
    margin-left                : auto;
    margin-right            : auto;
    padding                        : 8px;
    position                    :    relative;
    text-align                : left;
    vertical-align        : top;
    width                            : 960px;
}

.billede {
    width                            :    200px;
   
}

.billede_lag {
    border                        : 5px dotted black;
    position                    :    absolute;
    right                            :    0px;
    width                            :    200px;
}

html,body {
    background-color    :    #ececec;
    height                        : 100%;
    margin                        : 0px;
    padding                        : 0px;
    width                            :    100%;
}

.bund {
    border                        : 2px solid #b0d4f7;
    color                            : red;
    font-family                : Arial;
    font-size                    : 8pt;
    margin                        : auto;
    padding                        : 8px;
    text-align                : center;
    width                            : 960px;   
}

.indreskygge {
    background-image    : url(grafik/10x9gray.gif);
    background-repeat    : repeat-x;
    background-color    :    #FFFFFF;
    border-left                :    1px SOLID #b0d4f7;
    border-right            :    1px SOLID #b0d4f7;
    height                        : 9px;
    margin-left                : auto;
    margin-right            : auto;
    padding                        : 0px;
    text-align                : center;
    width                            : 976px;
}

.menublok {
    background-image    : url(grafik/1x66.gif);
    background-repeat    : repeat-x;
    background-color    :    #b0d4f7;
    border                        : 0px;
    height                        : 66px;
    margin                        : 0px;
    padding                        : 0px;
    width                            : 100%;
    text-align                : center;
}

.reklameblok {
    background-color    :    #000000;
    border                        : 0px;
    height                        : 100px;
    margin                        : 0px;
    padding                        : 0px;
    width                            : 100%;
    text-align                : center;
}

.ydreskygge {
    background-image    : url(grafik/10x9outergray.gif);
    background-repeat    : repeat-x;
    background-color    :    #ececec;
    border                        : 0px;
    height                        : 9px;
    margin                        : 0px;
    padding                        : 0px;
    width                            : 100%;   
}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html>
    <head>
        <title>Ny side</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="stylesheet.css" >
    </head>

<body >

<div class="reklameblok" ></div>
<div class="menublok" ></div>

<div class="ydreskygge" >
    <div class="indreskygge" >
       
    </div>
</div>

<div class="A4" >
    <div class="billede_lag" ><img src="grafik/Picture0008.jpg" class="billede"></div>
</div>

<div class="bund" >
    Her står en masse tekst i bunden af siden
</div>


</body>
</html>
Avatar billede mrgumble Nybegynder
07. april 2010 - 20:37 #1
Nu starter jeg lige med at smide noget dokumentation i nakken af dig: http://w3schools.com/css/css_reference.as (he he) (og også fordi det er en execellent opslagshjemmeside)

"position: absolute" og position: relative" er i forhold til den nærmeste forældre der har en position angivet med absolute, position og fixed. Hvis denne ikke findes, er det i forhold til browser vinduet. (http://w3schools.com/css/css_positioning.asp)

Derfor bliver .billede_lag højrestillet i forhold til .A4, da det er .A4 der er den nærmeste forældre med en position. .A4 har "relative" da den bliver flyttet i forhold til dens normale position.
Avatar billede htx98i17 Professor
07. april 2010 - 21:21 #2
Så hvis A4 ikke var centreret med margin 0, så ville den ikke være flyttet ift dens normale position?
Avatar billede mrgumble Nybegynder
08. april 2010 - 07:05 #3
.A4 flyder lodret, i forhold til hvor meget reklameblok, menublok og ydreskygge fylder i højden. Dvs. hvis blokkene har en samlet højde på 100 pixels, vil .A4 stå 100 pixels nede på siden (+/- noget padding).
Avatar billede htx98i17 Professor
08. april 2010 - 07:43 #4
Så A4 og de andre lag, fylder alle mere end hvad de normalt ville og er dermed ude af normal position, fordi de har defineret en højde som fylder ud over hvad? (en tekst-linje eller anden højde/bredde) ?

Måske er det nemmere for mig at forstå, hvis du kan fortælle hvilke blokke der er i normal position og hvilke som ikke er? :)
Avatar billede mrgumble Nybegynder
08. april 2010 - 14:07 #5
Dine blokke fylder enten det du har angivet dem til, eller hvad der er behov for.
Du har en håndfuld div-elementer, og deres standard opførelse er, at det efterfølgende element vises nedenunder. Tingene flyder således lodret ned ad siden, og det er kun .A4 du skubber til, men det er kun i den vandrette retning.
Avatar billede htx98i17 Professor
09. april 2010 - 11:03 #6
Jeg tror der skal noget mere praksiserfaring til at forstå position helt. :)

I må gerne ligge et svar

Tak for deltagelsen
Avatar billede mrgumble Nybegynder
09. april 2010 - 11:15 #7
Ja, der er ikke andet for, end at man prøver sig frem og eksperimenterer lidt. Og så kan du altid bare søge på nettet og læse dig frem til, hvordan man har gjort andre steder. Der er masser af blogs o.lign. der glædeligt fortæller hvad der har gjort.
Avatar billede htx98i17 Professor
09. april 2010 - 11:28 #8
Jep, jeg havde læst w3schools.com :) den er god. Men det her positioning kunne jeg godt bruge på dansk...
Avatar billede htx98i17 Professor
09. april 2010 - 11:30 #9
Der er da noget helt galt med eksperten de her dage. Jeg oplever så mange fejl. Jeg kan bl.a. ligge et svar nu, selvom pointene er uddelt. Jeg havde postet et indlæg mellem #6 og #7 som ikke bliver vist. Og igår oprettede jeg et spm som ikke blev vist i nogle lister. weird.
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