schalen met css en wat explorer ermee doet
15 november 2008 - 10:56   
geplaatst door: ingeborg
Hoi,
ik ben met een site bezig die even hier staat; bewerkt; is er niet meer

het idee was om de achtergrondfoto te schalen zodat ik geen randen
krijg aan de zijkanten.
maar dat schalen werkt niet in explorer, dan zie je een lelijke witte rand onder en
rechts als mensen een kleine laptop hebben.

wat kan ik nu het beste doen.
zal ik de foto gewoon in de container div gooien en dan toch met randen?
dus het hele schalen idee laten vallen?

of is het net zoveel werk om een explorer truuk te vinden? de code die ik er nu
voor heb werkt ook niet in explorer 5.2 [die op mijn mac staat.]

de tekst [#content heb ik op 550 gezet om het schalen te laten werken in explorer]
is nu eigenlijk ook niet okee...wordt lelijk afgekapt en explorer doet het volgens mij nog
minder dan 550px.

[ik heb [nog] geen windows om te testen het is iedere keer weer schrikken dat het allemaal zo heel anders wordt dan op mijn mac met firefox.]

groetjes ingbeorg

(Bewerkt door ingeborg om 12:34, 26-11-2008)

schalen met css en wat explorer ermee doet
15 november 2008 - 12:44    reactie #1
geplaatst door: Steve07
Ik zie je probleem niet, in ie6 doet hij het precies zo als in Safari.
schalen met css en wat explorer ermee doet
15 november 2008 - 13:17    reactie #2
geplaatst door: macsmet
Explorer 5.2 voor Mac is nou niet echt een referentiekader hoor!
Gewoon vergeten die browser en vooral in Firefox en Safari testen.

Explorer 6 en 7 houden er toch nog wel andere interpretaties op na dus testen voor die browsers blijft wel nodig.

Groeten!

CamelCaps | Educatieve Software - http://www.camelcaps.nl
schalen met css en wat explorer ermee doet
15 november 2008 - 13:32    reactie #3
geplaatst door: Spinsels
Het schaalt prima hoor in IE5.5, 6 en 7 onder windows. Je zou IE5 op de mac niet als toets moeten gebruiken. Die is niet voor niets al afgeschaft. De rand rechts die je krijgt is een basis van een scrollbalk. Die krijg je helaas niet weg in IE.
-> e-learning en consultancy <-
schalen met css en wat explorer ermee doet
15 november 2008 - 13:45    reactie #4
geplaatst door: Leendert
IE6 is nou ook niet direct de wereldstandaard meer. Ik schrijf er niet speciaal meer voor of het moet toevallig lukken. Anders zien ze dit: Oeps!.  :woot:
schalen met css en wat explorer ermee doet
15 november 2008 - 14:16    reactie #5
geplaatst door: ingeborg
hoi, bedankt allemaal, fijn snel!

maar mijn klant heeft dus een windows laptopje en vindt het zo niet goed.
zij ziet nl. of die witte randen aan de zij- en onderkant,
of na die 'exploderhack'
[DIV -moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;]  
een smaller tekst'blok'
[bij mij ziet het er ook redelijk uit, en op een gewoon windows groot scherm ook wel.]

ps. mag ik ook vragen wat jullie er uberhaupt van vinden? is het bv. te raar allemaal of/en
is het wel zakelijk genoeg? is niet ontopic maar vraag ik me wel af

schalen met css en wat explorer ermee doet
15 november 2008 - 15:29    reactie #6
geplaatst door: Spinsels
Hmm..misschien kun je je klant er van overtuigen dat je ontwerp niet zozeer voor haarzelf, maar vooral voor haar potentiële klanten gemaakt is. Zelfs al het browservenster 800 x 600 groot is, ziet het er allemaal nog wel ok uit. Over smaak valt veel te twisten dus beperk ik me maar tot wat andere opmerkingen ;)
Ik zou de tekst in paragrafen plaatsen en niet via harde returns (
) in blokken indelen en er tussenkoppen in plaatsen. Dan krijgt het geheel visueel wat meer structuur en vinden zoekmachines het ook lekkerder. De pagina's hebben nu een nogal vlakke/grijzige indruk en nodigen naar mijn idee niet echt uit tot lezen. Wellicht dat je ook de titel en de navigatie wat meer visueel interessant zou kunnen maken. Veel termen die gebruikt worden zouden juist als blikvangers kunnen werken en daarmee de pagina ook wat scanbaarder kunnen maken.
Maar goed, da's dus off topic en gewoon maar een mening.
-> e-learning en consultancy <-
schalen met css en wat explorer ermee doet
15 november 2008 - 16:04    reactie #7
geplaatst door: ingeborg
dankjewel voor de tips! 'k ga er mee bezig.

en over het schalen; als de klant het dan toch niet okee vindt zet ik
de plaatjes gewoon in een container en aan de zijkanten een rand
denk ik dan maar...

schalen met css en wat explorer ermee doet
16 november 2008 - 11:29    reactie #8
geplaatst door: ingeborg
hoi!

gisteren zag ik op de vpro site [hebben ook een schalende achtergrond] dat de
<link rel="stylesheet" href="/frontend/style/css.jsp" /
waar je als bezoeker met een firefox kijkt  heel anders is dan wanneer je met explorer
gaat kijken want daar is die zo ;
<link rel="stylesheet" href="/frontend/style/splash.css" /

de vpro site deed het schalen op de computer van mijn klant wel zonder die lelijke
witranden ed. dus ik neem aan dat het daar mee te maken heeft...of zit ik er helemaal
naast?

deze vond ik ook nog; www.markschenk.com/cssexp/background/scaledbgimage.html
maar die moet ik nog bekijken op die laptop van mijn klant...wellicht zit daar toch ook
die witrand..

die plaatjes in de container zetten [verkleind] vind ik absoluut helemaal nix.
[alleen de index uitgeprobeerd; bewerkt , is er niet meer]

(Bewerkt door ingeborg om 12:36, 26-11-2008)

schalen met css en wat explorer ermee doet
17 november 2008 - 09:04    reactie #9
geplaatst door: mvdg
Mag ik zeggen dat ik het er vreemd vind uitzien als de achtergrond (inclusief titel!)
meebeweegt als ik het venster groter of kleiner maak. Dat is toch totaal niet logisch.
Dat je een 'beeldvullend' achtergrondplaatje wilt hebben daar kan ik me nog wat
bij voorstellen, maar die titel moet dan toch echt los staan.

Ik zou in zo'n geval kiezen voor een groot plaatje dat bij de meeste mensen netjes
de achtergrond vult. Je plaatje leent zich er goed voor om 'uitgebreid' te worden.
Maak aan de rechterkant meer 'haarkleur' erbij en aan de onderkant meer 'huidkleur'.
Maak je totale plaatje zo groot dat het er altijd okee uit ziet (2400 x 1600 pixels ofzo).
Het linksbovenste deel blijft dan altijd netjes in verhouding tot je tekst. Bij schalen
beweegt het niet mee maar je krijgt ook geen randen.

Mitch Design : websites en interactieve toepassingen : http://www.mitchdesign.nl
schalen met css en wat explorer ermee doet
17 november 2008 - 09:28    reactie #10
geplaatst door: ingeborg
Dankjewel voor je antwoord,

Die titel had ik ook eerst los gemaakt, maar die is transparant [png]
en dat kan explorer ook weer niet aan, die maakt het gewoon helemaal
wit. [moet ik weer eerlijk zijn en erbij vermelden dat dat geldt voor oudere
browsers maar daar moet ik misschien dan echt geen rekening meer mee
houden ?]

Als ik zo'n groot plaatje ervan maak, zien de mensen met een kleine laptop
toch alleen nog maar een 4-de [zoiets?] van het plaatje?
[daarom heb ik het met schalen geprobeerd]

groet!

schalen met css en wat explorer ermee doet
17 november 2008 - 09:34    reactie #11
geplaatst door: mvdg
@ingeborg:
Mensen met een klein scherm zien dan inderdaad alleen het linksbovenste deel.
Dus je moet ervoor zorgen dat mensen met een heel klein scherm toch nog een
interessant plaatje te zien krijgen (daar kan dan best een randje vanaf vallen,
dat is bij zo'n achtergrondbeeld geen ramp). En mensen met grote schermen
moeten geen lelijke rand krijgen dus daarvoor maak je rechts en onder een extra
stuk plaatje in de kleur van het haar/huid zodat het een mooi doorlopend vlak is.

Het is natuurlijk ook zo dat mensen met een 30 inch scherm je site echt niet full
screen gaan bekijken; mensen met zulke grote schermen zetten normaal meerdere
vensters naast elkaar dus uiteindelijk zal de venstergrootte niet zo enorm veel
groter zijn dan bijvoorbeeld op een laptop.

Kortom: zoek een goede middenweg! Dat werkt beter dan schalen. Immers met
schalen heb je ook nog een lelijk vervormde afbeelding als iemand zijn venster
heel smal maakt.. dat is toch ook niet fijn!

Mitch Design : websites en interactieve toepassingen : http://www.mitchdesign.nl
schalen met css en wat explorer ermee doet
18 november 2008 - 14:44    reactie #12
geplaatst door: ingeborg
hoi!
ik ben bezig met een aantal van jullie tips maar krijg nu eigenlijk het idee dat de hele vormgeving maar moet veranderen, weg met dat achtergrond plaatje enzo. dus ben even van slag en druk met denken wat nu.

en ook aan het oefenen met die p, ik vond de break fijner eigenlijk :-) ik google wel even waarom de br niet mag ;-)]

groetjes ingeborg

schalen met css en wat explorer ermee doet
18 november 2008 - 17:40    reactie #13
geplaatst door: Godfather
Een idee is om het beeld zelf 'af te maken' door een herhalend patroon in te zetten, links, rechts en onder. Je kan dan bijvoorbeeld bij de rechterkant de haren weg laten vloeien in dezelfde kleur, langzaam aan naar een wittint of neutraal wit, maar dan zo waardoor dit makkelijk te herhalen is. Zo ook voor de onderkant, af laten vloeien naar licht-gelige tinten en deze ook weer zo maken dat ze makkelijk te herhalen zijn.

Eventueel ook voor de linkerkant als je de content gecentreerd wilt hebben en dan kan de gebruiker schalen wat hij of zij wilt. Een voordeel is dan dat je beeld niet scheef trekt waardoor de mevrouw ineens heel dik of dun wordt. Hetzelfde voor de kop tekst.

Offtopic, de site is erg licht, ik zou de letters iets donkerder maken. Verder een leuke basis!

Mac Pro '08 - iPad 16GB - iPhone 6 - Next Gen MB Pro
schalen met css en wat explorer ermee doet
19 november 2008 - 12:45    reactie #14
geplaatst door: ingeborg
hoi!
dankjewel voor je tips, ik had de onderkant van de plaatjes inderaad naar wit laten faden,
[de zijkanten moeten nog] de tekst donkerder en de linksjes verhuisd naar rechts.
het staat inmiddels hier om te testen;
serenacortinicoaching [bewerkt, is er niet meer]

maar ik probeer ook nog steeds met css de zaak gewoon te laten werken.
ik vond deze site http://www.cssplay.co.uk/layouts/background.html
en zie dat daar iets gebeurt met een scrolling en fixed id, dus dat ga ik proberen te begrijpen...

groet en dank allemaal voor de hulp!

(Bewerkt door ingeborg om 12:36, 26-11-2008)

schalen met css en wat explorer ermee doet
26 november 2008 - 12:42    reactie #15
geplaatst door: ingeborg
hoi, ik ben er wel een beetje uit,
heb die code van vorige bericht gebruikt en de site is inmiddels online.
het schalen kan nu zo blijven, omdat nu alleen de tekst
scrollt en er dus geen witte randen meer te zien zijn.

omdat google al een linkje had gevonden heb ik al de oude linkjes
even verwijderd...

bedankt allemaal en groeten!
ingborg