Div tags verschuiven

Status
Niet open voor verdere reacties.

LonMarijn

Nieuwe gebruiker
Lid geworden
30 mrt 2010
Berichten
4
Hallo,
ik maak een website voor mijn buurvrouw, maar er treden steeds kleine probleempjes op. Ik ben een beginner, heb het idee dat ik iets over het hoofd zie en/of (kleine) domme foutjes maak.
Dit is de website: http://www.cadstyle.nl
Je ziet dat een paar van de knoppen in het menu naar boven verspringen, en er hoort ook nog een knop 'contact', maar die is helemaal verdwenen. Heb alle links en doorverwijzingen goed gecontroleerd, dus ik weet niet of het daar aan ligt. In dreamweaver staan de buttons overigens wel op de juiste plek.
Ik hoop dat iemand me kan helpen, en als je iets anders ziet wat fout is, verbeterd kan worden of anders kan hoor ik het graag!

De code van de index:
Code:
<!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" />
<title>Cadstyle</title>
<link href="./CssFiles/oneColFixCtr.css" rel="stylesheet" type="text/css" /><!--[if IE]>
<style type="text/css"> 
/* plaats in deze voorwaardelijke opmerking css-correcties voor alle versies van IE */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* de bovenstaande softwaregebonden eigenschap zoom geeft IE de hasLayout die IE nodig heeft om verschillende bugs te vermijden */
</style>
<![endif]-->
<style type="text/css">
<!--


-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>


<div class="Hoofd">
  <div class="LinksBlauw">
    <div class="Logo"></div>
    <div class="Logo"><img src="./Images/cs-logo.jpg" width="118" height="117" alt="Logo" /></div>
    <div class="Home"></div>
    <div class="Home"><img src="Images/Home4.jpg" width="100" height="35" alt="Home" /></div>
<div class="Portfolio"><a href="./PORTFOLIO1.html" target="_self" onmouseover="MM_swapImage('Portfolio','','Images/Porfolio4.jpg',0)" onmouseout="MM_swapImgRestore()"><img src="Images/Porfolio3.jpg" name="Portfolio" width="100" height="35" border="0" id="Portfolio" /></a></div>
<div class="Diensten"><a href="./DIENSTEN.html" target="_self" onmouseover="MM_swapImage('Diensten','','./Images/Diensten4.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="./Images/Diensten3.jpg" name="Diensten" width="100" height="35" border="0" id="Diensten" /></a></div>
<div class="Werkwijze10"><a href="./WERKWIJZE1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Werkwijze','','Images/Werkwijze4.jpg',0)"><img src="Images/Werkwijze3.jpg" name="Werkwijze" width="100" height="35" border="0" id="Werkwijze" /></a></div>
<div class="Contact10"><a href="./CONTACT1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','Images/Contact4.jpg',0)"><img src="Images/Contact3.jpg" name="Contact" width="100" height="35" border="0" id="Contact" /></a></div>
    <div></div>
    <div class="Referenties"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Referenties','','Images/Referenties4.jpg',0)"><img src="Images/Referenties3.jpg" name="Referenties" width="100" height="35" border="0" id="Referenties" /></a></div>
  </div>
  <div class="Titel"><img src="./Images/header-txt (1).png" width="310" height="100" alt="Titel" /></div>
  <div class="Contact"><img src="./Images/cs-contact (2).png" width="274" height="100" /></div>
  <div class="Titelbalk"></div>
  <div class="Diensttkst">
    <p>&nbsp;</p>
</div>
  <div class="welkomtekst">
    <p>Graag stel ik me even aan u voor. <br />
      Ik ben Stella Mollenhorst en mijn passie is tekenen. </p>
    <p>In maart 2006 ben ik mijn eigen tekenbureau gestart.<br />
      Onder mijn klanten bevinden zich interieurbouwers, interieurontwerpers, makelaars, <br />
      standbouwers en ook particulieren.</p>
    <p>U kunt bij mij terecht voor:<br />
    </p>
    <ul>
      <li>Plattegronden (tevens inmeten)</li>
      <li>Werk-Tekeningen</li>
      <li>&quot;Praatplaatjes&quot;</li>
      <li>Presentatie-Tekeningen (zowel 2D als 3D)</li>
    </ul>
    <p>Ik kan u helpen bij al uw tekenwerk!</p>
  </div>
</div>
<div class="Hoofd2"></div>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Diensten','','./Images/Diensten4.jpg',1)"></a>
</body>
</html>
 
Beste LonMarijn,

Als eerste, je maakt geen correct gebruik van de divs. divs is bedoeld voor secties en jij hebt voor elke link een sectie gemaakt xd.
informatie : http://www.w3schools.com/tags/tag_DIV.asp

Ten tweede, als je de volgende keer code plaats wilt je deze dan tussen de html of php tags zetten. hierdoor krijgt het kleurtjes net als in dreamweaver wat het overzichtelijker maakt.

Ik zal nu ff kijken naar je code. Btw je hebt wat heftige javascript functies erin xD.
kneem aan dat je deze gekopieerd heb van ergens. Waar dienen ze voor?

en wat wil je precies veranderd hebben aan de site ???

Byee VRC
 
Laatst bewerkt door een moderator:
@visha.

Het is niet nodig te citeren als je direct reageert. De topics worden anders zo lang, met dezelfde tekst.;)
 
@visha.

Het is niet nodig te citeren als je direct reageert. De topics worden anders zo lang, met dezelfde tekst.;)

sorry kben gewent te klikken op de knop quote. kzal er in het vervolg op letten ;)
maar ik neem aan dat je het hebt over andere post bij andere gebruikers want hier is niet gequoted?

Byee VRC

edit : ooh sorry zag later dat je mijn topic had bewerkt ;)
 
Haha, ik was voor zo'n reactie al bang. Kijk ik heb voor de 'site zelf' gevolgd wat ik op school heb geleerd, nml bijvoorbeeld: insert div tag voor een nieuwe div, en daar een plaatje in. Wat bedoel je met een sectie?

Wat die javascript functies betreft, ik heb eerlijk gezegd geen idee waar die voor dienen en hoe ik daaraan kom (ben na een tijd weer verder gegaan met de site, weet niet meer hoe ik dat gedaan heb). Is dit heel fout of erg of maakt het opzich niet veel uit?

In elk geval bedankt!!

Nogmaals de code:

HTML:
<!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" />
<title>Cadstyle</title>
<link href="./CssFiles/oneColFixCtr.css" rel="stylesheet" type="text/css" /><!--[if IE]>
<style type="text/css"> 
/* plaats in deze voorwaardelijke opmerking css-correcties voor alle versies van IE */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* de bovenstaande softwaregebonden eigenschap zoom geeft IE de hasLayout die IE nodig heeft om verschillende bugs te vermijden */
</style>
<![endif]-->
<style type="text/css">
<!--


-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>


<div class="Hoofd">
  <div class="LinksBlauw">
    <div class="Logo"></div>
    <div class="Logo"><img src="./Images/cs-logo.jpg" width="118" height="117" alt="Logo" /></div>
    <div class="Home"></div>
    <div class="Home"><img src="Images/Home4.jpg" width="100" height="35" alt="Home" /></div>

<div class="Portfolio"><a href="./PORTFOLIO1.html" target="_self" onmouseover="MM_swapImage('Portfolio','','Images/Porfolio4.jpg',0)" onmouseout="MM_swapImgRestore()"><img 

src="Images/Porfolio3.jpg" name="Portfolio" width="100" height="35" border="0" id="Portfolio" /></a></div>
<div class="Diensten"><a href="./DIENSTEN.html" target="_self" onmouseover="MM_swapImage('Diensten','','./Images/Diensten4.jpg',1)" onmouseout="MM_swapImgRestore()"><img 

src="./Images/Diensten3.jpg" name="Diensten" width="100" height="35" border="0" id="Diensten" /></a></div>
<div class="Werkwijze10"><a href="./WERKWIJZE1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Werkwijze','','Images/Werkwijze4.jpg',0)"><img 

src="Images/Werkwijze3.jpg" name="Werkwijze" width="100" height="35" border="0" id="Werkwijze" /></a></div>
<div class="Referenties"><a href="./REFERENTIES.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Referenties','','Images/Referenties4.jpg',0)"><img 

src="Images/Referenties3.jpg" name="Referenties" width="100" height="35" border="0" id="Referenties" /></a></div>
<div class="Contact10"><a href="./CONTACT1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','Images/Contact4.jpg',0)"><img src="Images/Contact3.jpg" 

name="Contact" width="100" height="35" border="0" id="Contact" /></a></div>

    <div></div>
    
  </div>
  <div class="Titel"><img src="./Images/header-txt (1).png" width="310" height="100" alt="Titel" /></div>
  <div class="Contact"><img src="./Images/cs-contact (2).png" width="274" height="100" /></div>
  <div class="Titelbalk"></div>
  <div class="Diensttkst">
    <p>&nbsp;</p>
</div>
  <div class="welkomtekst">
    <p>Graag stel ik me even aan u voor. <br />
      Ik ben Stella Mollenhorst en mijn passie is tekenen. </p>
    <p>In maart 2006 ben ik mijn eigen tekenbureau gestart.<br />
      Onder mijn klanten bevinden zich interieurbouwers, interieurontwerpers, makelaars, <br />
      standbouwers en ook particulieren.</p>
    <p>U kunt bij mij terecht voor:<br />
    </p>
    <ul>
      <li>Plattegronden (tevens inmeten)</li>
      <li>Werk-Tekeningen</li>
      <li>&quot;Praatplaatjes&quot;</li>
      <li>Presentatie-Tekeningen (zowel 2D als 3D)</li>
    </ul>
    <p>Ik kan u helpen bij al uw tekenwerk!</p>
  </div>
</div>
<div class="Hoofd2"></div>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Diensten','','./Images/Diensten4.jpg',1)"></a>
</body>
</html>
 
het is zo dat als je js erin zet met fouten je site meestal niet goed werkt.
wel raar dat je school het zo leert maarja scholen tegenwoordig weten ook nix xD.
sectie daar bedoel ik mee een gedeelte die je een div geeft waar je vervolgens met class een style over heen kan gooien met CSS. als je dan bijv. voor de 10 links een aparte diff hebt moet je bij al deze divs de css gaan toewijzen. heb je 1 div(blok/sectie) bijv voor je menu en wijs je 1x je CSS class toe en je hebt alle 10 links in 1 dezelfde style ;).

als je niet weet waar je de js functies voor gebruikt zou ik ze uitschakelen/verwijderen.
en de vraag van je wilt heb je niet beantwoord :P?

nou ik ga ff de code cleanen

Byee VRC
 
en de vraag van je wilt heb je niet beantwoord :P?

Hehe vergeten, ehm ja ik maakte het topic aan omdat die buttons in het menu naar boven springen, terwijl ze in DW wel gewoon goed staan (op een rijtje in het menu). Plus dat de rollover van de bttn 'werkwijze' niet goed werkt..
En nouja, als iemand nog tips heeft voor iets dat misschien mooier/beter/anders kan, is dat mooi meegenomen ;)
 
Hehe vergeten, ehm ja ik maakte het topic aan omdat die buttons in het menu naar boven springen, terwijl ze in DW wel gewoon goed staan (op een rijtje in het menu). Plus dat de rollover van de bttn 'werkwijze' niet goed werkt..
En nouja, als iemand nog tips heeft voor iets dat misschien mooier/beter/anders kan, is dat mooi meegenomen ;)

wow ik snap echt helemaal niet hoe je het gemaakt hebt want ik zie nix van frames of tables of iets dergelijks. iig ik heb de code aangepast en je maakt gebruik van javascript voor je plaatjes met mouseovers en outs. Deze zijn aan elkaar gekoppeld. ik heb niet veel kunnen aanpassen omdat ik hier alleen de broncode heb en geen plaatjes enz..

heb wat in css toegevoegd voor de plaatjes enne de divs verwijderd.
<p> omgezet naar <br />

Probeer gwn in het begin de links in de menu te verwijderen en gewone links te plaatsen en dan vervolgens uit te breiden met je ingewikkelde :| js code.

HTML:
<!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" />
<title>Cadstyle</title>

<link href="./CssFiles/oneColFixCtr.css" rel="stylesheet" type="text/css" />

<style type="text/css"> 
<!--

/* plaats in deze voorwaardelijke opmerking css-correcties voor alle versies van IE */
.twoColElsLtHdr #sidebar1 
{ 
	padding-top: 30px; 
}

.twoColElsLtHdr #mainContent 
{ 
	zoom: 1; 
	padding-top: 15px; 
}

.menuImages
{
	width : 100;
	height: 35;
	border: none;
}
/* de bovenstaande softwaregebonden eigenschap zoom geeft IE de hasLayout die IE nodig heeft om verschillende bugs te vermijden */

-->
</style>

<script type="text/javascript">
<!--

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

//-->
</script>
</head>
 
   <img src="./Images/cs-logo.jpg" width="118" height="117" alt="Logo"/>
   <img src="Images/Home4.jpg" width="100" height="35" alt="Home"/>
 
 	<a href"http://www.helpmij.nl" target="_self" id="link" name="link"></a>
	<a href="./PORTFOLIO1.html" 
	target="_self" 
	onmouseover="MM_swapImage('Portfolio','','Images/Porfolio4.jpg',0)" 
	onmouseout="MM_swapImgRestore()">
	<img src="Images/Porfolio3.jpg" name="Portfolio" id="Portfolio" class="menuImages"/>
	</a>
	
	<a href="./DIENSTEN.html" 
	target="_self" 
	onmouseover="MM_swapImage('Diensten','','./Images/Diensten4.jpg',1)" 
	onmouseout="MM_swapImgRestore()">
	<img src="./Images/Diensten3.jpg" name="Diensten" id="Diensten" class="menuImages"/>
	</a>
	
	<a href="./WERKWIJZE1.html" 
	onmouseout="MM_swapImgRestore()" 
	onmouseover="MM_swapImage('Werkwijze','','Images/Werkwijze4.jpg',0)">
	<img src="Images/Werkwijze3.jpg" name="Werkwijze" id="Werkwijze" class="menuImages"/>
	</a>
	
	<a href="./REFERENTIES.html" 
	onmouseout="MM_swapImgRestore()" 
	onmouseover="MM_swapImage('Referenties','','Images/Referenties4.jpg',0)">
	<img src="Images/Referenties3.jpg" name="Referenties" id="Referenties" class="menuImages"/>
	</a>
	
	<a href="./CONTACT1.html" 
	onmouseout="MM_swapImgRestore()" 
	onmouseover="MM_swapImage('Contact','','Images/Contact4.jpg',0)">
	<img src="Images/Contact3.jpg" name="Contact" id="Contact" class="menuImages"/>
	</a>

	<img src="./Images/header-txt (1).png" width="310" height="100" alt="Titel" />
	<img src="./Images/cs-contact (2).png" width="274" height="100" />
	
	<div class="welkomtekst">
		<br />
		
		Graag stel ik me even aan u voor. 
		<br />
		Ik ben Stella Mollenhorst en mijn passie is tekenen. 
		<br />
		In maart 2006 ben ik mijn eigen tekenbureau gestart.
		<br />
		Onder mijn klanten bevinden zich interieurbouwers, interieurontwerpers, makelaars, 
		<br />
		standbouwers en ook particulieren.
		<br />
		U kunt bij mij terecht voor:
		<br />
			<ul>
				<li>Plattegronden (tevens inmeten)</li>
				<li>Werk-Tekeningen</li>
				<li>&quot;Praatplaatjes&quot;</li>
				<li>Presentatie-Tekeningen (zowel 2D als 3D)</li>
			</ul>
		<br />
		Ik kan u helpen bij al uw tekenwerk!
	</div>

	<a href="#" 
	onmouseout="MM_swapImgRestore()" 
	onmouseover="MM_swapImage('Diensten','','./Images/Diensten4.jpg',1)">
	</a>
	
</body>
</html>

Waarschijnlijk verpest deze code wel je layout omdat je gebruikte maakte van divs voor de layout volgens mij. kijk maar ;)

Byee VRC
 
Pff ik loop nu helemaal vast haha, kan net zo goed opnieuw beginnen, denk dat dat t beste is. Heb alles dus blijkbaar vanaf het begin verkeerd opgebouwd? Balen zeg.. Ik ga wel wat tutorials op internet volgen om alles vanaf het begin goed te doen ofzo, weet t anders ook niet, maar jij heel er bedankt in elk geval voor je hulp en moeite!
Én ik ga nooit meer naar mn school luisteren ;)
 
Pff ik loop nu helemaal vast haha, kan net zo goed opnieuw beginnen, denk dat dat t beste is. Heb alles dus blijkbaar vanaf het begin verkeerd opgebouwd? Balen zeg.. Ik ga wel wat tutorials op internet volgen om alles vanaf het begin goed te doen ofzo, weet t anders ook niet, maar jij heel er bedankt in elk geval voor je hulp en moeite!
Én ik ga nooit meer naar mn school luisteren ;)

graag gedaan.
deze site heeft goede uitleg : http://www.w3schools.com
btw ik zou html doornemen = basis.
javascript en css is ook handig.
js voor dynamic pages
css voor opmaak


daarnaast kan je verdiepen in verschillende talen als php en asp.
ASP.NET vind ik zelf goed.
zo de site zien ga ik ook maar ff weer leren :)

Succes
Byee VRC
 
Hoi LonMarijn,
Pff ik loop nu helemaal vast haha, kan net zo goed opnieuw beginnen, denk dat dat 't beste is. Heb alles dus blijkbaar vanaf het begin verkeerd opgebouwd? Balen zeg.. Ik ga wel wat tutorials op internet volgen om alles vanaf het begin goed te doen ofzo, weet 't anders ook niet (...) Én ik ga nooit meer naar mn school luisteren. ;)
Tja de site had eerst nogal erg te lijden van de ziekte "divitis": overal <div>'s van maken. :rolleyes:
Maar dankzij Visha zit je nu op het goede spoor.
Als tutorial kan ik heel erg aanbevelen:
De javascript-code ziet er uit als een invoegsel van Dreamweaver, die de kool gestoofd heeft. Dat hele image-swapper javascript is niet nodig! De hover-effecten kunnen veel beter met css gemaakt worden, dan blijft de html-code schoon, en kunnen mensen die javascript uit hebben staan (of die met een tekstbrowser werken, die geen javascript kent) óók je mooie hovers zien. Verder doet het javascript aan "preloaden" (vooraf inladen van plaatjes), maar dat is in jouw geval ook helemaal niet nodig. Weg ermee! :D

Dan nog wat tips:
  • Gebruik als Doctype altijd de "strict" variant, dan gaan de browsers beter om met de standaard-voorschriften voor correcte code/weergave.
  • Het gebruikte stylesheet oneColFixCtr.css munt niet uit door eenvoud en handigheid, zacht gezegd. Er zitten allerlei absoluut gepositioneerde elementen in (zo ongeveer de lastigste dingen in css), en daarmee is het uitkijken geblazen als je niet heel erg goed weet waar je mee bezig bent. Gecombineerd met op de pixel vastgeprikte maten in breedte plus hoogte zit er dan geen enkele speling in de layout. Ik denk dat een eenvoudiger model makkelijker te hanteren is.
    Ik zou ook niet meteen met een flexibele opmaak ("liquid layout" of zoals ze in het stylesheet zeggen "elastic layout") gaan werken, zoals de bedoeling van dat stylesheet is. Een goed draaiende Vaste Breedte opmaak ("fixed width layout") is beter dan een niet werkende Liquid Layout! :)
  • In de code van visha hoort onder de </head> nog wel een start-tag <body> op regel 62, want onder het hoofd kan je alleen maar iets plakken als er een lijf onder zit. ;)
  • Als het menu echte tekst heeft, en geen plaatjes in plaats daarvan, is de site beter toegankelijk voor mens en (zoek)machine.
  • Maak images op ware grootte, en laat ze niet door de browser vergroten of verkleinen (die doen dat slechter dan een tekenprogramma).
  • De achtergrond-afbeelding is nu erg groot (400kB). Met een dot jpg-compressie is die zonder kwaliteitsverlies terug te brengen tot een jpg van 95kB, die is 4x zo snel gedownload.
  • Images die er een beetje strak uit moeten zien, zoals het logo, kan je het beste opslaan als png of als gif-bestand, want jpg maakt er al gauw drabbelkoek van (minder scherp, vlekken erin; zie ook hier).
Originele jpg links, bijgewerkte gif rechts:
cadstyle-logo-ori.jpg
cadstyle-logo-nw.gif
Drie keer vergroot is het dit:

cad-ori-3x-vergroot.png
cad-new-3x-vergroot.png


Het nieuwe plaatje is 1px groter: die ene px vormt de middenlijn, zodat er links/rechts en boven/onder precies dezelfde vierkantjes staan, en het pijlpuntje precies midden op het lijntje kan staan (bij een even aantal px van het lijntje komt het puntje er ofwel 1px naast, ofwel het moet een bot puntje van 2px worden).
  • Als je elke pagina de <body> een class="..." meegeeft met dezelfde naam als de ID in het menu-lijstje <li id="...">, dan kan de op een bepaald moment bekeken pagina in het menu automatisch een afwijkende vormgeving krijgen. Zie je meteen op welke pagina je zit.
  • Als je de links in het menu een { display: block; } geeft, zijn niet alleen de lettertjes van de link aanklikbaar, maar het hele strookje ernaast in de menukolom ook: daarmee worden het tevens mooie even grote hover-"knoppen".
  • De handschrift-lettertjes komen wat beter uit, als ze niet net zo zwart zijn als de gewone tekstkleur, maar een beetje inktblauwig.
  • Het CADstyle logo valt bij een resolutie van 1024x768px voor de helft buiten beeld. De logische logo-plek is meestal linksboven. Ook wordt er doorgaans een link naar de homepage aan vast geknoopt (is extra, want staat al in het menu; maar sommige mensen beginnen met op het logo te willen klikken om naar huis te gaan).
  • De breedte van de pagina is net te breed voor een resolutie van 1024x768px, als er bij grote pagina's ook een scrollbar aan de rechterkant bij moet. Met een iets kleinere breedte ben je van de hinderlijke links-rechts scrollbar onderaan af.
  • Bij 1024x768px is het beeld wel erg wit (je ziet niets van de mooie achtergrond-tekening, die laat zien wat CADstyle voor soort dingen kan maken). Met een iets transparante witte kleur komt de tekening er net een beetje doorschemeren. Er moet dan wel een "conditional comment" voor de Internet Explorers lager dan IE8 gemaakt worden, dan kunnen die het ook tonen (via een alleen voor IE geldend filter).
  • De lettergrootte zou ik wat groter nemen, dat is beter leesbaar bij alle resoluties, en er is ruimte genoeg op de homepage. En bij vervolgpagina's: dan maak je ruimte. ;)
  • Door het invoegen van kopjes (<h1>, <h2>, enz.) breng je structuur in je pagina. Kopjes (vooral de h1, waar er maar één van mag zijn) zijn ook erg belangrijk voor zoekmachines. Een herhaling van (een deel van) de <title> die in de browserbalk komt te staan, is het beste. Dan zien de zoekrobots dat de <title> geen lokmiddel is met een andere inhoud dan wat er op de pagina zelf wordt gepresenteerd (in de tijd van Britney Spears kwam die naam heel veel voor in pagina-titels, ook als een site daar helemaal niets mee te maken had: zo dacht men bij zoeken op "Britney Spears" in de zoekresultaten te komen; maar tegenwoordig trappen de zoekmachines daar niet meer in).
Als het goed is, kom je dit soort dingen ook tegen in de tutorial. En om Dreamweaver en leerkrachten alvast een lesje te leren:
Zoiets zou het ook kunnen worden.
Voor de vervolgpagina's is dan nog aanvullende css nodig, maar het gaat om het idee.

Succes!
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan