Website wordt niet goed weergegeven

[Vecodo]

ok,

Ik ben dus bezig met een website te ontwikkelen.
Deze word afgesteld op een 1024x768 32 bit resolutie.
en geoptimaliseerd voor Internet Explore.

Nu ben ik dus Screenchecks gaan doen. op verschillende monitoren.
En nu zit er telkens verschil in of de Scroll-bar wel verschijnt of niet verschijnt

Had eerst de width op 1020PX staan. en merkte dus dat het op verschillende monitors een andere uitwerking had. ( terwijl wel zelfde IE versie en Toolbars. )

de height had ik eerst ook dit probleem mee, maar dat is aangepast door Height:100%
( dit kan ik helaas niet doen met de width, aangezien hij geen picture's mee resizzed.

Ik zal maar een stukje code geven aangezien dat vaak meer zegt dan 1000 Woorden.

Style-sheet

code:

html {
    }

Body {
    overflow:auto;
    margin: 0px;
    padding: 150px 0px 0px 0px;
    height:500px;
    }
#header {
  margin-top: -150px;
  background-image: url(images/Respond1_1.jpg);
  height: 150px;
  width: 1020px;
  }

#navMain {
  height: 30px;
  background-color: #E56B20;
  }

#navSearch {
  width: 205px;
  height:30px;
  left: 0px;
  position: absolute;
  padding-top:4px;
  padding-left:25px;
  border-right:1px solid white;
  border-left:1px solid black;
  border-top:1px solid white;
  }

#navMenu {
  left: 205px;
  position: absolute;
  width: 583px;
  background-image:url(images/menu.gif);
  height:30px;
  border-bottom:1px solid #FFFFFF;
  border-right:1px solid #FFFFFF;
  border-top:1px solid #FFFFFF;
  }

#empty {
    width:231px;
    position:absolute;
    left:789px;
    height:30px;
    border-right:0px solid black;
    background-image:url(images/Respond2_4.jpg);
    }
    
#container {
  top: 150px;
  bottom: 0px;
  _height: expression(document.body.clientHeight - 150 + 'px');
  width: 1020px;
  position: absolute;
  }

#colLeft {
  height: 468px;
  overflow: auto;
  width: 205px;
  background-color: #003399;
  float: left;
  border-left:1px solid #000000;
  padding-top:20px;
  padding-left:20px;
  border-bottom:1px solid #000000;
  }

#colCenter {
  height: 468px;
  overflow: auto;
  width: 583px;
  float: left;
  background-color: #FFFFFF;
  padding-top:10px;
  padding-left:20px;
  border-bottom:1px solid #000000;
  border-right:1px solid white;
  }

#colRight {
  width: 232px;
  float: left;
  height: 468px;
  background-image: url(images/Respond4_2.jpg);
  border-right:1px solid #000000;
  border-bottom:1px solid #000000;
  padding-top:20px;
  background-repeat:no-repeat;
  }

HTML

code:

<div id="header">
    <div id="branding"></div>
            <div id="plaatje1"></div>
            <div id="plaatje2"></div>
            <div id="plaatje3"></div>
            <div id="plaatje4"></div>
        <div id="navMain">
            <div id="navSearch"><?=searchbox()?></div>
            <div id="navMenu"><?include ('dhtml.navi')?></div>
            <div id="empty"></div>
        </div>
    </div>
</div>
    
    <div id="container">
            <div id="colLeft"><span class="style2"><?php if (strpos($su, ':'))echo substr($su, 0, strpos($su, ':'));else echo $su;?></span><br><?=toc(2,3)?></div>
        <div id="colCenter"><br>
<table width="506" nheight="132" border="0" align="center">
<tr>        <?=editmenu()?>
            <?=content()?>
<td valign="top">
</td>
</tr>
</table>
        </div>
        <div id="colRight">
            <div id="navLocal"><span class="style3">Nieuws</span><br><br><br>
                        <? // VOEG DEZE LIJN TOE OM DE NIEUWS ITEMS OP TE HALEN
                        addNieuwsToText();//$pth['file']['content'],$MaxNieuwItems, $searchBeginString, $searchEndString);
                        ?><?=newsbox(News)?>
                        <br><br><br>
                        <a href="http://www.respond.nl/index1.php?Nieuws">Lees alles...</a></div>
            </div>
        </div>

Natuurlijk alle overbodige code weggehaald
Hoe kan ik er nu voorzorgen dat hij op elke monitor het zelfde eruit zie ( 1024x768 scherm.resolutie )

[ Voor 15% gewijzigd door Vecodo op 21-09-2005 11:08 ]

[Noork]

Waar zijn bijvoorbeeld je body en html tags? Dit is geen valid html. Check je site met de w3.org validator en kom dan nog eens terug.

ah overbodige code weggehaald, nu lees ik het. Maar het is juist niet overbodig. Heb je geen linkje naar de site? Dat is handiger.

[ Voor 34% gewijzigd door Noork op 21-09-2005 11:10 ]

[Willem]

Een website NOOIT in exact dezelfde breedteverhouding als een native resolutie ontwerpen... voor 800 (*600) gebruik ik meestal max 750px breed, gezien de scrollbar en nog wat window-streepjes.

Daarnaast heeft 32 bits weinig met je ontwerp te maken en al helemaal niet met je website in combinatie met een scrollbar. De oorzaak is dat je ontwerp gewoon te breed is.

[Savantas]

Dit is deels al afhankelijk hoe breed men de schuifbalken heeft staan. Ik stel die standaard smaller in, de rand om elk window op 0px in plaats van 1px en de hoogte van menu's en titelbalken ook zo laag mogelijk. Dit geeft al een groter beeld.
Maar het makkelijkste is gewoon op de diverse monitors een schermdump te maken. Kijk dan in een prog als Photoshop welk verschil er tussen de schermen zit.

[Vecodo]

Noork schreef op woensdag 21 september 2005 @ 11:09:
Waar zijn bijvoorbeeld je body en html tags? Dit is geen valid html. Check je site met de w3.org validator en kom dan nog eens terug.

ah overbodige code weggehaald, nu lees ik het. Maar het is juist niet overbodig. Heb je geen linkje naar de site? Dat is handiger.

www.respond.nl/index1.php

( even niet letten op height want die is aangepast op mijn local )

en overbodig code weggehaalt.

[Vecodo]

willem169 schreef op woensdag 21 september 2005 @ 11:12:
Een website NOOIT in exact dezelfde breedteverhouding als een native resolutie ontwerpen... voor 800 (*600) gebruik ik meestal max 750px breed, gezien de scrollbar en nog wat window-streepjes.

Daarnaast heeft 32 bits weinig met je ontwerp te maken en al helemaal niet met je website in combinatie met een scrollbar. De oorzaak is dat je ontwerp gewoon te breed is.

maar dan zul je das altijd wel grote verschillen zien in de website.
de ene heeft wel een witte rand en de andere weer niet...

en van de 32 bit dat snap ik.

[ Voor 7% gewijzigd door Vecodo op 21-09-2005 11:22 ]

[Vecodo]

Savantas schreef op woensdag 21 september 2005 @ 11:13:
Dit is deels al afhankelijk hoe breed men de schuifbalken heeft staan. Ik stel die standaard smaller in, de rand om elk window op 0px in plaats van 1px en de hoogte van menu's en titelbalken ook zo laag mogelijk. Dit geeft al een groter beeld.
Maar het makkelijkste is gewoon op de diverse monitors een schermdump te maken. Kijk dan in een prog als Photoshop welk verschil er tussen de schermen zit.

ga even de borders weghalen

[Noork]

roy2001 schreef op woensdag 21 september 2005 @ 11:20:
[...]
www.respond.nl
( even niet letten op height want die is aangepast op mijn local )
en overbodig code weggehaalt.

Ik vind de site er wel aardig uitzien, maar volgens mij wat ze hierboven zeggen dat je de site gewoon gewoon te breed hebt gemaakt. Of je moet 100% width gebruiken. Waarom is dat niet mogelijk voor je plaatjes?

Oh ja, dit is zo uit de tijd: Deze website is geoptimaliseerd voor: Internet Explorer en een schermresolutie van 1024x768. Wist je dat bijna 20% van de internetters al gebruikt maakt van Firefox? En in Firefox ziet het er gewoon belabberd uit.

[ Voor 10% gewijzigd door Noork op 21-09-2005 11:29 ]

[Willem]

roy2001:
maar dan zul je das altijd wel grote verschillen zien in de website.
de ene heeft wel een witte rand en de andere weer niet...

Wat bedoel je met verschillen?
Verschillen in hoe het er met andere browsers uitziet?

[Vecodo]

willem169 schreef op woensdag 21 september 2005 @ 11:27:
[...]


Wat bedoel je met verschillen?
Verschillen in hoe het er met andere browsers uitziet?

Nee, Het is namelijk gemaakt voor IE.
met verschillende bedoel ik een witte streep of niet. ( of dus bij de 1 fullscreen en bij de andere een scroll-bar )

[Vecodo]

Noork schreef op woensdag 21 september 2005 @ 11:26:
[...]

Ik vind de site er wel aardig uitzien, maar volgens mij wat ze hierboven zeggen dat je de site gewoon gewoon te breed hebt gemaakt. Of je moet 100% width gebruiken. Waarom is dat niet mogelijk voor je plaatjes?

Oh ja, dit is zo uit de tijd: Deze website is geoptimaliseerd voor: Internet Explorer en een schermresolutie van 1024x768. Wist je dat bijna 20% van de internetters al gebruikt maakt van Firefox? En in Firefox ziet het er gewoon belabberd uit.

i know i know

maar je kan toch niet een background image mee re-sizzen ?

[Noork]

roy2001 schreef op woensdag 21 september 2005 @ 11:31:
[...]


i know i know

maar je kan toch niet een background image mee re-sizzen ?

Maar ik zie niet in waar jij een background image nodig zou moeten hebben. Je hebt alleen 3 plaatjes en een logootje. Aha, dat heb jij dus in een background gezet. Tja je maakt het jezelf wel moeilijk zo.

[Vecodo]

Noork schreef op woensdag 21 september 2005 @ 11:33:
[...]

Maar ik zie niet in waar jij een background image nodig zou moeten hebben. Je hebt alleen 3 plaatjes en een logootje. Aha, dat heb jij dus in een background gezet. Tja je maakt het jezelf wel moeilijk zo.

Waar ik background image nodig heb is voor de Colright div.
aangezien hier ook weer tekst over komt te staan.

kan in principe de header wel zonder background image doen. en de empty div ook.

maar kan toch niet een .PHP code over een image heen zetten
( tenzij deze image als background gedefineerd is )

[Boelie-Boelie]

Waarom bouw je niet vanuit een browser die wel goed met CSS omgaat? De fouten die je dan vindt als je het met IE bekijkt, zijn veel makkelijker op te lossen, aangezien die goed gedocumenteerd zijn. Bij goede coding zou het in principe irrelevant moeten zijn voor welke browser het geschikt is.

De reden dat je geen width van 750 px wilt, is omdat "de ene dan een witte rand heeft, de andere niet"? Sommige mensen krijgen er een leuke horizontale scrollbalk bij (15% van de internetters), zit je daar niet mee?

Eigenlijk snap ik niet helemaal wat de reden is waarom het per se alleen voor IE is en per se alleen voor 1024-schermen. Wanneer die eisen vervallen, komen er andere oplossingen in beeld dan nu het geval is, zoals een flexibele layout, of een design op 750px-breedte (da's het makkelijkst).

[Willem]

even -[Monitor], "." en +t gedaan @ title.

[TheRookie]

Je weet dat er in de "Crisis Information Management" aan de rechterkant een verspringing zit ?
Ook zie ik aan de rechterkant 5 headlines van nieuwsberichten flitsen als ik de pagina ververs