CSS3 / JavaScript

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

CSS3 / JavaScript

Indlæg af cristian » 1. nov 2013, 10:35

http://www.mnrb.dk har jeg lavet en baggrund som jeg bruger til at style min side,
i stedet for en hvid baggrund eller et billed til at fylde baggrunden ud.

Og på forsiden ser det helt fint ud i de vindue størrelser jeg har testet.
Men hvis man følger linket http://mnrb.dk/page1.html, så er der problemer med at den rødlige farve ikke fylder siden ud.
Hvis sidens højde er så høj at man skal scroll ned for at se hele siden.

Så spørgsmålet er.
Hvordan kan man med CSS3 gøre at den røde farve fylder siden ud(ned af),
uafhængig af sidens højde.

Hvis spørgsmålet ikke lige giver mening må i sige til.

Tak på forhånd.

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

Re: CSS3 / JavaScript

Indlæg af ThomasI » 1. nov 2013, 12:07

Prøv at smid det her i din css - din body har som sandard en padding som skal fjernes. Det er nok den du kan se i bunden:

Kode: Vælg alt

html, body {
    margin: 0;
    padding: 0;
}

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

Re: CSS3 / JavaScript

Indlæg af ThomasI » 1. nov 2013, 12:09

Sorry...fik læst dit indlæg lidt for hurtigt.

Anyway... hvis du på http://mnrb.dk/index.html vil have din røde farve helt ned skal du have fjernet padding på body.

cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: CSS3 / JavaScript

Indlæg af cristian » 1. nov 2013, 12:43

ThomasI skrev:Sorry...fik læst dit indlæg lidt for hurtigt.

Anyway... hvis du på http://mnrb.dk/index.html vil have din røde farve helt ned skal du have fjernet padding på body.
Du tænker på den 1 px hvide farve der er i bunden?

Prøv at kikke mellem index og page 1 siden hvor du scroller ned.
Så tror jeg det giver bedre mening :)

Brugeravatar
Daniel
Admin
Admin
Indlæg: 625
Tilmeldt: 14. jun 2011, 09:27
Geografisk sted: Danmark, Fyn, Nørre Aaby
Kontakt:

Re: CSS3 / JavaScript

Indlæg af Daniel » 1. nov 2013, 13:20

Sådan som du har lavet det lige nu, kan du ikke få det til at fungere, så snart du sætter et nyt element under din sidste baggrunds div, så vil du aldrig kunne få det til at fylde resten af sidens længde, desværre.
Dog er det ikke helt umuligt at lave hvad du gerne vil opnå.

Jeg har forsøgt at lave samme resultat som det du havde, men den ene baggrundsfarve kan jeg ikke ramme helt, så det skal du selv lige lege lidt med hvordan du gerne vil have det, og har heller ikke taget alle dine stylinger med af andet end baggrundsfarverne. :)

Kode: Vælg alt

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Todays fortune says</title>

        <style>
        body {
            background-color: rgba(104, 17, 17, 1);
            margin: 0;
        }
        .backgroundOne {
            width: 100%;
            height: 72px;
            background-color: rgba(255, 255, 255, 1);
        }
        .backgroundTwo {
            width: 100%;
            height: 200px;
            background-color: rgba(108, 105, 105, 1);
        }
        </style>
    </head>
    <body>
        <div class="backgroundOne"></div>
        <div class="backgroundTwo"></div>
    </body>
</html>

cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: CSS3 / JavaScript

Indlæg af cristian » 1. nov 2013, 15:08

Danielh007 skrev:Sådan som du har lavet det lige nu, kan du ikke få det til at fungere, så snart du sætter et nyt element under din sidste baggrunds div, så vil du aldrig kunne få det til at fylde resten af sidens længde, desværre.
Dog er det ikke helt umuligt at lave hvad du gerne vil opnå.

Jeg har forsøgt at lave samme resultat som det du havde, men den ene baggrundsfarve kan jeg ikke ramme helt, så det skal du selv lige lege lidt med hvordan du gerne vil have det, og har heller ikke taget alle dine stylinger med af andet end baggrundsfarverne. :)

Kode: Vælg alt

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Todays fortune says</title>

        <style>
        body {
            background-color: rgba(104, 17, 17, 1);
            margin: 0;
        }
        .backgroundOne {
            width: 100%;
            height: 72px;
            background-color: rgba(255, 255, 255, 1);
        }
        .backgroundTwo {
            width: 100%;
            height: 200px;
            background-color: rgba(108, 105, 105, 1);
        }
        </style>
    </head>
    <body>
        <div class="backgroundOne"></div>
        <div class="backgroundTwo"></div>
    </body>
</html>
Du en skat Daniel ,)
Da du satte mig på sporet af en baggrunds farve, så kunne jeg selvfølgelig godt se det selv Dohh double-face-plam.

Så nu ser det ud som det skal efter lidt til rettelser af en ny div og sletning af en anden samt CSS'en.

Brugeravatar
Daniel
Admin
Admin
Indlæg: 625
Tilmeldt: 14. jun 2011, 09:27
Geografisk sted: Danmark, Fyn, Nørre Aaby
Kontakt:

Re: CSS3 / JavaScript

Indlæg af Daniel » 1. nov 2013, 15:27

Super at det virker! :D
Skulle også lige bruge lidt tid på at få den vendt rundt til det der.

Besvar