RSS

Tag HTML

Jak stworzyć element “wystający” z komórki tabeli

By Adam Kubiczek Filed in Porady i solucje Tagged with , March 3rd, 2010 @ 3:30 pm

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>

Brak obrazka tła na przyciskach w IE6

By Adam Kubiczek Filed in Porady i solucje Tagged with , August 27th, 2008 @ 12:10 am

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.

Trzeci wymiar w CSS?

By Adam Kubiczek Filed in Porady i solucje Tagged with , August 27th, 2008 @ 12:06 am

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;

Quirks mode aaaa!

By Adam Kubiczek Filed in Porady i solucje Tagged with , August 26th, 2008 @ 11:20 pm

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.

Copyright © Kubiczek devblog
I'm lovin' it ;)

Built on Notes Blog Core
Powered by WordPress