conversie van template

Status
Niet open voor verdere reacties.
J

jurschouten

Gebruiker
Lid geworden
22 apr 2011
Berichten
24
Met veel moeite had ik een template gemaakt, de site daar verder op gebaseerd maar:
het blijkt dat ie op breedbeeldschermen het niet goed doet
dit komt denk ik omdat ik alles met een vaste breedte heb gedaan.
Nu probeer ik om alles om te zetten naar percentages (80%) maar dan krijg ik heel veel problemen met het sprymenu
Kan iemand mij helpen??????????

Dit is de code van de site met de vaste breedte:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Naamloos document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../frankrijkvanmij.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #ccccff;
}
-->
</style></head>

<body>
<div id="container">
<div id="kop"><img src="../afbeeldingen/koppen1.jpg" width="800" height="77" alt="koppen" /></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../htm/logeren.htm">Logeren,<br />
wat is dat?</a></li>
<li><span id="container"><a href="#" class="MenuBarItemSubmenu">Mens &amp;<br />
Acommodatie </a>
</span>
<ul>
<li><a href="#">Gastenhuis<br />
Suites/kamers </a></li>
<li><a href="#">Faciliteiten<br />
Wat er allemaal is</a></li>
<li><a href="#">Mens &amp;<br />
Handicap </a></li>
<li><a href="#">Alleen is<br />
maar alleen </a></li>
</ul>
</li>
<li><span id="container"><a href="#" class="MenuBarItemSubmenu">Arrangementen &amp; mogelijkheden</a>
</span>
<ul>
<li><a href="#">Arrangement<br />
logeren </a></li>
<li><a href="#">Catalunya<br />
met excursies </a></li>
<li><a href="#">Wandelen<br />
On - en geoefend </a></li>
<li><a href="#">Kerst en<br />
Oud &amp; Nieuw</a></li>
<li><a href="#">Werk<br />
Vakantie </a></li>
</ul>
</li>
<li><span id="container"><a class="MenuBarItemSubmenu" href="#">Informatie &amp;<br />
Contact </a>
</span>
<ul>
<li><a href="#">Contact<br />
Telefoon en Mail</a> </li>
<li><a href="#">Informatie-<br />
formulier </a></li>
<li><a href="#">Adres;<br />
Routebe-schrijving </a></li>
<li><a href="#">Wat gaan <br />
we doen? </a></li>
<li><a href="#">Wat gaan<br />
we bekijken? </a></li>
<li><a href="#">Disclaimer &amp;<br />
Verantwoording <br />
</a></li>
</ul>
</li>
<li><span id="container"><a href="#" class="MenuBarItemSubmenu">Babbels<br />
Enzovoort </a>
</span>
<ul>
<li><a href="#">Vakantie<br />
wat is dat? </a></li>
<li><a href="#">Wij willen<br />
samenwerken </a></li>
</ul>
</li>
<li><span id="container"><a href="#" class="MenuBarItemSubmenu">Tarieven &amp;<br />
Beschikbaarheid </a>
</span>
<ul>
<li><a href="#">Tarieven &amp;<br />
aanbiedingen </a></li>
<li><a href="#">Beschikbaarheid<br />
&amp; Feestdagen </a></li>
<li><a href="#">Hoe werkt het?<br />
Wees Welkom </a></li>
</ul>
</li>
<li><span id="container"><a href="#" class="MenuBarItemSubmenu">Gasten &amp;<br />
hun meningen </a>
</span>
<ul>
<li><a href="#">Alleen maar vijf:<br />
&quot;glimwurmpjes&quot; </a></li>
<li><a href="#">Honderd en een<br />
aanbevelings-brieven </a></li>
<li><a href="#">Aanbevelings-brieven<br />
2009 &gt;&gt; 2005 </a></li>
</ul>
</li>
</ul>
<div id="content"></div>
</div>
<div align="left"><!-- TemplateBeginEditable name="EditRegion3" -->EditRegion3<!-- TemplateEndEditable --></div>
</div>
<div> </div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
 
heb je ook een linkje naar de site, zodat we wat kunnen zien? en de css?

Hier kan ik niet zo veel mee.
 
Hoi Jur,
In het begin zei je:
het blijkt dat ie op breedbeeldschermen het niet goed doet
Klik om te vergroten...
Wat doet ie niet goed?
Misschien valt er een andere mouw aan te passen dan alles omzetten naar relatieve breedtes.

Met vriendelijke groet,
CSShunter
 
de uitlijning van de div

de uitlijning van de divs is op een gewoon scherm wel goed, maar op de breedbeeld vindt een verschuiving plaats
 
Juist ja. Ik denk dat je er al aardig bij gebaat bent als je:
  • alle 80% er weer uit haalt (ook die in de ul.MenuBarHorizontal van het SpryMenuBarHorizontal.css),
  • en de breedte van de site op 800px zet,
  • met daarbij een gecentreerde body:
Code: 
body {
	width: 800px;
	margin: 0 auto;
}
Met nog her & der wat aanpassingen krijg je dan iets als:
Tips:
  • Gebruik geen <br>'s om een mooie afbreking midden in een zin te maken. Bij een andere browser, resolutie of (door de bezoeker ingestelde) andere lettergrootte levert dat gebroken regels op!
    ginf-br.png
  • Het contrast in de achtergrondfiguur maakt voor mij de tekst niet zo makkelijk leesbaar. Met nog iets meer transparant wit over de achtergrondfiguur zetten komt de tekst beter uit.
  • De lettergrootte in de relatieve maat em opgeven, en niet in harde px. Dan kan de bezoeker ook in Internet Explorer de lettergrootte naar behoefte aanpassen via menu Beeld > Tekengrootte > Groter/Kleiner/enz.
  • Onderaan de achtergrondfoto een verloopje maken naar een vaste kleur, die via de css gebruikt wordt als "verlengstuk" bij lange pagina's of bij vergroting van de letters door de bezoeker.
Bij bekijken op resolutie 1024X768px in Firefox:

ginf-huidig-FF.png
>
ginf-nieuw-FF.png

huidig > nieuw​

Maar als ik het goed begrijp, ben je bezig met een algehele renovatie van de site, die vervolgens weer een paar jaar mee moet.
In dat geval zou ik besluiten om niet een vaste breedte van 800px aan te houden, maar die op 980px te zetten (met aanpassing van de afbeeldingen):
  • Mensen met een monitor van 800x600px zijn er nauwelijks nog.
  • "De scherm resolutie 800 x 600 komt niet meer voor in de top 10 van meest gebruikte scherm resoluties. In 2007 was het marktaandeel nog 7,22 procent. Nu is dit nog slechts 1,18 procent." - Persbericht sept. 2010: www.uptrends.com/html/nl/scherm-resolutie-1024-768-meest-gebruikt
  • Een site op 980px breed past mooi op 1024*768px (de breedte voor de scrollbalk rechts moet er nog van af!), is met scrollen L/R ook nog op 800x600px te zien, en is niet zo piepklein op breedbeeldschermen ("heb ik daarvoor zo'n mooi breedbeeldscherm gekocht?!").
  • Prettig is dan ook, dat je wat meer speling hebt in het menu en daarvoor een wat groter letterformaat kunt gebruiken.
  • Vanaf het begin op de nieuwe breedte ontwerpen is een stuk makkelijker dan dat later alsnog gaan aanpassen! :)
Met vriendelijke groet,
CSShunter
________
O ja, ik zou ook Google even raadplegen voor "tips website mobiel gebruik". Mensen die onderweg zijn en een mobieltje hebben, kunnen dan bv. de routebeschrijving nog even nalezen!
 
Laatst bewerkt:
hartstikke bedankt!
ik ben nu een week onderweg en kan dus niets aanpassen
ik laat zeker weten of jouw advies heeft geholpen
 
ik ben er verdorie nog steeds niet aan toegekomen............hopelijk deze week
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan