Margin

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
Laust
Rutineret
Rutineret
Indlæg:59
Tilmeldt:5. nov 2011, 13:23
Margin

Indlæg af Laust » 8. nov 2011, 14:47

Hej.

Jeg har lavet mig en opsætning i CSS. Med menu, top, indhold og footer.

Men når jeg i min CSSfil skriver under :
#footer {
margin-bottom: 10px;
}

Så lægger den sig stadig ikke i bunden, hvad gør jeg forkert?

Mvh.

Laust
Top
Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Margin

Indlæg af ThomasI » 8. nov 2011, 15:02

Hej

Brug: vertical-align:bottom;

Så hvis du har en div rundt om footer som er 700px og din footer er 200px så skulle den gerne placere sig i bunden...

Det eneste du siger din div skal gøre her er at den skal være 10 pix over bunden på din hjemmeside...
Top
Laust
Rutineret
Rutineret
Indlæg:59
Tilmeldt:5. nov 2011, 13:23

Re: Margin

Indlæg af Laust » 8. nov 2011, 16:17

Det gør ingen forskel at bruge "vertical-align:bottom;".

Har du andre forslag til hvordan det kan fikses?? :)
Top
Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Margin

Indlæg af ThomasI » 8. nov 2011, 16:22

Har du en wrapperdiv rundt om det hele?

Kan du sende et screenshot af hvordan det ser ud hos dig?
Top
Laust
Rutineret
Rutineret
Indlæg:59
Tilmeldt:5. nov 2011, 13:23

Re: Margin

Indlæg af Laust » 8. nov 2011, 16:27

Ja. Jeg har en hoved div som omslutter det hele.

Min html ser således ud:

Kode: Vælg alt

<!DOCTYPE html>
<html lang ="da">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Karlslund ridehal</title>
        <link rel="stylesheet" href="CSSFILE.css" type="text/css"/>

    </head>
    <body>
           
        <div id="hoved">

        <div id="top"> <img src="Karlslund_ridehal_logo_1.jpg" width="700px" height="150px"/> </div>

       <?php
       include "Menu.php"
       ?>
       
        <div id="indhold">her kommer der indhold</div>
                
       <?php
       include "Sidefod.php"
       ?>

        </div>

    </body>
</html>
Top
Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Margin

Indlæg af ThomasI » 8. nov 2011, 16:35

Prøv at lav en <br/> tag efter din indhold div...

Ellers...hvordan ser din sidefod.php ud?
Top
Laust
Rutineret
Rutineret
Indlæg:59
Tilmeldt:5. nov 2011, 13:23

Re: Margin

Indlæg af Laust » 8. nov 2011, 16:39

Det hjalp ikke med et linjeskift.

Min sidefod.php ser således ud:

Kode: Vælg alt

<div id="Sidefod">
            
              
            
</div>
Top
Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Margin

Indlæg af ThomasI » 8. nov 2011, 18:04

I din CSS kalder du din styling for "footer" , men i din HTML kode kalder du den ved id = "Sidefod"...

Hvis der ikke eksisterer en CSS style i din CSS fil der hedder Sidefod, vil din div heller ikke blive stylet...

Prøv også at sætte en brede på din Sidefod div...

SE den her video og gør det samme med dine divs!

http://www.nemprogrammering.dk/Tutorials/PHP/T13PHP.php
Top
Laust
Rutineret
Rutineret
Indlæg:59
Tilmeldt:5. nov 2011, 13:23

Re: Margin

Indlæg af Laust » 8. nov 2011, 18:29

Det var noget vrøvl jeg kom til at skrive tidligere. Min Css til sidefod her således ud:

Kode: Vælg alt

#Sidefod {
    width: 980px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: bottom;
    border-style: solid;
    border-width: thin;
    text-align: center;
}
Top
Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Margin

Indlæg af ThomasI » 8. nov 2011, 18:54

hmm...ok, hvordan ser det ud? - altså hvor ligger div´en når den ikke ligger i bunden?
Top
Laust
Rutineret
Rutineret
Indlæg:59
Tilmeldt:5. nov 2011, 13:23

Re: Margin

Indlæg af Laust » 9. nov 2011, 09:42

Jeg har i alt 5 div.

html:

Kode: Vælg alt

         
        <div id="hoved">

               

        <div id="top"> <img src="Karlslund_ridehal_logo_1.jpg" width="700px" height="150px"/> </div>

                

               <?php
               include "Menu.php"
               ?>

                

        <div id="indhold">her kommer der indhold</div>
        
        
               <?php
               include "Sidefod.php"
               ?>

        </div>
Og CSS:

Kode: Vælg alt

#hoved {
    width: 1100px;
    height: 1200px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: thin;
}

#top {
    width: 980px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-style: solid;
    border-width: thin;
    text-align: center;
}

#menu {
    width: 200px;
    height: 600px;
    border-style: solid;
    border-width: thin;
    margin-left: 59px;
    float: left;
}

#indhold {
    width: 775px;
    height: 1000px;
    border-style: solid;
    border-width: thin;
    margin-right: 59px;
    float: right;
    background-color: #999;
}

#Sidefod {
    width: 980px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: bottom;
    border-style: solid;
    border-width: thin;
    text-align: center;
}
Min sidefod lægger sig lige under min top div.
Top
Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Margin

Indlæg af ThomasI » 9. nov 2011, 12:43

Har roddet lidt med det...og kan ikke lige får det til at virke helt optimalt...

den bedste løsning for dig er at flytte

Kode: Vælg alt

<?php
               include "Sidefod.php"
               ?>
Uden for hoved diven, og så sætte højden på hoved diven til 1165px.... det giver det resultat du ønsker...

man skal jo vel alligevel ikke kunne se linjerne på diverne når sitet kommer online... :)
Top
Laust
Rutineret
Rutineret
Indlæg:59
Tilmeldt:5. nov 2011, 13:23

Re: Margin

Indlæg af Laust » 9. nov 2011, 13:48

Tak for hjælpen. :)

Jeg venter højst sandsynligt tilbage næste gang jeg får problemer.
Og så skal du lige have stor tak for denne hjemmeside, der er mulighed
for at lære en masse herinde.
Og så dette forum binder ligesom tingene sammen når man kan få hjælp
til det man har problemer med.

Mange tak.

Laust.
Top
Besvar

Tilbage til "CSS"