Eli tässä on tekeillä olevat sivuni (Älkää välittäkö vieraskirjasta, nuo oli testausta varten)
http://quirzo.arkku.net/tMp/vieraskirja/
Onko mitään simppeliä mahdollisuutta venyttää tuota valikkoa sivun kokoiseksi.
Toimiiko se, että alla olisi div ja noiden height olisi 100%?
En ole kokeillut vielä, tuli vasta äsken mieleen.
Kiitos!
Tarvitsen nyt myös apua siinä, että miten saan estettyä tuon liian pitkän viestin ylimenemisen?
Eli siis toiseksi ylin viesti menee liian leveäksi.
Apua?
Kokeileppa katkoa tekstiä tulostettaessa (php-versio): https://www.php.net/manual/fi/function.wordwrap.
Aiheesta on muistaakseni ollut aikaisempaakin keskustelua joten kokeileppa jos löytäisit ne putkan haun avulla.
Kiitos sillähän se onnistu.
Muuten, miten saan tuon viestikentän koko tr:n leveydelle?
Nyt sitä ei saa ton levemmäksi (Eli tuo päivämäärä -td estää sen)
<td colspan='2'>viesti</td>
Kiitos paljon!!
kasetti kirjoitti:
Kokeileppa katkoa tekstiä tulostettaessa (php-versio): https://www.php.net/manual/fi/function.wordwrap.
php Aiheesta on muistaakseni ollut aikaisempaakin keskustelua joten kokeileppa jos löytäisit ne putkan haun avulla.
Itse näkisin paremmaksi käyttää css:n overflowia.
Jos wrappaat yhden ylimääräisen divin Navigaation ja Sivun ympärille, niin voit käyttää seuraavaa tyyliä...
#Taulu {
display : table;
}
.Navigaatio {
display : table-cell;
}
.Sivu {
display : table-cell;
}Mutta ei toimi sitten Internet Explorerissa.
Vaihtoehto B:
#Taulu {
position : relative;
}
.Navigaatio {
height : 100%;
}Varauksin toimii myös IE:ssä, ja ainakin myös vähän vanhemmat Operat nikottelee.
Muitakin vaihtoehtoja on. Esimerkiksi semmoinenkin onnistuu, että .Navigaation alaosan heittää absoluuttisesti ihan alas (bottomillilla) ja laittaa #Taulun taustakuvaksi tai -väriksi sen tarpeellisen Navigaation taustavärin. Lisäksi tarvitaan tuo position : relative;. Tämä luo illuusion siitä, että Navigaatio jatkuisi koko matkalta.
Hätätapauksessa onnistuu myös JavaScriptillä. Joskus tein luokan, joka asettaa elementeille saman korkeuden kuin parametrina annettavan elementtitaulukon korkein elementti. Ei hirveän kattavasti testattua koodia, mutta here goes:
var UniformHeightAdjuster = Class.create();
UniformHeightAdjuster.prototype =
{
initialize: function (opts)
{
this._opts =
{
elements: []
};
Object.extend(this._opts, opts || {});
$(this._opts.elements);
this._adjust();
},
_adjust: function ()
{
var els = this._opts.elements;
var elCount = els.size();
var maxHeight = this._getMaximumHeight();
els.each(function (el)
{
el.style.minHeight = maxHeight + 'px';
// a hack for ie, because it doesn't understand min-height
if (el.offsetHeight < maxHeight)
el.style.height = maxHeight + 'px';
});
},
_getMaximumHeight: function ()
{
var els = this._opts.elements;
var elCount = els.size();
var maxHeight = 0;
els.each(function (el)
{
var height = el.offsetHeight;
if (height > maxHeight)
maxHeight = height;
});
return maxHeight;
}
};Kyseinen luokka vaatii Prototype-kirjaston toimiakseen, mutta äkkiäkö tuosta vääntää siitä riippumattoman version. Toimintatapa jotakuinkin seuraava:
...
<body>
<div id='navigation'>foobar</div>
<div id='content'>lorem ipsum</div>
</body>
<script type='text/javascript'>
new UniformHeightAdjuster([$('navigation'), $('content')]);
</script>Taitaa toimia myös pelkällä elementin id:llä, sillä tuolla konstruktorissa peritään nuo Element-luokan ominaisuudet (minkä tuo $-funktio siis tekee). Mutta tietty parempi on homma tehdä ilman JS:ää. Itsekin käytän lähes aina tuota Merrin mainitsemaa taustakuvakikkaa. En ihan noin kuten Merri sen kuvasi, mutta idea on sama.
Lyhyemmälläkin ja kevyemmin juoksevalla koodilla selviää:
<div id="main"> <div> <p>One</p> <p>One</p> <p>One</p> <p>One</p> <p>One</p> <p>One</p> <p>One</p> </div> <div id="content"> <h2>Two</h2> </div> <div> <p>Three</p> <p>Three</p> <p>Three</p> <p>Three</p> </div> </div>
<script type="text/javascript"><!-- <![CDATA[
function column_resize() {
var main = document.getElementById('main');
var columns = main.getElementsByTagName('div');
for(var i = 0, maxi = columns.length; i < maxi; i++) {
columns[i].style.height = (main.offsetHeight - 2);
}
}
window.onload = function() {
var main = document.getElementById('main');
if(main) {
var columns = main.getElementsByTagName('div');
if(columns.length) {
document.body.onresize = column_resize();
column_resize();
}
}
}
//]]> --></script>Tosin käytän tuota koodia yhdessä esimerkissä vain IE:n kohdalla, joka nojaa juurikin tuohon ensimmäiseen taulukkocss:ää käyttävään esimerkkiini.
Juu, tokihan tuo onnistuu helpommin ja nopeammin kyseiseen ongelmaan spesifioidulla koodinpätkällä, selvähän tuo :)
En saanut tuota Merrin table -esimerkkiä toimimaan.
Mitä mieltä olette nykyisestä? Siinä on nämä rullajutut.
Pidän tuona tai laitan sen vanhan. Mutta haluan ulkopuolisten mielipiteitä =)
Aihe on jo aika vanha, joten et voi enää vastata siihen.