How to do this – Simplebits website

@WebJoelMay 18.2007 — #[B] I didn't study how URL-author did theirs, but visually, -here is how I'd do it:

<[B]!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">[/B]

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */

} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */

font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;

font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}

h1{font-size: 1.93em;}

h2{font-size: 1.72em;}

h3{font-size: 1.52em;}

h4{font-size: 1.42em;}

h5{font-size: 1.32em;}

h6{font-size: 1.21em;}

</style>

[B]<style>

#workList {width:230px; border:1px solid silver; padding:6px; margin:10px;}

#workList h1 {font-size:1.5em; margin:4px 0 5px 20px; letter-spacing:0.2em; color:silver;}

#workList a {margin-left:65px;}

#workList p {margin:0 0 2px 65px;}

</style>[/B]

<script type="text/javascript">

</script>

<link rel="shortcut icon" href="favicon.ico">

</head>

<body>

[B]<div id="workList">

<h1>My Worklist:</h1>

<a title="first link" href="#"><img alt="1rst pic" src="#" style="width:30px; height:30px; border:1px solid black; position:absolute; left:20px;" />First Link</a>

<p title="Description:first link">Description:first link</p>

<a title="second link" href="#"><img alt="2nd pic" src="#" style="width:30px; height:30px; border:1px solid black; position:absolute; left:20px;" />Second link</a>

<p title="Description:second link">Description:second link</p>

<a title="third link" href="#"><img alt="3rd pic" src="#" style="width:30px; height:30px; border:1px solid black; position:absolute; left:20px;" />Third link</a>

<p title="Description:third link">Description:third link</p>

</div>[/B]

</body>

</html>[/QUOTE] Some tweaking could make this more 'automatic' for adding new entries. Currently, validates & looks the same from IE6 to Fx.

@ray326May 18.2007 — #It's just a heading (H3) followed by a styled definition list. The DT has the image and one or more DDs contain the text. Here's a snippet. It's classic Cederholm.

[code=html]
 <h3>Our Products</h3>
 <dl class="teaser">
 
  <dt><a href="http://iconshoppe.com/"><img src="/img/iconshoppe-25.gif" alt="icons" height="25" width="25"></a></dt>
  <dd><a href="http://iconshoppe.com">IconShoppe</a></dd>
  <dd>Simple little icons to go.</dd>
 </dl>
 [/code]

How to do this – Simplebits website

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

How to do this – Simplebits website

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴