Thumb slider

Status
Niet open voor verdere reacties.
R

Reimpje

Gebruiker
Lid geworden
12 feb 2011
Berichten
19
Via leejoo.nl heb ik een mooie thumb slider gevonden voor op mijn site. Nu heb ik de codes in zowel mijn body als head gezet, de slide en thumb bestanden op maat gemaakt. Nu vraag ik me alleen nog af hoe ik verder in javascript alles zo moet aanpassen dat hij deze bestanden uit mijn image-map haalt.

Bijgevoegd de code in head:

<script language="JavaScript">

if(document.images) {
currentslide=1;
maxslides=6;

// geef hier het aantal plaatjes in


slide = new Array(maxslides+1);
thumb = new Array(maxslides+1);
for(var n=1;n<=maxslides;n++) {
slide[n]=new Image(76,232);
slide[n].src='images/slide_'+n+'.jpg';
}
for(var n=1;n<=maxslides;n++) {
thumb[n]=new Image(76,58);
thumb[n].src='images/thumb_'+n+'.jpg';
}
}

function prevSlide() {
if(document.images) {
currentslide--;
if(currentslide<1) currentslide=maxslides;
document.images['slide'].src=thumb[currentslide].src;
}
}


function nextSlide() {
if(document.images) {
currentslide++;
if(currentslide>maxslides) currentslide=1;
document.images['slide'].src=thumb[currentslide].src;
}
}
function showFullSize()
{
document.images['fullsize'].src='images/slide_'+currentslide+'.jpg';
}

</script>


En bijgevoegde code in body:

<center>
<table border=0 cellspacing=0 cellpadding=0>

<tr>

<td><img src='images/slide_1.jpg' width=280 height=193 name='fullsize'></td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=0>

<tr>

<td height=5 colspan=2>*</td>
</tr>

<tr valign=bottom align=center>

<td height=58 colspan=2><a href='javascript:showFullSize();'><img name='slide' width=90 height=61 border=0 hspace=0 vspace=0 alt='Klik voor een volledige grootte van de foto' src='images/thumb_1.jpg'></a></td>
</tr>

<tr>

<td height=5 colspan=2>*</td>
</tr>

<tr>

<td height=5 align=left><font size="5">*<a href='javascript:prevSlide()'>«</a>*</font></td>
<td height=5 align=right><font size="5">*<a href='javascript:nextSlide()'>»</a>*</font></td>
</tr>
</table>
 
Hoi Reimpje,
Het regeltje:
[JS]slide[n].src='images/slide_'+n+'.jpg'; [/JS]
in het javascript zorgt ervoor dat de grote afbeeldingen met de naam slide_1.jpg, slide_2.jpg, enz. opgehaald worden uit het mapje images (dat in de map moet zitten waar de pagina in staat).

Het regeltje:
[JS]thumb[n].src='images/thumb_'+n+'.jpg'; [/JS]
doet hetzelfde voor de bijbehorende kleine afbeeldingen: thumb_1.jpg, thumb_2.jpg, enz.

De [n] in het script is namelijk een getal dat loopt van 1 tot het aantal afbeeldingen, en die haalt ze stuk voor stuk op.

Tenminste, in dit script...
  1. ... moeten alle afbeeldingen als .jpg zijn opgeslagen,
  2. ... moeten alle grote afbeeldingen slide_1.jpg, slide_2.jpg enz. heten, en
  3. ... moeten alle kleine afbeeldingen thumb_1.jpg, thumb_2.jpg, enz. heten.
Dus als er afbeeldingen als .gif of als .png zijn opgeslagen, werkt het niet. En ook niet als de afbeeldingen eigen namen hebben i.p.v. slide_1, thumb_1, slide_2, thumb_2, enz.
  • Als alle grote afbeeldingen een .gif of .png zijn, kan het script aangepast worden.
  • Ook als alle kleine een .gif of .png zijn, kan het script aangepast worden.
====

Een alternatief is misschien dit:

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Dank je voor je snelle antwoord.

Ik heb geloof ik alles precies zo gedaan als je geschreven hebt, maar nog krijg ik de verschillende slides niet te zien in de leejoo.nl slider.
Daarnaast kom ik er niet helemaal uit hoe ik je alternatief in mijn site kan zetten. Ik ben echt een beginner, dus ik weet niet precies waar ik de codes die in je alternatief staan moet zetten.

Bijgevoegd mijn pagina met de leejo.nl slider, misschien zie je de fout die ik maak, zitten:


<!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>De website van Raimke</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
margin: 15%;
padding: 0;
color: #000;
font-size: 100%;
background-image: url();
background-color: #CCC;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
text-align: right;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 15px;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#000;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #000;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 960px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
height: 379px;
font-family: Tahoma, Geneva, sans-serif;
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
height: 20px;
width: 960px;
line-height: normal;
}

/* ~~ These are the columns for the layout. ~~

1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.

3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.

4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.

*/
.sidebar1 {
float: left;
width: 200px;
height: 340px;
background-image: url(../Images/sidebar1_illustratie.gif);
}
.sidebar1 p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
color: #000;
text-align: right;
padding-top: 1px;
padding-bottom: 1px;
}
.content {
width: 560px;
float: left;
height: 340px;
margin: auto;
text-align: left;
vertical-align: baseline;
background-image: url(../Images/content.gif);
}
.sidebar2 {
width: 200px;
height: 340px;
float: left;
background-image: url(../Images/sidebar2.gif);
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
font-size: 18px;
font-style: oblique;
}
ul.nav li {
margin-right: 10px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #FFF;
}

/* ~~The footer ~~ */
.footer {
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
height: 20px;
width: 960px;
}

/* ~~miscellaneous float/clear classes~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
h1,h2,h3,h4,h5,h6 {
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
}
h1 {
font-size: 22px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 5px;
text-align: left;
margin-right: 5px;
color: #1B75BC;
}
h2 {
font-size: 18px;
margin-top: 20px;
font-family: Tahoma, Geneva, sans-serif;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
font-weight: normal;
text-align: center;
}
body,td,th {
font-family: Tahoma, Geneva, sans-serif;
}
#wrapper {
width: 960px;
height: 380px;
margin-top: 100px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#bijbutton {
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
text-align: right;
height: 170px;
color: #000;
padding: 5px;
}
h3 {
font-size: 14px;
color: #666;
}
.tekstcontent {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #1b75bc;
margin: 10px;
}
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2885445-8']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
<script language="JavaScript">

if(document.images) {
currentslide=1;
maxslides=6;

// geef hier het aantal plaatjes in


slide = new Array(maxslides+1);
thumb = new Array(maxslides+1);
for(var n=1;n<=maxslides;n++) {
slide[n]=new Image(76,232);
slide[n].src='images/slide_'+n+'.jpg';
}
for(var n=1;n<=maxslides;n++) {
thumb[n]=new Image(76,58);
thumb[n].src='images/thumb_'+n+'.jpg';
}
}

function prevSlide() {
if(document.images) {
currentslide--;
if(currentslide<1) currentslide=maxslides;
document.images['slide'].src=thumb[currentslide].src;
}
}


function nextSlide() {
if(document.images) {
currentslide++;
if(currentslide>maxslides) currentslide=1;
document.images['slide'].src=thumb[currentslide].src;
}
}
function showFullSize()
{
document.images['fullsize'].src='images/slide_'+currentslide+'.jpg';
}

</script></head>

<body onload="MM_preloadImages('../Images/home_over.gif','../Images/nieuws_over.gif','../Images/overraimke_over.gif','../Images/contact_over.gif','../Images/animatie_over.gif','../Images/illustratie_over.gif','../Images/grafisch_over.gif','../Images/workshop_over.gif','../Images/sidebar1_sub_il_portfolio_over.gif','../Images/sidebar1_sub_il_contact_over.gif')">
<div id="belijning">
<div id="wrapper">
<div class="container">
<div class="header">
<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200"><img src="../Images/sidebar1_b.gif" width="200" height="20" alt="sidebar1_b" /></td>
<td width="140"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../Images/home_over.gif',1)"><img src="../Images/home.gif" name="Home" width="140" height="20" border="0" id="Home" /></a></td>
<td width="140"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nieuws','','../Images/nieuws_over.gif',1)"><img src="../Images/nieuws.gif" name="Nieuws" width="140" height="20" border="0" id="Nieuws" /></a></td>
<td width="140"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Over Raimke','','../Images/overraimke_over.gif',1)"><img src="../Images/overraimke.gif" name="Over Raimke" width="140" height="20" border="0" id="Over Raimke" /></a></td>
<td width="140"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../Images/contact_over.gif',1)"><img src="../Images/contact.gif" name="Contact" width="140" height="20" border="0" id="Contact" /></a></td>
<td width="200"><img src="../Images/sidebar2_b.gif" width="200" height="20" alt="sidebar2_b" /></td>
</tr>
</table>
</div>
<!-- TemplateBeginEditable name="Sidebar1" -->
<div class="sidebar1">
<h1>ILLUSTRATIE</h1>
<div class="button" id="bijbutton2">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Portfolio','','../Images/sidebar1_sub_il_portfolio_over.gif',1)"><img src="../Images/sidebar1_sub_il_portfolio.gif" name="Portfolio" width="200" height="20" border="0" id="Portfolio" /></a></td>
</tr>
<tr>
<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contactformulier','','../Images/sidebar1_sub_il_contact_over.gif',1)"><img src="../Images/sidebar1_sub_il_contact.gif" name="Contactformulier" width="200" height="20" border="0" id="Contactformulier" /></a></td>
</tr>
</table>
</div>
</div>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Content" -->
<div class="content">
<!-- end .content --><center>
<br />
<table border=0 cellspacing=0 cellpadding=0>

<tr>

<td><img src='images/slide_1.jpg' width=280 height=193 name='fullsize'></td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=0>

<tr>

<td height=5 colspan=2>*</td>
</tr>

<tr valign=bottom align=center>

<td height=58 colspan=2><a href='javascript:showFullSize();'><img name='slide' width=90 height=61 border=0 hspace=0 vspace=0 alt='Klik voor een volledige grootte van de foto' src='images/thumb_1.jpg'></a></td>
</tr>

<tr>

<td height=5 colspan=2>*</td>
</tr>

<tr>

<td height=5 align=left><font size="3">*<a href='javascript:prevSlide()'>«</a>*</font></td>
<td height=5 align=right><font size="3">*<a href='javascript:nextSlide()'>»</a>*</font></td>
</tr>
</table></p>

</div>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Sidebar2" -->
<div class="sidebar2">
<!-- end .sidebar2 -->
<h2>&nbsp;</h2>
</div>
<!-- TemplateEndEditable -->
<div class="footer"><!-- end .footer -->
<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200"><img src="../Images/sidebar1_o.gif" width="200" height="20" alt="sidebar_o" /></td>
<td width="140"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Animatie','','../Images/animatie_over.gif',1)"><img src="../Images/animatie.gif" name="Animatie" width="140" height="20" border="0" id="Animatie" /></a></td>
<td width="140"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Illustratie','','../Images/illustratie_over.gif',1)"><img src="../Images/illustratie.gif" name="Illustratie" width="140" height="20" border="0" id="Illustratie" /></a></td>
<td width="140"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Grafisch','','../Images/grafisch_over.gif',1)"><img src="../Images/grafisch.gif" name="Grafisch" width="140" height="20" border="0" id="Grafisch" /></a></td>
<td width="140"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Workshops','','../Images/workshop_over.gif',1)"><img src="../Images/workshops.gif" name="Workshops" width="140" height="20" border="0" id="Workshops" /></a></td>
<td width="200"><img src="../Images/sidebar2_o.gif" width="200" height="20" alt="sidebar2_o" /></td>
</tr>
</table>
</div>
<!-- end .container --></div>
</div>
</div>
</body>
</html>
 
Hoi Reimpje,
Hoelawoela, wat een code! ;)
Als je dit zo zonder images hebt krijg je dit op scherm:
In Firefox met een beeldscherm van 1024*768px ziet dat er zo uit:

reimpje-ori.png

De pagina loopt aan de rechterkant uit beeld (links-rechts scrollbar onderaan), terwijl aan de linkerkant voldoende ruimte lijkt te zijn. Ook is de pagina onderaan niet te zien (omlaag-omhoog scrollbar aan de rechterkant), terwijl bovenin lege ruimte schijnt te zijn.
Wat is hier aan de hand?
Om daar achter te komen, heb ik 2 dingen gedaan:
  • De code leesbaar gemaakt door gebruik te maken van inspringen voor elementen die bij elkaar horen.
  • Randjes om de elementen heen gezet, of ze een kleurtje gegeven, zodat je kan zien wat waar zit.
Dan wordt het deze:
Op scherm zien we nu dit:

reimpje-nw.png

Opvallend: de <body> begint inderdaad heel laag; de <div class="container"> is veel breder dan de <div id="belijning"> waar ie in hoort te zitten.

Waarschijnlijk ben je begonnen met een Dreamweaver-template voor 3 kolommen, en heb je daar op verschillende plekken tabellen ingevoegd.
Daarmee is het nu een mix van <div>'s en tabellen geworden. Het nare van tabellen is, dat ze rekken en trekken op soms onbedoelde manier; tabellen horen ook eigenlijk niet voor de opmaak van een webpagina gebruikt te worden. Beter kan alles met <div>'s en css geregeld worden, dan kan je het exact zo krijgen als je het hebben wilt.
En dan heb je ook een mooie schone html-code.:)

Maar nu je vraag!
... nog krijg ik de verschillende slides niet te zien in de leejoo.nl slider.
Klik om te vergroten...
Ik vermoed dat het zit in het images-mapje (zeker weten doe ik het niet, dat kan alleen als je een testpagina online zet). In je verwijzingen naar afbeeldingen wordt het mapje genoemd:
HTML: 
<img src="../Images/sidebar1_b.gif" ... enz.
D.w.z. de images moeten zitten in een map parallel aan de map van de pagina (met de ../ ga je één map omhoog, en met Images stap je daarna de images-map binnen). En de map heet Images, met een hoofdletter I.

Maar ... in het leejo-sript wordt verwezen naar bv.:
[JS]slide[n].src='images/slide_'+n+'.jpg';[/JS]
D.w.z. de images moeten zitten in een map binnen de map van de pagina. En de map heet images, met een kleine letter i.

Als je lokaal met Windows werkt, maakt het niet uit of je een mapnaam of een bestandsnaam met hoofdletters of kleine letters gebruikt, maar op een server wel: die kent wel het verschil tussen hoofdletters en kleine letters.
Het handigste is om altijd kleine letters voor mapnamen en bestandsnamen te gebruiken, dan kan het nooit fout gaan.
En de slide-afbeeldingen moeten dus in een nieuw mapje "images" komen, dat je aanmaakt binnen de map waar de pagina in zit.

Zo zou het goed moeten gaan.

Je andere vraag:
... kom ik er niet helemaal uit hoe ik je alternatief in mijn site kan zetten.
Klik om te vergroten...
denk ik nog even over na!
In elk geval kan je vast downloaden: carrousel-byhand.js (dat is het script dat alles in werking zet) en carrousel-byhand.css (dat is de opmaak voor alléén het vak waar de kleine afbeeldingen en de pijltjes in zitten), en de pijlknop-links27x19x2.gif en de pijlknop-rechts27x19x2.gif. Dat zijn de hoofd-ingrediënten.
  • Als je andere pijlknopjes wilt, kan je ze vast tekenen (voor de gewone stand en voor als je eroverheen hovert met de muis). Het mogen ook andere maten zijn, dan moet de css even bijgesteld worden.
O ja, er is ook nog een héél andere mogelijkheid. Je kunt op de pagina alle afbeeldingen in het klein naast elkaar neerzetten, die dan met een klik vergroot worden. Als je daarin geïnteresseerd bent moet je even dit topic op het forum lezen. Voor snel kijken: de uiteindelijke voorbeeld-pagina zit daar bij Versie 2.

Met vriendelijke groet,
CSShunter
 
Super bedankt, het lag inderdaad aan de map structuur images (zonder hoofdletter). Grinnik, ja, ik heb inderdaad een beetje een rommeltje van mijn site gemaakt...
Ik zal nog even kijken naar de marges, want ik heb hem nog niet getest op een lage resolutie (lees: ik werk op een hele grote imac).
Super thanks!
 
Tip:
Niet alleen testen op lage resolutie, maken op lage resolutie!
Uit voorzorg heb ik mijn beeldscherm bij het webbouwen altijd op 1024*768px staan.
Kan ik nooit in de verleiding komen iets te maken dat er nooit op kan passen (of in elkaar duikelt). ;)

Succes!
 
Ik heb nu de div ID's 'belijning' en 'wrapper' weggehaald. Als ik dan de container op marge 'auto' zet en de breedte op 960 dan zou hij hem goed moeten centreren toch overal?
 
Yeps, als het body {width: 980px; margin: 0 auto;} wordt in plaats van body {margin: 15%;} gaat het goed. Daarmee werd 15% van de schermbreedte als loze ruimte aan de linkerkant toegevoegd, en 15% van de schermhoogte als lege strook bovenaan. En dat kan je niet gebruiken!

Met vriendelijke groet,
CSShunter
 
Vreemd genoeg centreert hij de site wel links en rechts, maar boven en beneden, werkt het nog steeds niet helemaal. Wat ik doe is alle margins op 0 auto zetten.
Doe ik iets niet goed?
 
Doe ik iets niet goed?
Klik om te vergroten...
Kweenie! ;)
... want ik kan niet ergens de exacte html/css/javascript-code zien die gebruikt is.
Heb je een link naar een testpagina online?
 
Hoi Reimpje,
Yeps, ik geloof dat ik bij mijn reactie van nr. #8 blijf:
Als je dit doet:
Code: 
body {
	width: 960px;
	margin: 20px auto; /* auto = links en rechts het breedte-overschot eerlijk verdeeld */
	padding: 0;
	color: #000;
	font-size: 100%;
	background-image: url();
	background-color: #CCC;
}
is er dan nog iets mis?

(edit)
Ah, ik zie opeens wat er mis ging.
Er stond:
Code: 
margin-left: 0 auto; enz.
Dan zou de linker-marge zowel 0 als automatisch moeten zijn, en dan kan niet: je mag maar 1 waarde opgeven. Door deze fout wordt de hele style-regel genegeerd.
Maar eerder in de css van de body stond nog: { margin: 15%; }. Die wordt dan niet ongedaan gemaakt (volgens de cascade-regel: de laatst opgegeven style wint), maar blijft gelden.
Zo kwam 't! :)
(/edit)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan