Forum PHP.pl > Emulacja pewnego zachowania tabelek

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Emulacja pewnego zachowania tabelek

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

paziek

15.06.2009, 16:52:59

Witam,

Chciałbym podzielić stronę na dwie części - lewa zajmowałaby minimum miejsca, a prawa całą resztę - tak jak w kodzie poniżej.
Niestety, wiem jak to zrobić jedynie używając tabelek. Da się jakoś w CSS? Może jakieś magiczne floaty, in-line itp.?
Chciałbym zaznaczyć, że NIE musi to działać w jakimkolwiek IE, aczkolwiek Firefox (Gecko), Opera (Presto), Chrome (Webkit) w najnowszych finalnych wydaniach powinny.

[XML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
      <title>bez nazwy</title>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
 
<body>
<div style="display:inline-block; background-color:red;">Lewe</div>
<div style="display:inline-block; background-color:blue;">Prawe</div>
<table width="100%">
      <tr>
            <td style="background-color:red;" width="1">LeweLeweLewe</td>
            <td style="background-color:blue;">PrawePrawePrawePrawePrawePrawePrawePrawePrawePrawePrawePrawePrawePraw</td>
      </tr>
</table>
</body>
</html>
[XML] pobierz, plaintext

ps. Bez używania JS. Tak akurat potrafię

Z góry dziękuję!

erix

15.06.2009, 16:56:32

Po co tabelki?

[HTML] pobierz, plaintext 
<div id="twojStary">
<div id="twoj">asd</div>
<div id="stary">ddd</div>
</div>
[HTML] pobierz, plaintext

Kod

#twojStary
{ display: table; width: 100%; }

#twoj
{ display: table-cell; width: 10%; }

#stary
{ display: table-cell; }

paziek

15.06.2009, 17:09:53

Cytat(erix @ 15.06.2009, 17:56:32 )

Po co tabelki?

[HTML] pobierz, plaintext 
<div id="twojStary">
<div id="twoj">asd</div>
<div id="stary">ddd</div>
</div>
[HTML] pobierz, plaintext

Kod

#twojStary
{ display: table; width: 100%; }

#twoj
{ display: table-cell; width: 10%; }

#stary
{ display: table-cell; }

Też tabelki, ale w sumie mnie urządza jeśli w CSS

Dzięki

ps. zamiast width: 10%; to należy dać width: 1px;

erix

15.06.2009, 17:20:36

Cytat

ps. zamiast width: 10%; to należy dać width: 1px;

Zależy, ile chcesz.

Cytat

Też tabelki, ale w sumie mnie urządza jeśli w CSS

Pod względem wyświetlania - tabelki, ale semantycznie już nie. [;

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.