afmetingen index.html niet goed

Stormbringer · 17 mei 2016

Hallo,

ik ben al 2 dagen aan het klooien om de afmetingen van mijn tabel fatsoenlijk te krijgen...
en met fatsoenlijk bedoel ik: zodat hij precies op de webpagina past zodat je geen mogelijkheid
hebt om te scrollen en ook niet de scrollbalk kunt zien.
Kan me iemand aub helpen om dat zo te krijgen? Ik word er echt horendol van....................

Het is dus de bedoeling dat er aan de onderkant ook nog een dunne TD loopt van links naar rechts en dat
dan toch alles binnen de pagina past zonder scrollmogelijkheid of scrollbalk.

Snapt iemand wat ik bedoel?

<HTML>
<HEAD>
<style type="text/css">

</style>

<SCRIPT LANGUAGE="JavaScript">

var interval = 2.5; // tijd tussen wisselen van de afbeeldingen (in seconden)
var random_display = 0; // 0 = vaste volgorde, 1 = willekeurige volgorde
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("foto1.jpg");
image_list[image_index++] = new imageItem("foto2.jpg");
image_list[image_index++] = new imageItem("foto3.jpg");
image_list[image_index++] = new imageItem("foto4.jpg");
image_list[image_index++] = new imageItem("foto5.jpg");

var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function beeldwissel(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "beeldwissel('"+place+"')";
setTimeout(recur_call, interval);
}

</script>

<style type="text/css">
body {margin:0;}
</style>

</HEAD>
<BODY WIDTH=100% BGCOLOR="#000000"
<BODY OnLoad="beeldwissel('beeld')">>
<CENTER>
<TABLE WIDTH=90% HEIGHT=90% BGCOLOR="#000000" BORDER="1">
<TR>
<TD WIDTH="60%" BGCOLOR="#081B56"><CENTER>
<FONT FACE="Arial Narrow" COLOR=white SIZE="8">
STREAMLINE - THE BAND<BR>
<FONT SIZE="6">- The Future of Vintage Music -
</FONT></CENTER></TD>
<TD WIDTH="10%" BGCOLOR="#081B56"><CENTER><A HREF="http://www.streamlinelive.nl/band.html/" TARGET="_blank">
<FONT="Arial Narrow" SIZE="3">DE BAND</A></FONT></CENTER></TD>
<TD WIDTH="10%" BGCOLOR="#081B56"><CENTER><A HREF="http://www.streamlinelive.nl/media.html/" TARGET="_blank">
<FONT="Arial Narrow" SIZE="3">MEDIA</A></FONT></CENTER></TD>
<TD WIDTH="10%" BGCOLOR="#081B56"><CENTER><A HREF="http://www.streamlinelive.nl/agenda.html/" TARGET="_blank">
<FONT="Arial Narrow" SIZE="3">AGENDA</A></FONT></CENTER></TD>
<TD WIDTH="10%" BGCOLOR="#081B56"><CENTER><A HREF="http://www.streamlinelive.nl/contact.html/" TARGET="_blank">
<FONT="Arial Narrow" SIZE="3">CONTACT</A></FONT></CENTER></TD>
</TR>
</TD>
<TR>
<TD COLSPAN="5" BGCOLOR="#081B56">
<CENTER>
<img name="beeld" src="foto1.jpg">
</CENTER>
</TD>
<TR>
<TD HEIGHT=10% COLSPAN="5" BGCOLOR="#081B56">
</TD>
</TABLE>
</CENTER>
</BODY>
</HTML>

Venga · 17 mei 2016

Zet je HTML code even tussen

HTML:

 tags (knopje in editor), want zo is er niet veel van te maken.

Stormbringer · 17 mei 2016

Mijn excuus!

Code:

<HTML>
<HEAD>
<style type="text/css">
<!--
A:link { COLOR: white; TEXT-DECORATION: none; }
A:hover { COLOR: yellow; TEXT-DECORATION: none; }
-->
</style>

<SCRIPT LANGUAGE="JavaScript">

var interval = 2.5; // tijd tussen wisselen van de afbeeldingen (in seconden)
var random_display = 0; // 0 = vaste volgorde, 1 = willekeurige volgorde
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("foto1.jpg");<!-- afb 1 -->
image_list[image_index++] = new imageItem("foto2.jpg");<!-- afb 2 -->
image_list[image_index++] = new imageItem("foto3.jpg");<!-- afb 3 -->
image_list[image_index++] = new imageItem("foto4.jpg");<!-- afb 4 -->
image_list[image_index++] = new imageItem("foto5.jpg");<!-- afb 5 -->
                                                                   <!-- enz.. -->
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function beeldwissel(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "beeldwissel('"+place+"')";
setTimeout(recur_call, interval);
}

</script>	

<style type="text/css">
body {margin:0;}
</style>	

</HEAD>
<BODY WIDTH=100% BGCOLOR="#000000" 
<BODY OnLoad="beeldwissel('beeld')">>
<CENTER>
<TABLE WIDTH=90% HEIGHT=90% BGCOLOR="#000000" BORDER="1">
<TR>
<TD WIDTH="60%" BGCOLOR="#081B56"><CENTER>
<FONT FACE="Arial Narrow" COLOR=white SIZE="8">
STREAMLINE - THE BAND<BR>
<FONT SIZE="6">- The Future of Vintage Music -
</FONT></CENTER></TD>
<TD WIDTH="10%" BGCOLOR="#081B56"><CENTER><A HREF="http://www.streamlinelive.nl/band.html/" TARGET="_blank">
<FONT="Arial Narrow" SIZE="3">DE BAND</A></FONT></CENTER></TD>
<TD WIDTH="10%" BGCOLOR="#081B56"><CENTER><A HREF="http://www.streamlinelive.nl/media.html/" TARGET="_blank">
<FONT="Arial Narrow" SIZE="3">MEDIA</A></FONT></CENTER></TD>
<TD WIDTH="10%" BGCOLOR="#081B56"><CENTER><A HREF="http://www.streamlinelive.nl/agenda.html/" TARGET="_blank">
<FONT="Arial Narrow" SIZE="3">AGENDA</A></FONT></CENTER></TD>
<TD WIDTH="10%" BGCOLOR="#081B56"><CENTER><A HREF="http://www.streamlinelive.nl/contact.html/" TARGET="_blank">
<FONT="Arial Narrow" SIZE="3">CONTACT</A></FONT></CENTER></TD>
</TR>
</TD>
<TR> 
<TD COLSPAN="5" BGCOLOR="#081B56">
<CENTER>
<img name="beeld" src="foto1.jpg">
</CENTER>
</TD>
<TR> 
<TD HEIGHT=10% COLSPAN="5" BGCOLOR="#081B56">
</TD>
</TABLE> 
</CENTER>
</BODY>
</HTML>

Stormbringer · 17 mei 2016

Ik heb wat dingen aangepast en hieronder het resultaat.
Dus ook mijn vragen maar aanpassen: vraag 1)Klopt mijn HTML qua afmeting-percentages?
En vraag 2: De onderste TD COLSPAN 5 wil ik graag +/- 1cm hoog hebben...kan iemand daar aub even naar kijken?
En dan nog 3: waarom werkt de Font face niet?
Alvast dank!!!

Code:

<HTML>
<HEAD>
<style type="text/css">
<!--
A:link { COLOR: white; TEXT-DECORATION: none; }
A:hover { COLOR: yellow; TEXT-DECORATION: none; }
-->
</style>

<SCRIPT LANGUAGE="JavaScript">

var interval = 2.5; // tijd tussen wisselen van de afbeeldingen (in seconden)
var random_display = 0; // 0 = vaste volgorde, 1 = willekeurige volgorde
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("foto1.jpg");<!-- afb 1 -->
image_list[image_index++] = new imageItem("foto2.jpg");<!-- afb 2 -->
image_list[image_index++] = new imageItem("foto3.jpg");<!-- afb 3 -->
image_list[image_index++] = new imageItem("foto4.jpg");<!-- afb 4 -->
image_list[image_index++] = new imageItem("foto5.jpg");<!-- afb 5 -->
                                                                   <!-- enz.. -->
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function beeldwissel(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "beeldwissel('"+place+"')";
setTimeout(recur_call, interval);
}

</script>	

<style type="text/css">
body {margin:0;}
</style>	

</HEAD>
<BODY WIDTH=100% HEIGHT=100% BGCOLOR="#000000" 
<BODY OnLoad="beeldwissel('beeld')">>
<CENTER>
<TABLE WIDTH=90% HEIGHT=90% BACKGROUND="bgcolor.jpg" BORDER="1">
<TR>
<TD WIDTH="60%"><CENTER>
<FONT FACE="Arial Condensed" COLOR=white SIZE="6">
STREAMLINE - THE BAND<BR>
<FONT SIZE="3">- THE FUTURE OF VINTAGE MUSIC -
</FONT></CENTER></TD>
<TD WIDTH="10%" BACKGROUND="bgcolor.jpg"><CENTER><A HREF="http://www.streamlinelive.nl/band.html/" TARGET="_blank">
<FONT FACE="Arial Condensed" SIZE="3">DE BAND</A></FONT></CENTER></TD>
<TD WIDTH="10%" BACKGROUND="bgcolor.jpg"><CENTER><A HREF="http://www.streamlinelive.nl/media.html/" TARGET="_blank">
<FONT FACE="Arial Narrow" SIZE="3">MEDIA</A></FONT></CENTER></TD>
<TD WIDTH="10%" BACKGROUND="bgcolor.jpg"><CENTER><A HREF="http://www.streamlinelive.nl/agenda.html/" TARGET="_blank">
<FONT FACE="Arial Narrow" SIZE="3">AGENDA</A></FONT></CENTER></TD>
<TD WIDTH="10%" BACKGROUND="bgcolor.jpg"><CENTER><A HREF="http://www.streamlinelive.nl/contact.html/" TARGET="_blank">
<FONT FACE="Arial Narrow" SIZE="3">CONTACT</A></FONT></CENTER></TD>
</TR>
</TD>
<TR> 
<TD COLSPAN="5" BACKGROUND="bgcolor.jpg">
<CENTER>
<img name="beeld" src="foto1.jpg">
</CENTER>
</TD>
<TR> 
<TD HEIGHT=15% COLSPAN="5" BACKGROUND="bgcolor.jpg">
</TD>
</TABLE> 
</CENTER>
</BODY>
</HTML>

Stormbringer · 17 mei 2016

Inmiddels weer enkele aanpassingen gedaan en onderstaand het resultaat tot nu toe.
Met 1 vraag resterend: Kan me iemand de tabel zodanig aanpassen dat hij in elke browser goed uitziet.
En dan bedoel ik: zonder scrollmogelijkheid en zonder scrollbalkje rechts.
Alvast dank voor de (broodnodige) hulp!

Code:

<HTML>
<HEAD>
<style type="text/css">
<!--
A:link { COLOR: white; TEXT-DECORATION: none; }
A:hover { COLOR: white; TEXT-DECORATION: underline; }
-->
</style>

<SCRIPT LANGUAGE="JavaScript">

var interval = 2.5; // tijd tussen wisselen van de afbeeldingen (in seconden)
var random_display = 0; // 0 = vaste volgorde, 1 = willekeurige volgorde
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("foto1.jpg");<!-- afb 1 -->
image_list[image_index++] = new imageItem("foto2.jpg");<!-- afb 2 -->
image_list[image_index++] = new imageItem("foto3.jpg");<!-- afb 3 -->
image_list[image_index++] = new imageItem("foto4.jpg");<!-- afb 4 -->
image_list[image_index++] = new imageItem("foto5.jpg");<!-- afb 5 -->
                                                                   <!-- enz.. -->
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function beeldwissel(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "beeldwissel('"+place+"')";
setTimeout(recur_call, interval);
}

</script>	

<style type="text/css">
body {margin:0;}
</style>
</HEAD>
<BODY WIDTH=100% HEIGHT=100% BGCOLOR="#000000" 
<BODY OnLoad="beeldwissel('beeld')">>
<CENTER>
<TABLE WIDTH=90% BACKGROUND="bgcolor - kopie.jpg" BORDER="1">
<TR>
<TD WIDTH="60%"><CENTER>
<FONT FACE="Arial Condensed" COLOR=white SIZE="6">
STREAMLINE - THE BAND<BR>
<FONT SIZE="2">- T H E&nbsp;&nbsp;F U T U R E&nbsp;&nbsp;O F&nbsp;&nbsp;V I N T A G E&nbsp;&nbsp;M U S I C -
</FONT></CENTER></TD>
<TD WIDTH="10%"><CENTER><A HREF="http://www.streamlinelive.nl/band.html/" TARGET="_blank">
<FONT FACE="Arial Condensed" SIZE="3">DE BAND</A></FONT></CENTER></TD>
<TD WIDTH="10%"><CENTER><A HREF="http://www.streamlinelive.nl/media.html/" TARGET="_blank">
<FONT FACE="Arial Narrow" SIZE="3">MEDIA</A></FONT></CENTER></TD>
<TD WIDTH="10%"><CENTER><A HREF="http://www.streamlinelive.nl/agenda.html/" TARGET="_blank">
<FONT FACE="Arial Narrow" SIZE="3">AGENDA</A></FONT></CENTER></TD>
<TD WIDTH="10%"><CENTER><A HREF="http://www.streamlinelive.nl/contact.html/" TARGET="_blank">
<FONT FACE="Arial Narrow" SIZE="3">CONTACT</A></FONT></CENTER></TD>
</TR>
</TD>
<TR> 
<TD COLSPAN="5">
<CENTER>
<img name="beeld" src="foto1.jpg">
</CENTER>
</TD>
<TR> 
<TD COLSPAN="5" ALIGN="right">
<FONT COLOR="ffffff" SIZE="-1">©streamline2016&nbsp;</FONT>
</TD>
</TABLE> 
</CENTER>
</BODY>
</HTML>

googlemuscle · 17 mei 2016

Je tabel zal hoe dan ook nooit op elk apparaat passen (tablet en/of mobiel).
Als je echt nooit een scrollbalk wil kun je lelijk en lomp een overflow:hidden er op gooien.

Persoonlijk zou ik het zo oplossen:

Code:

<style>
    .table-wrapper {
        overflow-y: auto; // of gewoon overflow
        width: 90%;
    }
    .blaat-table {
        width: 100%;
    }
</style>

<div class="table-wrapper">
    <table class="blaat-table">
          <thead><td>blabla</td></thead>
          <tbody><tr><td>Blaatblaat</td></tr></tbody>
    </table>
</div>

Stormbringer · 17 mei 2016

re:

Bedankt voor de reactie maar ik heb geen idee waar ik dat moet plaatsen in mijn html.....
En ook niet hoe ik hetgeen ik al had, daar weer passend in krijg.......

googlemuscle · 17 mei 2016

Ik zie trouwens nu pas dat je je website zo ong. helemaal in een table wilt bouwen?

Zo iets:

Code:

<HTML>
<HEAD>
<style type="text/css">
<!--
A:link { COLOR: white; TEXT-DECORATION: none; }
A:hover { COLOR: white; TEXT-DECORATION: underline; }
-->
</style>

<SCRIPT LANGUAGE="JavaScript">

var interval = 2.5; // tijd tussen wisselen van de afbeeldingen (in seconden)
var random_display = 0; // 0 = vaste volgorde, 1 = willekeurige volgorde
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("foto1.jpg");<!-- afb 1 -->
image_list[image_index++] = new imageItem("foto2.jpg");<!-- afb 2 -->
image_list[image_index++] = new imageItem("foto3.jpg");<!-- afb 3 -->
image_list[image_index++] = new imageItem("foto4.jpg");<!-- afb 4 -->
image_list[image_index++] = new imageItem("foto5.jpg");<!-- afb 5 -->
                                                                   <!-- enz.. -->
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function beeldwissel(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "beeldwissel('"+place+"')";
setTimeout(recur_call, interval);
}

</script>	

<style type="text/css">
body {margin:0;}
</style>
</HEAD>
<BODY WIDTH=100% HEIGHT=100% BGCOLOR="#000000" 
<BODY OnLoad="beeldwissel('beeld')">>
<CENTER>
  <div style="width:90%; overflow-y:auto;">
<TABLE WIDTH=100% BACKGROUND="bgcolor - kopie.jpg" BORDER="1">
<TR>
<TD WIDTH="60%"><CENTER>
<FONT FACE="Arial Condensed" COLOR=white SIZE="6">
STREAMLINE - THE BAND<BR>
<FONT SIZE="2">- T H E&nbsp;&nbsp;F U T U R E&nbsp;&nbsp;O F&nbsp;&nbsp;V I N T A G E&nbsp;&nbsp;M U S I C -
</FONT></CENTER></TD>
<TD WIDTH="10%"><CENTER><A HREF="http://www.streamlinelive.nl/band.html/" TARGET="_blank">
<FONT FACE="Arial Condensed" SIZE="3">DE BAND</A></FONT></CENTER></TD>
<TD WIDTH="10%"><CENTER><A HREF="http://www.streamlinelive.nl/media.html/" TARGET="_blank">
<FONT FACE="Arial Narrow" SIZE="3">MEDIA</A></FONT></CENTER></TD>
<TD WIDTH="10%"><CENTER><A HREF="http://www.streamlinelive.nl/agenda.html/" TARGET="_blank">
<FONT FACE="Arial Narrow" SIZE="3">AGENDA</A></FONT></CENTER></TD>
<TD WIDTH="10%"><CENTER><A HREF="http://www.streamlinelive.nl/contact.html/" TARGET="_blank">
<FONT FACE="Arial Narrow" SIZE="3">CONTACT</A></FONT></CENTER></TD>
</TR>
</TD>
<TR> 
<TD COLSPAN="5">
<CENTER>
<img name="beeld" src="foto1.jpg">
</CENTER>
</TD>
<TR> 
<TD COLSPAN="5" ALIGN="right">
<FONT COLOR="ffffff" SIZE="-1">©streamline2016&nbsp;</FONT>
</TD>
</TABLE> 
  </div>
</CENTER>
</BODY>
</HTML>

Stormbringer · 18 mei 2016

Klopt ja, maar aan je reactie te zien is dat...vreemd?

Ik heb overigens je html uitgetest en het werkt goed. Dat wil zeggen met mijn resolutie van 1366 x 768.
Om te testen voor andere resoluties, moet ik dan persé de website ergens online hebben staan of kan
dat ook anders? Bijvoorbeeld de index.html ergens tijdelijk uploaden?

Hoe dan ook, hartelijk dank!!

Stormbringer · 18 mei 2016

re:

Website inmiddels getest met 2 andere resoluties, namelijk 800 x 600 en 1024 x 768.

Resultaat: de grootte van de tabel is goed (past goed in het beeldscherm), maar de wisselende afbeeldingen
in de grote cel zijn veel te groot en staan er niet helemaal op.

Wie weet raad?

afmetingen index.html niet goed

Stormbringer

Gebruiker

Venga

Gebruiker

Stormbringer

Gebruiker

Stormbringer

Gebruiker

Stormbringer

Gebruiker

googlemuscle

Gebruiker

Stormbringer

Gebruiker

googlemuscle

Gebruiker

Stormbringer

Gebruiker

Stormbringer

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy