Kubiczek devblog » HTML http://blog.kubiczek.eu I'm lovin' it ;) Thu, 19 Jan 2012 12:09:03 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Jak stworzyć element “wystający” z komórki tabeli http://blog.kubiczek.eu/2010/03/jak-stworzyc-elment-wystajacy-z-komorki-tabeli/ http://blog.kubiczek.eu/2010/03/jak-stworzyc-elment-wystajacy-z-komorki-tabeli/#comments Wed, 03 Mar 2010 13:30:51 +0000 Adam Kubiczek http://blog.kubiczek.eu/?p=327 Wyobraźmy sobie, że mamy potrzebę wstawienia do komórki tabeli pewnej treści, która:

1) ma się znaleźć dokładnie w miejscu, gdzie znajduje się interesując nas komórka tabeli
2) nie powinna rozciągać komórki w której się znajduje
3) jednocześnie powinna być widoczna w całości bez zawijania tekstu.

Potrzeba ta nie została wymyślona “z kosmosu”, ale wynikła w faktycznej realizacji pewnego zadania. Jednym z rozwiązań mogłoby być pozycjonowanie za pomocą Javascript elementu <div>, tak aby znalazł się w wskazanym miejscu – ale to dosyć karkołomne. Da się to zrobić za pomocą styli, i to całkiem prosto jak się okazuje:

<table cellspacing="0">
<tr><th>ID</th><th>Nazwa</th><th>Ilość</th><th>Status</th></tr>
<tr>
	<td>1</td>
	<td>Lorem ipsum<br><br>
	<div style="position:absolute;"><div style="position:relative;top:-1em;"><span>Edytuj | Usuń | Ukryj | Przelicz | Rezerwuj | Zwolnij</span>
	</div></div>
	</td>
	<td>50 sztuk</td><td>Dostępny</td>
</tr>
</table>

table

Przedstawiony powyżej efekt można by oczywiście osiągnąć za pomocą dodatkowego wiersza tabeli i rowspan/colspan – jednak, w wspomnianym przypadku, nie było to zalecane, ze względu użycie funkcjonalności drag&drop na wierszach tabeli. :)

Dla porządku cały kod źródłowy przykładowej strony:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
	table {
		width:350px;
		border:1px solid #000000;
		font-size:12px;
	}
 
	th {
		padding:5px;
		background:#777;
		color:#ffffff;
		text-align:left;
	}
 
	td {
		vertical-align:top;
		border-bottom:1px solid #000;
		padding:5px;
	}
 
	span {
		font-size:10px;
		color:#0033bb;
	}
</style>
</head>
<body>
 
<table cellspacing="0">
<tr><th>ID</th><th>Nazwa</th><th>Ilość</th><th>Status</th></tr>
<tr>
	<td>1</td>
	<td>Lorem ipsum<br><br>
	<div style="position:absolute;"><div style="position:relative;top:-1em;"><span>Edytuj | Usuń | Ukryj | Przelicz | Rezerwuj | Zwolnij</span>
	</div></div>
	</td>
	<td>50 sztuk</td><td>Dostępny</td>
</tr>
<tr>
	<td>2</td>
	<td>Doloret Sit Amet<br><br>
	<div style="position:absolute;"><div style="position:relative;top:-1em;"><span>Edytuj | Usuń | Ukryj | Przelicz | Rezerwuj | Zwolnij</span>
	</td>
	<td>25 sztuk</td>
	<td>Zarezerwowany</td>
</tr>
</table>
 
</body>
</html>
]]> http://blog.kubiczek.eu/2010/03/jak-stworzyc-elment-wystajacy-z-komorki-tabeli/feed/ 0 Brak obrazka tła na przyciskach w IE6 http://blog.kubiczek.eu/2008/08/brak-obrazka-tla-na-przyciskach-w-ie6/ http://blog.kubiczek.eu/2008/08/brak-obrazka-tla-na-przyciskach-w-ie6/#comments Tue, 26 Aug 2008 22:10:28 +0000 Adam Kubiczek http://kubiczek.net.pl/?p=26 Problem: przycisk formularza wyświetla się w standardowy sposób, pomimo ustawienia w stylu obrazka dla tła tego przycisku.

Rozwiązanie: w IE nie wystarczy ustawić li tylko styl background-image, ale dodatkowo należy ustawić jakiś kolor tła background-color. Bez tego drugiego, obrazek nie zostaje wyświetlony (IE6, Windows XP SP2). Ot taka kolejna humoreska na temat przeglądarki Internet Explorer.

]]> http://blog.kubiczek.eu/2008/08/brak-obrazka-tla-na-przyciskach-w-ie6/feed/ 0 Trzeci wymiar w CSS? http://blog.kubiczek.eu/2008/08/trzeci-wymiar-w-css/ http://blog.kubiczek.eu/2008/08/trzeci-wymiar-w-css/#comments Tue, 26 Aug 2008 22:06:18 +0000 Adam Kubiczek http://kubiczek.net.pl/?p=19 Taki o to efekt uzyskałem przypadkiem podczas projektowania formularza na jedną ze stron:

Zapewne dla wielu osób nie jest to nadzwyczajnego, ja jednak poczułem się jakbym dostał na urodziny nową zabawkę. Okazuje się, że przeglądarki renderują taki efekt, gdy ustawimy border obiektu o grubości większej niż 1px. Wystarczy teraz dobrać odpowiednie kolory i już możemy się cieszyć wypukłymi lub wklęsłymi obiektami, bez użycia choćby grama grafiki :)

border-top:5px solid #aaaaaa;
border-bottom:5px solid #aaaaaa;
border-left:10px solid #e3e3e3;
border-right:10px solid #f8f8f8;

]]> http://blog.kubiczek.eu/2008/08/trzeci-wymiar-w-css/feed/ 0 Quirks mode aaaa! http://blog.kubiczek.eu/2008/08/quirks-mode-aaaa/ http://blog.kubiczek.eu/2008/08/quirks-mode-aaaa/#comments Tue, 26 Aug 2008 21:20:13 +0000 Adam Kubiczek http://kubiczek.net.pl/?p=5 Niech wszystkie diabli wezmą tego IE6! :)

Czym się różnią poniższe dwa pliki HTML?

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head></head>
<body>
<div style="width:300px;margin:0px auto;background-color:red;">
foo bar();
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head></head>
<body>
<div style="width:300px;margin:0px auto;background-color:red;">
foo bar();
</div>
</body>
</html>

Proponuję sprawdzić jak renderują się one w przeglądarce Internet Explorer. Gdy zdarzy wam się zapomnieć o takich przypadłościach tej najbardziej popularnej przeglądarki, możecie stracić trochę czasu na rozwiązanie potencjalnych problemów :P

Dla leniuchów specjalnie screenshot:

Gdy już sprawdzicie efekt, możecie udać się na stronę microsoftu i trochę poczytać o CSS Enhancements in Internet Explorer 6.

]]> http://blog.kubiczek.eu/2008/08/quirks-mode-aaaa/feed/ 0