Hallo iedereen,
ik heb een website gemaakt voor iemand, maar heb die enkel in chrome getest.
Nu heb ik vandaag in IE gekeken, en er zijn toch een aantal zaken die niet worden weergegeven zoals het hoort en moet als beschreven in de css...
- slider images zijn te ver naar rechts opgeschoven ivm chrome (waar ze wel juist staan)...ook een border is er te zien, maar dat komt wrs omdat de images in de slider als link worden weergegeven...
- Footer tekst klopt ook niet en wordt niet volgens de css weergegeven.
Probeer eens de 17 HTML en 1 CSS fout(en) uit je code te halen.
Wat dingen waardoor deze fouten voornamelijk komen:
- Je moet altijd een geldig Doctype boven je code hebben.
- <footer> is een HTML5 tag. Deze wordt nog niet volledig ondersteund door elk browser. Gebruik gewoon <div id="footer"> o.i.d.
- Er mag na </body> geen javascript meer komen. Dit heb je nog wel, verplaats dit dus.
Antwoord op vraag 2 staat ook in deze bovenstaande punten.
Wat andere code tips:
- Maak je site niet met tabellen, maar met divs. Dit werkt veel beter.
- Probeer goed in te springen.
- Zet al je CSS in 1 of meerdere stylesheets. Ga niet wat style in een <style> tag zetten en nog wat inline style (zoals bijv. height="100" of style="height: 100px;")
- margin-right, margin-left, margin-top en margin-bottom kan je veel beter samenvoegen tot margin op de volgende manier:
margin: [margin-top] [margin-right] [margin-bottom] [margin-left];
Dit maakt je code sneller en beter.
- Je hebt onnodige CSS in je stylesheet staan. Zoals bijv. smalltitle en small. Als je dit eruit haalt wordt je code sneller en beter.
- background-color, background-image en alle andere background-* declarations kan je veel beter samenvoegen in background: . De volgende maakt hierbij niet uit.
- Je moet altijd een geldig Doctype boven je code hebben.
Ik laat deze altijd staan als de standaard in dreamweaver...
Waldio schreef:
- <footer> is een HTML5 tag. Deze wordt nog niet volledig ondersteund door elk browser. Gebruik gewoon <div id="footer"> o.i.d.
Ok, maar kan ik die tekst als bv h4 gebruiken en zo stylen in CSS?
Waldio schreef:
- Er mag na </body> geen javascript meer komen. Dit heb je nog wel, verplaats dit dus.
Ok, dit verplaats ik naar de head...
Waldio schreef:
- Maak je site niet met tabellen, maar met divs. Dit werkt veel beter..
- Probeer goed in te springen.
Ok, zal ik onthouden. Meestal doe ik altijd in divs, maar deze keer niet omdat dit makkelijker werken was...
Waldio schreef:
- Zet al je CSS in 1 of meerdere stylesheets. Ga niet wat style in een <style> tag zetten en nog wat inline style (zoals bijv. height="100" of style="height: 100px;")
dus, eigenlijk zou ik alle styling in de stylesheet best plaatsen?
zoals de background styling in index.html doe ik dan best in de style.css?
Waldio schreef:
- Je hebt onnodige CSS in je stylesheet staan. Zoals bijv. smalltitle en small. Als je dit eruit haalt wordt je code sneller en beter.
Maar dat zijn mijn tekststyling codes...of moet ik gebruik maken van h1, h2, h3, h4, ...?
Ik laat deze altijd staan als de standaard in dreamweaver...
De url die je net aan ons toonde had geen doctype bovenin.
"StijnC" schreef:
Ok, dit verplaats ik naar de head...
Als dit google analytics is kan je het beter net voor de </body> plaatsen.
"StijnC" schreef:
dus, eigenlijk zou ik alle styling in de stylesheet best plaatsen?
zoals de background styling in index.html doe ik dan best in de style.css?
Ja, want als je straks een site hebt van 200 pagina's en je wilt een klein style dingentje aanpassen hoef je niet 200 pagina's af te gaan, maar 1 stylesheet.
"StijnC" schreef:
Ok, maar kan ik die tekst als bv h4 gebruiken en zo stylen in CSS?
[...KNIP...]
Maar dat zijn mijn tekststyling codes...of moet ik gebruik maken van h1, h2, h3, h4, ...?
Ik denk dat je de nut van HTML elementen nog niet echt begrijpt. Dus daarom even een korte uitleg:
- Alle blokken (header, navigatie, content, sidebar, footer, enz.) kun je het best in een <div> tag zetten. Dit is gemaakt voor blokken. Deze geef je dan id's mee (Bijv. #header).
- Navigatie items stop je in een list. <ul> <li>nav item 1</li> enz. </ul>
- Alle tekst stop je in paragraphen (alinea's): <p>tekst</p>
- Als je tekst wilt opmaken gebruik je <span>. Deze heeft standaard display: inline. Daarom is het zeer geschikt voor dingen tijdens een tekst.
- Titels, engels Headings, stop je in de headings tags. <h1> t/m <h6>.
Ik denk dat je de nut van HTML elementen nog niet echt begrijpt. Dus daarom even een korte uitleg:
- Alle blokken (header, navigatie, content, sidebar, footer, enz.) kun je het best in een <div> tag zetten. Dit is gemaakt voor blokken. Deze geef je dan id's mee (Bijv. #header).
- Navigatie items stop je in een list. <ul> <li>nav item 1</li> enz. </ul>
- Alle tekst stop je in paragraphen (alinea's): <p>tekst</p>
- Als je tekst wilt opmaken gebruik je <span>. Deze heeft standaard display: inline. Daarom is het zeer geschikt voor dingen tijdens een tekst.
- Titels, engels Headings, stop je in de headings tags. <h1> t/m <h6>.
Doe ik altijd hoor, alleen nu heb ik een makkelijkere oplossing gekozen.
- Elk blok in mijn website geef ik ids mee als "menu", "header", "slider", "content_1", ... enz. (zoals je aangeeft dus)
- Ja, doe ik ook;
- Teskt: nu doe ik het altijd zo (of heb ik het altijd zo gedaan):
bv. <small>Hier een tekst</small> of <smalltitle>hier een titel</smalltitle>;
dus hoe kan ik 'p' stylen voor verschillende tekst? Geef ik dan een class mee fzo? zoals bv. <p class="kleintekst">hier een tekst</p>?
- Vanaf nu zal ik ook die h1 en zo gebruiken bij titels.
- Teskt: nu doe ik het altijd zo (of heb ik het altijd zo gedaan):
bv. <small>Hier een tekst</small> of <smalltitle>hier een titel</smalltitle>;
dus hoe kan ik 'p' stylen voor verschillende tekst? Geef ik dan een class mee fzo? zoals bv. <p class="kleintekst">hier een tekst</p>?
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
Als we bijv. 'Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.' willen stylen doen we:
En nu kunnen we .nadruk stylen. Bijv. color: #D00;.
Als je alleen een tekst dik, italic, onderstreept, enz. wilt doen kun je beter <em>, <strong>, enz. gebruiken.
Ja ok, ik snap het, maar is er een speciale reden waarom je <span> gebruikt?; is dit niet meer in gebruik wanneer je met tables werkt?
En zoals ik had gezegd zou je niet werken? Met <p class="nadruk"></p>?
maar is er een speciale reden waarom je <span> gebruikt?; is dit niet meer in gebruik wanneer je met tables werkt?
Ja, dat komt door de standaard eigenschappen van elementen. Span heeft standaard display: inline. Als je die dus gebruik loopt je tekst niet door de war. Kijk maar eens naar dit voorbeeldje: http://waldio.w...aarden.htm.
De reden dat div en paragraph niet werken is omdat die standaard een display: block; hebben, paragraph heeft dan nog eens extra een margin-top en bottom.
"StijnC" schreef:
En zoals ik had gezegd zou je niet werken? Met <p class="nadruk"></p>?
Alleen als de hele paragraph een nadruk moet hebben. Voor alleen een woordje niet, zie het voorbeeld.
ah zo, ok, dat weet ik nu ook alweer
heel erg bedankt!
En wat betreft de errors in de html...welke zijn daar zeker problemen? Ik bedoel dus, hij geeft bij '/>' een error, maar je moet toch je tag sluiten?
Bv.
Waarom zou dit een error zijn? moet ik dan </link> gebruiken?
Bij images net hetzelfde...
die CSS error is op te lossen, maar daarmee zal hij in IE nog niet mooi worden weergegeven...
Zou ik een aparte stylesheet gebruiken voor IE? (zie ik bij vele websites, maar snap niet of dat een standaard stylesheet is of afhankelijk van de site)
Sorry voor al die vragen, maar als je het niet vraagt, kan je je niet verbeteren
En wat betreft de errors in de html...welke zijn daar zeker problemen? Ik bedoel dus, hij geeft bij '/>' een error, maar je moet toch je tag sluiten?
Dat komt doordat je geen doctype hebt. Bij XHTML moet je die tags namelijk sluiten, maar bij HTML niet. Doordat er geen doctype is ga W3C hem doorlopen als HTML. In HTML kan je gewoon > doen, maar met XHTML moet je /> doen. (tutorial).
IE gaat doordat er geen doctype is in de quirks mode. Dit betekend dat hij de website laat zien alsof hij IE6 is. Een doctype zal denk ik al je problemen verhelpen.
"StijnC" schreef:
Sorry voor al die vragen, maar als je het niet vraagt, kan je je niet verbeteren
Maakt niet uit, daarvoor zijn we hier op een forum.
Wat betreft die />, dat kan je lezen op die foutpagina:
Citaat:
The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML.
Dus zowieso weet de validator al niet welk doctype je hebt (want je hebt er geen), begin daar al mee, dat kan de validatie al veranderen.
Ah zo, damn, noobish-fault! Mea Culpa xD
Ik zal inderdaad eens die doctype invullen, daarna zien we wel...
Alvast bedankt voor de antwoorden! (in feite mag dit als opgelost worden gezet, maar als ik nog meer vragen heb, kan dit dan hier nog bij? )
(in feite mag dit als opgelost worden gezet, maar als ik nog meer vragen heb, kan dit dan hier nog bij? )
Als je bij de post die de oplossing gaf het icontje met een groen vinkje aanklikt wordt het topic opgelost. Maar dan zal het topic voor altijd uit de recente onderwerpen zijn.
Ja, doordat je je background dingen in de stylesheet hebt gestopt moet je de urls ook vanaf de stylesheet maken.
Vanaf de index pagina is de url: images/achtegrond/Wooden.jpg. Maar vanaf de stylesheet die in /css/ staat is de url: ../images/achtegrond/Wooden.jpg.
../ betekend 1 map achteruit.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
