Keskustelu: Nettisivujen teko: Div tulostettaessa usealle sivulle

xxmss [20.08.2018 01:07:25]

En nyt millään meinaa keksiä ratkaisua tähän. Pitäisi saada .paikka 5000px korkeaksi ja 5000px leveäksi, jotta se tulostuisi kokonaan. Nyt se näkyy Firefoxin esikatselussa keltaisena vain yhden sivun korkuisena ja leveisenä, vaikka korkeuden ja leveyden takia sivuja pitäisi olla enemmän kuin yksi.

Mikä neuvoksi? Kiitos avusta.

<html>
<head><title>Testi</title></head>

<style>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: Arial; vertical-align: baseline; }

html {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#kaaviopohja {
  display: inline-block;
  height: 100%;
}

#kaaviotaulukko {
  display: inline;
  overflow: visible;
  height: 5000px;
}

#kaaviotaulukko .kierros {
  display: inline-block;
  overflow: visible;
  height: 100%;
  background-color: yellow;
}

.paikka {
  display: inline-block;
  height: 5000px;
  width: 5000px;
}

</style>

<body>

<div id="kaaviopohja">
<div id="kaaviotaulukko"><div class="kierros">Kierros<div class="paikka">P</div></div></div>
</div>

</body>
</html>

Osmo [20.08.2018 15:13:34]

Lähestysin ongelmaa yksinkertaistamalla tyylit, esim. muotoon:

body {
  margin: 0;
  background-color: yellow;
  }
.paikka {
  height: 5000px;
  width: 5000px;
  }

Jolla saan kuusi sivua tulostettavaa. Sitten lisäisin muille elementeille tyylejä vain tarpeen mukaan...

Lebe80 [20.08.2018 15:59:00]

Auttaako jos asetat kaaviotaulukolle css-arvon:

/* Keyword values */
page-break-inside: auto;

xxmss [20.08.2018 23:15:12]

Lebe80 kirjoitti:

Auttaako jos asetat kaaviotaulukolle css-arvon:

/* Keyword values */
page-break-inside: auto;

Ei auttanut.

Osmo [21.08.2018 10:37:12]

xxmss kirjoitti:

Lebe80 kirjoitti:

Auttaako jos asetat kaaviotaulukolle css-arvon:

/* Keyword values */
page-break-inside: auto;

Ei auttanut.

Eikä kaikista vähiten siksi, että Firefox on jo sen valmiiksi asettanut :)

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku