[web] background & image alignment - Softwareontwikkeling

donderdag 3 februari 2005 15:40

Acties:

Topicstarter

Ik heb tutorials doorgenomen en het is me zo goed als gelukt:

http://www.xs4all.nl/~leth/testraster.htm

De bedoeling is dus het plaatje in het midden:
Afbeeldingslocatie: http://www.xs4all.nl/~leth/testraster.png

Afbeeldingslocatie: http://www.xs4all.nl/~leth/testraster.png

netjes uitgelijnt te krijgen met dit als achtergrond:
Afbeeldingslocatie: http://www.xs4all.nl/~leth/back.png

het gekke is: in firefox werkt het prima. In IE werkt het niet goed: als de breedte of hoogte van je IE window 1 pixel verandert dan verspringt het 1 pixel.

hier nog even de code:

code:

<html>
<body style="background: url('back.png') center center;"> 
<head>
<style type="text/css">

img
{
position: absolute;
left: 50%;
top: 50%;
}
</style>
</head>

[img]"testraster.png">

</body>
</html[/img]

Oja even het doel:

de achtergrond zal blijven, de image zal verandert worden in de website zelf met een schaduwrandje

[ Voor 27% gewijzigd door savale op 03-02-2005 15:43 ]

donderdag 3 februari 2005 15:46

Acties:

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

IE zet hem sowieso niet in het midden. Dat is ook niet zo gek, want je geeft de positie van top/left tot de linkerbovenkant (0,0) van het plaatje. Probeer eens bij de style van de img margin-left en margin-top op resp. de helft van de breedte en de hoogte van het plaatje erbij te zetten

_{Hij springt overigens niet 1, maar 2 pixels naar links}

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

donderdag 3 februari 2005 15:46

Acties:

André

Analytics dude

Dat komt waarschijnlijk door het feit dat IE bij het centreren de berekening net iets anders afrond dan FF, waardoor je in sommige gevallen die 1px verschuiving ziet.

Ik weet niet of dit voorbeeld representatief is voor wat je wil gaan doen maar je kunt die streepjes ook gewoon van dat rode blokje afhalen?

/edit:
Die optie van Prammenhanger kon ook wel eens de oplossing zijn ja

BtM909

[ Voor 15% gewijzigd door André op 03-02-2005 15:47 ]

donderdag 3 februari 2005 15:46

Acties:

BtM909

Watch out Guys...

Afrondingsverschil waarschijnlijk?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 3 februari 2005 15:51

Acties:

savale

Topicstarter

kee die margin-top en margin-left maken helaas geen verschil... Ik vrees dat deze methode niet zal lukken

Het punt is dus die achtergrond maar ik wil wel schaduwrandjes rond dat rode blokje...

Is er geen manier dat je kan aangeven dat je in 1 keer 6 pixels wil verspringen in plaats van 1 pixel? dan is het probleem opgelost

[ Voor 31% gewijzigd door savale op 03-02-2005 15:59 ]

donderdag 3 februari 2005 16:17

Acties:

André

Analytics dude

savale schreef op donderdag 03 februari 2005 @ 15:51:

Is er geen manier dat je kan aangeven dat je in 1 keer 6 pixels wil verspringen in plaats van 1 pixel? dan is het probleem opgelost

Jawel, maar dat is IE only (en dat kan wel want het probleem is alleen in IE):

code:

1	left: expression( ((document.body.clientWidth - 36) / 2) - ((document.body.clientWidth - 36) / 2) % 6);

36 is de breedte van het plaatje, en 6 is de sprong zeg maar. Eventueel plaats je een + of - er achter om het iets bij te stellen.

/edit:
BtM909: je was me net voor

[ Voor 23% gewijzigd door André op 03-02-2005 16:21 ]

donderdag 3 februari 2005 16:20

Acties:

BtM909

Watch out Guys...

André schreef op donderdag 03 februari 2005 @ 16:17:
[...]

Jawel, maar dat is IE only:
code:
1
left: expression( ((document.body.clientWidth - 36) / 2) - ((document.body.clientWidth - 36) / 2)  % 6);

Het probleem doet zich toch ook alleen in IE voor

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 3 februari 2005 16:25

Acties:

savale

Topicstarter

hehe 2 oplossingen mogelijk dus... De background was 6x6....als je die nu eens oneven maakt: 5x5 bijvoorbeeld dan is t ook gefixt

ofwel: afrondingsprobleem
bedankt voor de andere oplossing

donderdag 3 februari 2005 17:32

Acties:

Verwijderd

Pure gok, maar wellicht werkt het beter als je display:block toevoegt? Overigens lijkt het me hander als je dat plaatje gewoon direct toevoegt als achtergrond van het element waar het bij hoort.

donderdag 3 februari 2005 23:13

Acties:

savale

Topicstarter

Het punt is dat ik schaduwrandje langs dat (nog nog) rode blokje wil hebben...maar ik wil ook wel die streepjes erin zichtbaar hebben (deze worden lichtgrijs) en het rode blokje wordt "de website"

donderdag 3 februari 2005 23:26

Acties:

Verwijderd

code:

body {
margin:0;
padding:0;
}

heb ook een keer zo'n soort probleem gehad.
dit had het bij mij opgelost...

vrijdag 4 februari 2005 15:37

Acties:

savale

Topicstarter

nog mooier voor schaduwtjes: png-24 support voor ie

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html