logi sisse meist KKK

Mul on loomisel veebirakendus, mis peab sisaldama ülaosas liikumatut bännerit ja all mitu veergu teksti. Veergude arv võib muutuda ja igas veerus on iseseisev tekst. Välja peab see nägema nii nagu järgmine improviseeritud vorm:

veerud

Töötava näidise leiab siit.

Kasutasin veergude loomiseks HTML-tabelit, kuid seisan nüüd probleemi ees, kuidas sundida tabeli lahtreid keritavaks, kui tekst läheb pikemaks kui akna mõõdud, eesmärk oleks see, et tabeli füüsilised mõõdud püsiksid akna mõõtmetes ja igale lahtrile eraldi tekiksid kerimisribad. Hea, kui lahendus jääks CSSi tasemele, vajadusel olen nõus kasutama javascripti.

Lahendus võib peituda järgmiste omadustega mängimisel:

        TABLE {
            height:100%;
            width:100%;
            max-height:100%;
            }
        TD {
            max-height:100%;
            overflow:auto;
        }

Siiani ei ole ma suutnud sellist efekti luua, kogu tabel jääb kangekaelselt ühte tükki ja mõõtmed kasvavad akna kõrgusest välja.

küsitud Mar 27 '12 at 00:29

Teet65's gravatar image

Teet65
175912

edited Mar 27 '12 at 00:50


Pean uue vastuse kirjutama, sest kommentaar on piirangutega.

Kirjutan ise kõik selles vaimus, et tabeleid kujunduseks ei kasutata. Saad seda siiski teha kui paned iga td sisse div-i, millel on kindel kõrgus (ehk siis tabeli kõrgus jääb sisuliselt dünaamiliseks, aga div-ide pealt vaatab ta, et kõrgemaks ma ennast enam ei tee kui neil vaja).

css:

table { position: relative; top: 3em; left: 0; right: 0; }
td div { overflow: auto; min-width: 250px; height: 400px; }

html:

<table><tr>
  <td><div>...</div></td>
  <td><div>...</div></td>
  <td><div>...</div></td>
  <td><div>...</div></td>
</tr></table>

Mul kahjuks endal puudub igasugune kogemus mobiili device-dega. Ja probleem on div-i kõrguse saamisega. Mina ei tea meetodit CSS2-ga (IE-l on mingi expression, aga see pole "päris"). Seega tegin ühe katse JavaScriptiga ja sain käima. Kood on erinevate brauserite pärast suhteliselt jube:

onload = onresize = function () {
  var cssNode, d, height, sheet;
  cssNode = document.getElementById('dynamic');
  d = document;
  height = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight || 800;

  // compatibility
  sheet = cssNode.sheet || cssNode.styleSheet;
  if (!sheet.rules) sheet.rules = sheet.cssRules;
  if (!sheet.deleteRule) sheet.deleteRule = sheet.removeRule;
  if (!sheet.addRule) sheet.addRule =
      function (sel, rule, pos) { this.insertRule(sel + ' { ' + rule + ' } ', pos) }

  if (sheet.rules.length) sheet.deleteRule(0);
  sheet.addRule('td div', 'height: ' + (height - 100) + 'px');
}

Panin kõik kokku ja end dropbox-i kaudu laadisin üles: http://dl.dropbox.com/u/6971378/cols.html

link

vastatud Apr 01 '12 at 16:25

Kaiko%20Kaur's gravatar image

Kaiko Kaur
2307712

edited Jul 14 '12 at 15:45

Ahto%20Truu's gravatar image

Ahto Truu ♦♦
6596711

Vau, täpselt see, mida vaja!

(Apr 01 '12 at 23:36) Teet65

Tabeli kõrguste arvutus on segadust tekitav ja kahtlane (standardid on ka selle koha pealt lahtisi otsi jätvad). Tee div-idega tabeli struktuuri sarnaselt.

<div class="cols"><div>...</div><div>...</div><div>...</div><div>...</div></div>

Ja CSS-i kirjuta:

.cols { top 3em; bottom: 0; position: absolute; left: 0; right: 0; }
.cols > div { float: left; width: 25%; height: 100%; overflow-y: auto; }

Siin võib probleem tekkida ".cols > div" selektoriga kui teed veebi kõigile (vanad IE-d jms). Samuti pead päris palju mängima selle 25% kui tahad bordereid lisada jms.

Muuseas -- minu arust on hea trikk css-s määrata reegel "* {margin: 0; padding: 0; border: 0 none; }". See tähendab, et mitte ühelgi elemendil ei ole määratud mingeid bordereid ja asju. See muidugi eeldab, et pead neid mõnes kohas tagasi hakkama määrama (nagu input element, textarea jt). Samas annab see koheselt tugeva kontrolli paigutuste üle erinevate brauserite puhul ja teeb css-i debugimise lihtsamaks.

link

vastatud Mar 27 '12 at 01:29

Kaiko%20Kaur's gravatar image

Kaiko Kaur
2307712

Kahtlustasingi, et pean DIV-de peale minema, kuigi tahtsin seda nii palju vältida kui võimalik. IE probleemid seda projekti ei puuduta, mul ei ole kellegi ees kohustust teatud brauserite jaoks ühilduvust tagada, peaasi et töötab vastsete arvutibrauserite ja kaasaegsete mobiilibrauseritega.

(Mar 27 '12 at 21:49) Teet65

Väike probleem tekkis: kui akna laius läheb liiga väikeseks (nagu mobiilseadmetel), siis peaks üksteise kõrvale seatud DIV-d olema paremale-vasakule keritavad, kuid sellises olukorras tahavad nad minna üksteise alla. Kuidas saaksin nad sundida püsida üksteise kõrval?

(Apr 01 '12 at 00:46) Teet65

overflow-x: auto; või overflow: auto;

link

vastatud Jul 26 '12 at 14:52

Arvi's gravatar image

Arvi
41113

Sinu vastus
lülita eelvaade

Jälgi seda küsimust

By Email:

Pärast sisselogimist saad tellida muudatuse teavitusi siit

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *kaldkiri* või __kaldkiri__
  • **paks kiri** või __paks kiri__
  • link:[tekst](http://url.com/ "pealkiri")
  • pilt?![alt tekst](/path/img.jpg "pealkiri")
  • nummerdatud nimekiri: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • põhilised HTML märgendid on samuti toetatud

Pinu tööpakkumised

kõik pakkumised »

Küsimuse sildid:

×18
×6
×2
×1

küsitud: Mar 27 '12 at 00:29

nähtud: 3,145 korda

viimati uuendatud: Jul 26 '12 at 14:52

Litsents: Creative Commons Attribution License | Kontakt: info@pinu.ee