centreren pagina tbv internet explorer

elbart · Bericht door **elbart** » 5 oktober 2010, 13:35

Hoi!

Ben een leek en vind dat ik al wat moois gemaakt heb echter in Firefox staat mijn pagina keurig in het midden, maar ik heb lang gezocht en e.e.a. geprobeerd maar slaag er niet in mijn pagina gecentreerd te krijgen tbv Internet Explorer....

Dit is de pagina: http://www.alec-intl.com/test.html

Zou iemand de broncode eens kunnen nalopen?

Mocht je andere fouten zien c.q. tips dan hoor ik het graag.

Bedankt!

Met vriendelijke groet,
Bart

knorretje · Bericht door **knorretje** » 5 oktober 2010, 17:41

Hallo Bart,
Welkom op dit forum.
Ik heb jouw pagina geladen met IE8. Ik krijg hier hetzelfde te zien.
Je laat de pagina renderen in Quirksmode, en dan herkent IE8 de stijl attributen die voor het centreren zorgen blijkbaar niet. Misschien zou je eens kunnen testen met een ander doctype?
Zie http://en.wikipedia.org/wiki/Quirksmode

elbart · Bericht door **elbart** » 5 oktober 2010, 19:46

Goedeavond:

Hartelijk dank had hier nog nooit van gehoord heb e.e.a. geprobeerde eerst via Kompozer onderstaande te wijzigen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:fo="http://www.w3.org/1999/XSL/Format" lang="de">

naar

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">

Dit lukte niet, want bij het opslaan werd dit steeds overschreven naar de oude situatie dus maar via kladblok gegaan en nu werkt het wel! Zie hier het resultaat: http://www.alec-intl.com/test.html

Bedankt!

Met vriendelijke groet,
Bart

nirwana · Bericht door **nirwana** » 5 oktober 2010, 23:05

Bart,

Als ik de code van die tabel-layout bekijk dan staat daar volgens mij veel te veel code in. Het eerste gedeelte heb ik er even uitgelicht:

Code: Selecteer alles

<table style="width: 100%; height: 100%; background-color: white; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2" style="vertical-align: top; height: 20px; background-color: rgb(255, 133, 27);"><br>
</td>
<td></td>
</tr>
<tr>

<td style="background-color: rgb(255, 133, 27);"></td>
<td style="background-color: rgb(255, 133, 27);">
<table style="width: 930px; height: 125px; text-align: left; margin-left: auto; margin-right: auto;" cellpadding="0" cellspacing="0">
<tbody>
<tr style="font-family: Arial;">
<td colspan="1" rowspan="1" style="height: 5px; width: 800px; background-color: rgb(255, 133, 27);"><span style="font-size: 12pt; font-family: "Tahoma","sans-serif"; color: black;" lang="EN-US"></span><a href="mailto:info@alec-intl.com"><img style="border: 0px solid ; width: 927px; height: 116px;" alt="" src="images/header_home.jpg"></a><br>
<a href="mailto:info@alec-intl.com"><span style="text-decoration: underline;"></span></a></td>
</tr>
</tbody>
</table>
</td>
<td style="background-color: rgb(255, 133, 27);"></td>
</tr>

Het idee achter een table met een width en een height van 100% ontgaat mij vooralsnog. Volgens mij maak je daarmee iets pagina-vullend en daarmee is die omliggende tabel al direct overbodig. Verder zie ik nog wat lege tabel-cellen staan waarvan mij de noodzaak ook ontgaat. Volgens mij is er in deze code eens het een en ander geprobeerd en is daar nog iets van blijven staan. De pagina ziet er inmiddels in Firefox en in IE misschien goed uit, maar dat kan ook deels toeval zijn.

Verder lijkt me dit wel een handige layout om niet met tabellen maar met div's uit te lijnen.

nirwana · Bericht door **nirwana** » 5 oktober 2010, 23:31

Ik heb alvast een opzet gemaakt die meer gebruik maakt van div's voor het uitlijnen dan van tabellen:
www.mozbrowser.nl/web/alecint/test.html

In deze layout heb ik nog wel diverse tabellen laten staan, aangezien ik even snel resultaat wilde zien.
De overige tabellen kunnen uiteraard ook nog naar div's worden omgezet.

In elk geval heb ik nu minder code nodig en bereik ik ongeveer hetzelfde resultaat.
De webpagina ziet er nu goed uit in IE (versie 6 heb ik mee getest, want mijn eigen versie 8 geeft er even de brui aan), in Firefox (uiteraard) en ook in Google Chrome.

Voor het centreren heb ik gewerkt met een div die ik container heb genoemd. Deze geef ik een hoogte en een breedte mee en dan laat ik de marges links en rechts automatisch bepalen. In het voorbeeld van Bart zit in feite hetzelfde idee van automatische marges links en rechts, maar daarin staat wat mij betreft iets teveel code die het geheel vertroebeld.

elbart · Bericht door **elbart** » 6 oktober 2010, 9:11

Allen hartelijk dank!

Aangezien ik mij goed kan voorstellen dat mijn bestand goed vervuild was heb ik het opzetje van Martijn gebruikt en hier is de nieuwe http://www.alec-intl.com/test.html

Groeten,
Bart

nirwana · Bericht door **nirwana** » 6 oktober 2010, 19:27

Bart,

Dat ziet er code-technisch al een stukje vriendelijker uit. En in IE8 wordt de site nu ook mooi gecentreerd (dat had ik gisteren nog niet kunnen testen).

Nog een tip: heb je wel eens over een contactformulier overwogen ? Nu staat er onderin de website een mail-link die gebruik maakt van het mailprogramma van de bezoeker van de website.

Ook zat er eerst een mail-linkje onder de header-afbeelding van de website, maar ik zie dat je die al hebt verwijderd.
Overigens is het wel gebruikelijk om een link te plaatsen onder een dergelijke afbeelding bovenaan de website. Die link verwijst dan doorgaans terug naar de beginpagina van de website. Klik bijvoorbeeld maar eens op het MozBrowser-logo bovenaan deze website. Dan ga je terug naar de begin-pagina van de website.

elbart · Bericht door **elbart** » 8 oktober 2010, 20:34

Hallo!

Het heeft even geduurd maar inmiddels mijn 100+ pagina's aangepast. Tsja, wat wil je met 5-talen... zie hier het resultaat: http://www.alec-intl.com

Dacht dat ik het goed getest had, maar nu blijkt dat in MS Internet Explorer 7.0 voor XP wat fout gaat...namenlijk de opsomming van producten onderaan de pagina staat niet zoals beoogd in 2 regels horizontaal maar verticaal in een lijstje... chips. Wat is er niet goed?

Groeten,
Bart

PS: heb even gekeken maar een contactformulier, misschien in een later stadium

nirwana · Bericht door **nirwana** » 11 oktober 2010, 21:35

De toevoeging van Joost heb ik naar een apart onderwerp verplaatst, zodat de beide onderwerpen niet door elkaar gaan lopen:
www.mozbrowser.nl/forum/viewtopic.php?f=26&t=19856

elbart · Bericht door **elbart** » 11 oktober 2010, 21:47

Hoi!

Weet inmiddels hoe ik mijn nieuwe fout inzake de uitlijning van het lijstje kan verhelpen, moet het enkel nog doen bij 4/5 van de site, hahaha

Enne heb uiteindelijk toch een contactformulier gemaakt, ja wederom in 5 talen...

Met vriendelijke groet,
Bart

nirwana · Bericht door **nirwana** » 11 oktober 2010, 22:07

Ik heb het net in IE7 bekeken op Windows 7 (via IE Tester) en Windows Server 2003.
Ik moet zeggen dat die opsomming dan gewoon over 2 regels verdeeld wordt.
Kun je hier op het forum eens een screenshot plaatsen van hoe het er bij jou in IE7 uit ziet ?

elbart · Bericht door **elbart** » 13 oktober 2010, 15:34

Hoi!

Het probleem is inmiddels verholpen, waar het aan lag weet ik niet...

Met vriendelijke groet,
Bart

MozBrowser

centreren pagina tbv internet explorer

centreren pagina tbv internet explorer

Re: centreren pagina tbv internet explorer

Re: centreren pagina tbv internet explorer

Re: centreren pagina tbv internet explorer

Re: centreren pagina tbv internet explorer

Re: centreren pagina tbv internet explorer

Re: centreren pagina tbv internet explorer

Re: centreren pagina tbv internet explorer

off topic

Re: centreren pagina tbv internet explorer

Re: centreren pagina tbv internet explorer

Re: centreren pagina tbv internet explorer