[html] div anders weergegeven in opera dan ie

[Verwijderd]

Beste medeprogrammeurs,

Ik ben sinds kort even aan de gang gegaan met div.
Leuk allemaal en alle tabellen bijna weggewerkt.
Site klaar en online gezet. Nu zie ik alleen dat in opera en de mac alles door elkaar heen zit.

Waar ligt dat aan? Wat doe ik fout ?
Dit is de site www.proproduct.nl

Is er ook iets dat als ik een tabel heb gemaakt in dreamweaver bv en het omzet naar hoe het in div geprogrammeerd moet worden?
Zoals ik het nu heb gemaakt om alles in juiste positie te zetten is in een tabel.

En ik heb nu 2 tabellen in elkaar om te zorgen dat alles netjes echt in het midden blijft. Is daar andere oplossing voor?

Hartelijk dank

[André]

En wat heb je zelf al geprobeerd? Op deze manier moeten we je alles voorkauwen, en dat is niet de bedoeling. Waar je kom je niet uit, wat lukte er niet?

[Cartman!]

Ik zie aleen maar tables in die pagina uit je TS...waar zijn de divs dan? En het is niet de bedoeling nu overal divs voor te gebruiken maar pak het element wat voor je content bedoeld id. Kopjes met h'x', menu met li's etc. Zoek maar hier op semantiek.

edit: je site fokt overigens ook helemaal op in firefox 2

[ Voor 10% gewijzigd door Cartman! op 06-08-2007 09:49 ]

[crisp]

Begin eerst eens met het toevoegen van een volledige doctype zodat browsers in standards-compliant mode renderen waarmee je al een hoop verschillen tussen browsers uitsluit.

Daarnaast is het niet zozeer dat je <table> door <div> moet gaan vervangen maar gaat het er om dat je CSS gebruikt voor styling en layout, maar dan niet op deze manier:

HTML:

<div style="width: 500px; height: 10px; margin-left: 5px;"><h2>ProProduct ontwerpt winnende "Lounge Chair"</h2></div>

maar meer op deze manier:

HTML:

<h2 class="subHeader">ProProduct ontwerpt winnende "Lounge Chair"</h2>

en je styling netjes in je exteren CSS

Verder zou ik je aanraden niet uit te gaan van IE's interpretatie van CSS maar eerst je site te ontwerpen in een standards-compliant browser en daarna pas foutjes in IE te gaan fixen.

[Verwijderd]

mij lijkt die subheader class overbodig, van een h2 is al meteen duidelijk dat ie een niveau lager zit als de h1, tenzij het een chapeau is en dan is een h2 juist helemaal niet op z'n plaats, maar zou ik het gewoon in een h2 element stoppen (met class chapeau)

vergeet niet dat een class attribuut niet is om een bepaalde style aan je element te hangen

Een chapeau is een "ondertitel"

[ Voor 14% gewijzigd door Verwijderd op 06-08-2007 09:58 ]

[crisp]

Verwijderd schreef op maandag 06 augustus 2007 @ 09:57:
mij lijkt die subheader class overbodig, van een h2 is al meteen duidelijk dat ie een niveau lager zit als de h1, tenzij het een chapeau is en dan is een h2 juist helemaal niet op z'n plaats, maar zou ik het gewoon in een h2 element stoppen (met class chapeau)

Of een class daar overbodig is of niet kan ik niet voor de TS bepalen, ik ben immers niet helderziend Het ging puur om het voorbeeld, ik had net zo goed een ID kunnen gebruiken, of kunnen zeggen dat hij een element selector in CSS kan gebruiken, maar ik denk dat dat het voor de TS alleen maar lastiger te begrijpen maakt

vergeet niet dat een class attribuut niet is om een bepaalde style aan je element te hangen

Daar is het onder andere wel voor, maar niet uitsluitend

Een chapeau is een "ondertitel"

ik dacht dat "chapeau" het Franse woord voor "hoed" was?

[Verwijderd]

crisp schreef op maandag 06 augustus 2007 @ 10:03:
Daar is het onder andere wel voor, maar niet uitsluitend

Een class is om aan te geven in welke (sub)klasse een element zit. Nu heeft een subklasse (met een andere functie) vaak een onderscheidend uiterlijk, vandaar dat er ook een snelle methode in css is om een class te selecteren. Vaak wil je juist een element anders opmaken omdat het in een andere klasse zit, er is altijd een reden om een element anders op te maken, vanuit dat perspectief moet je gaan redeneren (en dus ook naamgeven)

ik dacht dat "chapeau" het Franse woord voor "hoed" was?

Jups, eigenlijk is een chapeau volgens mij ook alleen voor "boventitels", maar voor zover ik weet wordt het in de regel ook gebruikt als term voor ondertitels (in kranten, tijdschriften etc)

[crisp]

Verwijderd schreef op maandag 06 augustus 2007 @ 10:17:
[...]

Een class is om aan te geven in welke (sub)klasse een element zit. Nu heeft een subklasse (met een andere functie) vaak een onderscheidend uiterlijk, vandaar dat er ook een snelle methode in css is om een class te selecteren. Vaak wil je juist een element anders opmaken omdat het in een andere klasse zit, er is altijd een reden om een element anders op te maken, vanuit dat perspectief moet je gaan redeneren (en dus ook naamgeven)

Dat is de semantische benadering inderdaad; je ziet classNames dan als een soort microformat, maar ik zie zelf eigenlijk geen kwaad in een (af en toe) presentationele benadering. Semantics omwille van semantics is soms ook je doel voorbijschieten: ik denk dat voor de meesten "subHeader" meer zal zeggen dan "chapeau", in het laatste geval ben je dan dus je doel voorbij geschoten door een term te gebruiken die bijna niemand iets zegt

[Verwijderd]

ik zou voorstander zijn van een setje voorgedefinieerde classes inderdaad (en of dat nu chapeau is of subheader zal me een worst wezen). Gelukkig doet html 5 imho al een behoorlijke stap in de goede richting door een nieuw setje elementen neer te zetten.

Maar ik denk dat de meeste mensen die iets van een professionele achtergrond in authoring hebben (zekker in printed media) toch wel bekend zouden moeten zijn met termen als chapeau, lede (lead), refer, flag etc.

Je kan wel allerlei nieuwe termen gaan bedenken voor je classes, maar als er bestaande zijn, waarom zou je die dan niet gebruiken. Ok, dat iedereen dezelfde classes gebruikt en stylesheets dus echt lekker uitwisselbaar zijn is natuurlijk een utopie, maar als het even kan wil ik mensen toch wel wijzen dat er termen zijn waarvan de betekenis iig voor een hoop mensen al direct duidelijk is

[crisp]

Verwijderd schreef op maandag 06 augustus 2007 @ 10:40:
ik zou voorstander zijn van een setje voorgedefinieerde classes inderdaad (en of dat nu chapeau is of subheader zal me een worst wezen). Gelukkig doet html 5 imho al een behoorlijke stap in de goede richting door een nieuw setje elementen neer te zetten.

Daar is nog aardig wat kritiek op en de vraag is of de brug naar microformats ueberhaupt wel geslagen gaat worden. Er zijn namelijk een aantal problemen mee:
- wie garandeerd dat de auteur een bepaalde className ueberhaupt vanuit semantisch oogpunt gekozen heeft?
- als er zoveel usecases zijn voor bepaalde semantiek, waarom zou je dan niet beter kunnen opteren voor een nieuw element?
- waarom class gebruiken (multi-purpose extension mechanisme) en niet bijvoorbeeld role (specifiek extension mechanisme mbt semantics)?

Maar ik denk dat de meeste mensen die iets van een professionele achtergrond in authoring hebben (zekker in printed media) toch wel bekend zouden moeten zijn met termen als chapeau, lede (lead), refer, flag etc.

Ik denk dat je zeer voorzichtig moet zijn, en zelfs terughoudend, om terminologie en practices vanuit de print media te vertalen naar het web. Zeker gezien het feit dat alles in print media voornamelijk presentatie-gericht is en juist niet semantisch.

Verder wordt al vaak genoeg de fout gemaakt om semantiek te baseren op de letterlijke betekenis van een naam waarmee je jezelf m.i. veels te veel beperkt (met het risico van 'bloat' om voor elke iets afwijkende usecase een nieuwe naam (zei het voor een element of een class) te gaan gebruiken).

[ Voor 3% gewijzigd door crisp op 06-08-2007 10:57 ]

[Verwijderd]

André schreef op maandag 06 augustus 2007 @ 09:46:
En wat heb je zelf al geprobeerd? Op deze manier moeten we je alles voorkauwen, en dat is niet de bedoeling. Waar je kom je niet uit, wat lukte er niet?

Ik heb geprobeerd me te verdiepen in div.
Waar ik niet uit kom is dat ik niet snap waarom in andere browsers het anders word neergezet als in ie.
wat er niet lukt is het probleem snappen, waardoor ik ook vrij beperkt ben om dingen echt te proberen.
Wie kan het me uitleggen?(vraag dus niet om het voor te kauwen.)

[Cartman!]

Je moet beginnen met een goede structuur. Nu is je hele layout in tables en wil je daar een paar div's in zetten. Dat is niet de manier, je layout in div's (danwel 'ol'/'ul' voor menu's en 'p' voor teksten, semantiek..) bouwen die je vanaf t begin. Laat die tables compleet vallen voor layout. En zoals crisp al aanhaalde : begin met een volledige doctype.
Als je alles gewoon netjes doet dan zul je vrij weinig last hebben van de verschillen tussen browsers is mijn ervaring.

edit: en een document begin (na de doctype) met <html>, niet met <head>, dat zijn toch echt basis dingen. En elk atribuut moet tussen quotes.

[ Voor 13% gewijzigd door Cartman! op 06-08-2007 13:17 ]

[Verwijderd]

catman, hartelijk dank voor je bericht. Ik had al op het 1 en ander gegoogle't wat hier allemaal gemeld werd.
Maar het laatste bericht word ik een stuk wijzer van.

Ik heb de site zelf niet gebouwd. Maar alles was in frames en dat is niet google vriendelijk. vandaar dat ik een kennis heb aangeboden om alles om te zetten.
Maar hier gaat dus echt veel werk in zitten zucht. dan maar weer over naar tabellen denk ik.
hartelijk dank voor de uitleg.

[Cartman!]

Verwijderd schreef op maandag 06 augustus 2007 @ 13:24:
catman, hartelijk dank voor je bericht. Ik had al op het 1 en ander gegoogle't wat hier allemaal gemeld werd.
Maar het laatste bericht word ik een stuk wijzer van.

Ik heb de site zelf niet gebouwd. Maar alles was in frames en dat is niet google vriendelijk. vandaar dat ik een kennis heb aangeboden om alles om te zetten.
Maar hier gaat dus echt veel werk in zitten zucht. dan maar weer over naar tabellen denk ik.
hartelijk dank voor de uitleg.

Waarom blijven op tabellen als je het nu goed kunt leren? Nu ga je het op de 1996 manier opnieuw bouwen terwijl je de kans hebt om het te leren op de 2007 manier. Er zijn genoeg sites te vinden over div layouts en als je specifieke vragen hebt kun je altijd GoT raadplegen.

[Verwijderd]

Als ik nu alles in div om moet gaan zetten, kost me dat net zoveel tijd als een gehele nieuwe site bouwen. of niet ?
Daarbij gebruik ik alleen de 1ste tabbel om alles netjes in het midden te krijgen en om alles op zijn plaats te houden. Behalve bij de main dacht ik laat ik eens 2007 proberen .
Wat nu al problemen opleverd. dus wat zal het worden als ik alles 2007 doe.
Ik ben al aan het zoeken voor div handleidingen .

[Cartman!]

Om je site te centreren is met een div dus echt zo simpel en tig keer langsgekomen hier op GoT. Overigens zie ik dat je ook niet begrijpt hoe een html document opgebouwd wordt. Kijk eens goed hoe doctype, html, head, body geplaatst worden... als je dat allemaal er al verkeerd in zet fokt inderdaad alles op in verschillende browsers. Succes!

[Verwijderd]

Ik was bezig met de site zonder frames te maken en had 1 tabel al gebruikt. Toen bedacht ik me om div te gaan gebruiken. Alleen in main zeg maar.
Toen heb ik tut's over div gelezen.
Nu kwam ik tegen dit probleem aan en heb puur daar op gegoogle't.
Centreren met div kom ik wel tegen maar horizontaal, en niet verticaal.
(ben nu op algemeen div aan het zoeken dus kan best zijn dat ik ernaast zit)

code:

<style type="text/css">
.container {
position: absolute;
margin: 0 auto;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background-color:#FF0000;
}
</style>

[MuisM4t]

Verwijderd schreef op maandag 06 augustus 2007 @ 17:37:
Centreren met div kom ik wel tegen maar horizontaal, en niet verticaal.

Zoek eens op vertical align

[Cartman!]

Gaat niet werken Whizzkid92...

Waarom zou je uberhaupt je site ook verticaal willen centreren? Gewoon bovenaan beginnen en dan de content laten bepalen hoelang je pagina is.

[Verwijderd]

Nou, zoals u ziet is de website van www.proproduct.nl vierkant. En het is mooier ivb met verschillende resoluties dat het netjes in het midden staat. Lijk mij een goeie reden .

[MuisM4t]

Als je het nu helemaal goed wilt doen moet je alles absoluut positioneren, dan maakt het niet uit waar iets in de broncode staat, als het maar omsloten word door zijn tags, met daarin een id of class. (Zie onderaan )
Als je niet gewend bent te werken met divjes kun je beter beginnen met een nieuwe pagina, dit is m.i. makkelijker dan het omzetten van een pagina die met tabellen is gemaakt.

---

Cascading Stylesheet:

#boven{position:absolute;top:10px;}
#onder{position:absolute;top:100px;}

HTML:

<html>
<body>

<div id=onder>Deze tekst staat onderaan de pagina</div>
<div id=boven>Deze tekst staat bovenaan de pagina</div>

</body>
</html>

[Verwijderd]

Maar uiteindelijk is het niet duidelijk waarom in ie wel alles goed word weergegeven en in fire, opera enz niet.

Behalve dat alles wel goed opgebouwd zou zijn als heel die site opnieuw opgebouwd zou worden vanuit div... ik ga testen

[Cartman!]

Ik ben het zwaar oneens met Whizzkid92, je wilt altijd zo min mogelijk absoluut positioneren. Alleen als t echt niet kan moet je t gebruiken imo. Alles relative positioneren geeft je veel meer vrijheid en minder bugs met door elkaar lopende content.

MEEUW, waarom alles anders is? Omdat je pagina moet beginnen met een doctype en een verder goede structuur, nu staan doctype, html en head door elkaar, geen wonder dat browsers er wat verschillends van maken. Als je de pagina door een validator had heengehaald had je dat allang kunnen weten en ik heb het eerder ook al gemeld. Goed lezen, dan kan er weinig misgaan.

[rednek]

Of je kan het altijd met javascript oplossen;

JavaScript:

var $ = function(arg){ return document.getElementById(arg); };
var doCenter = {
 do:function(element){
  var element = $(element);
  var height = window.innerHeight;
  var elHeight = element.style.height.split('px').join('');
  element.style.top = ( Number( height ) / 2 ) - Number( elHeight ) + 'px';
 }
}
window.onload = function(){
 doCenter.do('idNaamVanDiv');
}

moet het doen niet getest. Moet weer aan mijn werk.

[quaintpaul]

Ik volg de thread niet helemaal, mischien niet helemaal on-topic.. Maar in general een tip: als je niet precies weet WAAROM je een tabel layou wilt vervangen door een CSS layout moet je het ook niet doen! Als je niet snapt wat het voordeel is dat een CSS layout programmeer je namelijk de site WAARSCHIJNLIJK op een manier die alsnog niet (semantisch) correct is en dus ook geen accessability meerwaarde biedt..

[Verwijderd]

Catman!, tnx voor je bericht. Ik had je niet zo begrepen maar nu ik de validator heb ondekt op w3c.
Komt het helemaal goed geloof ik, iig stuk beter .

Nu heb ik voor de grap alles kaal geplukt en alleen div gepakt.
Nog steeds is mij laatste div uit positie.
De site is w3c goedgekeurd.
Ik heb er maincontainer in geplaatst en nog steeds. Mag ik nog 1 keer je hulp catman plz?

edit SORRY was de link vergeten www.proproduct.nl/nieuws2.html

[ Voor 8% gewijzigd door Verwijderd op 07-08-2007 16:30 ]

[Cartman!]

Waar is de nieuwe versie te vinden dan? Op het domein uit je TS staat nog steeds alles niet goed en vol met tables.

[Verwijderd]

alleen divs is net zo loos als alleen tables

in beide gevallen vind de validator het overigens wel ok, die zegt niets over semantiek, dat moet je toch echt zelf doen (en begrijpen)

[Verwijderd]

Kwam door de frituurpan .

Edit :mophor, ik heb dit gelezen : http://home.parse.nl/~michiel/semantiek.html

Als ik het goed begrijp moet ik html maken met de elementen(layout van alles) die in css staan zodat ik het semantiek maak. Heb ik dat goed begrepen zo?

[ Voor 81% gewijzigd door Verwijderd op 07-08-2007 17:33 ]

[Pkunk]

Zoek ook even op boxmodel en DOM. Dat is namelijk de hele essentie van het verhaal waarom verschillende browsers dingen anders laten zien.

[Verwijderd]

Dat box model snap ik vrij weinig van. of ligt dat aan mij?

Anyway fixed : www.proproduct.nl/nieuws2.html
Alleen had ik graag dat iframe iets hoger zat.

[Cartman!]

Je zit aardig in de richting met die pagina. Kop = h2, text = p etc. Maar het volgende is niet nodig:

code:

<div class="c4">
<br>
<br>
<p class="main">Je tekst</p>
<br></div>

die breaks (br) zijn overbodig. Als je wilt dat de tekst pas later begint moet je gebruik maken van padding en/of margin in CSS op (in dit geval) je div element. Eigenlijk zou je de hele div kunnen laten vallen als je enkel 1 tekst wilt weergeven daar, dan geef je p.main gewoon de stijlen van div.c4 mee.

Semantiek houdt in dat je voor elk stuk content het juiste element gebruikt, koppen = h1 t/m h6, teksten = p, lijsten = ul/ol met li's, tabulaire data = tabel. Die elementen kun je allemaal naar wens stijlen met CSS zodat het er uit ziet zoals jij wilt.

[ Voor 10% gewijzigd door Cartman! op 07-08-2007 20:50 ]

[Verwijderd]

Ik krijg er toch helemaal het div van.

Nu heb ik pagina volledig opgebouwd opnieuw. Met de div en css correct. Tenminste... ik heb mijn uiterste best gedaan.
De w3c keurd hem zonder te denken helemaal goed.
Toppie. Maar in opera.... nog steeds anders te zien dan ie....
Heb zelf in de main nog 2 divs onder elkaar en in de onderste 3 div's naast elkaar maar goed weergeven....

Wat doe ik fout of wat gaat er fout ?

Edit : vergeet ik weer de link : www.proproduct.nl/nieuws4.html

[ Voor 7% gewijzigd door Verwijderd op 09-08-2007 14:52 ]

[Verwijderd]

YES Ik heb het opgelost!

Het viel me op dat in de test versie zonder andere fratzen eromheen het niet verkeerd stond.
Er waren 2 verschillen, de divs eromheen en de css.
Maar als het de divs zelf waren dan stonden die ook anders.
Dus het moest de css wel zijn.
Ik heb 1 voor 1 css code weggehaald en kwam er achter dat er nog een andere main instond. ondanks de div main1 anders genoemd werd. Heb daar regel uitgehaald en done, alles stond "goed".
Raar iets maar tja... het werkt nu gelukkig.
tnx voor alle hulp!

[quaintpaul]

Nogmaals de tip, probeer je te verdiepen in WAAROM en niet alleen maar bezig zijn met de correcte oplossing voor DIT probleem te vinden.. Lees over DOM, Semantiek (sematics), CSS styling, etc! Wordt je een stuk betere HTML programmeur van!

[Boelie-Boelie]

Zoiets als http://modernmarkup.nl lijkt mij een oké startpunt om het beter te snappen...

[Verwijderd]

Maar daar staat niet in waarom een div class een div.main en een main in de css pakt ....

[imp4ct]

Verwijderd schreef op dinsdag 07 augustus 2007 @ 14:22:
Maar uiteindelijk is het niet duidelijk waarom in ie wel alles goed word weergegeven en in fire, opera enz niet.

Behalve dat alles wel goed opgebouwd zou zijn als heel die site opnieuw opgebouwd zou worden vanuit div... ik ga testen

't Lijkt me dat je toch belangrijke info niet lijkt te snappen of te lezen. De reden dat IE, FireFox, Opera enz... je site anders weergeven, is omdat ze allemaal een andere compileren hebben. Een systeem dat jou HTML dus omzet in het visuele.

Het HTML schrijven in <div>'s vind dat trouwens een heel verkeerde uitdrukking. De nieuwe wijze van het HTML schrijven legt zicht toe op symantiek. Wat zoveel wilt zeggen, de HTML elementen gebruiken voor wat ze echt dienen.

bv.
Als je een lijst van gegevens gaat maken, dan bestaat hier in HTML een element voor nl. <ul><li></li></ul> (bestaan nog lijsten, maar goed)
Als je een hoofding maakt ga je <h1> gebruiken of <h2> naar gelang de "belangrijkheid" zou'k zo zeggen, 't spreekt voor zich dat <h1> dus een hoofdtitel zou zijn en <h2> dus een subtitel
't Is dus totaal niet de bedoeling van constant en overal <div>'s te gaan gebruiken, want dat is wat de meeste (nieuwelingen) dus wel denken.

Een ander ding dat erbij komt kijken is dat eens je zo gaat coden je echt wel goed met CSS moet leren werken en eens je dit goed door hebt ga je ook merken dat het helemaal niet meer zo moeilijk is je site in FF & IE gemakkelijk beschikbaar te maken.

Kan je misschien even mijn project site als voorbeeld geven.
Link: http://www.telenethulp.net/

Als je hier in de code gaat kijken dan merkje daar niet enorm veel <div>'s, normaal enkel waar ze echt nodig zijn. Ik zeg niet dat mijn code volledig symantisch perfect is, maar ik probeer het toch na te streven, maar dat kan enkel als er dus een goed geschreven CSS file achter zit.

Much to learn dus, maar begin dus als eerste al met je doctype!

[Verwijderd]

Beste imp4ct ,

Je slaat beetje de plank mis na mijn mening. Er zit een verschil van 10 dagen in van de qoute die je pakt en mijn laatste post.
In die 10 dagen hebben hier hele vriendelijk mensen al geschreven wat jij nu ongeveer getyp't heb.Overheen gelezen? Of reclame voor je eigen projectje?

[ Voor 15% gewijzigd door Verwijderd op 21-08-2007 03:31 ]