Borders

Status
Niet open voor verdere reacties.
H

hendrikbraaf

Gebruiker
Lid geworden
10 mrt 2005
Berichten
128
In HTMl-kit krijgen mijn foto's automatisch een (paarse) rand zonder dat dit is aangegeven.

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" xml:lang="nl" lang="nl">

<head>
<title>Occasions</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="gebruikte auto's, uden, tweedehands auto's, goedkoop,smalle beurs,apk," />
<meta name="description" content="Voor een goede, goedkope, apk gekeurede auto!" />
<link rel="stylesheet" href="basis.css" type="text/css" media="screen" />

</head>
<body>
<div class="container">

<body  background= "orang023.jpg">



<div id="kop"><img alt="musty.png " src="musty.png" width="200"height="120"
style="float:left;margin-left:10px;margin-top:10px;">

<img alt="rdw.png" src="rdw.png" height="90" width="150" style="float:right; "/>

<p>Johan van Houtum Auto's</p>
</div>
<br>
<div id="midden">
<h2><span style="color: blue;margin-left:240px;">
Frontstraat 6 &nbsp;&nbsp;5405 AK Uden&nbsp;&nbsp;0651299346</span></h2>
</div>
<div style="margin-left:50px;"</div>
<h2>Occasions</h2>


<a href="index.html">Home</a>

<p> Klik op een foto voor meer foto's en informatie</p>
<a href="pagina1.htm"><img alt="foto1 (23K)" src="Afbeeldingen/foto1.jpg" height="90" width="120" /></a>
<a href="pagina2.htm"><img alt="foto2 (6K)" src="Afbeeldingen/foto2.jpg" height="90" width="120" /></a>
<a href="pagina3.htm"><img alt="foto3 (7K)" src="Afbeeldingen/foto3.jpg" height="90" width="120" /></a>
<a href="pagina4.htm"><img alt="foto4 (42K)" src="Afbeeldingen/foto4.jpg" height="90" width="120" /></a>
<a href="pagina5.htm"><img alt="foto5 (36K)" src="Afbeeldingen/foto5.jpg" height="90" width="120" /></a>
<a href="pagina6.htm"><img alt="foto6 (36K)" src="Afbeeldingen/foto6.jpg" height="90" width="120" /></a>
<a href="pagina7.htm"><img alt="foto7 (36K)" src="Afbeeldingen/foto7.jpg" height="90" width="120" /></a>
<a href="pagina8.htm"><img alt="foto8 (36K)" src="Afbeeldingen/foto8.jpg" height="90" width="120" /></a>
<a href="pagina9.htm"><img alt="foto9 (36K)" src="Afbeeldingen/foto9.jpg" height="90" width="120" /></a>
<a href="pagina10.htm"><img alt="foto10 (36K)" src="Afbeeldingen/foto10.jpg" height="90" width="120" /></a>
<a href="pagina11.htm"><img alt="foto11 (36K)" src="Afbeeldingen/foto11.jpg" height="90" width="120" /></a>
<a href="pagina12.htm"><img alt="foto12 (36K)" src="Afbeeldingen/foto12.jpg" height="90" width="120" /></a>
</div>
</div>
</body>


</html>

Deze zijn niet zichtbaar in de browser.
Hoe krijg ik ze ook zichtbaar in de browser? In rood....
 
Laatst bewerkt door een moderator:
Dank voor de reactie. Ik had ondertussen bij iedere afbeelding de code: border="2"; style="border-color:blue;margin:4px;" ingevoegd. Zet ik jouw img code in css dan krijgen alle afbeeldingen een border, en dat is ook weer niet de bedoeling...
Heb nu iets meer werk, maar ja
 
hendrikbraaf zei:
Dank voor de reactie. Ik had ondertussen bij iedere afbeelding de code: border="2"; style="border-color:blue;margin:4px;" ingevoegd. Zet ik jouw img code in css dan krijgen alle afbeeldingen een border, en dat is ook weer niet de bedoeling...
Heb nu iets meer werk, maar ja
Klik om te vergroten...

Je kan er ook een class van maken.
Als je dit in de css code zet

Code: 
.randje {
border:2px solid blue;
margin:4px;
}

Kan je het in de html zo doen

Code: 
<img class="randje" src...../>

Kijk maar wat je het fijnst vindt.
 
Als het alleen om de images gaat die een link zijn, dan kan het zonder class met in de css:
Code: 
a img {
    border: 2px solid red;
    margin: 4px;
    }

Zo is alles tegelijk geregeld.
De border="2" code in de html kan je dan ook weglaten.

Komt goed uit, want dat is "deprecated" (achterhaalde en afgekeurde) code; zie hier.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Heb e.e.a gedaan zoals aangegeven. De boel ge-upload naar server. Nu heb ik volgende proble(men).
Open ik site in FF is er niks aan de hand maar in IE krijg ik eerst een melding over beveiligingscertificaat en ga ik dan toch naar site dat blijk mijn afbeelding "rdw.png" niet te verschijnen. Volgens webhoster een een scriptfout.
Heb hieraan echter niets veranderd....

www.johanvanhoutumautos.nl

Voor de zekerheid stuur ik u enige bestanden:

CSS:
Code: 
.container{
width: 1024px; /*dit wordt de breedte van de inhoud, naar smaak aanpassen*/
margin:0 auto; /*houdt de boel in het midden*/
}

body {
background-image:url(orang023.jpg);
font-family: "Trebuchet MS", sans-serif;
font-size: 100%;
color: black;}




#kop { 
width: 950px;
height: 90px;
margin: 0 auto;
background-image: url(achtergrond2.gif)

} 
 
#kop p {
font-family: comic,serif;
font-size:35px;
font-weight: bold;
color: red;
font-variant: small-caps;
text-align:center;
padding-top: 16px;
}
 
#midden { 
width: 898px;


margin: 0 auto;
}

.border{
border:2px solid blue;
margin:2px;
}
.border2{
border:2px solid red;
margin:2px;
}

index.html:
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" xml:lang="nl" lang="nl">

<head>
<title>Johan van Houtum Auto's</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="gebruikte auto's, uden, tweedehands auto's, goedkoop,smalle beurs,apk," />
<meta name="description" content="Voor een goede, goedkope, apk gekeurede auto!" />
<link rel="stylesheet" href="basis.css" type="text/css" media="screen" />
<script type="text/JavaScript">
function doIt(){
document.getElementById('blink').style.visibility =  (document.getElementById('blink').style.visibility == "hidden") ? "visible" : "hidden";
}
function Knipper(){
setInterval('doIt()',500);
}
window.onload = Knipper;
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 4px solid red;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

</style>

<script type="text/javascript" src="simplegallery.js">

/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library ([url]www.dynamicdrive.com[/url])
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at [url]http://www.dynamicdrive.com/[/url] for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: [200, 150], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: [
		["Afbeeldingen/foto1.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto2.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto3.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto4.jpg", "occasions.html", "_new", ""],
    ["Afbeeldingen/foto5.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto6.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto7.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto8.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto9.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto10.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto11.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto12.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto13.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto14.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto15.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto16.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto17.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto18.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto19.jpg", "occasions.html", "_new", ""],
		["Afbeeldingen/foto20.jpg", "occasions.html", "_new", ""]
		],
	autoplay: [true, 2000, 10], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false, //remember last viewed slide and recall within same session?
	preloadfirst: false,
	fadeduration: 1000, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//Keyword "this": references current gallery instance
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})

</script>


</head>
<body>
<div class="container">


<div id="kop"><img alt="musty.png " src="musty.png" width="200"height="120"
style="float:left;margin-left:10px;margin-top:10px;"</a>

<img alt="rdw.png" src="rdw.png." height="90" width="150" style="float:right;"</a>

<p>Johan van Houtum Auto's</p>
</div>
<br>
<div id="midden">

<h2><span style="color: blue;margin-left:240px;">
Frontstraat 6 &nbsp;&nbsp;5405 AK Uden&nbsp;&nbsp;0651299346</span></h2>
</div>
<ul>
<li><a href="occasions.html">Occasions</a></li>
<li><a href="routeplanner.html">Routeplanner</a></li>
</ul>
</div>

<div id="simplegallery1"style="width:420px; float:right;margin:40px;"></div>
<h2 style= "margin-left: 50px;"> Welkom op onze website.</h2>


<p style="margin-left: 50px;">Zoekt u een goede, betaalbare auto dan
bent u hier aan het juiste adres!<br>
Wij hebben diverse occasions in de aanbieding, ook voor de smalle beurs.<br>
Wij hebben al een mooie auto voor u vanaf<span id="blink"> <font color ="red"> <b>€ 500,=</b></font></span><br>
Alle auto's worden grondig gecontroleerd en afgeleverd met APK.<br>
Klik op "Occasions"om een deel van onze voorraad te bekijken.<br>
Als u op "Routeplanner" klikt wordt u automatisch de weg gewezen naar ons bedrijf.
 </p>

<div align="center"><img alt="finishvlaggen (23K)" src="Afbeeldingen/finishvlaggen.png" height="126" width="168" /></div>
</div>
</body>

</html>

Occasions:
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" xml:lang="nl" lang="nl">

<head>
<title>Occasions</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="gebruikte auto's, uden, tweedehands auto's, goedkoop,smalle beurs,apk," />
<meta name="description" content="Voor een goede, goedkope, apk gekeurede auto!" />
<link rel="stylesheet" href="basis.css" type="text/css" media="screen" />

</head>
<body>
<div class="container">

<body  background= "orang023.jpg">



<div id="kop"><img alt="musty.png " src="musty.png" width="200"height="120"
style="float:left;margin-left:10px;margin-top:10px;">

<img alt="rdw.png" src="rdw.png" height="90" width="150" style="float:right; "/>

<p>Johan van Houtum Auto's</p>
</div>
<br>
<div id="midden">
<h2><span style="color: blue;margin-left:240px;">
Frontstraat 6 &nbsp;&nbsp;5405 AK Uden&nbsp;&nbsp;0651299346</span></h2>
</div>
<div style="margin-left:50px;"</div>
<h2>Occasions</h2>


<a href="index.html">Home</a>

<p> Klik op een foto voor meer foto's en informatie</p>
<a href="pagina1.htm"><img class="border2"alt="foto1" src="Afbeeldingen/foto1.jpg" height="90" width="120"/></a>
<a href="pagina2.htm"><img class="border2"alt="foto2" src="Afbeeldingen/foto2.jpg" height="90" width="120"/></a>
<a href="pagina3.htm"><img class="border2"alt="foto3" src="Afbeeldingen/foto3.jpg" height="90" width="120"/></a>
<a href="pagina4.htm"><img class="border2"alt="foto4" src="Afbeeldingen/foto4.jpg" height="90" width="120"/></a>
<a href="pagina5.htm"><img class="border2"alt="foto5" src="Afbeeldingen/foto5.jpg" height="90" width="120"/></a>
<a href="pagina6.htm"><img class="border2"alt="foto6" src="Afbeeldingen/foto6.jpg" height="90" width="120"/></a>
<a href="pagina7.htm"><img class="border2"alt="foto7" src="Afbeeldingen/foto7.jpg" height="90" width="120"/></a>
<a href="pagina8.htm"><img class="border2"alt="foto8" src="Afbeeldingen/foto8.jpg" height="90" width="120"/></a>
<a href="pagina9.htm"><img class="border2"alt="foto9" src="Afbeeldingen/foto9.jpg" height="90" width="120"/></a>
<a href="pagina10.htm"><img class="border2"alt="foto10" src="Afbeeldingen/foto10.jpg" height="90" width="120"/></a>
<a href="pagina11.htm"><img class="border2"alt="foto11" src="Afbeeldingen/foto11.jpg" height="90" width="120"/></a>
<a href="pagina12.htm"><img class="border2"alt="foto12" src="Afbeeldingen/foto12.jpg" height="90" width="120"/></a>
<a href="pagina13.htm"><img class="border2"alt="foto13" src="Afbeeldingen/foto13.jpg" height="90" width="120"/></a>
<a href="pagina14.htm"><img class="border2"alt="foto14" src="Afbeeldingen/foto14.jpg" height="90" width="120"/></a>
<a href="pagina15.htm"><img class="border2"alt="foto15" src="Afbeeldingen/foto15.jpg" height="90" width="120"/></a>
<a href="pagina16.htm"><img class="border2"alt="foto16" src="Afbeeldingen/foto16.jpg" height="90" width="120"/></a>
<a href="pagina17.htm"><img class="border2"alt="foto17" src="Afbeeldingen/foto17.jpg" height="90" width="120"/></a>
<a href="pagina18.htm"><img class="border2"alt="foto18" src="Afbeeldingen/foto18.jpg" height="90" width="120"/></a>
<a href="pagina19.htm"><img class="border2"alt="foto19" src="Afbeeldingen/foto19.jpg" height="90" width="120"/></a>
<a href="pagina20.htm"><img class="border2"alt="foto20" src="Afbeeldingen/foto20.jpg" height="90" width="120"/></a>
<a href="pagina21.htm"><img class="border2"alt="foto21" src="Afbeeldingen/foto21.jpg" height="90" width="120"/></a>
<a href="pagina22.htm"><img class="border2"alt="foto22" src="Afbeeldingen/foto22.jpg" height="90" width="120"/></a>
<a href="pagina23.htm"><img class="border2"alt="foto23" src="Afbeeldingen/foto23.jpg" height="90" width="120"/></a>
<a href="pagina24.htm"><img class="border2"alt="foto24" src="Afbeeldingen/foto24.jpg" height="90" width="120"/></a>
<a href="pagina25.htm"><img class="border2"alt="foto25" src="Afbeeldingen/foto25.jpg" height="90" width="120"/></a>
<a href="pagina26.htm"><img class="border2"alt="foto26" src="Afbeeldingen/foto26.jpg" height="90" width="120"/></a>
<a href="pagina27.htm"><img class="border2"alt="foto27" src="Afbeeldingen/foto27.jpg" height="90" width="120"/></a>
<a href="pagina28.htm"><img class="border2"alt="foto28" src="Afbeeldingen/foto28.jpg" height="90" width="120"/></a>
<a href="pagina29.htm"><img class="border2"alt="foto29" src="Afbeeldingen/foto29.jpg" height="90" width="120"/></a>
<a href="pagina30.htm"><img class="border2"alt="foto30" src="Afbeeldingen/foto30.jpg" height="90" width="120"/></a>
<a href="pagina31.htm"><img class="border2"alt="foto31" src="Afbeeldingen/foto31.jpg" height="90" width="120"/></a>
<a href="pagina32.htm"><img class="border2"alt="foto32" src="Afbeeldingen/foto32.jpg" height="90" width="120"/></a>
<a href="pagina33.htm"><img class="border2"alt="foto33" src="Afbeeldingen/foto33.jpg" height="90" width="120"/></a>
<a href="pagina34.htm"><img class="border2"alt="foto34" src="Afbeeldingen/foto34.jpg" height="90" width="120"/></a>
<a href="pagina35.htm"><img class="border2"alt="foto35" src="Afbeeldingen/foto35.jpg" height="90" width="120"/></a>
<a href="pagina36.htm"><img class="border2"alt="foto36" src="Afbeeldingen/foto36.jpg" height="90" width="120"/></a>
<a href="pagina37.htm"><img class="border2"alt="foto37" src="Afbeeldingen/foto37.jpg" height="90" width="120"/></a>
<a href="pagina38.htm"><img class="border2"alt="foto38" src="Afbeeldingen/foto38.jpg" height="90" width="120"/></a>
<a href="pagina39.htm"><img class="border2"alt="foto39" src="Afbeeldingen/foto39.jpg" height="90" width="120"/></a>
<a href="pagina40.htm"><img class="border2"alt="foto40" src="Afbeeldingen/foto40.jpg" height="90" width="120"/></a>
<a href="pagina41.htm"><img class="border2"alt="foto41" src="Afbeeldingen/foto41.jpg" height="90" width="120"/></a>
<a href="pagina42.htm"><img class="border2"alt="foto42" src="Afbeeldingen/foto42.jpg" height="90" width="120"/></a>
</div>
</div>
</body>
</html>
Pagina1:
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" xml:lang="nl" lang="nl">

<head>
<title>pagina1</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="gebruikte auto's, uden, tweedehands auto's, goedkoop,smalle beurs,apk," />
<meta name="description" content="Voor een goede, goedkope, apk gekeurede auto!" />
<link rel="stylesheet" href="basis.css" type="text/css" media="screen" />

</head>
<body>
<div class="container">

<div id="kop"><img alt="musty.png " src="musty.png" width="200"height="120"
style="float:left;margin-left:10px;margin-top:10px;">
<img alt="rdw.png" src="rdw.png" height="90" width="150" style="float:right; "/>
<p>Johan van Houtum Auto's</p>
</div>
<br>
<div id="midden">
<h2><span style="color: blue;margin-left:240px;">
Frontstraat 6 &nbsp;&nbsp;5405 AK Uden&nbsp;&nbsp;0651299346</span></h2>
</div>
<div style="margin-left:70px;"</div>
<a href="occasions.html">Terug naar Occasions</a>
<br>
<br>
<br>

<img class="border"alt="foto1" src="Afbeeldingen/foto1.jpg" height="120" width="160" />
<img class="border"alt="foto1a" src="Afbeeldingen/foto1a.jpg" height="120" width="160"  />
<img class="border"alt="foto1b" src="Afbeeldingen/foto1b.jpg" height="120" width="160" />
<img class="border"alt="foto1c" src="Afbeeldingen/foto1c.jpg" height="120" width="160" />
<img class="border"alt="foto1d" src="Afbeeldingen/foto1d.jpg" height="120" width="160" />

<br>
<ul>
<li>Vraagprijs:&nbsp;&nbsp;x</li>
<li>Merk:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x</li>
<li>Type:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x</li>
<li>Bouwjaar:&nbsp;&nbsp;x</li>
<li>Km-stand:&nbsp;&nbsp;x</li>
<li>Brandstof:&nbsp;&nbsp;x</li>
<li>APK:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x</li>
<li>Opties:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x</li>
</ul>
</div>
</body>

</html>
Ik kan me voorstellen dat hier en daar de nodige beginnersfouten zitten; ik hoop u niet teveel te vragen en hoor graag van u.

Vriendelijke groet,

Henk
 
Laatst bewerkt door een moderator:
Hoi hendrikbraaf,
Ja, scriptfoutje klopt.
Er staat nu:
Code: 
<div id="kop"><img alt="musty.png " src="musty.png" width="200"height="120"
style="float:left;margin-left:10px;margin-top:10px;"</a>

<img alt="rdw.png" src="[B][COLOR="#B22222"]rdw.png.[/COLOR][/B]" height="90" width="150" style="float:right;"</a>

<p>Johan van Houtum Auto's</p>
</div>
Door het puntje achter png. in de src (=source = bron = vindplaats van het plaatje) kan de afbeelding niet gevonden worden, want die staat niet op de server met het puntje er achter.
Met ook een paar andere foutjes er uit gehaald moet het worden:
HTML: 
<div id="kop">
    <img alt="musty.png " src="musty.png" width="200" height="120" style="float:left;margin-left:10px;margin-top:10px;">
    <img alt="rdw.png" src="rdw.png" height="90" width="150" style="float:right;">
    <p>Johan van Houtum Auto's</p>
</div>

Waar de IE-melding over een beveiligingscertificaat vandaan komt, snap ik niet; maar misschien verdwijnt dat als het plaatje wel gevonden kan worden.

Met vriendelijke groet,
CSShunter
___________
PS: Als er een link naar een pagina staat, hoeft de complete html+css code hier niet vermeld te worden. Die vinden we wel uit. :)
 
Laatst bewerkt:
Alweer bedankt!
Dat puntje dus over het hoofd gezien.
Die andere fouten heb ik er op het laatst ingezet in de hoop dat die de oorzaak waren; dom natuurlijk.
Zal hier dan maar afsluiten en de vraag als opgelost markeren.
Vriendelijke groet,

Henk Vergunst
 
Sorry, maar er doet zich nog een probleem voor...
In FF krijgt het ANWB venster slechts deels een witte achtergond.
In IE geeft hij een hele witte achtergrond, zoals het hoort
Kan de oorzaak niet vinden.

Routeplanner-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" xml:lang="nl" lang="nl">

<head>
<title>Johan van Houtum Auto's</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="gebruikte auto's, uden, tweedehands auto's, goedkoop,smalle beurs,apk," />
<meta name="description" content="Voor een goede, goedkope, apk gekeurde auto!" />
<link rel="stylesheet" href="basis.css" type="text/css" media="screen" />



</head>
<body>
<div class="container">

<div id="kop"><img alt="musty.png " src="musty.png" width="200"height="120"
style="float:left;margin-left:10px;margin-top:10px;">

<img alt="rdw.png" src="rdw.png" height="90" width="150" style="float:right; "/>

<p>Johan van Houtum Auto's</p>
</div>

<br>
<div id="midden">

<h2><span style="color: blue; margin-left:240px;">
Frontstraat 6 &nbsp;&nbsp;5405 AK Uden&nbsp;&nbsp;0651299346</span></h2>
</div>
<br>
<div style="margin-left:50px;"</div>


<h2>Routeplanner</h2>

<a href="index.html">Home</a>
<br>

<a href="occasions.html">Occasions</a>
</div>

<div align="center">
<script type="text/javascript">
<!--
var anwb_tool="adresnv";
var anwb_tool_type="normal";
var anwb_tool_tekst="Johan van Houtum Auto's";
var anwb_tool_lon="5.64727";
var anwb_tool_lat="51.65368";
var anwb_tool_postcode="5405AK";
var anwb_tool_nr="3";
//-->
</script>
<script type="text/javascript" src="http://www.anwb.nl/verkeer/verkeerstool.js"></script>

</div>
<br><br>





</div>
</body>

</html>
 
Ah, ik zie 'm: de routeplanner heeft van zichzelf een transparante achtergrond (Internet Explorer doet 't fout!), en dat is in de settings voor de routeplanner niet te wijzigen.

Maar het kan wel anders: door er nog een <div> tussen te zetten die een witte achtergrond heeft:
HTML: 
<div align="center">
    <div style="background: white; margin: 0 auto; display: inline-block">
    <script type="text/javascript">
      <!--
      var anwb_tool="adresnv";
      var anwb_tool_type="normal";
      var anwb_tool_tekst="Johan van Houtum Auto's";
      var anwb_tool_lon="5.64727";
      var anwb_tool_lat="51.65368";
      var anwb_tool_postcode="5405AK";
      var anwb_tool_nr="3";
      //-->
   </script>
   <script type="text/javascript" src="http://www.anwb.nl/verkeer/verkeerstool.js"></script>
   <iframe frameborder="0" width="200" scrolling="no" height="220" framepadding="0" framespacing="0" border="0" 
   src="http://www.anwb.nl/static/html/verkeerstool/adresnv.html?tekst=Johan van Houtum Auto's&amp;lat=51.65368&amp;lon=5.64727&amp;postcode=5405AK&amp;nr=3">
   </iframe>
   </div>
</div>
Met vriendelijke groet,
CSShunter
 
Als ik bovenstaande invoer krijg ik tweemaal het anwb-frame te zien, naast elkaar...

Het mag wel transparant zijn...
 
Hoi Henk,
Sorry, mijn fout. - Ik had in de gauwigheid zowel het javascript als het <iframe> in de code staan, want zo kwam het uit Firebug tevoorschijn waarmee ik de test voor Firefox uitvoerde.
Maar het javascript pompt er ook het <iframe> in zie ik nu, dus: twee keer.

O.k., haal je dat er uit, dan geeft Internet Explorer 7 over de volle breedte een witte strook (andere browsers niet, ook IE8 en IE9 niet).
Maar om de 1,11% van de Nederlandse surfers van dienst te zijn die nog IE7 gebruiken ;), een variant gemaakt:
HTML: 
<div style="width: 200px; margin: 0 auto; background: white;">
    <script type="text/javascript">
      <!--
      var anwb_tool="adresnv";
      var anwb_tool_type="normal";
      var anwb_tool_tekst="Johan van Houtum Auto's";
      var anwb_tool_lon="5.64727";
      var anwb_tool_lat="51.65368";
      var anwb_tool_postcode="5405AK";
      var anwb_tool_nr="3";
      //-->
   </script>
   <script type="text/javascript" src="http://www.anwb.nl/verkeer/verkeerstool.js"></script>
</div>
  • Er zijn dus geen twee <div>'s voor nodig: de breedte van het ANWB-<iframe> is altijd hetzelfde, en daar kan de breedte van de <div> op worden vastgepind.
Zo is er geen ontsnappen meer aan en nu is ook IE7 braaf! :d


  • test: jvh-routeplanner.htm
    Getest in IE7, Firefox, Chrome, Opera en Safari: alles kits.
    Volgens Netrenderer.com ook in orde voor IE8 en IE9.

Met vriendelijke groet,
CSShunter
 
Ik was nog vergeten te vermelden dat ik ook een beetje had geëxperimenteerd (want meende een dubbele "instructie" te zien) en kreeg zo de brede witte balk (in IE8).
Ga nu nog een keer de nieuwe codes invoeren en kijken wat er gebeurt.
U hoort nog van me. (Het debat in de VS is nu toch ook ten einde).
 
Werkt perfect!
Wel bedankt en prettige nachtrust gewenst.
Ik ga bij CNN kijken naar de evaluatie van het debat...
 
Hoi Henk,
Het viel me op dat er op de occasions-pagina zo veel niet bestaande afbeeldingen staan, die de pagina er niet mooier op maken.

occasions-onerror.png

Maar ik heb hier misschien nog wat voor je: jvh-occasions.html

Dit is eigenlijk dezelfde pagina, met ook de vele links naar nog niet bestaande occasions er allemaal op (50 stuks, kan je even voort; zie de broncode). Maar met een paar regeltjes javascript wordt er automatisch voor gezorgd dat niet bestaande afbeeldingen uit beeld verdwijnen (en er dus ook geen links meer op staan van niet bestaande pagina's die bij zo'n occasion-afbeelding horen).
  • Getest in Firefox, Chrome, Opera, Safari en IE7.
  • Eigenlijk is het gebruikte bijvoegsel onerror="..." geen officiële html-code (de html-validator moppert ook wat), maar alle browsers kennen het en doen wat verwacht wordt.

Werkwijze:
  1. Bovenstaande pagina downloaden; regels 11, 12 en 13 wissen; en uploaden als occasions.html
  2. Bij een toe te voegen occasion: eerst de detail-pagina met de gegevens van de occasion aanmaken (bv.: pagina11.htm).
  3. Daarna de bijbehorende afbeelding foto11.jpg uploaden naar de map Afbeeldingen.
Klaar! :) - Niets meer doen.
- De afbeelding staat nu automatisch op de occasions-pagina, en de link naar paginga11.htm werkt ook.
- Op deze manier hoef je dus nooit meer iets aan de occasions-pagina te doen (zolang je maar steeds dezelfde namen aanhoudt).

Met vriendelijke groet,
CSShunter
__________
PS: Omgekeerd werkt ook: afbeelding uit de map Afbeeldingen verwijderen > dan staat de afbeelding niet meer op de occasions-pagina, en de link naar de pagina van die occasion is er ook niet meer (voor de bezoeker dan; hij staat nog wel gewoon in de code, en wacht tot er een verse afbeelding bij komt).
 
Heb e.e.a. uitgevoerd. Kan dat weglopen van die die lege fotoframes niet sneller?
Straks zullen er trouwens een kleine 50 foto's op de site komen (occasions) en nog eens 250 voor de individuele pagina's (5 per pagina). Is bovengenoemd fenomeen dan sowieso weg of gaat het laden dan ook lang duren?
 
Hoi Henk,
Hoe minder overschot aan niet-bestaande afbeeldingen, hoe sneller het zal gaan; dan zou de wachttijd bekort kunnen worden.

Ook natuurlijk mogelijk: alleen wel-bestaande afbeeldingen in de occasions-map zetten, dan hoeft de hele operatie met het javascript niet te gebeuren en is er helemaal geen wachttijd nodig!

=======

Maar de pagina-snelheid is vooral afhankelijk van het inladen van die ca. 50 afbeeldingen.
Dat zit zo:
  • Elke afbeelding wordt door de browser apart opgevraagd bij de server (dat heet: een "http-request"), zodat de server de afbeelding kan downloaden.
  • Een browser kan maar 4 of 6 verbindingen tegelijk met de server hebben. De rest moet dus wachten tot er weer 4 of 6 binnen zijn.
  • De grootste traagheid zit echter niet in het downloaden, maar in het opvragen van de afbeeldingen. Opvragen van de afbeeldingen (van browser naar server) is namelijk: uploaden! En uploaden gaat altijd een heel stuk langzamer dan downloaden...
  • Vandaar dat je altijd moet proberen zo min mogelijk http-requests te maken > eigenlijk: zo min mogelijk afbeeldingen. :rolleyes:

=======

Er zijn wel manieren om de pagina-snelheid op te voeren:


  1. De afbeeldingen optimaliseren, zodat ze kleiner in bestandsgrootte worden.
    Hier kan dat door de afbeeldingen van 200*150px (30.000 pixels te downloaden) terug te brengen tot de ware grootte die op scherm vertoond moet worden: 120*90px (10.800 pixels te downloaden). Dat is maar 1/3 van eerst (en de extra ca. 20.000 meegekomen pixels worden toch niet gebruikt). Plus: de browser/processor hoeft elke afbeelding niet omlaag te schalen, wat ook tijd in beslag neemt.

    Verder optimaliseren kan door de afbeeldingen als jpg met een compressie van bv. 15% op te slaan. Dat vermindert de bestandsgrootte ook, en kwaliteitsverschil zie je nauwelijks of helemaal niet, of het wordt er zelfs beter op! Voorbeeld:

    dodge-screenshot.png
    >
    dodge.jpg

    origineel > dodge.jpg​

    Links een screenshot van het origineel van 26kB. Rechts is een jpg met 15% compressie en op ware grootte. Omvang: maar 4.5kB.
    Bij 50 stuks is het dan niet 1300kB (= 1.5MB!) die gedownload moeten worden, maar slechts 225kB.
    Dat scheelt een slokop een borrel ! :d

  2. Een aantal afbeeldingen (bv. per 10 stuks) in één afbeelding combineren, dan hoeven er maar 5 ipv 50 opgevraagd te worden. Zo'n combi-afbeelding komt dan als achtergrond-afbeelding op de pagina, en met de background-position kan je telkens het goede partje tevoorschijn laten komen.
    Dit is vooral erg handig voor vaste dingen op een pagina, bv. een menu van 5 knoppen die afbeeldingen zijn.
    Maar ... hier is dit helemaal niet handig, want dan zou je bij elke verandering in de occasions de combi-afbeeldingen opnieuw moeten maken en de css moeten aanpassen.

  3. Andere mogelijkheid: niet één, maar verschillende occasions-pagina's maken, met elk bv. 21 occasions (3 rijtjes van 7 stuks onder elkaar). Op de eerste pagina zet je een opvallende knop "Volgende", op de middelste pagina's zet je de knoppen "Volgende" en "Vorige", en op de laatste pagina's zet je alleen "Vorige".
    Dit kan wel wat langer werk zijn bij veranderingen: als bv. een occasion uit de eerste pagina verkocht is en daar een gat ontstaat, zou er eentje opgeschoven moeten worden (de eerste van de volgende pagina er in zetten om het blok weer compleet te maken; en bij de volgende ook weer doorschuiven vanaf de laatste pagina).
    Hoe hoger de omzetsnelheid, hoe meer werk! ;)

Met vriendelijke groet,
CSShunter

PS: voor de individuele pagina's zal het geen probleem zijn, dat zijn er maar 5 per pagina. Als je die optimaliseert staan ze op scherm voor je het weet.
 
Laatst bewerkt:
Ik heb volgende acties genomen:
- Groot aantal foto's in map Afbeeldingen gezet; het "weglopen" van paar missende foto's is dan minder hinderlijk.
- Afbeeldingen "gedownsized naar 120x90, dan zijn ze echter te klein voor diashow op homepagina; dus maar weer alles terug gezet naar 200x150.

Ik denk dat opdrachtgever hier wel mee kan leven.
(nou ja, opdrachtgever...een vriendendienst, dus alles pro deo)

Heb nog één vraagje; is het mogelijk om foto's te vergroten als je "erop gaat staan", of krijg ik dan van die moeilijke toestanden met thumbnails enz.?
 
Laatst bewerkt:
Hoi Henk,
Ja, op de pagina occasions kan het vergroten bij hoveren betrekkelijk eenvoudig. Het moet dan worden:
Code: 
#lijst a {
   width: 120px;
   height: 90px;
   margin: 2px;
   display: inline-block;
   position: relative;
   z-index: 1;
}
#lijst a:hover{
   z-index: 2;
}
#lijst img {
   border: 2px solid red;
   width: 120px;
   height: 90px;
}
#lijst a:hover img {
   border-color: green;
   height: 150px;
   width: 200px;
   position: absolute;
   top: 0;
   left: 0;
   margin-top: -30px;
   margin-left: -40px;
}
  • Bij een hover worden de maten van een afbeelding aangepast, en de afbeelding wordt los van de andere afbeeldingen geschroefd met een absolute positie (telkens t.o.v. de bijbehorende link). Plus wat naar links en omhoog om mooi in het midden er overheen te gaan.
  • Verder hebben nu de links dezelfde ruimte gekregen als de (kleine) afbeeldingen, dus bij een hover (met losgeschroefde afbeeldingen) gaat er niets verschuiven. In feite zit onder elke vergroting nog het oude oppervlakje zodat de andere afbeeldingen op hun plaats blijven staan.
  • Tenslotte zorgt de z-index ervoor dat de hover-plaatjes boven de andere komen te staan.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan