Site centreren, alles geprobeerd

Status
Niet open voor verdere reacties.
S

skitz

Gebruiker
Lid geworden
15 okt 2009
Berichten
5
Ik heb alles geprobeerd om deze site te centreren, ik heb tabellen geprobeerd, <center></center>, margin:0px auto;, margin-left: auto; margin-right: auto;, maar niks werkt!
Dus zou (als iemand het lukt) je de code van de wel-gecentreerde site kunnen posten?
 
Laatst bewerkt:
Hoi Skitz,
  • Als dit je complete pagina is, ontbreekt er in de eerste regels het DOCtype en de <html>tag.
  • Op regel 64 zit er in de <head> een lege <noscript>, en <noscript>'s mogen niet in de <head>.
  • Op regel 77 eindigt de <head>: maar het niemandsland tussen </head> en <body> is gevuld met een <meta> element, een <title> en een blok <style>-declaraties.
  • Op regel 102 eindigt de </head> nog een keer.
  • En het <iframe> op regel 194/195 mist zijn eind >:
HTML: 
<div id="apDiv9"><iframe frameborder="0" width="673px" height="533px" scrolling="yes"
src="http://projectgroepcmd20.webs.com/homeiframe.html"
</iframe></div>
Gehoorzaamt de pagina na reparatie hiervan wel aan je centreer-bevelen?

Met vriendelijke groet,
CSShunter

PS:
Ik werk standaard op 1024x768px, omdat een toch niet te verwaarlozen % surfers nog op die resolutie zit. Voor 1024x768px is de pagina te breed (hor. scoll nodig!), en centreren is n.v.t.
Op 1280x1024px past de pagina er bij mij precies op, en is centreren ook n.v.t.
Hoger komt mijn monitor niet, dus wat er gebeurt aan wel of niet centreren bij hogere resoluties kan ik niet zien. Handelt de Academie in breedbeeld-monitors? ;)
 
csshunter zei:
Hoi Skitz,
  • Als dit je complete pagina is, ontbreekt er in de eerste regels het DOCtype en de <html>tag.
  • Op regel 64 zit er in de <head> een lege <noscript>, en <noscript>'s mogen niet in de <head>.
  • Op regel 77 eindigt de <head>: maar het niemandsland tussen </head> en <body> is gevuld met een <meta> element, een <title> en een blok <style>-declaraties.
  • Op regel 102 eindigt de </head> nog een keer.
  • En het <iframe> op regel 194/195 mist zijn eind >:
HTML: 
<div id="apDiv9"><iframe frameborder="0" width="673px" height="533px" scrolling="yes"
src="http://projectgroepcmd20.webs.com/homeiframe.html"
</iframe></div>
Gehoorzaamt de pagina na reparatie hiervan wel aan je centreer-bevelen?

Met vriendelijke groet,
CSShunter

PS:
Ik werk standaard op 1024x768px, omdat een toch niet te verwaarlozen % surfers nog op die resolutie zit. Voor 1024x768px is de pagina te breed (hor. scoll nodig!), en centreren is n.v.t.
Op 1280x1024px past de pagina er bij mij precies op, en is centreren ook n.v.t.
Hoger komt mijn monitor niet, dus wat er gebeurt aan wel of niet centreren bij hogere resoluties kan ik niet zien. Handelt de Academie in breedbeeld-monitors? ;)
Klik om te vergroten...

Bedankt dat je me sowieso te hulp schiet :thumb:. Ik heb geprobeerd te fixen wat jij zei dat er mis was, toch wil <center></center> nog niet werken, en die gebuik ik toch het liefst. Je zei trouwens dat dat iframe niet goed was afgesloten maar toen ik naar de code keek zag ik toch echt dat die wel afgesloten was, of zit ik nu fout?
 
Laatst bewerkt:
Hoi skitz,
Er staat:
  • <iframe frameborder (...) /homeiframe.html"
    </iframe>
Er hoort te staan:
  • <iframe frameborder (...) /homeiframe.html">
    </iframe>
Dat is 'm die ik bedoelde. :)

Met vriendelijke groet,
CSShunter

[edit]Het mag desnoods wel zonder die > in html-code (wordt niet aanbevolen), maar in xhtml is het verboden zonder de >.[/edit]
 
Laatst bewerkt:
Nog even verder gekeken.
De html-validator (hij staat er voor klaar om je te helpen!) meldt nog steeds 15 fouten. Da's jammer, maar er staat er eentje bij die in ons geval hoopvol stemt:
Code: 
[font=courier]Line 185, Column 9: end tag for element "center" which is not open[/font]
Op een of andere manier is er dus ergens een fout die met centreren te maken heeft! :D

Eigenaardigheid 1 van de html-validator:
  • De html-validator signaleert soms méér fouten dan er zijn!
  • Oorzaak: als ergens iets fout staat, kan soms het volgende niet meer goed geïnterpreteerd worden > en dat geeft dan ook een fout of serie fouten.
  • De tip: niet wanhopen als er heel veel en/of onverklaarbare fouten door de html-validator worden aangegeven. Repareer eerst wat je wel herkent als fouten. Daarna willen wel eens een heleboel andere fouten weggesmolten zijn! :)
Wat makkelijk is:
  • de > van regel 183,
  • regel 2: missend xmlns attribuut,
  • regel 90: een missend --> voorafgaand aan het </style> einde (het begin <!-- staat op regel 7),
  • regel 141: een & die een &amp; moet zijn.
Daarmee is deze versie gefabriekt.
Hé, de foutmelding over center is nu spontaan verdwenen! :thumb:
Alleen, hmm, de html-validator meldt nog steeds 13 fouten. :confused: Maar:
  • er zouden toch maar hoogstens 15-4=11 fouten mogen zijn, want 4 weggehaald?
  • bij nadere beschouwing blijkt: die 13 zijn nieuwe fouten, die eerder niet gesignaleerd werden!
Dat brengt ons op:

Eigenaardigheid 2 van de html-validator:
  • De html-validator signaleert soms minder fouten dan er zijn!
  • Oorzaak: als ergens iets fout staat, kan soms het volgende niet meer goed geïnterpreteerd worden > en dat maskeert dan fouten die er wel degelijk zijn...
  • De tip: Voer altijd een dubbelcheck uit als je html-reparaties doet. - Net zolang tot de html-validator groen van tevredenheid is. :)

We pakken weer eerst de makkelijke er uit:
  • een paar vergeten sluit-slashes bij images: <img ..... > moet zijn <img ... />,
  • wat vergeten alt="" attributen, ook bij de img's,
  • in regel 103 staat per abuis height="400"border="0" aan elkaar geschreven.
Hé, de rest is gesmolten > validator geeft GROEN! :D

Voor de veiligheid laten we ook nog even HTML-Tidy z'n commentaar geven. Firefox > menu Beeld > Paginabron, als de add-on HTML-Tidy binnengehaald is (3 tellen).
Die geeft nog 3 waarschuwingen af:
  • de src="http://.../Editable lay-out website.jpg" bevat spaties. Die kunnen met de code %20 gedicht worden, maar leesbaarder is er een verbindingsstreepje - of een underscore _ voor in de plaats te zetten;
  • en het iframe op het eind heeft een width="673px" en een height="533px";en Tidy vindt dat breedtes en hoogtes in html-attributen automatisch pixels zijn, en dus px weggelaten moet worden (wel kan desgewenst in de html een % worden opgegeven, dan moet er % bij). NB: in css moet er wel altijd een maateenheid opgegeven worden, behalve als iets 0 (nul) is.
En hoe gaat het nu met het center-gebeuren? ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
csshunter zei:
Nog even verder gekeken.
De html-validator (hij staat er voor klaar om je te helpen!) meldt nog steeds 15 fouten. Da's jammer, maar er staat er eentje bij die in ons geval hoopvol stemt:
Code: 
[font=courier]Line 185, Column 9: end tag for element "center" which is not open[/font]
Op een of andere manier is er dus ergens een fout die met centreren te maken heeft! :D

Eigenaardigheid 1 van de html-validator:
  • De html-validator signaleert soms méér fouten dan er zijn!
  • Oorzaak: als ergens iets fout staat, kan soms het volgende niet meer goed geïnterpreteerd worden > en dat geeft dan ook een fout of serie fouten.
  • De tip: niet wanhopen als er heel veel en/of onverklaarbare fouten door de html-validator worden aangegeven. Repareer eerst wat je wel herkent als fouten. Daarna willen wel eens een heleboel andere fouten weggesmolten zijn! :)
Wat makkelijk is:
  • de > van regel 183,
  • regel 2: missend xmlns attribuut,
  • regel 90: een missend --> voorafgaand aan het </style> einde (het begin <!-- staat op regel 7),
  • regel 141: een & die een &amp; moet zijn.
Daarmee is deze versie gefabriekt.
Hé, de foutmelding over center is nu spontaan verdwenen! :thumb:
Alleen, hmm, de html-validator meldt nog steeds 13 fouten. :confused: Maar:
  • er zouden toch maar hoogstens 15-4=11 fouten mogen zijn, want 4 weggehaald?
  • bij nadere beschouwing blijkt: die 13 zijn nieuwe fouten, die eerder niet gesignaleerd werden!
Dat brengt ons op:

Eigenaardigheid 2 van de html-validator:
  • De html-validator signaleert soms minder fouten dan er zijn!
  • Oorzaak: als ergens iets fout staat, kan soms het volgende niet meer goed geïnterpreteerd worden > en dat maskeert dan fouten die er wel degelijk zijn...
  • De tip: Voer altijd een dubbelcheck uit als je html-reparaties doet. - Net zolang tot de html-validator groen van tevredenheid is. :)

We pakken weer eerst de makkelijke er uit:
  • een paar vergeten sluit-slashes bij images: <img ..... > moet zijn <img ... />,
  • wat vergeten alt="" attributen, ook bij de img's,
  • in regel 103 staat per abuis height="400"border="0" aan elkaar geschreven.
Hé, de rest is gesmolten > validator geeft GROEN! :D

Voor de veiligheid laten we ook nog even HTML-Tidy z'n commentaar geven. Firefox > menu Beeld > Paginabron, als de add-on HTML-Tidy binnengehaald is (3 tellen).
Die geeft nog 3 waarschuwingen af:
  • de src="http://.../Editable lay-out website.jpg" bevat spaties. Die kunnen met de code %20 gedicht worden, maar leesbaarder is er een verbindingsstreepje - of een underscore _ voor in de plaats te zetten;
  • en het iframe op het eind heeft een width="673px" en een height="533px";en Tidy vindt dat breedtes en hoogtes in html-attributen automatisch pixels zijn, en dus px weggelaten moet worden (wel kan desgewenst in de html een % worden opgegeven, dan moet er % bij). NB: in css moet er wel altijd een maateenheid opgegeven worden, behalve als iets 0 (nul) is.
En hoe gaat het nu met het center-gebeuren? ;)

Met vriendelijke groet,
CSShunter
Klik om te vergroten...

Woh! vet bedankt :)
Twee divs zijn nu gecentreerd alsof de website al gecentreerd is, maar ik weet bijna zeker dat als de volgende fouten weg zijn het is opgelost.
De html-validator laat nu nog 3 fouten zien, en dat zijn die alt-tags ofzo, maar what the hell zijn dat :eek: hoe kan ik ze wegwerken/wat moet ik doen?
Wel cool dat je niet alles doet en dat ik zelf ook wat kan doen zodat ik ervan kan leren :D
 
Laatst bewerkt:
Ok hij is nu helemaal groen, 0 fouten, maar gecentreerd is die nog steeds niet. Ik heb de <center></center> tag maar weggehaald want die werkt sowieso niet. Iemand nog een oplossing?
 
Laatst bewerkt:
Wel cool dat je niet alles doet en dat ik zelf ook wat kan doen zodat ik ervan kan leren :D
Klik om te vergroten...
Ja, ik heb mezelf wel moeten tegenhouden (complete reparatie al paraat). :D
En ik ben intussen eens wat over CMD aan het lezen geslagen op je pagina: en ik nu geloof dat ik al onpedagogisch veel te veel te veel verklapt heb. Want dit klusje van jou om met die site bezig te zijn was toch vooral bedoeld om te leren?! :p
Maar goed:
what the hell zijn alt-tags?
Klik om te vergroten...
Nu ga ik daar dus ;) geen antwoord op geven, maar je wel een vreselijk geheime truc leren (waar zelfs de AIVD jaloers op zou worden):

TIP 1
Heeft u een probleem, of zit u met een vraag?
Google omvat (bijna) alle websites en webpagina's ter wereld.
Dus stel de vraag via je zoekvakje rechtstreeks aan Google!
In beide gevallen: 1e hit is raak! [edit]Nop: in het eerste geval is het intussen de tweede hit geworden: als hoogste genoteerd staat nu dit topic op de immens populaire helpmij.nl. :D[/edit]
En weet je dan nog niet genoeg (en ook niet na lezing van de rest v/d hits op de 1e en 2e resultatenpagina) dan is hier:

TIP 2
Heeft u een probleem, of zit u met een vraag?
Ga terug naar de bron: ga naar de "uitvinder" van het "ding"
waarover u iets wil weten, en die heeft in 9 van de 10 gevallen
als trotse eigenaar een mooie website met uitleg!
  • Wat zijn alt-tags? - Dat zijn dingen die in HTML staan.
  • Wie is de uitvinder/beheerder van wat er in HTML staat?
  • Dat is het World Wide Web Consortium (W3C), dat de baas is van de HTML-specificaties.
  • Dan zullen ze daar toch iets moeten kunnen vertellen over wat alt="..." betekent!
Op naar de site van w3.org! :love:
  • Linkerkolom, helemaal bovenaan: een link STANDARDS (klik!)
  • Rechterkolom > scroll > POPULAR > link HTML (klik!)
  • HTML Current Status > middelste kolom > paragraaf Standards > link HTML 4.01 Specification (klik!)
  • Zoek via browser-functie "Zoek op pagina" het woord "alt" op die pagina. Tweede hit = raak > geeft link (klik!)
En dan weet je precies wat alt is en wat the hell de heavenly richtlijnen zijn om alt te gebruiken. :)

Nou heb ik toch weer vrij veel gezegd... ;)

Succes!
CSShunter

PS: er zijn dus browserverschillen bij het gebruik van het alt-attribuut! Bv. IE (versie 7 en lager; zie opm. Goeroeboeroe hieronder) wijkt af en geeft een ander resultaat te zien. Wel hetzelfde resultaat kan bereikt worden met het title-attribuut ("dat zoeken we ook op").

[edit]O. - Ik was al eerder aan mijn prevelementje begonnen, er kwam even iets tussen, en pc bleef hierop open staan. En in the meantime al twee tussenliggende posts!

Maar als je een variant van de pagina kan maken die max. 1100px breed is, kan ik op mijn monitor van 1280x1024px zien hoe het met het center gesteld is.
- Trouwens sowieso aan te raden pagina's voorlopig niet breder te maken dan 1024x768px (tenminste als het een fixed width design is; zie ergens in een eerdere post hierboven). Bij een liquid design mag natuurlijk alles![/edit]
[edit]N.a.v. Peter Wazed hieronder:
Whoei! De meeste andere div's zijn ook AP (met Absolute Position) ... even overheen gekeken... :o[/edit]
 
Laatst bewerkt:
Centreren?
Zal niet lukken als je dit gebuikt:
#apDiv7 {
position:absolute;
left:1015px;
top:760px;
width:217px;
height:157px;
z-index:4;
}

:cool:
 
Kleine aanvulling op het hoogst vermakelijke alt-verhaal van csshunter: IE 8 laat eindelijk de title en niet de alt-tag zien bij hoveren, net zoals alle fatsoenlijke browsers al eeuwenlang doen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan