Avatar billede kkaen Nybegynder
30. september 2010 - 16:53 Der er 6 kommentarer og
1 løsning

Udskrive en netside (det visuelle)

Jeg har genereret en netside ud fra noget css. Denne css opretter nogle "poster" på siden, hvilke jeg viser ovenpå et baggrundsbillede.

Så har jeg lavet en knap gennem javascript, som udskriver den visuelle html-side. Problemet er så, at alle disse "poster" bliver udskrevet neden under billedet på udskriften. Disse "poster" skulle slet ikke udskrives. De bliver godt nok angivet i en <ul> i koden, men de fremkommer IKKE under billedet på den visuelle html-side men derimod inde på nogle forskellige koordinat-pladser ovenover billedet.

Spørgsmålet er så, om man kan undgå at få denne <ul> udskrevet neden under billedet? Evt. via et argument i javascriptkaldet til udskrift-funktionen, som får den visuelle container med i sig?

(jeg har forsøgt en del eksempler fra nettet uden held. Bl.a. hvor navnet på et div blev sendt med til en function, som skulle udskrive et billede)

Her er koden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <title>CSS-test</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <style type="text/css" media="screen">
          body {margin: 0; padding: 0;}
              a {
                  text-decoration: none;
              }
              #page {
                  width: 420px;
              }
              #left {
                  width: 720px;
                  float: left;
              }
              #right {
                  width: 249px;
                  float: left;
              }
              #map {
                  margin:0;
                  padding:0;
                  width:720px;
                  height:720px;
                  font-family:arial, helvetica, sans-serif;
                  font-size:8pt;
              }
              img.top {
                  vertical-align:top;
              )}
              #map li {
                  margin:0;
                  padding:0;
                  list-style:none;
              }
              #map li a {
                  position:absolute;
                  display:block;
                  background:url(blank.gif);
              }
              #map li a span { display:none; }
              #map li a:hover span {
                  position:relative;
                  display:block;
                  width:200px;
                  left:20px;
                  top:20px;
                  padding:5px;
                  border:1px solid #000;
                  background:#fff;
                  text-decoration:none;
                  color:#000;
                  filter:alpha(opacity=80);
                  opacity:0.8;
              }
          #map a.A0{
            top:311px;
            left:424px;
            width:28px;
            height:28px;
          }
      </style>
</head>
<body>
<table border="0"><tr><td style="width:720px">
  <div id="page">
  <div id="left">
      <ul id="map">
<img src="billede.jpg" class="top" />
          <li><a class='A0' href='http://' title='A0'><span>
          <b>s</b><br>
          <strong>Indhold</strong>: <br>
          <strong>Uge</strong>: 1<br>
          <br>
          </span></a></li>
      </ul>
      </div>
      </div>
</td><td style="align:left; valign:top">
      <div id="right">
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form> <input type=button name=print value="Print" onClick="java script:window.print()"></form>');}
</script>
</td></tr></table>
      </div>
  </body>
</html>
Avatar billede keysersoze Ekspert
30. september 2010 - 17:36 #1
lav et style til print - fx

<style type="text/css" media="print">
  ul {display: none;}
</style>
Avatar billede kkaen Nybegynder
30. september 2010 - 20:35 #2
Det ser ud til at virke. Jeg havde nu ellers forsøgt at integrere dén kode i de allerede eksisterende javscript-koder. Men det virkede ikke. Er det fordi, det skal oprettes for sig selv - altså så det ikke kan angives sammen med andre elementers opførsel? Eller er det "media=print, som gør tricket? "media=print"-tricket havde jeg nemlig også prøvet at fumle med - skal dét så stå for sig selv, så det ikke blandes med den resterende kode eller hvad er forklaringen?
Avatar billede kkaen Nybegynder
01. oktober 2010 - 09:13 #3
Det var desværre kun på overfladen, at det virkede. For godt nok forsvinder disse "poster". Men det gør det bagvedliggende billede altså også. Under tidligere kørsler blev billedet udskrevet rigtigt nok.

Jeg overvejede, om det var fordi, at <ul>'en som sagt definerer de "poster", som ligger inde over billedet, var blevet "fjernet". Og det så også på en eller anden måde "fjernede" det underliggende billede. Det eneste jeg har fundet ud af i denne sammenhæng er, at billedet også forsvinder, selvom der ikke er nogle data inde i <ul>'en.

Jeg ved ikke helt, hvordan problemet løses eller hvorfor det opstår...?
Avatar billede kkaen Nybegynder
01. oktober 2010 - 09:25 #4
Ah, brilliant!

Jeg gik et trin længere ind i <ul>, hvor der er et <li>. Der refereres til billedet EFTER <ul> men FØR <li> - og dette løste problemet.

Lægger du lige et svar, keysersoze ?
Avatar billede keysersoze Ekspert
01. oktober 2010 - 09:44 #5
hvorfor det ikke virkede skal jeg ikke kunne sige - det er svært at gætte sig til uden kode, men det er media der er magien i dette tilfælde.

Hvis du som i mit eksempel ikke viser fx ul så vil alt indhold derunder også forsvinde. I øvrigt tror jeg ikke at img er et lovligt tag under ul.
Avatar billede keysersoze Ekspert
01. oktober 2010 - 09:44 #6
svar :)
Avatar billede kkaen Nybegynder
01. oktober 2010 - 11:52 #7
Jeg er heller ikke sikker på IMG-tag'et -> men det virker :-)
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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