explorer, mozilla en CSS

[anoniem]

Ik heb momenteel een probeersel in elkaar gezet waarbij de layout van mijn site volledig m.bv. CSS wordt opgemaakt. Ik heb e.e.a. eerst met kladblok uitgewerkt, vervolgens met DW verder uitgewerkt. Ik loop nu echter tegen het volgende probleem aan. IN mijn site wil ik een afbeelding plaatsen op een bepaalde positie, absolute dus. In mijn style sheet heb ik gedefinieerd: [quote:cd43b80848] #Graphics { color: #33FF00; position: absolute; z-index: 10; left: 500px; top: 10px; } [/quote:cd43b80848] In de html site staat de volgende DIV: <div id="Graphics"> <img src="graphics/foto1.jpg" alt=""> </div> Waarmee ik foto1 op een leuke plaats neer zet. In DW staat de foto precies goed. ALs ik echter in Explorer de site bekijk is het prut. Natuurlijk ook in mozilla geprobeerd en dáár werkt alles feilloos. Heeft iemand een idee waar hier de fout zit? Ik za proberen morgen de html pagina en de style sheet op een site erbij te planten. Thor2002

[anoniem]

je kunt proberen geen img neer te zetten maar het plaatje als achtergrond gebruiken. htm wordt dan zo: <div id="Graphics"><span>plaatje</span></div> Css zo: #Graphics { color: #33FF00; background-image: url(graphics/foto1.jpg); position: absolute; z-index: 10; left: 500px; top: 10px; } nu heb je het probleem van de tekst "plaatje" die in het plaatje staat Dat los je als volgt op: #Graphics span { visibility: hidden; } Ik hoop dat het wat oplost. Ik ben zelf ook nog maar net op CSS overgestapt, maar het het is een goede stap geweest :D

[anoniem]

hm, hm, weet wat je bedoelt met overstappen is een geode keus... Mijn sites (althans de bronnen) zien er nu nog uit als een telefoonboek... Wat ik eigenlijk bedoelde is dat de afbeelding in zowel mozilla als DW netjes neergeze kunnen worden inclusief overlappen (dus als ik m.b.v. een CSS een headerbalk aanmaak en er vervolgens een plaatje overheen wil 'projecteren') werkt dat prima. Vreemd genoeg krijg ik in explorer het grote probleem dat de afbeelding als een onderdeel van de tekst wordt gezien en dus onderaan tegen de linkerkant aan geplakt wordt. Ik heb al even zitten struinen op het net, onder andere de kunst afgekeken van www.bluerobot.com die dit trucje veelvuldig gebruikt op de index, maar het trucje werkt bij hem wel, bij mij niet. Misschien dat ik voortaan niet meer voor explorer sites maak....volgens mij snij ik mezelf dan wel een beetje in de vingers... Thor2002 PS ik ga even kijken naar IC. Dan nog even wat lessen voorbereiden...konden we maar met minder slaap... Thor2002

[anoniem]

[quote:720608c079="thor2002"]Misschien dat ik voortaan niet meer voor explorer sites maak....volgens mij snij ik mezelf dan wel een beetje in de vingers... [/quote:720608c079] Dat denk ik ook. Ik begrijp verder niet precies wat je bedoelt maar mijn oplossing had verder geen zin? (wss had ik het toen ook al verkeerd begrepen :D)

[anoniem]

[quote:d1c7542485="thor2002"]Ik loop nu echter tegen het volgende probleem aan. IN mijn site wil ik een afbeelding plaatsen op een bepaalde positie, absolute dus.[/quote:d1c7542485]Absoluut is niet de enige optie hoor. [quote:d1c7542485]In mijn style sheet heb ik gedefinieerd: [code:1:d1c7542485] #Graphics { color: #33FF00; position: absolute; z-index: 10; left: 500px; top: 10px; } [/code:1:d1c7542485]In de html site staat de volgende DIV:[code:1:d1c7542485]<div id="Graphics"> <img src="graphics/foto1.jpg" alt=""> </div>[/code:1:d1c7542485][/quote:d1c7542485]En verder? Er zitten daar nogal wat verschillen in. [quote:d1c7542485] Heeft iemand een idee waar hier de fout zit? Ik za proberen morgen de html pagina en de style sheet op een site erbij te planten.[/quote:d1c7542485]Dat zou al veel meer helpen.

[anoniem]

Site is nog niet in de lucht, komt echt binnenkort zodat er een iets gefundeerder verhaaltje is te maken van het probleem. termin8or, wat bedoel je precies met 'en verder? Er zitten daar nogal wat verschillen in.' Waarin? In de CSS, in de HTML code? In de CSS definieer ik wat er met de DIV graphics moet gebeuren, in de HTML code plaats ik het plaatje in de DIV graphics. Ik begrijp ook wel dat ik in de style sheet de afbeelding kan plaatsen, maar ik wil voor verschillende pagina's ook verschillende afbeeldingen op exact dezelfde plaats zetten. V.w.b. de absolute, daar heb je gelijk in. Ik vind dat vor mijzelf de meest duidelijke manier van plaatsen. Maar dat mijn eigen bescheiden meninkje... Thor2002

[anoniem]

euh, dat is je persoonlijke mening? Om dingen te laten werken gebruik je CSS selectors en properties. En of de een je nou meer bevalt of de ander, uiteindelijk heb je diegene nodig die werkt. En absolute is vaak overbodig en lastig om mee te werken als je de CSS2 specificatie niet uit je hoofd kent (naast alle herzieningen van CSS2.1). Ik wilde graag meer broncode zien. Op deze manier kan ik je niet in een keer het probleem vertellen. Je hebt toch wel bij je provider een account waar je hem op kunt zetten?

[anoniem]

Sorry hoor. Wij wentelen ons in onwetendheid. V.w.b. het plaatsen bij een provider, dat moet maar even tussen het werk door. Maar om even op mijn vraag terug te komen: Waarom plaatst IE de foto in het volgende voorbeeld (Dus even voor de duidelijkheid, dit is alleen maar een opzet!!! Links etc. werken nog niet) niet over de horizontale balk heen, terwijl dat in DW en mozilla wel het geval is? http://www.oldenbarneveltschool.nl/huis.html De foto zou bijv. door een kleine afbeelding kunnen worden vervangen die aansluit op de onderliggende balk. Overigens, dit is allemaal gebaseerd op de site van http://www.bluerobot.com, waar de maker een afbeelding van een blaadje over een achterliggende balk heeft geplaatst. Tenslotte, de bedoeling van dit forum is onder andere om van elkaar te leren, niet om direct een veeg uit de pan te krijgen. En ja, dat is mijn persoonlijke mening. Net zo persoonlijk als mijn wellicht volstrekt verkeerde, niet-onderbouwde, foute, slechte smaak voor muziek. :P Thor2002. PS. buiten dat kennen maar vrij weinig mensen mijn voorkeur voor muziek.

[anoniem]

De box model hack die je ervoor hebt gebruikt staat er niet goed. [code:1:8b12b30f72] #Menu { position:absolute; top:100px; right:20px; width:172px; padding:10px; background-color:#eee; border:1px dashed #999; line-height:17px; voice-family: "\"; z-index: 12; }\""; voice-family:inherit; width:150px; } [/code:1:8b12b30f72] Als je dat gedeelte verwijdert, dan gaat die wel goed. [quote:8b12b30f72] Net zo persoonlijk als mijn wellicht volstrekt verkeerde, niet-onderbouwde, foute, slechte smaak voor muziek. [/quote:8b12b30f72] Laat me raden, Michael Jackson? :o

[anoniem]

:oops: Dat is dus het vervelende van werken met DW zonder af en toe de bron te controleren. Die wil nog wel eens de hack omver helpen. Dank voor deze oplettendheid! V.w.b. mijn muzieksmaak....Nee, Mickey Jackson (die overigens wederom voor de rechter moet komen om voor een leuk bedrag een probleem te laten verdwijnen) vind ik niet echt bij mijn smaak passen. Ik ben na thriller op hem uitgekeken. Ben benieuwd hoe je op die muziek terecht bent gekomen? Thor2002

[anoniem]

Dat was mijn lugubere vorm van humor. Negeer maar gewoon. Ik gebruik zelf liever niet dit soort hacks, trouwens. Ik zou het alleen doen als het echt niet anders kan. Mozilla en Opera kun je tegenwoordig verschillende box models laten gebruiken met css. Gebruik dit in je body selector: box-sizing: border-box -moz-box-sizing: border-box;

[anoniem]

[url=http://www.annevankesteren.nl/archives/2003/10/17/keep-css-easy-2-and-more#c000447]Uitkijken met die methode[/url] Ik houd ervan om IE6 in quirk te zetten (met xml prolog of <!-- --> voor de doctype) en dan [url=http://www.annevankesteren.nl/archives/2003/09/09/keep-css-easy]een simpele box model hack[/url] te gebruiken.

[anoniem]

\offtopic: Via anne's link kwam ik op http://www.plasticlab.nl/index.php?p=68&c=1#comments terecht. Treurig om te zien dat spammers nu ook al blogs hebben ontdekt voor het aanprijzen van hun sexsites (zie onderaan die pagina). :(