ugrás a tartalomhoz

Három oszlopos táblázat alapú layout probléma IE 6-ban

Gully Foyle · 2007. Már. 28. (Sze), 08.06
Sziasztok!


Tudtok megoldást arra, hogy ez miért nem működik?
<table width=600 border="1" cellpadding="0" cellspacing="0" align=center>
	<tr>
		<td width=18 height=40><img src="images/spacer.gif" width="1" height="1" alt="" /></td>
		<td rowspan=3>TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br />TESZT<br /></td>
		<td width=18 height=40><img src="images/spacer.gif" width="1" height="1" alt="" /></td>
	</tr>
	<tr>
		<td width=18><img src="images/spacer.gif" width="1" height="1" alt="" /></td>
		<td width=18><img src="images/spacer.gif" width="1" height="1" alt="" /></td>
	</tr>
	<tr>
		<td width=18 height=40><img src="images/spacer.gif" width="1" height="1" alt="" /></td>
		<td width=18 height=40><img src="images/spacer.gif" width="1" height="1" alt="" /></td>
	</tr>
</table>
Azt szeretném, ha a táblázat középső cellája 3 sornyi lenne, és a széleken lévő, alsó és felső cellák magassága fix lenne, csak a középső magassága változna a tartalom függvényében dinamikusan. Talán nem a legjobb a megfogalmazás, de ha ránéztek a kódra, érteni fogjátok, hogy mire is gondoltam. FF alatt működik, ahogy kell, vagy legalábbis, ahogy szeretném. Mi a megoldás, esetleg CSS?
‹ transparens png iframe-ben (ie6 bug) div miatt ne legyen gördítő sáv ›
 ■
1

Jajj

Bártházi András · 2007. Már. 28. (Sze), 09.22
Hahó, 2007 van! Mi ez a spacer.gif? Hihetetlen. Jajj. Jujj. Hol láttál/tanultál ilyet? Dobd ki, égesd el, soha többé ne menj oda, felejts el, töröld ki emlékeid közül.
[...]
<body><div id="main">
<div class="sidebar" id="sidebar-left">bal oldal</div>
<div id="content">közép</div>
<div class="sidebar" id="sidebar-right">jobb oldal</div>
</div></body>
[...]
body {
  text-align: center;
  margin: 0;
  padding: 0;
}
#main {
  width: 600px;
  margin: 0 auto;
  text-align: left;
}
#main .sidebar,
#main #content {
  float: left;
}
#main .sidebar {
  width: 18px;
  height: 40px;
}
#main #content {
  width: 564px;
}
Azt hiszem nem maradt ki semmi, nem teszteltem. Megkockáztatom, hogy még csak nem is erre van szükséged, el nem tudom képzelni mit akarsz azzal a 18x40 pixel nagyságú dobozokkal.
2

ez így nem működik

Gully Foyle · 2007. Már. 28. (Sze), 10.19
Köszönöm a választ. Örömmel tanulok, és örömmel elfelejteném a spacer.gif-et és a táblázatokat, ha tudnál olyan megoldást ajánlani, ami működik.

Ez természetesen csak egy példa. A következőről van szó: a most készülő honlapom felépítése ilyesmi lesz.

Jobb híján így tudom felvázolni:

bal oldal:___________tartalom:___________________jobb oldal:

1. grafikai elem______szöveges+egyéb tartalom____grafikai elem
2. pattern__________folytatódik a tartalom..._______pattern
3. grafikai elem______folytatódik a tartalom..._______grafikai elem

+ ami itt lényegtelen: ezek fölött fejléc, alattuk lábléc

A lényeg, hogy a grafikai elemek fix méretűek, és a pattern-t tartalmazó résznek kellene dinamikusan változnia függőlegesen, a középső rész tartalmának a függvényében.

Ha tudsz valamilyen megoldást, akkor várom, mert nagyon sokat segítenél!
3

Ötlet

PogiG · 2007. Már. 29. (Cs), 07.53
Nézzd meg ezt:

http://www.dynamicdrive.com/style/layouts/

hátha találsz megfelelőt.
4

Ne 2D-ben hanem 3D-ben gondolkodj!

Jano · 2007. Már. 29. (Cs), 10.53
Próbáld meg átállítani az agyadat arra, hogy ne 2D-ben gondolkodja, hanem 3-ban! Ez azt jelenti, hogy használd ki, hogy a HTML elemek valójába egymásba vannak ágyazva, és ilyenkor a belső feljebb van mint a befoglaló eleme. Mintha fóliák lennének. Ezeknek a fólia daraboknak adunk hátteret. Minden olyan grafikai elem ami a dizájn része a CSS háttér tulajdonságának segítségével kerül be az oldalba! Tehát ha ismétlődő rész kell jobb és baloldalon, akkor készíts egy olyan képet amin rajta van mind a kettő, és tedd ezt be az oszlopokat magába foglaló elemednek. Ekkor ez ismétlődni fog szépen a háttérben, az elemeid pedig efelett fognak megjelenni. Stb,stb.

Tedd fel firefox-ot, tedd fel firebug-ot es analízálj vele CSS-sel készült oldalakat. Rá fogsz jönni a logikájára!