Avatar billede oleodder Nybegynder
23. august 2004 - 11:07 Der er 20 kommentarer

Mit billede kan ikke komme helt ned i bunden af siden

Hej Alle

HJÆLP !
Jeg har en demoside, hvor jeg simpelthen ikke kan få mit nederste billede helt ned i bunden !!!

Hvad pokker gør jeg galt, jeg syntes jeg har prøvet alt !!!

Detaljer: Det er filmstrimlen i bunden af siden, som skal HELT ned i bunden at skærmbilledet, og ikke svæve de der 4-5 pixels oppe.

Min demo side kan ses her:
http://www.jasperfoto.dk/index2.htm

..og koden til siden er her:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Jasper Simonsen Fotografi</title>
  <style type="text/css">
  html,body{
    height:100%;
    width:100%;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    overflow:hidden;
    }

  }

  #main{
    overflow:auto;
    height:100%;
    width:100%;
    padding-bottom:123px;
    background-color:#8B8B8B;
    position:relative;
  }

  #bund{
   
    width:100%;
 
    position:absolute;
    bottom:0px;
    background-image: url("strimmel/strimmel-bglang.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;   
        background-position: 50% 50%;
    background-position: top;




  }

  .centerImg {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -378px;  /* halvdelen af bredden */
    margin-top: -341px;  /* halvdelen af højden - 122*/
  }

  </style>


<script type="text/javascript">
mintid = 3; //Minimum antal sekunder mellem hvert skift
makstid = 10; //Maksimum antal sekunder mellem hvert skift

bill = new Array();
bill[0] = new Array();
  bill[0][0] = "strimmel/upload/1a.jpg"; //Det første billede på den første plads
  bill[0][1] = "strimmel/upload/1f.jpg"; //Det andet billede på den første plads
  bill[0][2] = "strimmel/upload/1i.jpg"; //Det tredje billede på den første plads
bill[1] = new Array();
  bill[1][0] = "strimmel/upload/1d.jpg"; //Det første billede på den anden plads
  bill[1][1] = "strimmel/upload/1m.jpg"; //Det andet billede på den anden plads
  bill[1][2] = "strimmel/upload/1n.jpg"; //Det tredje billede på den anden plads
bill[2] = new Array();
  bill[2][0] = "strimmel/upload/1p.jpg"; //Det første billede på den tredje plads
  bill[2][1] = "strimmel/upload/2i.jpg"; //osv.
  bill[2][2] = "strimmel/upload/2m.jpg";
bill[3] = new Array();
  bill[3][0] = "strimmel/upload/2mo.jpg";
  bill[3][1] = "strimmel/upload/2p.jpg";
  bill[3][2] = "strimmel/upload/3i.jpg";
bill[4] = new Array();
  bill[4][0] = "strimmel/upload/3m.jpg";
  bill[4][1] = "strimmel/upload/3mo.jpg";
  bill[4][2] = "strimmel/upload/3p.jpg";
bill[5] = new Array();
  bill[5][0] = "strimmel/upload/4m.jpg";
  bill[5][1] = "strimmel/upload/4mo.jpg";
  bill[5][2] = "strimmel/upload/4p.jpg";
bill[6] = new Array();
  bill[6][0] = "strimmel/upload/5m.jpg";
  bill[6][1] = "strimmel/upload/5mo.jpg";
  bill[6][2] = "strimmel/upload/5p.jpg";
bill[7] = new Array();
  bill[7][0] = "strimmel/upload/6.jpg";
  bill[7][1] = "strimmel/upload/6mo.jpg";
  bill[7][2] = "strimmel/upload/6p.jpg";
bill[8] = new Array();
  bill[8][0] = "strimmel/upload/7mo.jpg";
  bill[8][1] = "strimmel/upload/7p.jpg";
  bill[8][2] = "strimmel/upload/8mo.jpg";

pb = new Array();

for (i = 0; i < bill.length; i++) {
  pb[i] = new Array();
  for (n = 0; n < bill[i].length; n++) {
    pb[i][n] = new Image();
    pb[i][n].src = bill[i][n];
  }
}

bobj = new Array();
bt = new Array();
ie = (document.all && navigator.appName.indexOf("Opera") == -1);

function initSlide() {
  temp = getPos();
  x = temp[0];
  y = temp[1];
  for (i = 0; i < bill.length; i++) {
    bobj[i] = new Array();
    bobj[i][0] = bobj[i][1] = document.createElement("img");
    bobj[i][0].style.position = bobj[i][1].style.position = "absolute";
    bobj[i][0].style.left = bobj[i][1].style.left = x + 6 + i * 111;
    bobj[i][0].style.top = bobj[i][1].style.top = y + 22;
    bobj[i][0].style.width = bobj[i][1].style.width = "102px";
    bobj[i][0].style.height = bobj[i][1].style.height = "67px";
    bobj[i][0].style.zIndex = 3;
    bobj[i][1].style.zIndex = 2;
    if (ie)
      bobj[i][0].style.filter = bobj[i][1].style.filter = "alpha(opacity=100)";
    else
      bobj[i][0].style.MozOpacity = bobj[i][1].style.MozOpacity = 1;
    bobj[i][0].src = pb[i][0].src;
    bt[i] = 1;
    document.body.appendChild(bobj[i][0]);
    document.body.appendChild(bobj[i][1]);
  }
  for (i = 0; i < bill.length; i++)
    setTimeout("slide(" + i + ")", tilf());
}

function getPos() {
  obj = document.getElementById("strimmel");
  x = y = 0;
  while (ie && obj.parentElement || obj.offsetParent) {
    x += obj.offsetLeft;
    y += obj.offsetTop;
    obj = (ie) ? obj.parentElement : obj.offsetParent;
  }
  return new Array(x, y);
}

function slide(i) {
  if (bt[i] >= bill[i].length)
    bt[i] = 0;
  akt = bt[i] % 2;
  bobj[i][1 - akt].src = pb[i][bt[i]].src;
  for (n = 1; n <= 10; n++) {
    if (ie)
      setTimeout("bobj[" + i + "][" + akt + "].filters.alpha.opacity = " + (10 * n), 100 * (n - 1));
    else
      setTimeout("bobj[" + i + "][" + akt + "].style.MozOpacity = " + (n / 10), 100 * (n - 1));
  }
  setTimeout("bobj[" + i + "][" + akt + "].style.zIndex = 2; bobj[" + i + "][" + (1 - akt) + "].style.zIndex = 3", 1000);
    bt[i]++;
  setTimeout("slide(" + i + ")", tilf());
}

function tilf() {
  return Math.round(Math.random() * (makstid - mintid) + mintid) * 1000;
}

function paaPlads() {
  temp = getPos();
  x = temp[0];
  y = temp[1]; 
  for (i = 0; i < bill.length; i++) {
    bobj[i][0].style.left = bobj[i][1].style.left = x + 6 + i * 111;
    bobj[i][0].style.top = bobj[i][1].style.top = y + 22;
  }
}
</script>

</head>


<body>

<div id="main">
  <center>
    <img src="jasperfoto.jpg" class="centerImg">
  </center>
</div>

<div id="bund">
<center>
  <img src="strimmel/strimmel.jpg" id="strimmel" style="width: 1000px; height: 123px; z-index: 1;" onload="initSlide();" />
</center>
</div>

<body onresize="paaPlads();">

</body>
</html>
Avatar billede Slettet bruger
23. august 2004 - 11:49 #1
Først:

html,body {
    height:100%;
    width: 100%;   
    margin:0px;
    padding:0px;
Avatar billede Slettet bruger
23. august 2004 - 11:51 #2
Dernæst:

Prop det hele ind i en div:

#main_container {
    position: absolute;
    height: 300px;
    width: 235px;
    bottom: 0px;
    right: 0px;  }

Du laver selvfølgelig selv om på størrelserne.  :-)
Avatar billede Slettet bruger
23. august 2004 - 11:53 #3
Optimeret:

#main_container {
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0px;  }

Alternativt: Prøv med realtive istedet for absolute.
Avatar billede oleodder Nybegynder
23. august 2004 - 11:55 #4
Mange tak.
Det gik lige lidt hurtigt.

Prop det hele ind i en div ?? ......Øhh
Maincontainer ??

Hmm... Jeg prøver mig lige lidt frem  ;-)
Avatar billede Slettet bruger
23. august 2004 - 12:04 #5
Ja, du tager alle dine andre div (#main, #bund og  .centerImg) og propper dem ind i din nye hoveddiv:

<div id="#main_container">
  <div id="main"></div>
  <div id="bund"></div>
  <div id="centerImg"></div>
div>

:-)
Avatar billede oleodder Nybegynder
23. august 2004 - 12:04 #6
Wauvvv....

Det fungede ikke lige.....

Altså:
Jeg ændrer min html,body til:
html,body {
height:100%;
width: 100%;   
margin:0px;
padding:0px;

og skal jeg så oprette en ny #main_container ???
- eller er det istedet for den gamle #main ???

Det syntes jeg nemlig ikke virkede.........

Tak
Avatar billede Slettet bruger
23. august 2004 - 12:04 #7
Der smuttede lige en <

<div id="#main_container">
  <div id="main"></div>
  <div id="bund"></div>
  <div id="centerImg"></div>
<div>
Avatar billede Slettet bruger
23. august 2004 - 12:07 #8
Du beholder alle dine andre div, men opretter en helt ny div:

#main_container {
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0px;  }


Dernæst propper du alle dine andre div ind i din nye div:

<div id="#main_container">
  <div id="main"></div>
  <div id="bund"></div>
  <div id="centerImg"></div>
<div>

:-)
Avatar billede Slettet bruger
23. august 2004 - 12:11 #9
Eller for at præcisere det endnu mere:

I din <body> skal der nu stå:

<div id="#main_container">

<div id="main">
  <center>
    <img src="jasperfoto.jpg" class="centerImg">
  </center>
</div>

<div id="bund">
<center>
  <img src="strimmel/strimmel.jpg" id="strimmel" style="width: 1000px; height: 123px; z-index: 1;" onload="initSlide();" />
</center>
</div>

<div>
Avatar billede oleodder Nybegynder
23. august 2004 - 12:14 #10
Prøver lige.........

Stort ;-)
Avatar billede oleodder Nybegynder
23. august 2004 - 12:17 #11
Det var godt nok irreterende.....

Du må undskylde mange gange....Men jeg kan ikke få det til at fungere.

Min <head> ser således ud:

<head>
  <title>Jasper Simonsen Fotografi</title>
  <style type="text/css">
  html,body{
    height:100%;
    width:100%;
    margin:0px;
        padding:0px;
    }

#main_container  {
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0px;  }


#main            {
    overflow:auto;
    height:100%;
    width:100%;
    padding-bottom:123px;
    background-color:#8B8B8B;
    position:relative;
    bottom: 0px;  }

  #bund          {
    width:100%;
    position:absolute;
    bottom:0px;
    background-image: url("strimmel/strimmel-bglang.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;   
        background-position: 50% 50%;
    background-position: top;
                  }

  .centerImg {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -378px;  /* halvdelen af bredden */
    margin-top: -341px;  /* halvdelen af højden - 122*/
              }

  </style>


Og min body ser nu således ud:

<body>
<div id="#main_container">
<div id="main">
  <center>
    <img src="jasperfoto.jpg" class="centerImg">
  </center>
</div>

<div id="bund">
<center>
  <img src="strimmel/strimmel.jpg" id="strimmel" style="width: 1000px; height: 123px; z-index: 1;" onload="initSlide();" />
</center>
</div>

</div>

<body onresize="paaPlads();">

</body>
Avatar billede Slettet bruger
23. august 2004 - 12:21 #12
...lige et tip mere:

Prøv at skifte
  html,body
ud med
  html>body
i din style type.

Der sker nemlig det, at du målretter dine style types direkte mod explorer... men gør det KUN hvis alt andet mislykkes. Ellers kan andre browsere nemlig ikke se det samme som explorer.
:-)
Avatar billede oleodder Nybegynder
23. august 2004 - 12:29 #13
Hej extend

Mange tak for din tålmodighed....

Det der med html>body fungede ikke lige, men hvad med min kode ovenstående ?? Kan du lokalisere fejlen ???

Det er sådan koden ser ud på siden netop nu !!!

Tak ;-)
Avatar billede Slettet bruger
23. august 2004 - 12:35 #14
Jeg prøver og prøver... jeg har isoleret din #bund man kan ikke umiddelbart se fejlen...

Sjovt nok, for et af mine eksempler virker fint nok: www.webfab.dk
Avatar billede Slettet bruger
23. august 2004 - 12:36 #15
Du har også "glemt" den korrekte DOC-type i toppen af dokumentet.

Skynd dig at sætte dette ind:
<!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="da">
<head>
    <title>Jasper Simonsen Fotografi</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="dk-DK" />
<html>
<head>
Avatar billede oleodder Nybegynder
23. august 2004 - 12:47 #16
Det var godt nok irreterende.......

Jeg syntes jeg har rettet som du har sagt....

Der må være en eller anden lille kode et sted, der sidder og driller !!!

Hele koden netop nu ser ud som nedenstående:

(Endnu engang mange tak for din tålmodighed.....)

<!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="da">
<head>
    <title>Jasper Simonsen Fotografi</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="dk-DK" />


  <style type="text/css">
  html,body{
    height:100%;
    width:100%;
    margin:0px;
        padding:0px;
    }

#main_container  {
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0px;  }


#main            {
    overflow:auto;
    height:100%;
    width:100%;
    padding-bottom:123px;
    background-color:#8B8B8B;
    position:relative;
    bottom: 0px;  }

  #bund          {
    width:100%;
    position:absolute;
    bottom:0px;
    background-image: url("strimmel/strimmel-bglang.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;   
        background-position: 50% 50%;
    background-position: top;
                  }

  .centerImg {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -378px;  /* halvdelen af bredden */
    margin-top: -341px;  /* halvdelen af højden - 122*/
              }

  </style>


<script type="text/javascript">
mintid = 3; //Minimum antal sekunder mellem hvert skift
makstid = 10; //Maksimum antal sekunder mellem hvert skift

bill = new Array();
bill[0] = new Array();
  bill[0][0] = "strimmel/upload/1a.jpg"; //Det første billede på den første plads
  bill[0][1] = "strimmel/upload/1f.jpg"; //Det andet billede på den første plads
  bill[0][2] = "strimmel/upload/1i.jpg"; //Det tredje billede på den første plads
bill[1] = new Array();
  bill[1][0] = "strimmel/upload/1d.jpg"; //Det første billede på den anden plads
  bill[1][1] = "strimmel/upload/1m.jpg"; //Det andet billede på den anden plads
  bill[1][2] = "strimmel/upload/1n.jpg"; //Det tredje billede på den anden plads
bill[2] = new Array();
  bill[2][0] = "strimmel/upload/1p.jpg"; //Det første billede på den tredje plads
  bill[2][1] = "strimmel/upload/2i.jpg"; //osv.
  bill[2][2] = "strimmel/upload/2m.jpg";
bill[3] = new Array();
  bill[3][0] = "strimmel/upload/2mo.jpg";
  bill[3][1] = "strimmel/upload/2p.jpg";
  bill[3][2] = "strimmel/upload/3i.jpg";
bill[4] = new Array();
  bill[4][0] = "strimmel/upload/3m.jpg";
  bill[4][1] = "strimmel/upload/3mo.jpg";
  bill[4][2] = "strimmel/upload/3p.jpg";
bill[5] = new Array();
  bill[5][0] = "strimmel/upload/4m.jpg";
  bill[5][1] = "strimmel/upload/4mo.jpg";
  bill[5][2] = "strimmel/upload/4p.jpg";
bill[6] = new Array();
  bill[6][0] = "strimmel/upload/5m.jpg";
  bill[6][1] = "strimmel/upload/5mo.jpg";
  bill[6][2] = "strimmel/upload/5p.jpg";
bill[7] = new Array();
  bill[7][0] = "strimmel/upload/6.jpg";
  bill[7][1] = "strimmel/upload/6mo.jpg";
  bill[7][2] = "strimmel/upload/6p.jpg";
bill[8] = new Array();
  bill[8][0] = "strimmel/upload/7mo.jpg";
  bill[8][1] = "strimmel/upload/7p.jpg";
  bill[8][2] = "strimmel/upload/8mo.jpg";

pb = new Array();

for (i = 0; i < bill.length; i++) {
  pb[i] = new Array();
  for (n = 0; n < bill[i].length; n++) {
    pb[i][n] = new Image();
    pb[i][n].src = bill[i][n];
  }
}

bobj = new Array();
bt = new Array();
ie = (document.all && navigator.appName.indexOf("Opera") == -1);

function initSlide() {
  temp = getPos();
  x = temp[0];
  y = temp[1];
  for (i = 0; i < bill.length; i++) {
    bobj[i] = new Array();
    bobj[i][0] = bobj[i][1] = document.createElement("img");
    bobj[i][0].style.position = bobj[i][1].style.position = "absolute";
    bobj[i][0].style.left = bobj[i][1].style.left = x + 6 + i * 111;
    bobj[i][0].style.top = bobj[i][1].style.top = y + 22;
    bobj[i][0].style.width = bobj[i][1].style.width = "102px";
    bobj[i][0].style.height = bobj[i][1].style.height = "67px";
    bobj[i][0].style.zIndex = 3;
    bobj[i][1].style.zIndex = 2;
    if (ie)
      bobj[i][0].style.filter = bobj[i][1].style.filter = "alpha(opacity=100)";
    else
      bobj[i][0].style.MozOpacity = bobj[i][1].style.MozOpacity = 1;
    bobj[i][0].src = pb[i][0].src;
    bt[i] = 1;
    document.body.appendChild(bobj[i][0]);
    document.body.appendChild(bobj[i][1]);
  }
  for (i = 0; i < bill.length; i++)
    setTimeout("slide(" + i + ")", tilf());
}

function getPos() {
  obj = document.getElementById("strimmel");
  x = y = 0;
  while (ie && obj.parentElement || obj.offsetParent) {
    x += obj.offsetLeft;
    y += obj.offsetTop;
    obj = (ie) ? obj.parentElement : obj.offsetParent;
  }
  return new Array(x, y);
}

function slide(i) {
  if (bt[i] >= bill[i].length)
    bt[i] = 0;
  akt = bt[i] % 2;
  bobj[i][1 - akt].src = pb[i][bt[i]].src;
  for (n = 1; n <= 10; n++) {
    if (ie)
      setTimeout("bobj[" + i + "][" + akt + "].filters.alpha.opacity = " + (10 * n), 100 * (n - 1));
    else
      setTimeout("bobj[" + i + "][" + akt + "].style.MozOpacity = " + (n / 10), 100 * (n - 1));
  }
  setTimeout("bobj[" + i + "][" + akt + "].style.zIndex = 2; bobj[" + i + "][" + (1 - akt) + "].style.zIndex = 3", 1000);
    bt[i]++;
  setTimeout("slide(" + i + ")", tilf());
}

function tilf() {
  return Math.round(Math.random() * (makstid - mintid) + mintid) * 1000;
}

function paaPlads() {
  temp = getPos();
  x = temp[0];
  y = temp[1]; 
  for (i = 0; i < bill.length; i++) {
    bobj[i][0].style.left = bobj[i][1].style.left = x + 6 + i * 111;
    bobj[i][0].style.top = bobj[i][1].style.top = y + 22;
  }
}
</script>

</head>


<body>
<div id="#main_container">
<div id="main">
  <center>
    <img src="jasperfoto.jpg" class="centerImg">
  </center>
</div>

<div id="bund">
<center>
  <img src="strimmel/strimmel.jpg" id="strimmel" style="width: 1000px; height: 123px; z-index: 1;" onload="initSlide();" />
</center>
</div>

</div>

<body onresize="paaPlads();">

</body>
</html>
Avatar billede Slettet bruger
23. august 2004 - 12:49 #17
Nå, men nu MÅ jeg afsted!

Men du burde isolere din #bundlokalisere fejlen, og så arbejde ud derfra.
Du har også rigeligt med det helt rigtige materiale at arbejde med.

:-)
Avatar billede oleodder Nybegynder
23. august 2004 - 12:52 #18
ØV - Jeg er virkelig lost.......

Hmmmm...Ærgeligt du skal gå, men mange tak for hjælpen so far......

;-)

Kommer du i tanke om noget, så bare sig til............
Avatar billede oleodder Nybegynder
23. august 2004 - 13:25 #19
Halløj.....

Efter du var smuttet extend, lagde jeg hele molevitten ind i Frontpage for at se hvad den sagde:

Den foreslog at udskifte
<img src="strimmel/strimmel.jpg" id="strimmel" style="width: 1000px; height: 123px; z-index: 1;" onload="initSlide();" />

med

<img src="strimmel/strimmel.jpg" id="strimmel" style="z-index: 1" onload="initSlide();" align="absbottom" width="1000" height="123" />

...og vupti !! Nu virker det.

Mange tak for din hjælp, ønsker du point for din ulejlighed ??

Fortsat god dag.
Avatar billede Slettet bruger
24. august 2004 - 16:16 #20
Hejsa igen, Ole.

...jeg havde det nok på fornemmelsen... billedet var bare ikke alignet helt ned i bunden. *SUK*

Men Frontpage er et M$ produkt, og virker derfor også kun i IE. Koden "align="absbottom" er derfor ikke korrekt eller W3C-valideret.
Skriv istedetfor: valign="bottom"

Points for min tid? Du bestemmer selv hvor meget du ønsker at give mig...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester