ugrás a tartalomhoz

Fennmaradó helyet kitöltő div

Joó Ádám · 2006. Feb. 2. (Cs), 14.45
Fejlécet szeretnék készíteni. Az egyszerűség kedvéért leírom a táblázatos kódot, amit szeretnék kiváltani css-el.

<table>
<tr>
<td height=100 width=800 background=valami.gif></td>
<td height=100 width=100% background=sorminta.gif></td>
</tr>
</table>

Ezzel a megoldással, ha a "sorminta" illeszkedik a "valami"-hez, akkor felbontáshoz alkalmazkodó fejlécem lesz.

Hogyan tudnám ezt css-ben megvalósítani?
‹ CSS color és background-color egyszerre kell? H1 tag tartalmának cseréje képre CSS-el ›
 ■
1

CSS...

janoszen · 2006. Feb. 2. (Cs), 17.06
Üdv!

Nem értem, hogy ennek a fenti képnek mit kellene csinálnia. Talán egyszerűbb lenne, ha belinkelnél egy képet, hogy hogy szeretnéd a végén látni.
2

HTML + CSS

Poetro · 2006. Feb. 2. (Cs), 17.20

<table class="mytable">
<tr>
<td class="valami"></td>
<td class="sorminta"></td>
</tr>
</table>


.mytable .valami {
  background-image: url(valami.gif);
  width: 800px;
  height: 100px;
}
.mytable .sorminta {
  background-image: url(sorminta.gif);  
  height: 100px;
}
/* ha teljes szélességű tábla kell: */
.mytable {
  width: 100%;
}
--------
Poetro
3

tableless

Anonymous · 2006. Feb. 2. (Cs), 17.23
gondolom, ha "Fennmaradó helyet kitöltő div" a téma címe, akkor táblázatmentes megoldásra vágyik Ceriak. persze ezt nem közölte, de szerintem az a kérdés, hogy a táblázatos formát hogyan tudja kiváltani css-sel formázott divekkel.

gex
4

<Nincs cím>

Joó Ádám · 2006. Feb. 2. (Cs), 17.29
Igen, elnézést, ez lemaradt. Tehát az lenne a cél, hogy tableless valósítsam meg.

Ha nem teljesen tiszta, akkor itt van élesben, táblázattal: http://www.rpg.hu
A forrást megnézve, látszik, hogy a fejléc jobb oldala egy cella, aminek a háttere egy vékony kis gif, a szélessége pedig 50%-ra van állítva. Ezzel a fejléc szélessége alkalmazkodik az ablakmérethez/felbontáshoz.

Persze, lehet, hogy egyszerű a megoldás és csak én nem tudok még eléggé elvonatkoztatni gondolatban a táblázatosságtól...
6

példa

Anonymous · 2006. Feb. 2. (Cs), 17.44
css:

div#header {
  background: red;
  width: 200px;
  height: 50px;
  float: left;
}
div#design {
  background: green;
  height: 50px;
}
html:

<div id="header">akármi</div><div id="design"></div>
ez egyébként tényleg túl "táblázatos elgondolás". :] inkább a header divnek add meg a hátteret, és abba rakd bele a képet vagy képként vagy valaminek a háttereként. pl az általad említett lapon a fejléc divnek adnám meg az ismétlődő hátteret, és egy abban elhelyezett a, h1 elemnek adnám meg hátterül a felirat képet.
még elegánsabb megoldás lenne (szigorúan szerintem), hogy egy h1 elemnek adnék ismétlődő hátteret, és az abban lévő a elemnek /ami mondjuk a főoldalra mutat/ Gilder/Levin módszerrel eltakarnám a szövegét a másik képpel. ha esetleg megtetszik ez a megoldás, segítünk. ;]

http://www.mezzoblue.com/tests/revised-image-replacement/

gex
5

akkor átstruktúrálva

Poetro · 2006. Feb. 2. (Cs), 17.38

<div class="mytable">
  <div class="sorminta">
    <div class="valami">tartalom</div>
  </div>
</div>


.mytable .valami {
  background-image: url(valami.gif);
  width: 800px;
  height: 100px;
}
.mytable .sorminta {
  background-image: url(sorminta.gif);  
  height: 100px;
}
Elméletileg ez pont azt csinálja, mondjuk nem próbáltam ki.
--------
Poetro
7

ready

Joó Ádám · 2006. Feb. 2. (Cs), 17.53
Tökéletes, köszönöm.