sidebar werkt niet in Firefox

Status
Niet open voor verdere reacties.
S

sasvdpasch

Gebruiker
Lid geworden
14 jan 2010
Berichten
72
Hoi, ben erg blij met het resultaat echter werkt mijn site niet in Firefox, wel in Google Chrome, IE7/8, Safari. Weet iemand hoe dit kan? De sidebar werkt dan niet van mijn site, kan niet op geklikt worden. Maar in IE7,8, Safarie n Google Chrome werkt het perfect.
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"><!-- InstanceBegin template="/Templates/template bali vakantie villa.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Bali Vakantie Villa</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="Bali vakantie villa is een grote en zeer luxe 5 sterren vakantie villa die uw droom uit laat komen. U vindt hier alle ingrediënten die nodig zijn voor een perfecte vakantie. Schitterende natuur, vriendelijk personeel, culturele traditie en prachtige stranden."/>
<meta name="keywords" content="bali, vakantie, villa, indonesie, huis, bungalow, bunga, belati, reis, reizen, zon, zonnen, zee, strand, stranden, zwembad, paradijs, surfen, snorkelen, dolfijnen, eiland, rijstvelden, rust, lovina, ***a, ubud"/>
<meta name="robots" content="index,follow"/>
<meta name="language" content="dutch"/>
<meta name="copyright" content="Bali Vakantie Villa - Bunga Melati"/>
<!-- InstanceEndEditable -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div id="headcontainer">
<div id="container">
<div id="header"><img src="title01.jpg" width="790" height="100" alt="index" /></div>
<div id="navigatie">
<ul>
<a href="index.html"><li id="index"></li></a>
<a href="villa.html"><li id="villa"></li></a>
<a href="fotos.html"><li id="fotos"></li></a>
<a href="faciliteiten.html"><li id="faciliteiten"></li></a>
<a href="omgeving.html"><li id="omgeving"></li></a>
<a href="activiteiten.html"><li id="activiteiten"></li></a>
<a href="prijzen.html"><li id="prijzen"></li></a>
<a href="reserveren.html"><li id="reserveren"></li></a>
<a href="contact.html"><li id="contact"></li></a>
<a href="gastenboek.html"><li id="gastenboek"></li></a>
<a href="links.html"><li id="links"></li></a>
</ul>

</div>
<!-- InstanceBeginEditable name="inhoud" -->
<div id="mainContent"><img src="jop9.jpg" width="602,50" height="207" alt="villa top" /></div>
<div id="mainContent2">
<h1>Reserveren</h1>
<H2>Bent u geinteresseerd in een verblijf in Bali Vakantie Villa, dan kunt u dat via onderstaand formulier kenbaar maken!
Na de ontvangst van uw reservering nemen wij zo spoedig mogelijk contact met u op!</h2>

-----------------------------------------------------
Code: 
CSS

@charset "utf-8";
/* CSS Document */

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	color: #FFF;
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-image: url(bg.png);
	background-repeat: repeat;
	background-position: center center;
}
#headcontainer {
	width: 850px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-image: url(bg04.png);
	background-position: top;
}

#container {
	width: 790px;
	text-align: left;
	background-image: url(bg.jpg);
	background-position: center center;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 10px;
	border-bottom-width: 0px;
	border-left-width: 10px;
	border-top-color: #cbeefd;
	border-right-color: #cbeefd;
	border-bottom-color: #cbeefd;
	border-left-color: #cbeefd;
}
#header {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-color: #CEEFFF;
	border-right-color: #CEEFFF;
	border-bottom-color: #CEEFFF;
	border-left-color: #CEEFFF;
}
#navigatie {
	float: left;
	width: 180px;
	border-top-width: 5px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 0px;
	border-top-color: #CEEFFF;
	border-right-color: #CEEFFF;
	border-bottom-color: #CEEFFF;
	border-left-color: #CEEFFF;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	vertical-align: top;
	background-color: #e8ebec;
	height: 450px;
	background-image: url(bg07-1.jpg);
	background-repeat: repeat-y;
}
#navigatie ul {
	float: left;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#navigatie ul #index {
	background-image: url(menu01.jpg);
}

#navigatie ul a #index {
	height: 26px;
	width: 180px;
}
#navigatie ul a #villa {
	height: 26px;
	width: 180px;
}
#navigatie ul a #villa:hover {
	background-image: url(menu02a.jpg);
}
#navigatie ul #villa {
	background-image: url(menu02.jpg);
}

#navigatie ul a#index:hover {
	background-image: url(menu01a.jpg);
}
#navigatie ul a #fotos {
	height: 26px;
	width: 180px;
}
#navigatie ul #fotos {
	background-image: url(menu03.jpg);
}
#navigatie ul a #fotos:hover {
	background-image: url(menu03a.jpg);
}
#navigatie ul a #faciliteiten {
	height: 26px;
	width: 180px;
}
#navigatie ul #faciliteiten {
	background-image: url(menu04.jpg);
}
#navigatie ul a #faciliteiten:hover {
	background-image: url(menu04a.jpg);
}
#navigatie ul a #omgeving {
	height: 26px;
	width: 180px;
}
#navigatie ul a #omgeving:hover {
	background-image: url(menu05a.jpg);
}
#navigatie ul #omgeving {
	background-image: url(menu05.jpg);
}
#navigatie ul a #activiteiten {
	height: 26px;
	width: 180px;
}
#navigatie ul a #activiteiten:hover {
	background-image: url(menu06a.jpg);
}
#navigatie ul #activiteiten {
	background-image: url(menu06.jpg);
}
#navigatie ul a #prijzen {
	height: 26px;
	width: 180px;
}
#navigatie ul a #prijzen:hover {
	background-image: url(menu07a.jpg);
}
#navigatie ul #prijzen {
	background-image: url(menu07.jpg);
}
#navigatie ul a #reserveren {
	height: 26px;
	width: 180px;
}
#navigatie ul a #reserveren:hover {
	background-image: url(menu08a.jpg);
}
#navigatie ul #reserveren {
	background-image: url(menu08.jpg);
}
#navigatie ul a #contact {
	height: 26px;
	width: 180px;
}
#navigatie ul a #contact:hover {
	background-image: url(menu09a.jpg);
}
#navigatie ul #contact {
	background-image: url(menu09.jpg);
}
#navigatie ul a #gastenboek {
	height: 26px;
	width: 180px;
}
#navigatie ul a #gastenboek:hover {
	background-image: url(menu10a.jpg);
}
#navigatie ul #gastenboek {
	background-image: url(menu10.jpg);
}
#container #navigatie ul a #links {
	height: 26px;
	width: 180px;
}
#navigatie ul a #links:hover {
	background-image: url(menu11a.jpg);
}
#navigatie ul #links {
	background-image: url(menu11.jpg);
}


#navigatie ul li {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	float: left;
	list-style-type: none;
	display: block;
	height: 26px;
	width: 180px;
}



#mainContent {
	margin: 0;
	padding: 0px;
	border-top-width: 5px;
	border-right-width: 0px;
	border-bottom-width: 3px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CEEFFF;
	border-right-color: #CEEFFF;
	border-bottom-color: #CEEFFF;
	border-left-color: #CEEFFF;
}
#index {
	background-image: url(menu01.jpg);
	height: 26px;
	width: 180px;
}

#mainContent2{
	background-image: url(bg06.jpg);
	border-right-width: 0px;
	border-bottom-width: 5px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CEEFFF;
	border-right-color: #CEEFFF;
	border-bottom-color: #CEEFFF;
	border-left-color: #CEEFFF;
	margin-left: 185px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	border-top-width: 1px;
}
table tr td    img{
	margin-bottom: 0px;
	margin-left: 40px;
	margin-top: 20px;
	border: 1px solid #FFF;
	margin-right: 40px;
}
#table {
	border: 2px solid #FFF;
}
#table table tr td {
	border: 1px solid #FFF;
}





#footer {
	height: 25px;
	background-color: #d7a954;
	font-size: 10px;
	text-align: right;
	width: 790px;
	margin: 0px;
	padding: 0px;
	clear: left;
}
.float-right {
	float: right;
	margin-bottom: 5px;
	margin-left: 10px;
}
.float-left {
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
}
.float-center {
}

p {
	font-size: 14px;
}
a {
	color: #600;
}
#headcontainer #container #navigatie ul #index a {

}

ul {
	font-size: 14px;
}
li {

}
h2 {
	font-size: 14px;
	font-style: normal;
}
h1 {
	font-size: 24px;
}
 
Laatst bewerkt door een moderator:
Het heeft iig niet te maken met, al geprobeerd en werkt niet.
Jij hebt de <a> om de <li> staan. Zo dus: <a><li>...</li></a>. Je moet het op deze manier doen: <li><a>...</a></li>. En dan via je css je display van de a-tag op block zetten. Bijvoorbeeld css:

div#navigatie a{
display: block;
}

Hier staat ie voorlopig online omdat de site die er al staat www.balivakantievilla.nl gemaakt is door mijn neef. Mij nschool wilde dat ik hem in HTML en CSS en PHP maakte vandaar nieuwe opzet.

http://student.aii.avans.nl/ict/shpasch/SiteBali15-01-10/index.html
 
Zet er maar eens tekst in:

Code: 
<div id="navigatie">
      <ul>

      <a href="index.html"><li id="index"></li>index</a>
      <a href="villa.html"><li id="villa"></li>villa</a>
      <li id="fotos"><a href="fotos.html"></a></li>
      <li id="faciliteiten"><a href="faciliteiten.html">faciliteiten</a></li></a>
      <a href="omgeving.html"><li id="omgeving"></li></a>
      <a href="activiteiten.html"><li id="activiteiten"></li></a>
      <a href="prijzen.html"><li id="prijzen"></li></a>
      <a href="reserveren.html"><li id="reserveren"></li></a>
      <a href="contact.html"><li id="contact"></li></a>

      <a href="gastenboek.html"><li id="gastenboek"></li></a>
      <a href="links.html"><li id="links"></li></a>
      </ul>
      
  </div>

:cool:
 
Hoi,

Eerst even twee andere foutjes: helemaal onderaan staat er 'n </div> te veel, gewoon 1 weghalen.
Commentaar na </body> mag niet, moet weg.
Als je je pagina door de validator haalt op http://validator.w3.org/ krijg je dat soort fouten te zien. Zeker een </div> te veel kan de wildste problemen opleveren.

Om te beginnen moet je de <a> gewoon binnen de <li> zetten. Als je daar 'n probleem hebt en er zit 'n fout die je al kent, dan ligt het ook voor de hand, lijkt mij, om eerst die fout eruit te halen.
Als je dat hebt gedaan, kun je in de css toevoegen:
Code: 
#navigatie ul a {display: block; height: 26px; width: 180px;}

Hiermee maak je vam de <a>, die 'n inline-element is en dus geen hoogte of breedte heeft als hij leeg is, 'n blok-element. Dat geef je vervolgens 'n hoogte en breedte die gelijk is aan de afbeeldingen. Nu heeft de cursor iets om overheen te hoveren en werkt het in alle browsers.
In dit geval was Firefox trouwens de enige die 't goed deed, hoewel jij daar misschien anders over denkt :D
Dit werkt alleen maar als de <a> binnen de <li> staat, zoals het hoort.

Waarschijnlijk kan er nu het een en ander aan css weg, dat moet je nog even bekijken.
 
Ik heb de sidebar veranderd in:

<a href="../index.html"><img src="../menu01.jpg" width="180" height="26" alt="index" /></a>
<a href="../villa.html"><img src="../menu02.jpg" width="180" height="26" alt="villa" /></a>
<a href="../fotos.html"><img src="../menu03.jpg" width="180" height="26" alt="fotos" /></a>
<a href="../faciliteiten.html"><img src="../menu04.jpg" width="180" height="26" alt="faciliteiten" /></a>
<a href="../omgeving.html"><img src="../menu05.jpg" width="180" height="26" alt="omgeving" /></a>
<a href="../activiteiten.html"><img src="../menu06.jpg" width="180" height="26" alt="activiteiten" /></a>
<a href="../prijzen.html"><img src="../menu07.jpg" width="180" height="26" alt="prijzen" /></a>
<a href="../reserveren.html"><img src="../menu08.jpg" width="180" height="26" alt="reserveren" /></a>
<a href="../contact.html"><img src="../menu09.jpg" width="180" height="26" alt="contact" /></a>
<a href="../gastenboek.html"><img src="../menu10.jpg" width="180" height="26" alt="gastenboek" /></a>
<a href="../links.html"><img src="../menu11.jpg" width="180" height="26" alt="links" /></a>
</ul>

Nu het volgende: Hoe kan je ervoor zorgen dat het geen omlijning heeft van een link? Want dat krijg ik niet ongedaan bij display: Block of None...

Daarnaast Zie ik nu bijvoorbeeld alleen maar dat het menubalkje lichtblauw is, wanneer ik er met mijn muis overga, word het niet meer donkerblauw. Hoe krijg ik dit gemaakt?
 
Los van je directe vraag heb ik nog 'n aantal dingen.

* Het zou handig zijn als je je site online bijwerkt. Dan weten we zeker dat we het over hetzelfde hebben. Bovendien heb ik allerlei hulpmiddelen waardoor ik bij jou online dingen kan uitproberen. Nu loop je het risico dat ik denk dat je hetzelfde doet als ik, terwijl je iets anders doet.

* De <li> met id's kun je het beste gewoon blijven gebruiken. Als je die weghaalt, moet je elke <a> 'n id gaan geven, want je moet ze ergens aan kunnen herkennen. En de <li>'s hebben al 'n id, dus dat scheelt werk.
De reden om de <li> te blijven gebruiken heeft te maken met toegankelijkheid: 'n menu in 'n <ul> is veel toegankelijker voor spraakbrowsers e.d., en het is nauwelijks extra werk. In dit geval zelfs minder, omdat je anders de id's moet gaan transplanteren naar de <a>.
Ook bij eventuele latere veranderingen is 'n <ul> met <li>'s veel praktischer.

* Uit je css kun je (als je dat nog niet had gedaan) alle regels als
Code: 
#navigatie ul a#villa {height: 26px; width: 180px;}
weghalen.
Omdat de <a> in die <li>'s nu 'n hoogte en breedte heeft, krijgen de <li>'s die automatisch ook.

* Je hebt bij #header voor border:
Code: 
#header {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-color: #CEEFFF;
border-right-color: #CEEFFF;
border-bottom-color: #CEEFFF;
border-left-color: #CEEFFF;
}
Je kunt dat ook noteren als
Code: 
#header {border: 0;}
Dat maakt het veel overzichtelijker

Bij #container heb je
Code: 
border-top-width: 0px;
border-right-width: 10px;
border-bottom-width: 0px;
border-left-width: 10px;
border-top-color: #cbeefd;
border-right-color: #cbeefd;
border-bottom-color: #cbeefd;
border-left-color: #cbeefd;
Dat kan ook als
Code: 
border: solid 0 10px #cbeefd;
solid: de soort border
0 10px: maar twee waarden, eentje voor top en eentje voor right. En omdat er maar twee staan, krijgen bottom en left automatisch dezelfde waarden. Dus er staat eigenlijk 0 10px 0 10px.
De volgorde is áltijd top - right - bottom - left
#cbeefd: ze hebben allemaal dezelfde kleur, hoeft dus maar 1 keer.
Dit is niet echt nodig, maar 't maakt je css 'n heel stuk overzichtelijker.

* Je vraag, hèhè, kan die man daar niet gelijk mee beginnen...
De background moet je nu in de <a> zetten. Dat kan nu, want deze heeft nu 'n hoogte en breedte. Voor de index wordt dat nu:
Code: 
#navigatie ul #index a {background-image: url(menu01.jpg);
Als je de <li> hebt laten staan, is dit heel snel te veranderen.
Als het goed is, zie je op je scherm geen enkel verschil.

* De background-image zit nu in de <a>, dus die moet nu ook in de <a> worden veranderd. Voor de index:
Code: 
#navigatie ul #index a:hover {background: url(menu01a.jpg);}
Ook heel snel te veranderen.

* Ik zou proberen in de css dezelfde volgorde aan te houden als in de html, voorzover dat kan. Nu staan de afbeeldingen voor de knoppen nogal door elkaar heen. Daardoor moet je (ik in ieder geval) zoeken en is de kans op fouten groter.
Ook de regels in de css zijn niet allemaal hetzelfde geschreven. Als dat kan, zoals hierboven, houdt dan dezelfde syntax aan. Dat maakt de kans op fouten veel kleiner, want 'n afwijkende regel knalt er dan alleen al uit omdat hij langer is of zo.

EDIT: ik vergeet nog iets.
In je <li><a href=""></li> staat nu helemaal geen tekst. Een spider van 'n zoekmachine is te vergelijken met 'n spraakbrowser e.d. Beide zien geen plaatjes en hebben nu dus helemaal geen tekst. Daarom is het goed om nog 'n title toe te voegen:
HTML: 
<li><a href="contact.html" title="Neem contact met ons op"></a></li>
 
Laatst bewerkt:
Hoi, ik heb het aangepast zoals je zei:

Maar nou klopt het helemaal niet meer, kleuren zijn weg, borders zijn weg... ? Volgens mij is dit niet helemaal de bedoeling.
Daarnaast is de Nav. Balk ook niets meer????????
nieuwe link hiervan is: http://student.aii.avans.nl/ict/shpasch/Site/index.html

Volgens mij zijn we nu verder van huis...

CSS:

@charset "utf-8";
/* CSS Document */

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #FFF;
text-align: center;
margin: 0px;
padding: 0px;
background-image: url(bg.png);
background-repeat: repeat;
background-position: center center;
}
#headcontainer {
width: 850px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(bg04.png);
background-position: top;
}

#container {
width: 790px;
text-align: left;
background-image: url(bg.jpg);
background-position: center center;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
border-top-width: 0px;
border-right-width: 10px;
border-bottom-width: 0px;
border-left-width: 10px;
border-color: #cbeefd;
}
#header {
border: 0;
border-color: #CEEFFF;
}
#navigatie {
float: left;
width: 180px;
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 0px;
border-color: #CEEFFF;
border-style: solid;
vertical-align: top;
background-color: #e8ebec;
height: 450px;
background-image: url(bg07-1.jpg);
background-repeat: repeat-y;
}
#navigatie ul {
float: left;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navigatie ul #index a {background-image: url(menu01.jpg);}
#navigatie ul #index a {hover {background: url(menu01a.jpg);}
#navigatie ul #villa a {background-image: url(menu02.jpg);}
#navigatie ul #villa a {hover {background: url(menu02a.jpg);}
#navigatie ul #fotos a {background-image: url(menu03.jpg);}
#navigatie ul #fotos a {hover {background: url(menu03a.jpg);}
#navigatie ul #faciliteiten a {background-image: url(menu04.jpg);}
#navigatie ul #faciliteiten a {hover {background: url(menu04a.jpg);}
#navigatie ul #omgeving a {background-image: url(menu05.jpg);}
#navigatie ul #omgeving a {hover {background: url(menu05a.jpg);}
#navigatie ul #activiteiten a {background-image: url(menu06.jpg);}
#navigatie ul #activiteiten a {hover {background: url(menu06a.jpg);}
#navigatie ul #prijzen a {background-image: url(menu07.jpg);}
#navigatie ul #prijzen a {hover {background: url(menu07a.jpg);}
#navigatie ul #reserveren a {background-image: url(menu08.jpg);}
#navigatie ul #reserveren a {hover {background: url(menu08a.jpg);}
#navigatie ul #contact a {background-image: url(menu09.jpg);}
#navigatie ul #contact a {hover {background: url(menu09a.jpg);}
#navigatie ul #gastenboek a {background-image: url(menu10.jpg);}
#navigatie ul #gastenboek a {hover {background: url(menu10a.jpg);}
#navigatie ul #links a {background-image: url(menu11.jpg);}
#navigatie ul #links a {hover {background: url(menu11a.jpg);}

#navigatie ul li {
border: 0;
float: left;
list-style-type: none;
display: block;
height: 26px;
width: 180px;
}
#mainContent {
margin: 0;
padding: 0px;
border-top-width: 5px;
border-right-width: 0px;
border-bottom-width: 3px;
border-left-width: 0px;
border-style: solid;
border-color: #CEEFFF;
}
#index {
background-image: url(menu01.jpg);
height: 26px;
width: 180px;
}

#mainContent2{
background-image: url(bg06.jpg);
border-right-width: 0px;
border-bottom-width: 5px;
border-left-width: 1px;
border-style: solid;
border-color: #CEEFFF;
margin-left: 185px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
border-top-width: 1px;
}
table tr td img{
margin-bottom: 0px;
margin-left: 40px;
margin-top: 20px;
border: 1px solid #FFF;
margin-right: 40px;
}
#table {
border: 2px solid #FFF;
}
#table table tr td {
border: 1px solid #FFF;
}
#footer {
height: 25px;
background-color: #d7a954;
font-size: 10px;
text-align: right;
width: 790px;
margin: 0px;
padding: 0px;
clear: left;
}
.float-right {
float: right;
margin-bottom: 5px;
margin-left: 10px;
}
.float-left {
float: left;
margin-right: 10px;
margin-bottom: 5px;
}
.float-center {
}
p {
font-size: 14px;
}
a {
color: #600;
}
ul {
font-size: 14px;
}
li {
}
h2 {
font-size: 14px;
font-style: normal;
}
h1 {
font-size: 24px;
}

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"><!-- InstanceBegin template="/Templates/template bali vakantie villa.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Bali Vakantie Villa</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="Bali Vakantie Villa is een grote en zeer luxe 5 sterren vakantie villa die uw droom uit laat komen. U vindt hier alle ingrediënten die nodig zijn voor een perfecte vakantie. Schitterende natuur, vriendelijk personeel, culturele traditie en prachtige stranden."/>
<meta name="keywords" content="bali, vakantie, villa, indonesie, huis, bungalow, bunga, belati, reis, reizen, zon, zonnen, zee, strand, stranden, zwembad, paradijs, surfen, snorkelen, dolfijnen, eiland, rijstvelden, rust, lovina, ***a, ubud"/>
<meta name="robots" content="index,follow"/>
<meta name="language" content="dutch"/>
<meta name="copyright" content="Bali Vakantie Villa - Bunga Melati"/>
<!-- InstanceEndEditable -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div id="headcontainer">
<div id="container">
<div id="header"><img src="title01.jpg" width="790" height="100" alt="index" /></div>
<div id="navigatie">
<ul>
<li><a href="index.html"><li id="index"></li></a>
<li><a href="villa.html"><li id="villa"></li></a>
<li><a href="fotos.html"><li id="fotos"></li></a>
<li><a href="faciliteiten.html"><li id="faciliteiten"></li></a>
<li><a href="omgeving.html"><li id="omgeving"></li></a>
<li><a href="activiteiten.html"><li id="activiteiten"></li></a>
<li><a href="prijzen.html"><li id="prijzen"></li></a>
<li><a href="reserveren.html"><li id="reserveren"></li></a>
<li><a href="contact.html"><li id="contact"></li></a>
<li><a href="gastenboek.html"><li id="gastenboek"></li></a>
<li><a href="links.html"><li id="links"></li></a>

</ul>

</div>
<!-- InstanceBeginEditable name="inhoud" -->
<div id="mainContent"><img src="top01.jpg" width="602,50" height="207" alt="villa top" /></div>
<div id="mainContent2">
<h1>Welkom bij Bali Vakantie Villa!</h1>
<h2>Uw droom wordt werkelijkheid in Villa Bunga Melati! </h2>
<img src="images/zwembad2.jpg" alt="zwembad vooraanzicht" width="260" height="195" class="float-right" />
<p>Deze nieuwe 5-sterren villa bevindt zich op een van de mooiste eilanden van de wereld: het Indonesische Bali.
Een adembenemende natuur, het zeer gastvrije bevolking, een fantastische culturele wereld, een overvloed aan activiteiten en bezienswaardigheden en de schitterende exotische stranden zorgen voor een onvergetelijke droomvakantie.</p>
<p>Bali is één van de grootste schatten op aarde,hier liggen de ingrediënten voor puur genieten en ontspannen in onze Villa Bunga Melati: een hemel op aarde.</p>

<p>De Villa met Guesthouse is gelegen in Dencarik (Lovina) ten Noorden van Bali.
Direct aan het strand ligt deze buitengewone Villa met een grandioos zwembad van 12 bij 6 meter en een zeer mooie tropische tuin.</p>

<p><img src="images/zwembad+vooraanzicht2.jpg" alt="zwembad vooraanzicht2" width="260" height="195" class="float-left" />Daarnaast is de Villa zeer stijlvol ingericht met de moderne sanitaire faciliteiten.
De villa en guesthouse kunt U huren tot 8 personen.
Hier kunt U genieten en relaxen van een subliem uitzicht over de Balinese zee.</p>

<p>De Villa Bunga Melati is voor U de ideale combinatie van Oosterse normen en waarden met Westers top comfort. Er is bijzonder veel aandacht besteedt aan comfort en luxe in de Villa om uw verblijf zo aangenaam mogelijk te maken.</p>
<h4>Bent u opzoek naar een onvergetelijke vakantie? En wilt U proeven van de Balinese cultuur? Dan is de Bali Vakantie villa de ideale bestemming voor U!</h4>
</div>
<!-- InstanceEndEditable -->
<div id="footer">Copyright © 2008 Balivakantievilla.nl - Bunga Melati
</div>
</div>
</div>
</body>
<!-- InstanceEnd --></html>
 
Laatst bewerkt:
Ik ben zo vrij te bestrijden dat je 't helemaal hebt aangepast zoals ik bedoelde :D
Overigens is 'n link naar de code online voldoende, dat werkt ook veel sneller en makkelijker dan alles van hier kopiëren en zo.

HTML: 
<li><a href="villa.html"><li id="villa"></li></a>

moet zijn

HTML: 
<li id="villa"><a href="villa.html"></a></li>

Als ik bij jou even de id's en zo weghaal heb jij:
<li><a><li></li></a>
En dat moet dus zijn: <li><a></a></li>
Mogelijk is er nog meer mis, maar dit is al ruim voldoende voor vreemde dingen.

Als je je site bij elke verandering door de validator haalt op http://validator.w3.org/ krijg je dit soort fouten gelijk te zien, scheelt heel veel tijd en werk.
 
Laatst bewerkt:
Kan je in de CSS kijken waarom alle kleuren etc verkeerd zijn? Heb in CSS dingen wegehaald, omdat je zei dat het overzichterlijk zou zijn... Maar nu is de site helemaal een puinhoop.
 
Je moet gewoon één ding tegelijk doen. Om te beginnen moet je de fouten die er nu inzitten eruit halen. Dus begin even met die <li> en <a> en zo goed te zetten.
Die kleuren komen wel weer terug.
Het kan ook best dat de ene fout de andere veroorzaakt, dus het is niet zo zinvol om aan 'n hele reeks dingen gelijktijdig te werken.

EDIT:
Ik zie dat het commentaar na de </body> er nog staat, en ook die </div> te veel aan het eind.
Het is echt belangrijk dat je dat soort dingen corrigeert als ik het aangeef, want als ik al niet weet - met toch redelijk wat ervaring - wat dit kan veroorzaken aan vreemdigheden, dan denk ik dat jij dat ook niet weet.
Oftewel:
Eerst even die <li> en <a> in orde brengen.
Dat commentaar na </body> weg.
Die </div> te veel onderaan weg.
Als dat is gebeurd, kunnen we systematisch verder gaan kijken.
 
Laatst bewerkt:
Heb nav balk opnieuw gemaakt zoals je zei. CSS terug gezet zoals het was. Want als ik die navbalk ga veranderen in CSS dan zijn de kleuren uit de Mainmenu :S

Dus wat is de volgende stap die ik moet doen? Want de navigatiebalk is gemaakt (alhoewel je niets ziet omdat er geen plaatjes zijn nu.
Welkom:
Villa:
etc

Zijn allemaal plaatjes, lichtblauw normaal en als je er met je muis overheen gaat moet het donkerblauw worden! Plaatjes zijn dat.

Wat is de voglende stap?
 
Kun je 't ook online even bijwerken? Ik kan zo niet zien waarom die plaatjes 't niet doen bij jou. En er moet ergens iets mis zijn, want ze horen 't nu wel te doen.
Wat betreft die kleuren die weg zijn en zo: als ik 't goed begrijp heb je dat even terug veranderd naar hoe 't was. Prima, dat komt later wel.
Overigens zou je niet de eerste zijn die 'n halve hartverzakking krijgt omdat z'n site opeens onherkenbaar is, terwijl 't dus om 'n kleine typfout blijkt te gaan :D
Dus dat gaat allemaal wel lukken, bedoel ik maar.
 
He,

Ik zou niet weten hoe ik het online moet bewerken? Ik bewerk het thuis en doe via filezilla het naar mijn schoolaccount zetten en vanuit daar kan ik het dan online zien.

Wat heb je nodig om te zien wat er fout is?
 
Niets. Ik ga eerst 100 keer opschrijven 'ik moet de pagina verversen' en er dan naar kijken.
 
Ik bedoelde dat ik naar 'n oude versie zat te kijken, die nog open stond in m'n browser.

Maar ik begin nu toch te twijfelen of we elkaar helemaal begrijpen.
Als jij nu iets verandert, kun je dat dan gelijk daarna online zetten, zodat ik de verandering ook kan zien? Of kan dat pas als je weer op school bent?

Want ik zie, ook als ik dus wel de goede pagina bekijk, nog wat dingen die verkeerd zijn en die ik wel heb gezegd. Verder geen probleem, maar ik weet dus niet of je dat hebt gemist of dat je 't op dit moment niet kunt uploaden.
Ga zo trouwens even rennen, dus dan ben ik even afwezig.
 
He ik kan hem vanuit thuis meteen online zetten via filzilla.

Heb alleen de nav balk veranderd nu en andere dingen terug gezet.
Want al de kleuren viellen weg van tekst (bruine) en dat vond ik sonde.

Dus de CSS is nog niet veranderd en als ik dat doe dan zie ik weer al die kleuren niet... Dus andere oplossing?
 
Oké, dan zitten we nu helemaal op een spoor. En dan zal ik 't ook wat meer stap voor stap doen, wat minder chaotisch.
Allereerst moet je de onderste </div> weghalen.
En het commentaar dat na </body> komt.
Dit soort fouten kan tot onvoorspelbare resultaten leiden, die ook nog 'ns per browser kunnen verschillen. Bovendien krijg ik steeds foutmeldingen en moet ik dan steeds gaan kijken wat er fout is en dan zijn 't steeds deze dingen.
Het commentaar kun je, als je het wilt bewaren, eventueel boven </body> zetten, daar mag het wel staan.
Als je dat hebt gedaan, gaan we met het menu aan de slag. Want in de html is dat nu prima, maar de css is nog van 't oude menu, dus dat moet worden aangepast. Da's de volgende stap.
 
he Navigatiebalk helemaal opnieuw gemaakt. Ziet er nu ook anders uit. Div weggehaald als het goed is.
IS OVER 10 MINUTEN ONLINE op zelfde adres haal hem nu door filzilla heen.

Wat bedoel je met commentaar na body? De groene tekst die <-- --> hiertussen staat?
Want als ik dan via DWCS4 op save druk, staat er dat ik die dingen niet mag weghalen.. vandaar

Nu ziet het er beter uit, en ook de CSS ziet er beter uit.

Maar nu tot slot: Hoe krijg ik dat hover effect met het WELKOM(lichtblauw) in WELKOM)donkerblauw) te maken, of:
#navigatie ul #index a {background-image: url(menu01.jpg);}
#navigatie ul #index a:hover {background: url(menu01a.jpg);}

Werkt niet blijkbaar want hover menu01a.jpg is niet te zien als ik met mijn muis over WELKOM ga (of elke andere soort in navigatiebalk).

Zijn alle errors eruit?
 
Laatst bewerkt:
Nee, ik zie online nog steeds dezelfde fouten.
Commentaar is wat tussen <!-- en --> staat. Dat wordt genegeerd door de browser, het is alleen voor mensen bedoeld. Dat kan handig zijn om even te noteren wat je waarom doet en zo.
Het kan probleemloos worden weggehaald, want voor de weergave heeft het geen enkele functie.
Het gaat dus om <!-- InstanceEnd -->
Eventueel kun je het gelijk boven </body> zetten.

Verder moet de eerste </div> boven </body> nog steeds weg.
En daarna natuurlijk uploaden, anders zie ik het niet.
Als dat in orde is komt 't menu. Het is echt vreselijk lastig als er nog andere fouten in zitten. En ik kan dat niet veranderen, want ik kan wel tijdelijk dingen bij jou veranderen om uit te proberen, maar niet definitief. (Da's maar goed ook trouwens. Anders zat ik wel op de site van de postcodeloterij of zo...)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan