demosthenes.info

A blog by Dudley Storey on , , , , , , and anything else that strikes his fancy.

featured articles

popular favourites

Titan
Titan

Saturn's largest moon is unique in several respects: it is the only known satellite in the solar system to have a dense atmosphere (one primarily composed of nitrogen), and the only known to have lakes on its surface (as it is far too cold to support liquid water, these bodies are liquid methane).

Titan was discovered in 1655 by the Dutch astronomer Christiaan Huygens. Today, the moon is considered by many scientists to be a possible habitat for non-terrestrial life. Its atmosphere is similar to that of the early Earth, and the potential of an "underground sea" of liquid water, along with tantalizing chemical imbalances in the atmosphere and crust, suggest that simple life may be present, operating in a methane, rather than water-based, environment.

Iapetus
Iapetus

Iapetus, the third largest moon of Saturn, is fascinating both tonally and morphologically: its stretched shape and equatorial ridge cause it to resemble nothing so much as a walnut, while the extreme difference in albedo between one hemisphere and the other bring to mind an Oreo cookie. It also has a significant crater, Turgis, that is nearly 40% of the moon's diameter, with a rim scarp that towers 15 kilometres high.

Enceladus
Enceladus

Discovered by Fredrick William Herschel in 1789, tiny Enceladus is one of only three known bodies in the outer solar system with active volcanoes, the other two being the moons of Io and Triton. In the case of Enceladus, these are cryovolcanoes: eruptions of water, nitrogen and ammonia, rather than molten rock.

Just 500 kilometres in diameter, Enceladus is far too small to generate its own heat. Instead, its geological activity is mostly likely caused by its orbit around Saturn, with the gas giant constantly pulling and squeezing on the small satellite, warming the interior of the moon.

As a source of water, Enceladus is conjectured to harbour life, while also being the wellspring for the ice crystal content of Saturn's E ring.

Mimas
Mimas

Mimas was discovered by William Hershel, the same year as Enceladus. The most remarkable feature of Mimas is its massive primary impact crater, which from certain angles causes the moon to look very much like the Death Star from Star Wars. The crater, named after its discoverer, is over 130 kilometres across: if a crater of equivalent scale was formed on Earth, it would be wider than Canada.

Mimas is also remarkable for the fact that it is the smallest object in the solar system to have formed into a sphere under the influence of its own self-gravitation.

Content Tabs With :target

“Tab” navigation for a site is easy to create with , and you can use to bring the tab for the current page to prominence (the subject of an upcoming article). More complex is an “in-page” content tab system, where you want to have a series of “slides” stacked on top of each other on a single page, with an arrangement of tabs on top to choose between them. It’s relatively easy to activate the slides when the user hovers over the tab, but changing the slides “on click” is a bit harder to capture. Thankfully, there is a new pseudo-element selector, :target, that can do the work for us.

First, let’s create some basic markup. Let’s say we were going to create a series of slides about some of Saturn’s moons: Titan, Mimas, Enceladus and Iapetus. We’ll follow the basic markup of our simple image gallery example: the names of the moons are clickable definition terms, and our explanation and illustration of each is definition declarations.

  1. <dl id=moons">
  2. <dt><a href="#titan">Titan</a></dt>
  3. <dd id=titan">
  4. <img src="titan.jpg" alt="Titan" title="Titan" />
  5. <p>Saturn's largest moon is unique in several respects.</p>
  6. </dd>
  7. <dt><a href="#iapetus">Iapetus</a></dt>
  8. <dd id=iapetus">
  9. <img src="iapetus.jpg" title="Iapetus" alt="Iapetus" />
  10. <p>Iapetus is the third largest moon of Saturn.</p>
  11. </dd>
  12. </dl>

Note the id’s on each <dd>, and the href links within each <dt>. These go to anchor links, just as we have explored in the past. Next, the associated CSS to produce the basic appearance of the tabs:

  1. dl#moons { position: relative; }
  2. dl#moons dt { display: inline; }
  3. dl#moons dt a { text-decoration: none; }
  4. dl#moons dd { position: absolute; left: 0; background: #000; color: white; margin-left: 0; }
  5. dl#moons dd p { text-align: justify; }
  6. dl#moons dd img { width: 200px; height: 200px; float: right; margin: 20px; }
  7. dd:target { z-index: 10; }

There are a few ways to explain target: you might think of it as the CSS equivalent to the for attribute in forms, except that it is used for everything else. Essentially it makes CSS aware of the relationship between id’s and links to those id’s, so that when links are clicked on we change the style of the target. In this case, we are altering the z-index of the target to an arbitrary number above 1.

I don't know if I am a big fan of the page getting pushed down when the browser targets the has location.

posted by Ian Carson

Dudley StoreyI agree, Ian - while this will work for a short page, in longer pages (as in the blog) the jump-to-location behavior is somewhat annoying. Let me look into a solution...

posted by Dudley Storey

I would love to see a fix for this glitch as I'm not having a lot of luck finding a solution elsewhere. Keep us posted!

posted by lcampbell

web developer guide

featured comment

by JoelB in Goodbye, JQuery Validation: HTML5 Form Errors With CSS3

what i'm reading

A Storm of Swords: A Song of Ice and Fire: Book Three
A Storm of Swords: A Song of Ice and Fire: Book Three

what i'm watching

Californication: The Third Season
Californication: The Third Season

what i'm playing

Mass Effect 3 Collector's Edition
Mass Effect 3 Collector's Edition

what i'm hearing

Dub FX
Dub FX

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.