Eli, onko mitään mahdollisuutta saada kaksi div -laatikkoa olemaan aina saman kokoisia?
Sivuilleni tulee navigaatio, joka saisi olla aina saman kokoinen kuin sivun laatikko, joka tietenkin riippuu tekstin määrästä.
Eli CSS:llä luultavimmin.
tyyli.css
blaa
blaa
blaa
.laatikko{
width: 50px;
}
blaa
blaa
blaasivu.html
blöö blöö blöö <div laatikko> tässä meillä on poksi </div> blöö blöö jotenkin näin se meni tai sitten halusit tietää, että mitenkä saat toisen laatikon "venymään" toisen mukana ja siihen minen tiejä vastausta.
Tarkoitin juuri sitä, että se venyy sen toisen kanssa (Aina saman kokoisia)
Kiitos kumminkin.
div.laatikko { width : 50px; }
<div class="laatikko">...</div>div#laatikko { width : 50px; }
<div id="laatikko">...</div>P.S. En löytänyt W3.orgista mitään tietoa "laatikko":sta.
Divit oletuksena venyvät ympäröivän objektin kokoon, mutta muuta ratkaisua tuohon tuskin on. Diveillä on ylipäänsä ikävän vaikeaa tehdä leveydeltään tekstin mukaan muuttuvia layoutteja, vastaavasti kuin tableilla on aika vaikeaa tehdä sellaisia, jotka eivät muutu.
No selvä kiitos silti.
Voisiko *periaatteessa* olla mahdollista laskea laatikon A rivimäärä ja vastaavasti luoda yhtä monta tyhjää riviä laatikko B:n?
Jos laatikot olisivat taulukon sisällä ja venytettävän divin sisään saataisiin jonkinlaisella "alidivillä" luotua ylimääräinen yhden pixelin levyinen alue johon tulostetaan ne "tyhjät rivit"?
<div style="float: left; border: 1px solid black;"> Valikko </div> <div style="float: left border: 1px solid black; margin-left: 10px;"> <p>Tekstiä tekstiä...</p> <p>Tekstiä tekstiä...</p> <p>Tekstiä tekstiä...</p> <p>Tekstiä tekstiä...</p> </div> <div style="clear: both;" />
Toimisko tämä?
Edit: tagi
Jos tahtoo tukea standardeja, mutta käyttää silti taulukkojen venyvää toimivuutta ja tukea myös Internet Explorereita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Testisivu</title>
<style type="text/css">
* { margin : 0; padding : 0; }
body { display : table; }
#document { border-collapse : collapse; display : table-row; }
#menu,#content { color : #FFF; display : table-cell; padding : 5px; vertical-align : top; }
#menu { background : #000080; }
#content { background : #008000; }
</style>
</head>
<body>
<!--[if lt IE 8]><table id="document"><tr><td id="menu"><![endif]-->
<!--[if gt IE 7]>--><div id="document"><div id="menu"><!--<![endif]-->
<p>Valikko tähän</p>
<!--[if lt IE 8]></td><td id="content"><![endif]-->
<!--[if gt IE 7]>--></div><div id="content"><!--<![endif]-->
<h1>Kappas kummaa</h1>
<p>Pitää täyttää tätä vähän jollakin, että näkee korkeuksissa joitakin eroja.</p>
<!--[if lt IE 8]></td></tr></table><![endif]-->
<!--[if gt IE 7]>--></div></div><!--<![endif]-->
</body>
</html>Koodi olettaa, että Internet Explorer 8 tajuaisi vihdoin viimein display : table; -tyylit.
Tämä taas toimii kaikkien selaimien uusimmilla versioilla ja ei käytä hyväkseen ehdollisia kommentteja:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Testisivu</title>
<style type="text/css">
* { margin : 0; padding : 0; }
body { padding : 10px; }
#document { overflow : hidden; position : relative; }
#menu,#content { color : #FFF; padding : 5px; }
#menu { background : #000080; height : 100%; position : absolute; width : 190px; }
#content { background : #008000; padding-left : 205px; }
</style>
</head>
<body>
<div id="document">
<div id="menu">
<p>Valikko tähän</p>
</div>
<div id="content">
<h1>Kappas kummaa</h1>
<p>Pitää täyttää tätä vähän jollakin, että näkee korkeuksissa joitakin eroja.</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
</div>
</div>
</body>
</html>Toimii testatusti IE7, Firefox ja Opera 9, mutta ei IE6, Opera 8 ja 7. Laitoin vähän skrollivaraa tähän, jotta näkee että toinen elementti tosiaan venyy korkeussuunnassa.
overflow : hidden; piilottaa valikon ylimenevän paddingin, jos sen ottaa pois niin huomaa että valikko itseasiassa jatkaa vielä matkaansa vähän pidemmällekin.
Aihe on jo aika vanha, joten et voi enää vastata siihen.