Easy question: Can I trim/simplify this basic navigation sidebar code?

HTML & CSS
1

This is a basic Google Site and by design their Sidebars have disabled CSS and Javascript. Nonetheless, in keeping with my diligent efforts to code tableless designs, I’ve got the little tableless navigation sidebar that follows. What I’m trying to ascertain is if there is a tableless/CSS-less/script-less way to define those properties of the actual anchor boxes that fall below the heading that are universal, namely:

[B]height: 25px; padding-left: 8px; padding-top: 8px;[/B]

In other words, only two properties — the text color of the link, and the cell’s Background color — differ for each row (Height, Font, Padding are the same). I noodled around with this in different ways trying to get the height etc. properties into one container, from which the following containers would inherit its dimensions, but couldn’t get it to work.

Have I got this down to as lean as I can get it without succumbing to tables? :eyes: :smiley:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SIDEBAR TEST</title>
</head>

<body>

<div style="width: 180px; border: 3px solid #000000; text-align: left;">

<span style="color: #E2E2D8; font-size: 24px; font-family: LUCIDA CONSOLE; font-weight: bold;">
<div style="height: 34px; background-color: #92836E; padding-left: 8px; padding-top: 8px; border-bottom: 3px solid #000000;">
SITE INDEX
</div>
</span>

	<span style="font-size: 14px; font-family: VERDANA; font-weight: bold;">

<div style="color: #000000; background-color: #B2B0B1; height: 25px; padding-left: 8px; padding-top: 8px;">
ROW 1
</div>

<div style="color: #00FF00; background-color: #FEFDDE; height: 25px; padding-left: 8px; padding-top: 8px;">
ROW 2
</div>

<div style="color: #FE0000; background-color: #FDE0CE; height: 25px; padding-left: 8px; padding-top: 8px;">
ROW 3
</div>

<div style="color: #0000FE; background-color: #C1A2B2; height: 25px; padding-left: 8px; padding-top: 8px;">
ROW 4
</div>

	</span>

</div>

<br>
</body>
</html>
2

Oooh baby, you ain’t seen nothin’ yet. :smiley:

Even this is more HTML than you need, strictly speaking:

<div class="aside">
  <h2>SITE INDEX</h2>
  <ul>
    <li class="first">ROW 1</li>
    <li class="second">ROW 2</li>
    <li class="third">ROW 3</li>
    <li class="fourth">ROW 4</li>
  </ul>
</div>

Here is a full test page, with CSS added:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SIDEBAR TEST</title>
	
<style type="text/css" media="all">
body {font:100%/1.8 verdana, sans-serif;}
h2, ul {margin:0; padding:0;}
.aside {width: 180px; border: 3px solid #000;}
h2 {font-family: "lucida console", sans-serif; text-align: center; color: #e2e2d8; border-bottom: 3px solid #000; background: #92836e;}
ul {list-style: none;}
li {font-weight: bold; line-height: 2.3; font-size: 0.875em; padding-left: 10px; }
.first {background:#b2b0b1; color: black;}
.second {background:#fefdde; color: #89ff00;}
.third {background:#fde0ce; color: red;}
.fourth {background:#c1a2b2; color: blue;}
</style>
	
</head>

<body>

<div class="aside">
  <h2>SITE INDEX</h2>
  <ul>
    <li class="first">ROW 1</li>
    <li class="second">ROW 2</li>
    <li class="third">ROW 3</li>
    <li class="fourth">ROW 4</li>
  </ul>
</div>

</body>
</html>

I don’t really like using all those classes on the LIs, but it’s not outrageous, given all the different colors. Both the CSS and HTML could be leaner still, using more advanced CSS, but that’s a decent start. :slight_smile:

3

:nono:
You’ve given me a CSS stylesheet when I expressly stated I cannot use CSS or any scripting. This is as painful for you as it is for me but when I say basic HTML, I mean STUPID BASIC HTML. No CSS. No Scripting. None. Zip. Nada.

The use of <H2>, LIST or BULLET tags is an option, but not for this particular little project — so thank you, but no to that, as well. I need complete control over the placement of the anchors, their indentation, their vertical margins etc.

We’re talking Stone Age HTML brother. It won’t be the end of the world if this is the leanest I can get this down to, but I would like reassurance that I’ve exhausted every other option.

4

But you have used CSS in your example.

What do you think this is?

style="color: #000000; background-color: #B2B0B1; height: 25px; padding-left: 8px; padding-top: 8px;"

It’s CSS. It may be inline rather than embedded or external, but it’s still CSS.

5

Okay Steve. All I know is . . . Google Sites takes it. :eye:

But now you’ve got me curious. If I can pull off these features inline, I wonder what else I could trick Google out of heh he. :lol:

Hmmm, I can see I’ll have to brush up on my “inline” . . . very juicy possibilities here. Thanks Steve.

6

The key question then becomes, will Google Sites take your CSS in the <head> section of a page, even though it won’t let you use an external CSS file?

7

No you didn’t—certainly not “expressly”, anyway. :stuck_out_tongue:

If Google Sites forces you to use such inefficient and invalid code, then it doesn’t deserve to be on the web. For example, you can’t have a div inside a span.

I don’t mean this as an attack on you at all (I don’t like to do that), but I would strongly suggest getting a proper service. Basic hosting these days is about the cost of a cup of coffee per month, so I don’t think saving that much warrants being forced to work with such poor code.

8

Even better than “basic.” For a measly $5 a month, my host lets you host one domain (registration not included in the price, of course), with unlimited disk space, unlimited bandwidth, a massive, well-run data center, 24x7 support, all sorts of quick-install software, etc., etc. There really is no reason to settle for “lousy!” :nono:

9

Hold your fire men. When did I say this was one of my sites hmm? :wink:

Apologies to Ralph.

And to answer EarlyOut . . . No, they won’t. Their workaround is to suffer you to create something called a “gadget” (which can be CSS or script) and then rudely shove it into your page but oh wait wait, didn’t I tell you? They don’t allow Gadgets in their sidebars. I believe this expresses my opinion of Google Sites: :x

Thanks guys.