CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

pstidsen Novice

09. februar 2012 - 22:33 Der er 6 kommentarer og
1 løsning

CSS - teoretisk hjælp

Jeg har været igang med et CSS projekt er det er lykkes fint. Nu vil jeg gerne have lidt teori med ind samtidig...

Jeg vil gerne have en dansk forklaring på følgende begreber:
-Float
-Postion (forskel på absolute og relavtive)
-Hvad gør auto værdien i f.eks. height og margin-top?

Synes godt om

DeeDawg Nybegynder

10. februar 2012 - 00:20 #1

Float - som det fremgår af navnet, får det elementer til at "flyve". Et element kan kun flyve til højre eller venstre, og kan ikke flyve udenfor dets forælder elements rammer. Udover elementet selv og andre flyvende elementer, påvirker det kun indhold der kommer efter, og det indhold vil for så vidt muligt, lægge sig omkring elementet. Et godt eksempel kunne være Wikipedia, hvor du som på dagens artikel kan se at teksten lægger sig omkring billederne, og informationsboksen til højre.

Dog skal man huske at man hiver tingene ud af sit normale flow, og det kan derfor skabe flere fejl end det løser, hvis ikke man passer på. Du vil derfor opleve det frarådet af fagfolk, på steder hvor man ellers kunne bruge display: inline eller display: inline-block.

Position - forskellen på absolute, og relative er meget vigtig. Et element med absolute er placeret i forhold til dets første forælder element, som har en position værdi på alt andet end static. Hvis du ikke definerer andet, vil dette element altså blive placeret i øverste venstre hjørne af dets forælder.

Et element med relative, er placeret relativt til sin oprindelige placering i sidens flow. Hvis du ikke definerer andet, vil dette element altså blive præcis hvor det er. Dette er nyttigt, når man vil skabe nye reference punkter, men uden at skulle flytte på et element.

Du får også et praktisk eksempel. :)

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <title>...</title>
    </head>
    <body>
        <!--
            #elm1 har altså ikke noget forælder element, med en position værdi
            på alt andet end 'static', og vil derfor falde tilbage på
            <html> blokken.
        -->
        <div id="elm1" style="position: absolute;">
            <!--
                #elm2 har nu et forælder element, med en position værdi på 'absolute',
                og vil derfor blive placeret i forhold til #elm1.
            -->
            <div id="elm2" style="position: absolute;"></div>
        </div>
        <div>
            <!--
                #elm3 har altså ikke noget forælder element, med en position værdi
                på alt andet end 'static', og vil derfor falde tilbage på
                <html> blokken.
            -->
            <div id="elm3" style="position: absolute;"></div>
        </div>
        <!--
            #elm4 er nu placeret relativt til sin normale placering i sidens
            flow, hvilket er lige her, så den vil ikke rykke sig ud af stedet.
        -->
        <div id="elm4" style="position: relative;">
            <!--
                #elm5 har nu et forælder element, med en position værdi på 'relative',
                og vil derfor blive placeret i forhold til #elm4.
            -->
            <div id="elm5" style="position: absolute;"></div>
        </div>
    </body>
</html>

Auto - uanset hvor du bruger denne værdi, vil det få browseren til selv at udregne hvad der skal stå. Det er altså, standard værdien for de fleste, hvis ikke alle, CSS-properties.

Puha - blev næsten selv helt væk i dette indlæg. Håber det er forståeligt, og uddybende nok! :)

Synes godt om

pstidsen Novice

10. februar 2012 - 09:52 #2

Tusind tak for det lange og fyldestgørende svar! =)

Tillægsspørgsmål:
display: inline og display: inline-block? Dem har jeg aldrig hørt om. Hvad er det?
Er der andre ting der er vigtige når man snakker styling af divs?
Position: static; hvad er det?

Nu prøver jeg lige at forklare position med mine egne ord:
Hvis man bruger position: absolute; bliver elementet placeret i forhold til den div en er indeni. Hvis man bruger relative bliver elementet placeret i forhold til hvordan det ville have været placeret UDEN nogen form for position. Korrekt?

Hvis vi tager wiki på eksembel hvordan er menuen til venstre så lavet? Har den også float?

Synes godt om

DeeDawg Nybegynder

10. februar 2012 - 12:13 #3

position: static; - dette er standard værdien for alle elementer. Hvilket vil sige, at elementet vil følge sidens normale flow.

Display - denne property angiver, hvordan elementer skal opfattes og vises af browseren. Det er bl.a. igennem her, at man kan få links til at opføre sig som bokse, og ikke bare tekst.

Lad os tage et eksempel. Vi skal lave en navigationsbjælke, og tænker over hvordan det nu kan gøres. Første indskydelse - med float.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <title>...</title>
        <style type="text/css">
            *{ margin: 0;padding: 0; }
            
            ul{ list-style: none; }
            ul li{ float: left; }
            ul li a{ display: block; }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Hjem</a></li>
            <li><a href="#">Om os</a></li>
            <li><a href="#">Ydelser</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </body>
</html>

Umiddelbart ser det jo fint ud, og det fungerer også. Men her har vi altså mulighed for at skabe det samme resultat, uden brug af float.

<style type="text/css">
    *{ margin: 0;padding: 0; }
    
    ul{ list-style: none; }
    ul li{ display: inline; }
    ul li a{ display: inline-block; }
</style>

Hvilket giver en hel del fordele. Først og fremmest ødelægger du ikke sidens flow unødvendigt, og så har du også mulighed for at benytte nogle CSS-properties på dine elementer, der ellers ville være blevet sat ud af kraft fordi de fløj. Og i dette eksempel ville vi også kunne centrere bjælken ganske smertefrit, bare ved at smide text-align: center på ens <ul> element.

Og som det fremgår af navnene, så får inline elementet til at være på linje med hinanden, som du fx kan se med et <strong> og et <i> element. inline-block gør elementet til en blok, men tillader at der kan være andre blokke på linje med den, hvilket ikke er tilladt for en normal blok.

Du kan se mere i den officielle specifikation her.

Position - din genfortælling til dels korrekt. Lad mig tilføje noget mere til min oprindelige forklaring. absolute hiver elementet fuldkommen ud af sidens normale flow, og du kan derfor smide den hen hvorend du vil, og alle andre elementer vil opfatte det som ikke eksisterende. relative flytter ganske vist elementet derhen hvor du lyster, men det påvirker ikke sidens normale flow, som sådan. Derfor vil andre elementer på siden, opføre sig som om elementet stadigvæk er på sin plads.

Wikipedia - hvis du mener indholdsfortegnelsen, så nej. Det er en tabel. Hvis du mener menuen under logoet, så nej. Den er placeret med absolute. :)

Synes godt om

pstidsen Novice

10. februar 2012 - 12:37 #4

Med sidens flow mener du hvordan siden ville se ud hvis man ikke brugte float og position?

Er der andre vigtige ting mht. div styling?

Smid svar!

Synes godt om

DeeDawg Nybegynder

10. februar 2012 - 15:07 #5

Ja, lige præcis.

Andre vigtige ting? Hm, kan ikke lige komme i tanke om noget specielt. Så længe du sørger for at holde dig til de gældende standarder, burde der ikke være de store problemer. ;)

Synes godt om

pstidsen Novice

10. februar 2012 - 17:55 #6

Mange tak for fint svar! Kan du også klare den praktiske hjælp?

Synes godt om

Slettet bruger

12. februar 2012 - 04:28 #7

Jeg har ikke fået læst det hele endnu.
Men man bliver sku så glad og varm om hjertet når nogen sætter sig ned og giver sådan en god detaljeret hjælp.

Super godt DeeDawg.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS