Archief - Positie layout Firefox - Chrome - IE

Ben beginner qua CSS maar voor de website van mijn vriendin toch aan de slag gegaan. Heb aan de hand van tutorials mijn website gesliced en ben deze nu aan het invullen in de divs.

Probleem is echter dat deze niet aansluiten in Chrome/firefox/safari en wel in IE.




Wanneer ik de <p> tag weg doe in de code dan sluit deze wel aan. Waar kan dit aan liggen?

index.html

Template.css



Alvast bedankt!

Van wat ik kan zien, gebruik je geen reset of op zet je de basis elementen niet gelijk. browsers zijn niet hetzelfde zoals je al gemerkt hebt. Deze ongelijkheden kunnen voor heel wat frustraties zorgen, daarom is het aangeraden om in het begin je basis element een basis waarde te geven, dit kan je doen door een reset.css zoals deze:
http://meyerweb.com/eric/tools/css/reset/index.html
of door je basis elementen zoals 'p' al een betekenisvolle waarde te geven door bijvoorbeeld volgende css: http://covertprestige.info/css/base/full.css

In feite komt het op het zelfde neer.

Dit kan je probleem oplossen.

En gebruik een unordered list '<ul>' voor je menu. Beter zou zijn de HTML5 tag '<nav>' maar dit word niet ondersteund door IE8 en lager, hierdoor moet dan weer gaan gebruik maken van javascript wat uiteraard ook niet optimaal is.

Zoals hierboven wordt gezegd: include ook een reset.css file en je navigatie via een list

Wat ze hierboven zeiden. PS: ik zou het design herzien, het ziet er oubollig uit (n/o)

Voor uw algemene vorming mss ook eens iets opzoeken over content box model en classes. Een <div> kan bv een id hebben en meerdere classes, in uw css selecteert ge deze door .classnaam Merk op dat in uw html een id uniek is en er meerder classes kunnen bestaan (1 div#header maar meerdere ul.menu bijvoorbeeld, in uw html zonder # en . maar die staan wel in uw .css file). Is mijn uitleg duidelijk in feite?

Listamatic: one list, many options - Using CSS and a simple list to create radically different list options bekijk dit eens ivm het in een lijst plaatsen van uw menu-items.

Ge hebt een doctype enzo? Anders gaat IE vaneigens in quirksmode. Waar is de rest van uw index.html eigenlijk?

Misschien geen slecht idee om u nu al aan te leren om een comment achter een sluitende <div> tag te plaatsen, bv: </div><!-- /#wrapper -->
Breng gerust wa structuur aan in uw index.html trouwens door bepaalde zaken te laten inspringen, ik vind het best onleesbaar omdat geneste tags niet inspringen.

CSS Shorthand Guide (eerste link van google, maar 'css shorthand properpties' ofzo zouden u toch een eind op weg kunnen helpen met google.

Browsers nemen trouwens de laatst gekozen waarde voor properties. Dus zet die reset.css vóór uw eigen .css file bijvoorbeeld door Assigning property values, Cascading, and Inheritance

Als ge hier na nog zin hebt, zoek zeker iets op over semantiek en toegankelijkheid. Een skipcontent die ge verbergt dmv uw css is bijvoorbeeld ook geen slecht idee.

Moet je die reset.css dan gaan gebruiken als standaard?

En de dingen die je gebruikt eruit halen en naar eigen wensen aanpassen?

Kheb met divs iets gemaakt en al is het nog maar pril begin denk ik dat er redelijk gelijkaardig uitziet in verschillende browsers..

Nog maar net begonnen dus tis mss nu de moment ipv alles achteraf moeten aan te passen?

Home Plaskesvrienden

Ofwel maak je één groot stylesheet met al je css in, dan zet je de css reset helemaal vanboven in dat document en al je andere code eronder. Ofwel zet je in je head eerst een link naar je css reset en dan een link naar je stylesheet zelf. Op beide manieren worden de waarden in je css reset overschreven door de waarden die je in je eigen css invult.

DieselPower zei:

Browsers nemen trouwens de laatst gekozen waarde voor properties. Dus zet die reset.css vóór uw eigen .css file bijvoorbeeld door Assigning property values, Cascading, and Inheritance

Klik om te vergroten...

50Euro zei:

Moet je die reset.css dan gaan gebruiken als standaard?

En de dingen die je gebruikt eruit halen en naar eigen wensen aanpassen

Klik om te vergroten...

Neen, doe maar zoals ik zeg: hou een reset.css bij die ge steeds opnieuw kunt gebruiken. Voeg dat bestand in uw huidige css file toe dmv @import. Als ge toch een andere waarde wilt, overschijf die gewoon door in uw eigen css file een andere waarde voor die property toe te voegen.

Installeer firebug voor firefox en kijk dan eens naar de elementen die doorstreept zijn -> dit wil zeggen dat ze een nieuwe waarde hebben, lager in uw css file (maar hoger geplaatst in firebug)