background-repeat: no-repeat; : in IE wel?

[Verwijderd]

Hallo Tweakers,

Ik zit met 'n vraagje. Ik ben zelf niet heel erg goed met Cascading Style Sheets, maar heb mijn antwoord verder ook niet kunnen vinden. Misschien is het een kleinigheidje, mijn excuses dan voor het onnodige topic?

Het zit alsvolgt;

Ik heb een pagina opgebouwd uit 3 divs. Main, Menu, en Text.

code:

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    background-color: #DDDDCB;
    font-color: #1f279e2;;
}

.mainDiv{
    position:absolute;
    top:50%;
    left:50%;
    width:700px;
    height: 609px;
    margin-top:-275px;
    margin-left:-350px;
    border: thin solid #f279e2;
    background-color:white;
}

.menuDiv{
    color: #f279e2;
    position:absolute;
    width:700px;
    top:0px;
    height:91px;
    border-bottom:thin solid #f279e2;
    font-style:bold;
    text-align:center;
    background-image:url(../Afbeeldingen/menu_background.jpg);
    background-repeat: no-repeat;
    left: 0px;
}

.tekstDiv{
    position:absolute;
    top:93px;
    height:516px;
    overflow:auto;
    width:700px;
    color: #f279e2; 
    background-image:url(../Afbeeldingen/text_background.jpg);
    background-repeat: no-repeat;
    left: 0px;
}


a:link {
    color: #f279e2;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #f279e2;
}
a:hover {
    text-decoration: none;
    color: #f43a59;
}
a:active {
    text-decoration: none;
    color: #f279e2;
}

Nu heb ik in mijn FireFox browser het juiste resultaat, mijn achtergrond afbeelding scrollt niet mee met de pagina. Nu; ik wil het proberen in IE, en wanneer ik daar mijn pagina naar benden scroll, blijft mijn achtergrond stil staan. Ik wil dus dat de voorgrond naarbeneden scrollt, maar dat de achtergrondafbeelding niet beweegt.

Is hier een eenvoudige oplossing voor? Ik hoor het graag. Bijvoorbaat dank.

[iworx]

Wat je moet gebruiken

code:

background: url(path/imgnaam) top centre no-repeat fixed #000;

url() = pad naar je image en je imagenaam.
top = positie vanaf de top / bottom in px/em/%/...
left = positie vanaf links / rechts
no-repeat = zorgt ervoor dat je background zich niet herhaalt.
fixed = plakt ie vast op de achtergrond/.
#000 = achtergrondkleur in RGB waardes of named-color

Hoop dat dit je verder helpt.

[kaassouffle]

voor de goede order.. > waar is de 'centre' voor?
(moet niet 'center' zijn?)

[Zoefff]

dot.K schreef op woensdag 30 augustus 2006 @ 20:28:
Wat je moet gebruiken

code:

background: url(path/imgnaam) top centre no-repeat fixed #000;

[..]

Dat hoeft niet perse hoor, je kan de waarden ook in een andere volgorde zetten danwel weglaten, of in losse tags (dus background-color, background-image, background-repeat, background-position, etc.) zetten.

De TS is iig op zoek naar de 'background-attachment' property, die in zijn geval dus op 'fixed' moet staan. Of je dat in een losse tag (dus 'background-attachment: fixed;') doet of niet mag je zelf weten

[Verwijderd]

Bedankt voor de reacties. Op het moment zit ik niet thuis, en dus zal ik later er verder mee gaan. In elk geval laat ik weten hoe het gegaan is.

[Verwijderd]

Zoefff schreef op woensdag 30 augustus 2006 @ 20:58:
[...]


Dat hoeft niet perse hoor, je kan de waarden ook in een andere volgorde zetten danwel weglaten, of in losse tags (dus background-color, background-image, background-repeat, background-position, etc.) zetten.

De TS is iig op zoek naar de 'background-attachment' property, die in zijn geval dus op 'fixed' moet staan. Of je dat in een losse tag (dus 'background-attachment: fixed;') doet of niet mag je zelf weten

Dit werkt in ieder geval goed. De andere manier heb ik even geprobeert, wat mij niet lukte. Ik kwam niet uit top en center denk ik.
Enfin, de oplossing van Zoefff was de oplossing die ik zocht. Hartelijk dank.

Edit/Update:
Ehm, draait eindelijk lekker in IE. Nu gezeur met Firefox. Al die browsers ook altijd.
Oké, het probleem:
Zo goed dat mijn achtergrondafbeelding stil blijft staan, en dus fixed is, is hij in Firefox van plek veranderd.

Dus in mijn menuvak bevat menu_background.jpeg. Deze lijkt nu schuin naar linksboven verplaatst te zijn. Net als text_background.jpeg. Er is uiteraard niets gebeurd met maten in mijn stylesheet, dit zou dan ook zichtbaar moeten zijn in de IE, toch?
Is er misschien een mogelijkheid dat ook dit te verhelpen is?

Misschien makkelijk om zelf te oordelen als jullie dat misschien ook helpen, mocht mijn beschrijving even brak overkomen.

Het zaakje staat momenteel tijdelijk op mijn eigen host, en is voor 'n vriendinnetje van me.
http://www.dikketoeter.nl/astrid/ is het adres.

[ Voor 36% gewijzigd door Verwijderd op 30-08-2006 22:54 ]

[Zoefff]

Nofi, maar je gebruikt wel een überranzige manier om alles te positioneren. Nog even daargelaten dat je misschien naar wat elementen zoals hx en ul moet kijken is het nergens voor nodig om álles absoluut te positioneren. Het gebruik van absolute positioneren van de gehele site in het midden kan ik me nog wel voorstellen, maar daarbinnen kan je het met een eenvoudige layout als deze écht wel af met relatieve positionering hoor.

Maargoed, als je de html eens door een validator haalt (http://validator.w3.org/c...ikketoeter.nl%2Fastrid%2F) zal je zien dat er een behoorlijk aantal fouten in zitten. Zo mis ik om te beginnen een sluittag voor de head en de eerste div. Grote kans dat Fx daar een beetje stress van krijgt en daardoor de achtergrondafbeeldingen niet zo positioneert als jij verwacht.

[ Voor 4% gewijzigd door Zoefff op 30-08-2006 23:14 ]

[iworx]

Eigenlijk gebruik je absolute positionering enkel in noodgevallen omdat je hierdoor de hele flow van het document om zeep helpt.

Om een div te centreren gebruik je het volgende:

code:

body { text-align: center; /* voor IE 5 en consoorten */ }
#div { width: 800px; margin: 0 auto; }

en meer heb je niet nodig. Verder volg ik Zoefff voor de volle 100%. Zolang de validator geen groen licht geeft moet je geen geweldige layout verwachten in FF/Safari en Opera.

IE vult zelf aan, of het nu fout is of niet.

[Zoefff]

Niet geheel waar, want als je de div ook verticaal wilt centreren zal je wel degelijk absolute positionering moeten gebruiken op de manier als hij dat doet. Maargoed, die div is dan (zoals ik al eerder aangeef) de enige die ik absoluut zou positioneren.