SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    73
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

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

    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:
    Code:
    height: 25px; padding-left: 8px; padding-top: 8px;
    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?

    Code HTML4Strict:
    <!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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by semicolon View Post
    Have I got this down to as lean as I can get it without succumbing to tables?
    Oooh baby, you ain't seen nothin' yet.

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

    Code:
    <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:

    Code:
    <!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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    73
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Oooh baby, you ain't seen nothin' yet. Even this is more HTML than you need, strictly speaking:

    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. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by semicolon View Post
    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.
    But you have used CSS in your example.

    What do you think this is?
    Code:
    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. #5
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    73
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay Steve. All I know is . . . Google Sites takes it.

    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.

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

  6. #6
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by semicolon View Post
    I expressly stated I cannot use CSS or any scripting.
    No you didn't—certainly not "expressly", anyway.

    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Basic hosting these days is about the cost of a cup of coffee per month...
    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!"

  9. #9
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    73
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hold your fire men. When did I say this was one of my sites hmm?

    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:

    Thanks guys.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •