Kleurverschil in div's

[Kanter]

Ik heb een achtergrond met vaste grootte en deze wil ik vergroten. Nu heb ik deze in photoshop in drieén gehakt en deze gekoppeld aan divs.

Het probleem is dat bij de onderste div kleurverschil optreed.

Voorbeeld:
http://erikj4n.home.xs4all.nl/testpagina/

Orginiele image:
http://erikj4n.home.xs4al...ina/images/bg-content.png

In photoshop gebruik ik de save to web en dan png. Ik heb hierbij verschillende instellingen geprobeerd maar het verschil blijft erin.

In photoshop zit ook de optie om html en images te genereren. In deze gegenereerde site is de afbeelding wel goed. Gebruikt ik de losse onderdelen dan treedt het verschil weer op.

photoshop html voorbeeld:
http://erikj4n.home.xs4all.nl/photoshop-test/edit.html

[Verwijderd]

mid:


bottom:


Even wat duidelijker: onder elkaar:



Er gaat dus duidelijk iets mis met het opslaan vanuit photoshop. Misschien iets met kleurprofielen?

[Acid_Burn]

Toch zal je iets anders gedaan hebben bij het exporteren van je onderste png dan bij de andere 2.. ergens een laagje uitgezet ofzo aangezien die onderste png zelf veel donkerder is.

[The_Ghost16]

De gebruikte bg_content.png zit een kleur verloop in. De bovenkant is lichter dan de onderkant. En omdat je een stukje van het midden pakt en niet het hele stuk krijg je dus kleur verschil.

[Kanter]

The_Ghost16 schreef op woensdag 27 juli 2011 @ 16:08:
De gebruikte bg_content.png zit een kleur verloop in. De bovenkant is lichter dan de onderkant. En omdat je een stukje van het midden pakt en niet het hele stuk krijg je dus kleur verschil.

Hmm ja er zit een verloop in alhoewel heel subtiel, photoshop gebruikt ook meer "stappen" om tot de footer te komen. Dus dat zou betekenen dat ik meer div's nodig heb om de overgang te maken.

[MueR]

Waarom gebruik je niet gewoon border-radius? Dat kleurverloop kan je er nog wel in krijgen met een tweede block en daar het verloop in zetten.

[BramVroy]

Ik begrijp überhaupt het nut niet van het op te splitsen in verschillende divs? Eén grote div met die afbeelding als achtergrond? Dan kan je daarin nog zo veel positioneren als je wilt!

(Zoals MueR zegt kan je ook gewoon met border-radius, border-bottom en background-image ongeveer hetzelfde bereiken)

[C0rnelis]

BramVroy schreef op donderdag 28 juli 2011 @ 19:15:
Ik begrijp überhaupt het nut niet van het op te splitsen in verschillende divs? Eén grote div met die afbeelding als achtergrond? Dan kan je daarin nog zo veel positioneren als je wilt!

(Zoals MueR zegt kan je ook gewoon met border-radius, border-bottom en background-image ongeveer hetzelfde bereiken)

Als je 1 afbeelding gebruikt in combinatie met 1 div is het niet echt dynamisch. Je moet de div altijd die grootte geven wil je de rondingen zien en je kan die div tevens nooit groter maken mocht je er meer in kwijt willen. Daarnaast zijn 3 kleine afbeeldingen minder bytes dan 1 grote.

(En je kan het ook in een sprite stoppen zodat je het bij 1 request houdt)

[ Voor 5% gewijzigd door C0rnelis op 28-07-2011 19:40 ]

[MueR]

C0rnelis schreef op donderdag 28 juli 2011 @ 19:39:
[...]


Als je 1 afbeelding gebruikt in combinatie met 1 div is het niet echt dynamisch. Je moet de div altijd die grootte geven wil je de rondingen zien en je kan die div tevens nooit groter maken mocht je er meer in kwijt willen. Daarnaast zijn 3 kleine afbeeldingen minder bytes dan 1 grote.

(En je kan het ook in een sprite stoppen zodat je het bij 1 request houdt)

Kul, zie: http://muer.nl/got/web/1466753.html.Nu ben ik even te lui om die image fatsoenlijk te knippen, dus ik gebruik even TS z'n image met die gekke shadow en border in de randen. Zelfs die image even fatsoenlijk getiled. En het valideert ook nog.

Getest in FF5, Chrome 12.0.742.nogwat, Opera 11.50 en IE9

[ Voor 31% gewijzigd door MueR op 28-07-2011 20:01 ]

[MsG]

En als je iets verder kijkt dan IE9, oftewel mensen met XP? Dan is die gehele CSS-methode meteen in de prullenbak te gooien. In het geval je dan puur de plaatjes voor de randen wil gebruiken gaat C0rnelis zijn verhaal wel degelijk op.

[BramVroy]

Wat Muer zei dus Waarom het moeilijk maken, als het ook makkelijk kan?

@MsG: ja dan hebben die mensen geen ronde borders en geen schaduw. What else? Ik vind niet dat je per se extra tijd moet steken in dergelijke futiliteiten voor oudere browsers. Tenzij het om een groot (en dan bedoel ik: GROOT) project gaat dat zeer belangrijk is en dat goed betaald wordt.

Je moet je best doen om er het overal goed te laten uitzien, maar moet je daarom de gebruikers met oudere software belonen door daar meer werkuren in te stoppen die je aan andere optimalisaties kan spenderen? Ik vind van niet (en zeker niet iedereen deelt deze mening, dat weet ik, dus: in before shitload of comments)

[ Voor 80% gewijzigd door BramVroy op 28-07-2011 20:06 ]

[MueR]

MsG schreef op donderdag 28 juli 2011 @ 20:01:
En als je iets verder kijkt dan IE9, oftewel mensen met XP? Dan is die gehele CSS-methode meteen in de prullenbak te gooien. In het geval je dan puur de plaatjes voor de randen wil gebruiken gaat C0rnelis zijn verhaal wel degelijk op.

Tja, misschien moet je dan maar gewoon tables gebruiken Je moet ooit een keer de stap maken naar nieuwe features. Altijd maar blijven wachten tot mensen hun browser upgraden helpt niet, dat gaat nog jaren duren. Dat kan een Microsoft misschien niet maken, maar als hobbysite moet je dat makkelijk kunnen doen.

offtopic:
Dammit BramVroy, doe eens niet het gras voor mijn voeten wegmaaien met die edit (na mij ook nog )

[ Voor 15% gewijzigd door MueR op 28-07-2011 20:08 ]

[MsG]

Mwoah IE9 als minimale eis vind ik wel overdreven. Dat je IE6 negeert na zoveel jaar snap ik prima. Maar IE9 betekent dus iedereen met XP die of een andere browser moet of het niet goed ziet.

7 of 8 lijkt me beter.

[MueR]

Voor een bedrijfssite wel ja. Maar laten we wel wezen, zonder de TS aan te willen vallen, voordat hij zo ver is om sites op dat niveau te maken moet ie nog wel even. Tegen die tijd is IE10 of 11 uit. Ik ben het verder wel met je eens dat enkel de meest recente versie van een browser ondersteunen een beetje vergezocht is (current - 1 is beter), maar dan wel bij professionele sites. Niet een hobbygeval.

[MsG]

Nee oke, maar nu wordt het al wel aangewend om de nieuwste technieken blind te gebruiken. Het zal inderdaad wel even duren voordat hij professioneel gaat, maar vaak genoeg zie je lerende knapen al wel de lokale bakkerssite bouwen, wat imo ook prima kan, ook al is het technisch misschien nog niet perfect. Kijk dan wel wat breder naar cross-browser-werkendheid.

[MueR]

Daar heb je in principe gelijk in. Echter ben ik van mening dat dingen als rounded corners en box-/text-shadow onder progressive enhancement vallen. Ondersteunt je browser het niet dan is dat jammer, maar dat zou het gebruik van de site niet moeten hinderen.

Door het gebruik van "css3 hipheid" wordt de site zelfs sneller, omdat je kleinere en minder images nodig hebt. Dat voordeel weegt wat mij betreft op tegen het gebrek aan een afgerond hoekje ergens.

[C0rnelis]

MueR schreef op donderdag 28 juli 2011 @ 19:51:
[...]

Kul, zie: http://muer.nl/got/web/1466753.html.Nu ben ik even te lui om die image fatsoenlijk te knippen, dus ik gebruik even TS z'n image met die gekke shadow en border in de randen. Zelfs die image even fatsoenlijk getiled. En het valideert ook nog.

Getest in FF5, Chrome 12.0.742.nogwat, Opera 11.50 en IE9

Natuurlijk kan het zo . Maar ik ging uit van het plaatje van OP/constructie van Darkstone en niet van een losse tile met css borders. Zelf ben ik momenteel erg druk bezig met het opschonen van een bedrijfssite en die moet sowieso nog werken in IE8 (en met IE7 mag het er best minder mooit uitzien maar moet de site niet overhoop gooien) en om die reden komen dat soort constructies eerder naar boven dan css 3 oplossingen zoals die van jou. (Al zou je natuurlijk met een conditional statement beide oplossingen kunnen gebruiken voor de mooiste oplossing voor hedendaagse browsers).

[Voutloos]

MueR schreef op donderdag 28 juli 2011 @ 20:27:
Daar heb je in principe gelijk in. Echter ben ik van mening dat dingen als rounded corners en box-/text-shadow onder progressive enhancement vallen. Ondersteunt je browser het niet dan is dat jammer, maar dat zou het gebruik van de site niet moeten hinderen.

Door het gebruik van "css3 hipheid" wordt de site zelfs sneller, omdat je kleinere en minder images nodig hebt. Dat voordeel weegt wat mij betreft op tegen het gebrek aan een afgerond hoekje ergens.

QFT en bovendien minder initiele ontwikkeltijd, en geen ontwikkeltijd bij een update van je background.

[Acid_Burn]

MueR schreef op donderdag 28 juli 2011 @ 20:27:
Daar heb je in principe gelijk in. Echter ben ik van mening dat dingen als rounded corners en box-/text-shadow onder progressive enhancement vallen. Ondersteunt je browser het niet dan is dat jammer, maar dat zou het gebruik van de site niet moeten hinderen.

Allemaal leuk en aardig maar als de klant in zijn IE8 ziet dat het niet overeenkomt met het geaccepteerde design gaat ie (terecht) klagen. Dan kan je wel zeggen dat ie Win7 moet installeren of een alternatieve browser, maar daar heeft de klant echt geen boodschap aan.

[MueR]

Daarom geven wij van tevoren duidelijk aan wanneer een design elementen bevat die "niet handig" zijn. Als iemand perse shadows en rounded corners op een liquid container wil hebben, die ook nog eens over een gradient background (of nog erger, een image) heen moet, kan je niet anders. Sommige dingen moet je gewoon niet backward compatible willen maken.

[R4gnax]

Acid_Burn schreef op donderdag 28 juli 2011 @ 22:15:
[...]

Allemaal leuk en aardig maar als de klant in zijn IE8 ziet dat het niet overeenkomt met het geaccepteerde design gaat ie (terecht) klagen. Dan kan je wel zeggen dat ie Win7 moet installeren of een alternatieve browser, maar daar heeft de klant echt geen boodschap aan.

Dat gaat dus heel erg van de klant, doelgroep en markt afhangen.

Zelf werk ik aan projecten voor grote klanten in de reisindustrie, waar men in de regel toch echt mikt op gelikte, uitnodigende website designs. Toch is ook daar al door één van onze klanten het vervangen van op plaatjes gebaseerde effecten door equivalente CSS3 constructies serieus in overweging genomen als performance verbetering.

[Kanter]

Bedankt allen voor de reponse. Ik heb het inmiddels opgelost met css zoals MueR aangaf. Hierbij is het gelukt en het resultaat is perfect. Moet toch eens verdiepen in css(3) en wat je er allemaal mee kunt want dat kan heel wat schelen in images/requests/javascript zie ik al.

De website die ik ontwikkel is een persoonlijke website met een gallery, niet heel erg spannend allemaal.

Ik heb dus css radius gebruikt:

Cascading Stylesheet:

border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
box-shadow: 0px 2px 0px #575451;
-moz-border-radius-bottomright: 12px;
-moz-border-radius-bottomleft: 12px;
-webkit-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;

In de head voor IE9 support het volgende geplaatst:

HTML:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Alleen IE8 vernaggelt de boel. En dan niet alleen de borders Nouja weer verder uitzoeken.

[DeEindbaas]

Is dit geen optie voor je ronde hoekjes?

Gewoon een div maken met je de kruisjes als background en dan de jquery plugin gebruiken

[MueR]

Dreamwire schreef op vrijdag 29 juli 2011 @ 13:24:
Is dit geen optie voor je ronde hoekjes?

Gewoon een div maken met je de kruisjes als background en dan de jquery plugin gebruiken

Dat zou ik niet bepaald als oplossing zien. Meer een enorm ranzige hack die enorm veel dom elements gebruikt om iets te emuleren wat prima met CSS kan. Om nog maar te zwijgen van het nut van het includen van een complete js library plus plugins en plugin-css.

[ Voor 10% gewijzigd door MueR op 29-07-2011 13:29 ]

[DeEindbaas]

Btw ik zie het probleem al

de TS heeft een gradient in de image zitten dus daarom hij donkerder aan de onderkant.

Voorbeeld: http://www.dreamwire.nl/klanten/test/

oplossing:

CSS:

code:

.holder {
    margin : 0 auto;
    background : url(lay-mid-back.gif) repeat-y;
    overflow : hidden;
    width : 946px;
}
        
.top {
    float : left;
    background : url(lay-top.gif) no-repeat;
    overflow : hidden;
    width : 946px;
    height : 14px;
}
        
.middle {
    float : left;
    background : url(lay-mid.gif) no-repeat left bottom;
    overflow : hidden;
    padding : 16px 30px 2px;
    color : #FFFFFF;
    font-size : 12px;
    font-family : Arial;
    width : 886px;
    min-height : 390px;
}
        
.bottom {
    background : url(lay-bottom.gif) no-repeat;
    height : 28px;
}

HTML

code:

<div class="holder">
    <div class="top"></div>
    <div class="middle">
        Hier je content.
    </div>
    <div class="top bottom"></div>
</div>

Images:

[ Voor 4% gewijzigd door DeEindbaas op 29-07-2011 13:50 ]

[djexplo]

Kanter schreef op woensdag 27 juli 2011 @ 15:55:
Ik heb een achtergrond met vaste grootte en deze wil ik vergroten. Nu heb ik deze in photoshop in drieén gehakt en deze gekoppeld aan divs.

Waarom zou je de image in 3'en hakken in photoshop?
Je kan met wat CSS "hacks" ook een sub-deel weergeven uit een groter plaatje, (word ook wel CSS Sprites genoemd)
http://www.guistuff.com/css/css_imagetech1.html

[ Voor 4% gewijzigd door djexplo op 29-07-2011 13:57 ]

[MueR]

Dreamwire schreef op vrijdag 29 juli 2011 @ 13:45:
oplossing:

Die vervolgens de mist in gaat door het tilen van de background image...

[DeEindbaas]

MueR schreef op vrijdag 29 juli 2011 @ 14:00:
[...]

Die vervolgens de mist in gaat door het tilen van de background image...

Dat ga je sowieso toch krijgen met deze background? Als CSS 3 geen optie is dan valt er verder weinig aan te doen lijkt mij?

Dus de TS heeft nu zelf de keuze wat hij wilt gebruiken, beide oplossingen zijn niet optimaal.

[ Voor 13% gewijzigd door DeEindbaas op 29-07-2011 14:11 ]