[css] 2 backgrounds zonder scroll

zondag 14 maart 2004 15:28

Topicstarter

Oke, ik ben nu vanalles aan het proberen, maar wat ik ook probeer, er komt helemaal niks

Dit werkt niet, het hele scherm blijft wit

code:

1	body { background:url("/img/back1.jpg") no-repeat top center; }

Dit werkt ook niet:

code:

1	<div id="back2"></div>

En dan in de style sheet:

code:

1	div#back2{ background: url("/img/back1.jpg") top center; }

Wat ik ook wijzig, het blijft wit

Voor de zekerheid: linkje

Acties:

volgens mij klopt het pad naar je plaatje in je css niet

zondag 14 maart 2004 15:36

Acties:

zondag 14 maart 2004 15:39

Topicstarter

NH298 schreef op 14 maart 2004 @ 15:28:
volgens mij klopt het pad naar je plaatje in je css niet

Dat blijkt het wel te zijn..

Heb nu de volledige pad erin getypt, maar zie nog steeds de fout niet.. maargoed.

Acties:

/img/back.jpg verwijst naar http://www.xs4all.nl/img/back.jpg

Dit werkt wel:

code:

1	background-image: url("/~djh/zomaar/img/back1.jpg");

code:

1	background-image: url("./img/back1.jpg");

[ Voor 21% gewijzigd door NH298 op 14-03-2004 15:40 ]

zondag 14 maart 2004 15:40

Acties:

Verwijderd

De div waarin je het tweede achtergrondplaatje hebt gezet, heeft geen hoogte. Zet daar eens een hoop tekst in, of iets dergelijks? Genoeg om het scherm half te vullen bijvoorbeeld.

zondag 14 maart 2004 15:46

Acties:

zondag 14 maart 2004 16:03

Topicstarter

Verwijderd schreef op 14 maart 2004 @ 15:40:
De div waarin je het tweede achtergrondplaatje hebt gezet, heeft geen hoogte. Zet daar eens een hoop tekst in, of iets dergelijks? Genoeg om het scherm half te vullen bijvoorbeeld.

(thx, nhx298)

Als ik tekst in die div zet, wordt de achtergrond zichtbaar, maar wel verkeerd. Die achtergrond in die div moet eigenlijk precies zo als de eerste (in de body) maar dat repeat-y. Maar dat wil nog niet !?

code:

div#back2
        {
        background-image: url("http://www.xs4all.nl/~djh/zomaar/img/back2.jpg");
        background-attachment: fixed;
        background-position: top center;
        background-repeat: repeat-y;
        }

p.s. ik werk online, dus kan elk moment veranderen

[ Voor 25% gewijzigd door DJH op 14-03-2004 15:51 ]

Acties:

zondag 14 maart 2004 16:16

Topicstarter

Je kan dus bij elk element een background plaatsen, ik neem aan bij de body maar 1..

Ik heb dus 1 body background en de rest met ?div's? maar die worden niet zichtbaar alleen als ik er tekst in typ, maar dan ziet er niet uit..

Hoe kan ik die div's zichtbaar maken? zodat die background net zo werkt als de body background?

Acties:

Door ze een hoogte en een breedte mee te geven in je css

Ik zou eens een tutorial over css gaan lezen......

zondag 14 maart 2004 16:26

Acties:

zondag 14 maart 2004 16:31

Topicstarter

NH298 schreef op 14 maart 2004 @ 16:16:
Door ze een hoogte en een breedte mee te geven in je css

Ik zou eens een tutorial over css gaan lezen......

Ik weet me al redelijk met css te redden, maar probeer nu iets wat ik nog nooi gedaan heb eigenlijk. Als ik een height en een width aan de div geef, wordt hij niet gecentreerd, maar komt hij relatief aan de zijkant.

Dus heb nog 1 vraagje:
Hoe kan ik een div zo maken zodat die background net zo werkt als de body background?

Hij wil ook geen repeat-y doen

Acties:

Je div kan je centreren d.m.v. de volgende css:

code:

    position:absolute;
    top:0px;
    left:50%;
    width:500px;
    margin-left:-250px;

Waarbij de breedte het dubbele is van je margin-left, waarde mag je zelf bepalen.

Of je div een breedte van 100% meegeven

[ Voor 10% gewijzigd door NH298 op 14-03-2004 16:32 ]

zondag 14 maart 2004 17:43

Acties:

Verwijderd

Een DIV strekt zich automatisch in de breedte. Dus comment hierboven slaat nergens op. Daarnaast is de gekozen centreer methode nou niet echt de beste...

Theoretisch kun je het HTML element een background geven. Welke dan op de viewport gezet wordt en het BODY element. Aantal browsers ondersteund dat ook, maar IE niet.

Dus voor IE zet je 1 background op het BODY element, gebruik makend van de code die ik eerder heb gegeven. 'fixed' werkt alleen correct op het BODY element in IE, dus dat kun je ook maar beter vergeten.

In het BODY element zet je dus een DIV, daarin komt je content en de DIV geef je het tweede achtergrondplaatje.

Als het nu nog steeds niet werkt, geef dan even een URI, zodat we even kunnen zien wat je precies fout doet.

zondag 14 maart 2004 19:00

Acties:

zondag 14 maart 2004 21:44

Topicstarter

Verwijderd schreef op 14 maart 2004 @ 17:43:
Een DIV strekt zich automatisch in de breedte. Dus comment hierboven slaat nergens op. Daarnaast is de gekozen centreer methode nou niet echt de beste...

Theoretisch kun je het HTML element een background geven. Welke dan op de viewport gezet wordt en het BODY element. Aantal browsers ondersteund dat ook, maar IE niet.

Dus voor IE zet je 1 background op het BODY element, gebruik makend van de code die ik eerder heb gegeven. 'fixed' werkt alleen correct op het BODY element in IE, dus dat kun je ook maar beter vergeten.

In het BODY element zet je dus een DIV, daarin komt je content en de DIV geef je het tweede achtergrondplaatje.

Als het nu nog steeds niet werkt, geef dan even een URI, zodat we even kunnen zien wat je precies fout doet.

Ik heb het inmiddels opgelost, de url is: http://www.xs4all.nl/~djh/zomaar/index.html

De 3 div's naast elkaar gaan in elkaar op als het scherm kleiner wordt gemaakt zag ik net, dit is nou niet echt praktisch! Ik denk dat ik dan px moet gebruiken ipv %

En die marge class werkt ook niet, maar daar moet ik nog even naar kijken..

Het externe css bestand is:

code:

body        
        {
        background-image: url("http://www.xs4all.nl/~djh/zomaar/img/back2.jpg");
        background-attachment: absolute;
        background-position: top center;
        background-repeat: repeat-y;
        scrollbar-3dlight-color: #C9CBB6; 
        scrollbar-arrow-color: #817E6D; 
        scrollbar-base-color: #ffffff; 
        scrollbar-darkshadow-color: #ffffff; 
        scrollbar-face-color: #E1E1E1; 
        scrollbar-highlight-color: #ffffff; 
        scrollbar-shadow-color: #817E6D;
        background-color: #FFFFFF;
        font-family: verdana; 
        font-size: 10px;
        margin-bottom: 0px;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px; 
        }

div#header1
        {
        background-image: url("http://www.xs4all.nl/~djh/zomaar/img/header1.jpg");
        background-attachment: absolute;
        background-position: top center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        z-index:2;
        }

div#bottom1
        {
        position:absolute;
        background: #E8E8E8;
        bottom:0;
        left:50%;
        width:800px;
        margin-left:-400px;
        text-align: center;
        }
div#contentl
        {
        position:absolute;
        background: #E8E8E8;
        top:295px;
        left:25%;
        width:150px;
        height:350px;
        margin-left:-75px;
        border-style: solid;
        border-width: 0px 1px 1px 1px;
        }
div#contentl2
        {
        position:absolute;
        background: #969696;
        top:280px;
        left:25%;
        width:150px;
        height:15px;
        margin-left:-75px;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        font-weight: bold; 
        }
div#contentm
        {
        position:absolute;
        background: #E8E8E8;
        top:295px;
        left:50%;
        width:450px;
        height:350px;
        margin-left:-225px;
        border-style: solid;
        border-width: 0px 1px 1px 1px;
        }
div#contentm2
        {
        position:absolute;
        background: #969696;
        top:280px;
        left:50%;
        width:450px;
        height:15px;
        margin-left:-225px;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        font-weight: bold; 
        }
div#contentr
        {
        position:absolute;
        background: #E8E8E8;
        top:295px;
        left:75%;
        width:150px;
        height:350px;
        margin-left:-75px;
        border-style: solid;
        border-width: 0px 1px 1px 1px;
        }
div#contentr2
        {
        position:absolute;
        background: #969696;
        top:280px;
        left:75%;
        width:150px;
        height:15px;
        margin-left:-75px;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        font-weight: bold; 
        }
div#contentu
        {
        position:absolute;
        background: #E8E8E8;
        top:675px;
        left:50%;
        width:780px;
        height:250px;
        margin-left:-390px;
        border-style: solid;
        border-width: 0px 1px 1px 1px;
        }
div#contentu2
        {
        position:absolute;
        background: #969696;
        top:660px;
        left:50%;
        width:780px;
        height:15px;
        margin-left:-390px;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        font-weight: bold; 
        }
div#water
        {
        position: absolute;
        top:325px;
        left:50%;
        width:200px;
        height:200px;
        margin-left:-100px;
        }
div.marges
        {
        margin-bottom: 5px;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 5px; 
        {

Dit werkt in ieder geval, maar is dit een correcte manier? Commentaar zeer welkom!

[ Voor 5% gewijzigd door DJH op 14-03-2004 19:04 ]

Acties:

Verwijderd schreef op 14 maart 2004 @ 17:43:
Een DIV strekt zich automatisch in de breedte. Dus comment hierboven slaat nergens op. Daarnaast is de gekozen centreer methode nou niet echt de beste...

Hoe moet je dan een div centreren als je dat wil, de andere methode die ik ken is margin:auto; voor left en right.

Maar als je een betere weet, dan wil ik die graag horen

zondag 14 maart 2004 22:26

Acties:

Blauw

De Schreeuw

NH298 schreef op 14 maart 2004 @ 21:44:
[...]

Maar als je een betere weet, dan wil ik die graag horen

Anders (over beter/slechter laat ik me niet uit)

zo

code:

body {margin:0px; padding:0px;}

#Content {
    position:absolute;
    left:50%;
    width:500px;
    margin-top:50px;
    margin-left:-266px;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
    }

maandag 15 maart 2004 08:02

Acties:

Is toch dezelfde techniek????

maandag 15 maart 2004 08:38

Acties:

Verwijderd

De 'margin:0 auto;' + expliciete width is de beste ( http://annevankesteren.nl/test/templates/center-h ). Er zijn ook nog andere methoden die alleen in Mozilla/Opera/Safari werken, maar dat lijkt me niet relevant.

maandag 15 maart 2004 08:45

Acties:

Ze werken allebei in zowel IE als Mozilla browsers, volgens mij. Maar goed daar gaat deze discussie niet over. Volgens mij is TS met zijn probleem geholpen.

maandag 15 maart 2004 10:57

Acties: