mirror of
https://github.com/Pathduck/pathduck.github.io.git
synced 2025-12-29 11:45:20 -05:00
adds
This commit is contained in:
Stian Lund
@@ -22,7 +22,6 @@ a:hover, a:active, a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.noshow {
|
||||
display: none;
|
||||
}
|
||||
16
test/cache/index.html
vendored
Executable file
16
test/cache/index.html
vendored
Executable file
@@ -0,0 +1,16 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Cache Test</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<img width=400 height=225 src="vivaldi.jpg">
|
||||
|
||||
<form method="get" action="touch.php">
|
||||
<p>
|
||||
<input type="submit" value="Touch Image" alt="Touch Image">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
9
test/cache/touch.php
vendored
Executable file
9
test/cache/touch.php
vendored
Executable file
@@ -0,0 +1,9 @@
|
||||
<?php
|
||||
$wd = getcwd();
|
||||
$image = "$wd/vivaldi.jpg";
|
||||
|
||||
ignore_user_abort(true);
|
||||
system("touch $image");
|
||||
header("Location: index.html");
|
||||
|
||||
?>
|
||||
BIN
test/cache/vivaldi.jpg
vendored
Executable file
BIN
test/cache/vivaldi.jpg
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
19
test/db-test.php
Executable file
19
test/db-test.php
Executable file
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
$servername = "";
|
||||
$username = "";
|
||||
$password = "";
|
||||
$database = "";
|
||||
|
||||
$var_mysqli = function_exists('mysqli_connect');
|
||||
var_dump($var_mysqli);
|
||||
|
||||
// Create connection
|
||||
$conn = mysqli_connect($servername, $username, $password, $database);
|
||||
|
||||
// Check connection
|
||||
if (!$conn) {
|
||||
die("Connection failed: " . mysqli_connect_error());
|
||||
}
|
||||
echo "Connected successfully";
|
||||
|
||||
?>
|
||||
BIN
test/float/250px.gif
Executable file
BIN
test/float/250px.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
test/float/300px.gif
Executable file
BIN
test/float/300px.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
test/float/b3tatv.gif
Executable file
BIN
test/float/b3tatv.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
test/float/butterfly.png
Executable file
BIN
test/float/butterfly.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
50
test/float/float.css
Executable file
50
test/float/float.css
Executable file
@@ -0,0 +1,50 @@
|
||||
.content {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* This does not work in FF unless I
|
||||
set the enclosing block width. */
|
||||
.content img {
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.imgpost {
|
||||
display: inline-block;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.imgpost p {
|
||||
width: 200px;
|
||||
max-width: 95%;
|
||||
margin: 0.3em auto;
|
||||
font-size: small;
|
||||
|
||||
}
|
||||
|
||||
.imgfloat {
|
||||
max-width: 95%;
|
||||
margin: 0.25em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.imgfloat p {
|
||||
width: 175px;
|
||||
max-width: 95%;
|
||||
font-size: small;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.picleft {
|
||||
float: left;
|
||||
margin-right: 0.5em;
|
||||
margin-left: 0;
|
||||
}
|
||||
38
test/float/float.html
Executable file
38
test/float/float.html
Executable file
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||||
<head>
|
||||
<title>
|
||||
Floating image test case
|
||||
</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||
<link rel="stylesheet" type="text/css" media="screen, projection" href="float.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<h4>Floated Image</h4>
|
||||
<div class="imgfloat picleft">
|
||||
<img src="b3tatv.gif" alt="[Image Caption]" /><p>[Image Caption]</p>
|
||||
</div>
|
||||
|
||||
<p>Image floated to the left with caption and <code>max-width: 95%</code>, works in Opera 8 and MSIE 6 but not in Firefox,
|
||||
which seems to have problems with the max-width attribute.</p>
|
||||
<p>When the ARPANET was originally created, and for much of its subsequent evolution into the Internet prior to the mass pile-on of the 1990's, access was highly accountable. Every machine on the Internet had a unique Internet Protocol (IP) address, the 32 bit number you usually see written in "dotted quad" form, such as 192.168.114.31. Virtually all machines on the Internet were permanently connected via dedicated leased lines (or on a local network, itself linked to the outside by a leased line). IP addresses were permanently assigned, one per machine, from blocks of contiguous addresses allocated to organisations to whom was delegated the responsibility of assigning addresses within that block. An organisation responsible for an IP address block could, in turn, delegate assignment of addresses within a sub-block to another entity but, in every case, it was possible to determine who was ultimately responsible for an address on the Internet.</p>
|
||||
|
||||
<h4>Images centered with captions below</h4>
|
||||
<p>Inspired by <a href="http://www.alistapart.com/articles/practicalcss">this article</a>, but I wanted to make the images centered,
|
||||
not floated left. This works in Opera 8 but not in MSIE 6 or Firefox as they do not seem to support <code>display: inline-block</code>,
|
||||
also the captions do not align with the images in FF:</p>
|
||||
|
||||
<div class="center">
|
||||
<div class="imgpost"><img src="b3tatv.gif" alt="[Image Caption]" /><p>[Image Caption]</p></div>
|
||||
<div class="imgpost"><img src="b3tatv.gif" alt="[Image Caption]" /><p>[Image Caption]</p></div>
|
||||
<div class="imgpost"><img src="b3tatv.gif" alt="[Image Caption]" /><p>[Quite a bit longer Image Caption]</p></div>
|
||||
<div class="imgpost"><img src="b3tatv.gif" alt="[Image Caption]" /><p>[Image Caption]</p></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
47
test/float/index.html
Normal file
47
test/float/index.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="Author" content="Made by 'tree'">
|
||||
<meta name="GENERATOR" content="$Version: $ tree v1.7.0 (c) 1996 - 2014 by Steve Baker, Thomas Moore, Francesc Rocher, Florian Sesser, Kyosuke Tokoro $">
|
||||
<title>float</title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
BODY { font-family : ariel, monospace, sans-serif; }
|
||||
P { font-weight: normal; font-family : ariel, monospace, sans-serif; color: black; background-color: transparent;}
|
||||
B { font-weight: normal; color: black; background-color: transparent;}
|
||||
A:visited { font-weight : normal; text-decoration : none; background-color : transparent; margin : 0px 0px 0px 0px; padding : 0px 0px 0px 0px; display: inline; }
|
||||
A:link { font-weight : normal; text-decoration : none; margin : 0px 0px 0px 0px; padding : 0px 0px 0px 0px; display: inline; }
|
||||
A:hover { color : #000000; font-weight : normal; text-decoration : underline; background-color : yellow; margin : 0px 0px 0px 0px; padding : 0px 0px 0px 0px; display: inline; }
|
||||
A:active { color : #000000; font-weight: normal; background-color : transparent; margin : 0px 0px 0px 0px; padding : 0px 0px 0px 0px; display: inline; }
|
||||
.VERSION { font-size: small; font-family : arial, sans-serif; }
|
||||
.NORM { color: black; background-color: transparent;}
|
||||
.FIFO { color: purple; background-color: transparent;}
|
||||
.CHAR { color: yellow; background-color: transparent;}
|
||||
.DIR { color: blue; background-color: transparent;}
|
||||
.BLOCK { color: yellow; background-color: transparent;}
|
||||
.LINK { color: aqua; background-color: transparent;}
|
||||
.SOCK { color: fuchsia;background-color: transparent;}
|
||||
.EXEC { color: green; background-color: transparent;}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>float</h1><p>
|
||||
<a class="NORM" href="..">..</a><br>
|
||||
[ 20K Sep 15 2005] <a class="EXEC" href="./250px.gif">250px.gif</a><br>
|
||||
[ 30K Sep 15 2005] <a class="EXEC" href="./300px.gif">300px.gif</a><br>
|
||||
[7.0K Sep 15 2005] <a class="EXEC" href="./b3tatv.gif">b3tatv.gif</a><br>
|
||||
[6.2K Sep 15 2005] <a class="EXEC" href="./butterfly.png">butterfly.png</a><br>
|
||||
[ 629 Sep 16 2005] <a class="EXEC" href="./float.css">float.css</a><br>
|
||||
[2.6K Feb 6 2022] <a class="EXEC" href="./float.html">float.html</a><br>
|
||||
[7.3K Sep 15 2005] <a class="EXEC" href="./opera.html">opera.html</a><br>
|
||||
[7.4K Feb 6 2022] <a class="EXEC" href="./spartanicus.html">spartanicus.html</a><br>
|
||||
<br><br>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
0 directories, 8 files
|
||||
<br><br>
|
||||
</p>
|
||||
</html>
|
||||
96
test/float/opera.html
Executable file
96
test/float/opera.html
Executable file
@@ -0,0 +1,96 @@
|
||||
<!-- --><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
||||
<title>Centered Image Gallery with captions - Spartanicus' Web tips</title>
|
||||
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
|
||||
<link rel="stylesheet" href="css/speech.css" type="text/css" media="aural,speech">
|
||||
<style type="text/css">
|
||||
#gallery{text-align:center}
|
||||
#gallery p{display:inline}
|
||||
#gallery span{margin:0 5px 5px 5px;vertical-align:top;width:172px;display:table-cell;display:inline-table; display: inline-block}
|
||||
#gallery p img{margin-bottom:5px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="head"><span></span>
|
||||
</div>
|
||||
<div id="wrap"><span id="spart"></span>
|
||||
<div id="content">
|
||||
<div id="title"><span></span>
|
||||
<h1>Centered Image Gallery with captions</h1>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Introduction</h2>
|
||||
<p>Centering an image gallery with captions beneath the images that works in most browsers using appropriate markup and <abbr>CSS</abbr> for the presentation is not as straightforward as it should be.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Functional markup</h2>
|
||||
<p>Around each image/caption pair an image gallery should provide spacing in the visual domain, or pauses in the audio domain. This functionality should be provided via an <abbr>HTML</abbr> element who's default properties provide this. Paragraph markup provides the required spacing and/or pause around each image/caption pair, and it's use is semantically appropriate since it marks up the textual alternative for the image and the caption.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Styling</h2>
|
||||
<p>Horizontal alignment and distribution of image & caption pairs requires inline-block behaviour, this is provided by the <abbr>CSS</abbr> 2.0 <code>inline-table</code> or the <abbr>CSS</abbr> 2.1 <code>inline-block</code> display values. One or both is/are supported by <abbr>IE</abbr>5.5+, Opera5+ and <abbr>KHTML</abbr> browsers (Safari, iCab, Konqueror etc.). <abbr>MS</abbr> Internet Explorer first introduced <code>inline-block</code> as a proprietary extension in <abbr>IE</abbr>5.5. Recent Opera's and <abbr>KHTML</abbr> based browsers also support <code>inline-block</code> now that it has been incorporated in the <abbr>CSS</abbr> 2.1 specification. By specifying both values we can cover a fair number of browsers: <code>display:inline-table;display:inline-block</code>.</p>
|
||||
<div class="group">
|
||||
<h3>What about Gecko based browsers?</h3>
|
||||
<p>Firefox, Netscape6+, Mozilla etc. use the Gecko rendering engine which does not support <code>inline-table</code>. Recent Gecko versions have experimental support for inline-block type behaviour via the proprietary <code>-moz-inline-block</code> and <code>-moz-inline-box</code> values, but at the time of writing this support is so buggy that it's unusable for this purpose. Fortunately current Gecko's have a <abbr>CSS</abbr> table bug that can be exploited to achieve inline-block type behaviour, if we specify the following sequence: <code>display:table-cell;display:inline-table;display:inline-block</code>, Gecko based browsers will also play ball.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Vertical alignment</h3>
|
||||
<p>To get captions wider than the image to wrap the inline-blocks have been given an explicit width, inline-block type elements default to "shrink to fit" behaviour. In the demo below, the longer caption on the first image & caption pair demonstrates vertical alignment. Opera defaults to top aligning the image & caption pairs, IE needs a <code>vertical-align:top</code> specified on the spans to fall in line with Opera. Gecko based browsers bottom align the image & caption pairs. I presume that this is due to the fact that we are relying on a Gecko <abbr>CSS</abbr> table bug. I'm not aware of a method to get Gecko to top align.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Demo</h2>
|
||||
<div id="gallery">
|
||||
<p><span><img src="butterfly.png" alt="Butterfly"><br>A Butterfly, A Butterfly, A Butterfly, A Butterfly</span></p>
|
||||
<p><span><img src="butterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
|
||||
<p><span><img src="300px.gif" alt="Butterfly"><br>A Butterfly</span></p>
|
||||
<p><span><img src="butterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
|
||||
<p><span><img src="butterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
|
||||
<p><span><img src="300px.gif" alt="Butterfly"><br>A Butterfly</span></p>
|
||||
<p><span><img src="butterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
|
||||
</div>
|
||||
<p><b>The above demo was tested with:</b></p>
|
||||
<ul>
|
||||
<li>Opera 5.12, 6.04, 7.11, 7.51, 8.01</li>
|
||||
<li><abbr>IE</abbr> 5.5, 6.0</li>
|
||||
<li>Firefox 0.9.2</li>
|
||||
<li>Mozilla 1.5</li>
|
||||
</ul>
|
||||
<p>I am not able to test with <abbr>KHTML</abbr> based browsers (Safari, iCab, Konqueror), but afaik they support <code>inline-table</code> and reasonably recent versions also support <code>inline-block</code>, so it should work in those browsers also.</p>
|
||||
<p><b><abbr>CSS</abbr> code</b></p>
|
||||
<div class="code">
|
||||
<div><code>#gallery{text-align:center}</code></div>
|
||||
<div><code>#gallery p{display:inline}</code></div>
|
||||
<div><code>#gallery span{margin:0 5px 5px 5px; vertical-align:top; width:172px; display:table-cell; display:inline-table; display:inline-block}</code></div>
|
||||
<div><code>#gallery p img{margin-bottom:5px}</code></div>
|
||||
</div>
|
||||
<p><b><abbr>HTML</abbr> code</b></p>
|
||||
<div class="code">
|
||||
<div><code><div id="gallery"></code>
|
||||
<div><code><p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly, A Butterfly, A Butterfly, A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="utterfly.png" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
</div><code></div></code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Footnotes</h2>
|
||||
<p>There are some cross browser differences with regard to the horizontal spacing between the image & caption pairs.</p>
|
||||
<p>For those who want to experiment with the method described above so that it could also be used for elements that default to block level like div, this <a href="http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm">IE block level element inline-block hack</a> may be of interest.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Credits</h2>
|
||||
<p>Thanks to <b>Carl Lindmark</b> who supplied the hack that extended the original code to work in Gecko based browsers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p id="nav"><a href="index.htm">Home</a></p>
|
||||
</body>
|
||||
</html>
|
||||
96
test/float/spartanicus.html
Executable file
96
test/float/spartanicus.html
Executable file
@@ -0,0 +1,96 @@
|
||||
<!-- --><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
||||
<title>Centered Image Gallery with captions - Spartanicus' Web tips</title>
|
||||
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
|
||||
<link rel="stylesheet" href="css/speech.css" type="text/css" media="aural,speech">
|
||||
<style type="text/css">
|
||||
#gallery{text-align:center}
|
||||
#gallery p{display:inline}
|
||||
#gallery span{margin:0 5px 5px 5px;vertical-align:top;width:172px;display:table-cell;display:inline-table}
|
||||
#gallery p img{margin-bottom:5px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="head"><span></span>
|
||||
</div>
|
||||
<div id="wrap"><span id="spart"></span>
|
||||
<div id="content">
|
||||
<div id="title"><span></span>
|
||||
<h1>Centered Image Gallery with captions</h1>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Introduction</h2>
|
||||
<p>Centering an image gallery with captions beneath the images that works in most browsers using appropriate markup and <abbr>CSS</abbr> for the presentation is not as straightforward as it should be.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Functional markup</h2>
|
||||
<p>Around each image/caption pair an image gallery should provide spacing in the visual domain, or pauses in the audio domain. This functionality should be provided via an <abbr>HTML</abbr> element who's default properties provide this. Paragraph markup provides the required spacing and/or pause around each image/caption pair, and it's use is semantically appropriate since it marks up the textual alternative for the image and the caption.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Styling</h2>
|
||||
<p>Horizontal alignment and distribution of image & caption pairs requires inline-block behaviour, this is provided by the <abbr>CSS</abbr> 2.0 <code>inline-table</code> or the <abbr>CSS</abbr> 2.1 <code>inline-block</code> display values. One or both is/are supported by <abbr>IE</abbr>5.5+, Opera5+ and <abbr>KHTML</abbr> browsers (Safari, iCab, Konqueror etc.). <abbr>MS</abbr> Internet Explorer first introduced <code>inline-block</code> as a proprietary extension in <abbr>IE</abbr>5.5. Recent Opera's and <abbr>KHTML</abbr> based browsers also support <code>inline-block</code> now that it has been incorporated in the <abbr>CSS</abbr> 2.1 specification. By specifying both values we can cover a fair number of browsers: <code>display:inline-table;display:inline-block</code>.</p>
|
||||
<div class="group">
|
||||
<h3>What about Gecko based browsers?</h3>
|
||||
<p>Firefox, Netscape6+, Mozilla etc. use the Gecko rendering engine which does not support <code>inline-table</code>. Recent Gecko versions have experimental support for inline-block type behaviour via the proprietary <code>-moz-inline-block</code> and <code>-moz-inline-box</code> values, but at the time of writing this support is so buggy that it's unusable for this purpose. Fortunately current Gecko's have a <abbr>CSS</abbr> table bug that can be exploited to achieve inline-block type behaviour, if we specify the following sequence: <code>display:table-cell;display:inline-table;display:inline-block</code>, Gecko based browsers will also play ball.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Vertical alignment</h3>
|
||||
<p>To get captions wider than the image to wrap the inline-blocks have been given an explicit width, inline-block type elements default to "shrink to fit" behaviour. In the demo below, the longer caption on the first image & caption pair demonstrates vertical alignment. Opera defaults to top aligning the image & caption pairs, IE needs a <code>vertical-align:top</code> specified on the spans to fall in line with Opera. Gecko based browsers bottom align the image & caption pairs. I presume that this is due to the fact that we are relying on a Gecko <abbr>CSS</abbr> table bug. I'm not aware of a method to get Gecko to top align.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Demo</h2>
|
||||
<div id="gallery">
|
||||
<p><span><img src="butterfly.png" alt="Butterfly"><br>A Butterfly, A Butterfly, A Butterfly, A Butterfly</span></p>
|
||||
<p><span><img src="250px.gif" alt="Butterfly"><br>250 Pixels, 250 Pixels, 250 Pixels, 250 Pixels</span></p>
|
||||
<p><span><img src="butterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
|
||||
<p><span><img src="butterfly.png" alt="Butterfly"><br>A Butterfly</span></p>
|
||||
<p><span><img src="300px.gif" alt="Butterfly"><br>300 pixels</span></p>
|
||||
<p><span><img src="b3tatv.gif" alt="Butterfly"><br>A Butterfly</span></p>
|
||||
<p><span><img src="b3tatv.gif" alt="Butterfly"><br>A Butterfly</span></p>
|
||||
</div>
|
||||
<p><b>The above demo was tested with:</b></p>
|
||||
<ul>
|
||||
<li>Opera 5.12, 6.04, 7.11, 7.51, 8.01</li>
|
||||
<li><abbr>IE</abbr> 5.5, 6.0</li>
|
||||
<li>Firefox 0.9.2</li>
|
||||
<li>Mozilla 1.5</li>
|
||||
</ul>
|
||||
<p>I am not able to test with <abbr>KHTML</abbr> based browsers (Safari, iCab, Konqueror), but afaik they support <code>inline-table</code> and reasonably recent versions also support <code>inline-block</code>, so it should work in those browsers also.</p>
|
||||
<p><b><abbr>CSS</abbr> code</b></p>
|
||||
<div class="code">
|
||||
<div><code>#gallery{text-align:center}</code></div>
|
||||
<div><code>#gallery p{display:inline}</code></div>
|
||||
<div><code>#gallery span{margin:0 5px 5px 5px; vertical-align:top; width:172px; display:table-cell; display:inline-table; display:inline-block}</code></div>
|
||||
<div><code>#gallery p img{margin-bottom:5px}</code></div>
|
||||
</div>
|
||||
<p><b><abbr>HTML</abbr> code</b></p>
|
||||
<div class="code">
|
||||
<div><code><div id="gallery"></code>
|
||||
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly, A Butterfly, A Butterfly, A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
<div><code><p><span><img src="b3tatv.gif" width="172" height="122" alt="Butterfly"><br>A Butterfly</span></p></code></div>
|
||||
</div><code></div></code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Footnotes</h2>
|
||||
<p>There are some cross browser differences with regard to the horizontal spacing between the image & caption pairs.</p>
|
||||
<p>For those who want to experiment with the method described above so that it could also be used for elements that default to block level like div, this <a href="http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm">IE block level element inline-block hack</a> may be of interest.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h2>Credits</h2>
|
||||
<p>Thanks to <b>Carl Lindmark</b> who supplied the hack that extended the original code to work in Gecko based browsers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p id="nav"><a href="index.htm">Home</a></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -29,19 +29,23 @@
|
||||
<body>
|
||||
<h1>test</h1><p>
|
||||
<a class="NORM" href="..">..</a><br>
|
||||
[ 0 Oct 7 18:31] <a class="DIR" href="./cache/">cache</a><br>
|
||||
[ 0 Oct 7 18:28] <a class="DIR" href="./float/">float</a><br>
|
||||
[ 0 Jul 9 12:51] <a class="DIR" href="./focus/">focus</a><br>
|
||||
[ 0 Jul 9 12:45] <a class="DIR" href="./js/">js</a><br>
|
||||
[ 0 Jul 9 12:45] <a class="DIR" href="./login/">login</a><br>
|
||||
[ 0 Jul 9 12:45] <a class="DIR" href="./pdf/">pdf</a><br>
|
||||
[ 0 Jul 9 12:45] <a class="DIR" href="./referrer/">referrer</a><br>
|
||||
[ 0 Oct 7 18:00] <a class="DIR" href="./test-links/">test-links</a><br>
|
||||
[ 0 Oct 7 18:29] <a class="DIR" href="./test-links/">test-links</a><br>
|
||||
[ 0 Jul 9 12:45] <a class="DIR" href="./translate/">translate</a><br>
|
||||
[ 0 Oct 7 17:59] <a class="DIR" href="./video-mkv-aac/">video-mkv-aac</a><br>
|
||||
[ 383 Feb 8 2022] <a class="EXEC" href="./db-test.php">db-test.php</a><br>
|
||||
[ 366 Oct 5 23:07] <a class="EXEC" href="./test-favicon.php">test-favicon.php</a><br>
|
||||
<br><br>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
8 directories, 0 files
|
||||
10 directories, 2 files
|
||||
<br><br>
|
||||
</p>
|
||||
</html>
|
||||
|
||||
16
test/test-favicon.php
Executable file
16
test/test-favicon.php
Executable file
@@ -0,0 +1,16 @@
|
||||
<?php
|
||||
header("Cross-Origin-Embedder-Policy: require-corp");
|
||||
header("Cross-Origin-Opener-Policy: same-origin");
|
||||
header("Cross-Origin-Resource-Policy: same-origin");
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML Test Page</title>
|
||||
<link rel="icon" href="https://developer.mozilla.org/favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
Favicon Test Page
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user