HTML5/CSS3/advancedJavascript learning and programming logs - Page 3 - Computer Technical Help

Two Plus Two Forums Other Topics Computer and Technical Help

HTML5/CSS3/advancedJavascript learning and programming logs

Post Reply Subscribe

...

Page 3 of 12

1 2 3 4 5 6 7 8

Page 3 of 12

1 2 3 4 5 6 7 8

05-05-2011 , 02:33 PM

#51

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

TL;DR: You are safe to use the boilerplate's order of tags.

This wouldn't be a 2+2er who created this, would it?

Quote

$25m Guaranteed WPM on CoinPoker

Join the action now

Daily Rewards • Splash Pots • CoinRaces

05-05-2011 , 09:35 PM

#52

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Wow, thanks for that project, Shoe Lace!

I learned a ton of valuable stuff. There was a few bug problems I had, so that took a bit of time to fix. My understanding isn't very clear on everything yet, but this is what I came up with:

main code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> some page </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

// Eric Meyer CSS reset
<link rel="stylesheet" href="cssreset.css" />

<link rel="stylesheet" href="screen.css" media="Screen" />

<link rel="stylesheet" href="smallScreen.css" media="screen and (max-device-width:480px)" />

<link rel="stylesheet" href="mobile.css" media="handheld" />

</style>
</head>

<body>

<header>
<h1> Welcome to the site </h1>
</header>

<nav>
<hgroup>
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</nav>

<article>
<hgroup>
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</article>

<div>
<hgroup>
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</div>

<section>
<hgroup> 
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</section>

<article>
<hgroup>
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</article>

<div>
<hgroup>
    <h1> Hello </h1>
    <h2> Thank you for viewing </h2>
</hgroup>
    <p> Site under construction </p>
</div>

</body>
</html>

screen.css:

Code:

body
{
width: 960px;
background-color: black;
}

h1
{
font-size: 32px;
}

h2
{
font-size: 24px;
}

header
{
height: 50px;
width: auto;
background-color: green;
margin: 10px
}

section, nav, div, article
{
width: 290px;
height: 125px;
background-color: blue;
color: white;
margin: 10px;
float: left;
padding: 3px;
}

smallScreen.css:

Code:

body
{ 
width: 470px;
background-color: black;
}

h1
{
font-size: 95px;
padding: 10px;
}

h2
{
font-size: 60px;
padding: 10px;
}

p
{
font-size: 40px;
padding: 10px;
}

header
{
height: 300px;
width: 470px;
background-color: green;
}

section, nav, div, article
{
height: auto;
width: 470px;
background-color: blue;
color: white;
margin: 10px;
padding: 3px;
float: left;
}

Quote

05-05-2011 , 10:17 PM

#53

TheIrishThug

Pooh-Bah

Join Date: Jan 2005 Posts: 5,223

If you want to make your mock pages seem a little more real, you can use Lorem Ipsum

Lorem Ipsum Generator

Quote

05-06-2011 , 01:53 AM

#54

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by TheIrishThug

You should check this article about making backgrounds: The Cicada Principle and Why It Matters to Web Designers

The basic idea is to use small images with a width that is prime. This will generate "randomness" as the pattern will last a long time before it starts repeating.

I can't get this effect to work. W3C validator says too many values.

I also attempted another code:

layer-background-image:

and even attempted calling background-image on each individual image.

I can only get one to show up at a time.

Quote

05-06-2011 , 10:36 AM

#55

TheIrishThug

Pooh-Bah

Join Date: Jan 2005 Posts: 5,223

Sorry, I can't help. I haven't ever actually used it, just an article I had read that your post reminded me of.

Quote

05-06-2011 , 10:49 AM

#56

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

That prime number background article is super definitely worth the read.

Quote

05-07-2011 , 03:12 AM

#57

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

If I am going to guess: it probably doesn't layer unless you are attaching the images to the actual website. In other words, using photobucket probably overloads the code and nulls it. Perhaps the only way is to use a shorter code such as "thing.jpg." No website, so no way to really dig into this one, though I loved that article when I first saw it in Gullanian's prime number thread. I should have posted it in the OP too.

But everything is just speculation, for all I know, it only works with jpg or something, or I screwed up the code somehow....

Quote

05-07-2011 , 04:55 AM

#58

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

So, moving on to form building, starting here: http://www.whatwg.org/specs/web-apps...age/forms.html and continuing on to the next page.

Here is a sample code to view the skeletal look and UI of the form elements:

There are two legal syntaxes for "button."

It's really cool how Opera deals with the date forms. Also note that ff4 does not create a scroll wheel with the number input type (assuming that ff4 isn't being a bug tonight).

ff4 does, however, treat the textarea box better, IMO: it auto-returns at the end of the line. Opera seems to go on to infinity.

To say the least, forms are messy as hell for cross-browsing without a bunch of javascript I guess.

But for your convenience or entertainment, depending on what you are doing with this thread:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>sample page</title>
<meta charset="utf-8">

</head>

<body>

<form>

<p><label>checkbox  <input type="checkbox"></label></p>

<p><label>radio  <input type="radio"></label></p>

<p><label>password  <input type="password"></label></p>

<p><label>file  <input type="file"></label></p>

<p><label>text  <input type="text"></label></p>

<p><label>email  <input type="email"></label></p>

<p><label>url  <input type="url"></label></p>

    <p><label>number  <input type="number"
    min="0"
    max="10"
    step="2"
    value="6"></label></p>

<p><label>search  <input type="search"></label></p>

<p><label>tel:  <input type="tel"></label></p>

<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>

<p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>

<p><button>Submit order</button></p>

<p><label>submit  <input type="submit" value="submit"></label></p>

<p><label>datetime  <input type="datetime"></label></p>

<p><label>date  <input type="date"></label></p>

<p><label>month  <input type="month"></label></p>

<p><label>week  <input type="week"></label></p>

<p><label>datetime-local  <input type="datetime-local"></label></p>

<p><label>number  <input type="number"></label></p>

<p><label>range  <input type="range"></label></p>



</form>


</body>
</html>

Onward to building something that resembles and actual form...

Quote

05-09-2011 , 11:26 PM

#59

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Well, looks like I took a short break. I was busy and tired.

My newest project is recreating a page that I feel a) looks horrible and b) has horrible coding.

The contender, hopefully with zero identification at this point (if you are the web coder for his page: I think you suck. Quit screwing people out of their money, and go back to school or something):

And the code, which has to be a joke:

I am surprised that this is listed as an XHTML strict doctype, and further surprised it works.

If you run this code on your computer, you'll be unable to view the whole page: namely the colors and picture. Why? Well, it is all drawn in Flash. The real page loads quite slowly, but trust me, I've seen worse.

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>.....</title>
        <meta name="description" content="Call us today -/>
        <meta name="keywords" content="......" />
        <link href="g.css" rel="stylesheet" type="text/css" />
        <script language="javascript">
        AC_FL_RunContent = 0;
        </script>

        <script src="AC_RunActiveContent.js" language="javascript"></script>
    </head>
    <body class="b">
<div class="c"> 
  <!--
            header
            -->
      
    <div id="outsidelink">
        <div class="link">
            <a href="#">ARTICLES</a> | <a href="#">BLOG</a> | <a href="#">FAQ</a> <a href="#" target="_blank"><img src="#" border="0"/></a> <a href="#" target="_blank"><img src="#" alt="...." border="0"/></a>

        </div>
    </div>
    
    <div id="h">
        <h2>
            <a href="/">We Buy Trash</a>
        </h2>
        <span id="doesNotExistInCSSsheet"><img src="#" alt="..." /></span><span class="tel"><img src="i/tel.gif" alt="Call Now: x" /><div align="center"><font color="FFFFFF"><a href="/indexes.php">Espanol?</a></font></div></span>
    </div>

    <!--
    top menu
    -->
    <div id="topmenu" class="menu">
        <ul>
            <li id="mt_home" class="first">
                <a href="#">Home</a>
            </li>
            <li id="mt_apply">
                <a href="#" rel="nofollow">Apply Now</a>

            </li>
            <li id="mt_testimonials">
                <a href="#" rel="nofollow">Testimonials</a>
            </li>
            <li id="mt_about">
                <a href="#" rel="nofollow">About us</a>
            </li>
            <li id="mt_contact" class="last">

                <a href="#" rel="nofollow">Contact us</a>
            </li>
        </ul>
    </div>
    
    <div class="moreinfo">Some words leading to some link <a href="#" target="_blank">Don't Click</a> for more info.</div>
  <!--
            content
            -->

  <div id="hp" class="mc"> 
    <div id="rcol"> 
      <div id="ap"> 
        <div class="pc"> 
          <h2 class="hid">........ </h2>
          <form action="#" method="POST">
            <fieldset>
            <p> 
              <label>First Name:</label>
              <input type="text" name="first_name" />

            </p>
            <p> 
              <label>Last Name:</label>
              <input type="text" name="last_name" />
            </p>
            <p> 
              <label>Email:</label>
              <input type="text" name="email" />
            </p>

            <p> 
              <label>Home Phone:</label>
              <input type="text" name="home_phone" />
            </p>
            <p> 
              <label>City & Zip:</label>
              <input type="text" name="nice" />
            </p>

            <p> 
              <label>thingy:</label>
              <input type="text" name="nothing" />
            </p>
            <p> 
              <label>Info on Thingy:</label>
              <input type="text" name="nada" />
            </p>

            <p> 
              <label>More About Thingy:</label>
              <input type="text" name="thingy" />
            </p>
            <p class="buttons"> 
              <input id="sap" class="but" type="submit" value="" />
            </p>
            </fieldset>
          </form>

        </div>
      </div>
       <div id="rdban"> 
       <!--Start AliveChat Button Code-->
        <img src="#" border="0" onClick="#" style="cursor:pointer;"> 
        <!--End AliveChat Button Code-->
       <a href="#" target="_blank"><img src="i/ban_findout.png" alt="Find Out....." /></a> 
      </div>
    </div>
    <div id="hp_flash" style="width:488px; height:299px"> 
      <script language="javascript">
                        if (AC_FL_RunContent == 0) {
                            alert("This page requires AC_RunActiveContent.js.");
                        }
                        else {
                            AC_FL_RunContent('codebase', 'https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', '488', 'height', '299', 'src', 'slideshowPush', 'quality', 'high', 'pluginspage', 'https://www.macromedia.com/go/getflashplayer', 'align', 'middle', 'play', 'true', 'loop', 'true', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', 'slideshowPush', 'bgcolor', '#ffffff', 'name', 'slideshowPush', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess', 'sameDomain', 'movie', 'slideshowPush', 'salign', ''); //end AC code
                        }
                    </script>

      <noscript>
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="#" width="488" height="299" id="slideshowPush" align="middle">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="false" />
        <param name="movie" value="slideshowPush.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <embed src="slideshowPush.swf" quality="high" bgcolor="#ffffff" width="488" height="299" name="slideshowPush" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer" /> 
      </object>
      </noscript>
    </div>
    <div class="gstripe"> <img src="#" alt="......" /> 
    </div>
    <img src="#" alt="......" style="float:left; margin-right:18px"/> 
    <div class="clear"></div>
    <div style="font-size:0.814em; padding-bottom:0"> 
     <div class="pc cntr" style="font-size:0.814em; padding-top:10"> <h1>........</h1></div>

      <p><strong>.....................</strong></p>
      
<p><strong>............................</strong></p>
    </div>
    <!--
                clear bottom
                -->
    <div class="clear"></div>
  </div>
  <!--
            end content
            -->
  <!--
            bottom menu
            -->

      <div id="botmenu" class="menu">
        <ul>
            <li id="mb_home" class="first">
                <a href="index.php">Home</a>
            </li>
            <li id="mb_apply">
                <a href="apply.php" rel="nofollow">..........</a>
            </li>

            <li id="mb_testimonials">
                <a href="testimonials.php" rel="nofollow">Testimonials</a>
            </li>
            <li id="mb_about">
                <a href="about.php" rel="nofollow">About us</a>
            </li>
            <li id="mb_contact" class="last">
                <a href="contact.php" rel="nofollow">Contact us</a>

            </li>
        </ul>
    </div>  <div class="clear"></div>
   <div class="clear"></div>
    <div class="f">
        <address>
        Company &middot; Phone: xxxxxxxxxxxxxxxx &middot; 1111 1st st., nowhere, NW 00000 LIC#: 0000000 
        </address>

        <div id="copyright">
            Locations: <a href="#">city</a> | <a href="#">city</a> | <a href="#">city</a> | <a href="#">city</a> | <a href="#">city</a> | <a href="#">city</a></div>

                    <div id="copyright">
  Common Questions: <a href="#">What?</a> | 
                    <a href="#">How?</a> |
                    <a href="#">How?</a> | <br />
                    <a href="#">What?</a> | 
                    <a href="#">What?</a> |
                    <a href="#">What?</a>

                    <a href="#">Need?</a> |
                    <a href="#">What?</a> |
                    <a href="#">What?</a> 
                    <a href="#">What?</a> |
                    <a href="#">What?</a> |
                    <a href="#">What?</a> |
                    <a href="#">What?</a> |
                    <br/>

                    <a href="#"> locations</a> |
                    <a href="#"> cities</a> |
                    <a href="#">Blog </a> |
                    <a href="#">Articles </a> |
                    <a href="#">FAQ</a> |
                    <a href="#">Sitemap</a><br/>

                    
                    .........................</br>
                    2011 &copy; <a href="/">This Place</a>, LLC. All Rights Reserved.
                    
                    </div>
                    </div>
                    

                    
                    
<iframe src='http://pixel.fetchback.com/serve/fb/pdc?cat=&name=landing&sid=2338' scrolling='no' width='1' height='1' marginheight='0' marginwidth='0' frameborder='0'></iframe>
    
  <!-- end container -->
</div>

  <!--
  footer
  -->

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7744437-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<!-- Start AliveChat Live Site Monitor Code -->
<script language="javascript">
    function wsa_include_js(){
        var js = document.createElement('script');
        js.setAttribute('language', 'javascript');
        js.setAttribute('type', 'text/javascript');
        js.setAttribute('src','http://www.websitealive8.com/2012/Visitor/vTracker_v2.asp?websiteid=0&groupid=2012');
        document.getElementsByTagName('head').item(0).appendChild(js);
    }
    window.onload = wsa_include_js;
</script>
<!-- End AliveChat Live Site Monitor Code -->
</body>
</html>

CSS:

Code:

@charset "utf-8";
body { font-size: 100%; font-family: Arial, Helvetica, sans-serif; background: #333; text-align: center }
/* 
 common 
*/
html, body, p:first-child, ul, li, dt, dd, dl, sup, h1, h2, h3, h4, h5, form, fieldset, legend, input.checkbox, input.radio, address { margin: 0; padding: 0 }
a img,:link img,:visited img, fieldset, input.checkbox, input.radio, input.but { border: none }
table { border-collapse: collapse; border-spacing: 0; font-size: inherit }
ol, ul { list-style: none }
 .hid { display: none }
address { font-style: normal }
 .clear { height: 0; clear: both; overflow: hidden; display: block; width: 100% }
 .b .first { border-left: none }
 .b .fr { float: right }
 .b .ar { text-align: right }
 .b .al { text-align: left }
hr { border: none; border-top: #f4f4f4 1px solid; border-bottom: #dedede 1px solid; height: 0; clear: both }
 .b .req { color: #ff0000 }
a { color: #000; text-decoration: none }
a:hover { color: #000 }
.square li, .square ul { list-style: square; margin-left: 20px; }

.number li, number ol { list-style: decimal; margin-left:20px;}

/* 
 layout
*/ 

.b .c, 
.b .f { width: 778px; height: 172px; margin: 0 auto; text-align: left; position: relative; clear: both }


/*
 header
*/ 
 
 #h { height: 57px; clear: both }
 #h h2 a { float: left; width: 383px; height: 57px; background: url(i/tfc.gif) no-repeat; text-indent: -2000px }
  
  /* 
 facebook
 */
 #outsidelink {}
 #outsidelink .link { color:#FFF; float:right; height: 40px; padding-top: 8px; padding-left:424px;} 
 #outsidelink .link a{ font-size: 11px; color:#FFF; margin-left: 5px; margin-right: 5px; text-decoration: underline;}
 
 /*
 menus
 */ 

 .menu { clear: both; height: 30px }
 .menu li a { width: 155px; height: 30px; line-height: 30px; color: #fff; text-decoration: none; font-size: 14px; background: url(i/bg_menu.gif) no-repeat right top; text-align: center; display: block }
 .menu li a:hover { color: #666 }
 .menu li.last a { background-position: left top; width: 158px }

.sitemap{
    margin: 0;
    padding: 0;
    text-align:left;
    list-style: square;
}
/*
 main content
*/
 
 .mc { background: #fff; color: #666; padding: 10px 20px 20px 20px; clear: both }
 .pc { padding: 14px }
 
/* 
 panel content 
*/ 

 .gstripe { height: 31px; margin: 20px 18px 1px 0; background: #666; width:488px; text-align:center}
 #rcol { float: right; width: 232px }
 #liveperson { background: url(i/bg_lp.png) no-repeat; width: 232px; height:94px; padding-top:6px; margin:5px 0}
 
/*
 hp
*/ 

 #ap { width: 232px; height: 299px; clear: right; background: url(i/bg_ap.png) no-repeat; overflow: hidden }
 #ap fieldset { margin-top: 50px }
 #ap label { width: 76px; margin-right: 3px; height: 25px; line-height: 19px; font-size: 12px; color: #666; text-align: right }
 #ap input { width: 118px; max-width: 118px; height: 13px; font-size: 12px }
 * html #ap input { width: 116px }
/*
#ap input#sap { width: 92px; height: 24px; background: url(images/buttons.jpg) no-repeat left top }
 */
 #ap input#sap { width: 92px; height: 24px; background: url(i/images/buttons.jpg) no-repeat left top }
 
/*
 Inner Pages
*/
 
#content, #contentwide, #contentloc-large { width: 484px; border:#ccc 1px solid; padding: 1px; font-size: 12px;}
#contentloc-small { width: 484px; border: #ccc 1px solid; padding: 1px; font-size: 12px; height:415px;}
/* #content, #contentwide { width: 484px; border: #ccc 1px solid; padding: 1px; font-size: 12px; margin-bottom:10px; height:415px;} */
#contentwide { width: 734px }
#contentloc-small h2, #content h2, #contentwide h2 { background: url(i/bg_h.gif) repeat-x center; height: 30px; line-height: 30px; color: #fff; text-align: center; font-weight: normal; font-size: 20px }
#content h1, #contentwide h1 { background: url(i/bg_h.gif) repeat-x center; height: 30px; line-height: 30px; color: #fff; text-align: center; font-weight: normal; font-size: 20px }
#content a, #contentwide a { text-decoration: underline }
* html #content .pc { padding-top: 0 }
#rdban { clear: right; margin-top: 20px; vertical-align: top;}
.locations {padding-bottom:30px;}

.cities {padding-bottom:30px; padding-top:10px; height: 500px;}
.cities_col1 {width:100px; float:left; margin-left:11px; font-size:11px;}
.cities_col2 {width:105px; float:left; margin-left:11px; font-size:11px;}
.cities_col3 {width:120px; float:left; margin-left:11px; font-size:11px;}
.cities_col4 {width:115px; float:left; margin-left:11px; font-size:11px;}

/*
 more info
*/

.moreinfo { background-color:#FFFFFF; font: Tahoma, Verdana, Arial; font-size:14px; font-weight:bold; color:#000000; text-align:center; padding-top:10px; margin:-bottom:10px;}
.moreinfo a { text-decoration:underline;}
/*
 texts
*/

h3 { font-size: 14px; margin: 10px 0 }
.pc ul { padding-bottom: 0px;}

#content ul { padding-top:10px; padding-left:20px; padding-bottom:10px;}
#content .li {width:170px; float:left;}
#content a { color:#464646}
.pcontent {width: 410px; font-size:13px;}
.center {margin-left:25px; margin-top:20px;}
#bottom-loc { margin-top:90px; }
.bottom-locations {text-align: center; line-height: 17px; font-family: "Verdana", Arial, Helvetica, sans-serif; font-size: 12px; }
ul.blm { padding: 0; padding-top: 14px; font-weight: bold }
ul.list { list-style: disc; padding: 0 14px }
/*
 apply now
*/ 

 #..... { position: absolute; left: -1985px; top: -2455px; width: 555px; height: 1165px; z-index: 1 }
 #contactwide input { font-size: 10px }
 .formlabel { font-size: 12px; font-weight: bold }
 .style0 { font-size: 20px; font-weight: bold }
 .style1 { font-size: 16px; font-weight: bold; text-align: center; padding: 1em }
 .style2 { font-size: 15px; font-weight: bold; text-align: center; padding: 1em; color: #669933 }
 .style4 { font-size: 10px; font-weight: bold }
 .size2 { font-size: 12px }
 .style12 { color: #000000 }
 
/*
 contact
*/ 
 
 #addrcol { width: 178px; float: left; margin-top: 2em }
 #contact_form { float: left; width: 278px; margin-top: 2em }
 #contact_form table { margin-top: 8px; }
 #contact_form textarea { width: 268px; height: 180px; margin: 4px 0; }
 .contact_tbl input, .contact_tbl select, .contact_tbl textarea { margin: 4px; }
 #submit { font-size: 12px; width: 92px; height: 24px; background: url(i/buttons.png) no-repeat left top; }

/*
 footer
*/ 
 
 .f { border-top: #fff 2px solid; background: #919191; color: #fff; height: 110px; padding-top: 4px; font-size: 12px; font-weight: bold; line-height: 22px; }
 .f2{ border-top: #919191 2px solid; background: #919191; color: #fff; height: 60px; font-size: 12px; font-weight: bold; line-height: 22px;  }
 .f a { color: #fff; }
 .f2 a { color: #fff; }
 .f-locations { color: #464646;  padding-top: 10px; font-size: 13px; line-height: 22px; margin-left:14px; float:left;}
 .f-locations #serving { text-align: center; line-height: 17px; }
 .f-locations #serving a { color: #464646; }
 .f-locations #get-the-money { text-align: center; line-height: 17px; margin-bottom: 70px; padding-top: 20px; color:#666666; font-size:12px;}
 
/* ===================== GENERAL FORMS ELEMENTS ========================== */

form { display: inline }
input, select, textarea { font-family: Arial, Helvetica, sans-serif; vertical-align: middle }
fieldset p { margin: 0; padding: 0; clear: both; display: block }
.buttons { text-align: center; margin-top: 2px }
input.but { cursor: pointer; color: #663300 }
input.but[type =
"submit"]:hover { color: #006699}

/* END FORM */

* html hr, *:first-child + html hr { height: 2px }
.b .cntr, .f address, .f #copyright, .f2 #copyrights { text-align: center }
.b .fl, #h span, .menu li, label { float: left }
.f2 #copyrights { background:#0000}

h1 {
font-size:14px;
font-weight:bold
}

and the javascript:

Code:

//v1.7
// Flash Player Version Detection
// Detect Client Browser type
// Copyright 2005-2007 Adobe Systems Incorporated.  All rights reserved.
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;

function ControlVersion()
{
    var version;
    var axo;
    var e;

    // NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry

    try {
        // version will be set for 7.X or greater players
        axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
        version = axo.GetVariable("$version");
    } catch (e) {
    }

    if (!version)
    {
        try {
            // version will be set for 6.X players only
            axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
            
            // installed player is some revision of 6.0
            // GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
            // so we have to be careful. 
            
            // default to the first public version
            version = "WIN 6,0,21,0";

            // throws if AllowScripAccess does not exist (introduced in 6.0r47)        
            axo.AllowScriptAccess = "always";

            // safe to call for 6.0r47 or greater
            version = axo.GetVariable("$version");

        } catch (e) {
        }
    }

    if (!version)
    {
        try {
            // version will be set for 4.X or 5.X player
            axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
            version = axo.GetVariable("$version");
        } catch (e) {
        }
    }

    if (!version)
    {
        try {
            // version will be set for 3.X player
            axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
            version = "WIN 3,0,18,0";
        } catch (e) {
        }
    }

    if (!version)
    {
        try {
            // version will be set for 2.X player
            axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
            version = "WIN 2,0,0,11";
        } catch (e) {
            version = -1;
        }
    }
    
    return version;
}

// JavaScript helper required to detect Flash Player PlugIn version information
function GetSwfVer(){
    // NS/Opera version >= 3 check for Flash plugin in plugin array
    var flashVer = -1;
    
    if (navigator.plugins != null && navigator.plugins.length > 0) {
        if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
            var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
            var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
            var descArray = flashDescription.split(" ");
            var tempArrayMajor = descArray[2].split(".");            
            var versionMajor = tempArrayMajor[0];
            var versionMinor = tempArrayMajor[1];
            var versionRevision = descArray[3];
            if (versionRevision == "") {
                versionRevision = descArray[4];
            }
            if (versionRevision[0] == "d") {
                versionRevision = versionRevision.substring(1);
            } else if (versionRevision[0] == "r") {
                versionRevision = versionRevision.substring(1);
                if (versionRevision.indexOf("d") > 0) {
                    versionRevision = versionRevision.substring(0, versionRevision.indexOf("d"));
                }
            }
            var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
        }
    }
    // MSN/WebTV 2.6 supports Flash 4
    else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
    // WebTV 2.5 supports Flash 3
    else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
    // older WebTV supports Flash 2
    else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
    else if ( isIE && isWin && !isOpera ) {
        flashVer = ControlVersion();
    }    
    return flashVer;
}

// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
    versionStr = GetSwfVer();
    if (versionStr == -1 ) {
        return false;
    } else if (versionStr != 0) {
        if(isIE && isWin && !isOpera) {
            // Given "WIN 2,0,0,11"
            tempArray         = versionStr.split(" ");     // ["WIN", "2,0,0,11"]
            tempString        = tempArray[1];            // "2,0,0,11"
            versionArray      = tempString.split(",");    // ['2', '0', '0', '11']
        } else {
            versionArray      = versionStr.split(".");
        }
        var versionMajor      = versionArray[0];
        var versionMinor      = versionArray[1];
        var versionRevision   = versionArray[2];

            // is the major.revision >= requested major.revision AND the minor version >= requested minor
        if (versionMajor > parseFloat(reqMajorVer)) {
            return true;
        } else if (versionMajor == parseFloat(reqMajorVer)) {
            if (versionMinor > parseFloat(reqMinorVer))
                return true;
            else if (versionMinor == parseFloat(reqMinorVer)) {
                if (versionRevision >= parseFloat(reqRevision))
                    return true;
            }
        }
        return false;
    }
}

function AC_AddExtension(src, ext)
{
  if (src.indexOf('?') != -1)
    return src.replace(/\?/, ext+'?'); 
  else
    return src + ext;
}

function AC_Generateobj(objAttrs, params, embedAttrs) 
{ 
  var str = '';
  if (isIE && isWin && !isOpera)
  {
    str += '<object ';
    for (var i in objAttrs)
    {
      str += i + '="' + objAttrs[i] + '" ';
    }
    str += '>';
    for (var i in params)
    {
      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
    }
    str += '</object>';
  }
  else
  {
    str += '<embed ';
    for (var i in embedAttrs)
    {
      str += i + '="' + embedAttrs[i] + '" ';
    }
    str += '> </embed>';
  }

  document.write(str);
}

function AC_FL_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     , "application/x-shockwave-flash"
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_SW_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
     , null
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
  var ret = new Object();
  ret.embedAttrs = new Object();
  ret.params = new Object();
  ret.objAttrs = new Object();
  for (var i=0; i < args.length; i=i+2){
    var currArg = args[i].toLowerCase();    

    switch (currArg){    
      case "classid":
        break;
      case "pluginspage":
        ret.embedAttrs[args[i]] = args[i+1];
        break;
      case "src":
      case "movie":    
        args[i+1] = AC_AddExtension(args[i+1], ext);
        ret.embedAttrs["src"] = args[i+1];
        ret.params[srcParamName] = args[i+1];
        break;
      case "onafterupdate":
      case "onbeforeupdate":
      case "onblur":
      case "oncellchange":
      case "onclick":
      case "ondblclick":
      case "ondrag":
      case "ondragend":
      case "ondragenter":
      case "ondragleave":
      case "ondragover":
      case "ondrop":
      case "onfinish":
      case "onfocus":
      case "onhelp":
      case "onmousedown":
      case "onmouseup":
      case "onmouseover":
      case "onmousemove":
      case "onmouseout":
      case "onkeypress":
      case "onkeydown":
      case "onkeyup":
      case "onload":
      case "onlosecapture":
      case "onpropertychange":
      case "onreadystatechange":
      case "onrowsdelete":
      case "onrowenter":
      case "onrowexit":
      case "onrowsinserted":
      case "onstart":
      case "onscroll":
      case "onbeforeeditfocus":
      case "onactivate":
      case "onbeforedeactivate":
      case "ondeactivate":
      case "type":
      case "codebase":
      case "id":
        ret.objAttrs[args[i]] = args[i+1];
        break;
      case "width":
      case "height":
      case "align":
      case "vspace": 
      case "hspace":
      case "class":
      case "title":
      case "accesskey":
      case "name":
      case "tabindex":
        ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
        break;
      default:
        ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
    }
  }
  ret.objAttrs["classid"] = classid;
  if (mimeType) ret.embedAttrs["type"] = mimeType;
  return ret;
}

I'll start up with a general design overhaul and hopefully create something a little more readable, faster, and generally better. As you can see, I don't challenge myself too much.

Quote

05-10-2011 , 12:23 PM

#60

anononon

Guest

Posts: n/a

nice code

people may enjoy this fun css3 box generator btw

http://www.css3.me/

Quote

05-10-2011 , 07:44 PM

#61

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Sort of off topic, but relevant:

There are tons of rel="no-follow" in the code. Now, anyone who is somewhat familiar with SEO knows that this was a disasterous idea created by Google. While the big-shots lol'd at no-follow, many of the smaller (read dumber) SEO scams out there jumped all over it and implemented this across all their sites.

Obviously, this went really bad, so *most* SEO scammers backed off the idea, but alas, three years later, there are still SEO "consultants" (scammers) who love no-follow.

I would assume that if you are semi-serious about web programming, you:

- know the background of no-follow.
- know that there are many better alternatives, such as robot.txt, <meta=robot>, and of course .htaccess (not a back-end programmer).

Now, as someone who is serious about your work, suppose a client specifically asks you to do no-follow. There is a delicate balance here. You know that they are using a scam SEO consultant who wouldn't be able to search optimize themselves out of a paper bag. You know that using no-follow is about the worst thing you can do to a site, but you have a nasty eating habit that you developed a long time ago that you can't seem to kick.

Do you decline using no-follow because you care about your work and your clients, or do you just shut up and do it because you need money?

Quote

05-10-2011 , 07:45 PM

#62

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by kyleb

nice code

sarcasm?

Quote

05-10-2011 , 07:56 PM

#63

anononon

Guest

Posts: n/a

code sucks obv

no follow is mostly legitimate. what is your concern with it.

Quote

05-10-2011 , 08:02 PM

#64

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

http://www.seobook.com/worthless-hype

This should explain the history of no-follow better than I can. There are some big shots who posted in response to this post, and they explain why no-follow was a disaster, and yes, even one out-right calls out the SEO guys who used it in the first place.

Quote

05-10-2011 , 10:24 PM

#65

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

It's standard to attach nofollows when you can't trust or vouch for a link. For example if you had comments on a blog, chances are you'll want to put a nofollow on every link posted by someone.

That just tells Google and other search engines "listen man, this link isn't trusted. Don't assume I'm linking to the site".

Quote

05-11-2011 , 12:02 AM

#66

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

So, it's not standard to use no-follows when you are linking to your own webpages, right? I think the theory is to force Google spiders to jump to the important or optimized pages or whatever.

--------------------

Oh well. I took a detour from fixing that page. I think it's just better to trash the entire thing and start from scratch. It would be much quicker.

So, this page is more artistic, though because of my questionable abilities, the code is LOL.

FWIW, it renders better in Chrome than FF. I guess, I would have to manipulate the hr to whatever Chrome's default color is and use it in the code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta chartype="utf-8">

<style type="text/css">

body{
width: 960px;
background-color:#FF0066;
}

header{
margin-left: 250px;
}

div#piano{
position: absolute;
width: 175px;
height: 700px;
background-color: #DDDDDD;
border-width: 2px;
border-style: solid;
border-color: black;
margin-top: -50px;
color: black;
}

div#keys{
position: absolute;
width: 75px;
height: 700px;
background-color: #DDDDDD;
}

span#p{
display: block;
height: 15px;
text-align: right;
}

span#k{
display: block;
width: 100%;
height: 15px;
background-color: black;
border-color: black;
border-style: solid;
margin-left: 0px;
margin-top: 12px;
margin-right: 0px;
margin-bottom: 0px;
}

a{
color: #FF0066;
}

a:hover{
color: blue;
}

</style>

</head>
<body>

<header>
<h1> IMAGE WUZ HERE<h1>
</header>

<div id="piano">
        <div id="keys">
            <span id="k"></span>
            <span id="k"></span>
            <span id="kinv"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
            <span id="k"></span>
        </div>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>HOME</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>BIO</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>MUSIC</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"><a>LESSONS</a></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>
    <hr>
    <span id="p"></span>

</div>


</body>
</html>

I have to take away a few of the black keys, but I'm not sure how to do it. I would use a hidden attribute on the elements in question, but strangely, the <hr> won't show up when I do.

Quote

05-11-2011 , 04:06 AM

#67

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

No follow any external links posted on your site that you don't want to leak pagerank to, untrusted links such as ones users will post. Don't use no follow on internal links. Also don't try and attempt to use no follows in an attempt to optimise the way spiders crawl your site, that's a misuse of no follow, use robots.txt to specify pages to not be indexed.

Bear in mind nofollows don't stop spiders crawling pages, they just stop you leaking juice to them.

Great thread btw!

Quote

05-11-2011 , 04:35 AM

#68

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Btw, I only found this out the other day but it's incredibly useful, when linking to external resources, dont use http:// or https://, use // and it will use whatever protocol you are currently on. This will stop security errors popping up if you are on SSL and the external resource isn't protected. Super useful especially with dynamic sites and such. Works in all major browsers.

Quote

05-11-2011 , 05:59 AM

#69

clowntable

Carpal \'Tunnel

Join Date: Jun 2006 Posts: 45,557

It's obviously good to know HTML/CSS so it's never a bad idea to do everything from scratch. If you were to build a website for a client, would you recommend using html5boilerplate and/or blueprintcss?

Thoughts/comparisons of the two? Mainly looking for something to prototype designs/layouts because I really suck at designing and just need a quick eyeball test quite often.

Quote:

Originally Posted by Gullanian

Never heard this before, seems pretty usefull. Thx

Quote

05-11-2011 , 06:09 AM

#70

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

One contradiction I see with HTML5Boilerplate is that they don't externalise the Google analytics code into an external JS file. The reason you don't do this (afaik, might be wrong), is so that the GA will run without being hindered by paralisation issues if there are a lot of resources to download. IE, you might switch page before it's been given a chance to load.

This is why I put my GA code in the head, so that even if the user presses back on their browser before the footer has loaded (can happen on mobile devices more than you think) their visit is still counted.

Putting it after the rest of the DOM seems counter intuitive as you might as well put it in an external script then. It has no dependencies (eg Jquery) so I would recommend this goes in the head as a script block.

Quote

05-11-2011 , 09:16 AM

#71

MrWooster

veteran

Join Date: Mar 2007 Posts: 2,984

Quote:

Originally Posted by clowntable

Im pretty sure you can use html5boilerplate and blueprintcss. html5poilerplate is just a template for how to set up a website. bluprintcss (which rocks btw) is a framework

Quote

05-11-2011 , 12:02 PM

#72

Zurvan

Carpal \'Tunnel

Join Date: Apr 2005 Posts: 37,385

Quote:

Originally Posted by Gullanian

Why would you want to record a visit that didn't actually see your content?

Quote

05-11-2011 , 12:16 PM

#73

clowntable

Carpal \'Tunnel

Join Date: Jun 2006 Posts: 45,557

Quote:

Originally Posted by MrWooster

Im pretty sure you can use html5boilerplate and blueprintcss. html5poilerplate is just a template for how to set up a website. bluprintcss (which rocks btw) is a framework

Haven't used either since I haven't done any freeflow webdevelopment in a bit. I'll do soon and am pretty happy that I found stuff like this because CSS used to drive me insane.

Quote

05-11-2011 , 12:22 PM

#74

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Quote:

Originally Posted by Zurvan

Why would you want to record a visit that didn't actually see your content?

You want to record visitors that partially saw your content. I'm a fast web browser, and I often visit sites and pres 'back' before the page has fully loaded. That's a bounce you want to record as a high boucne % indicates your content is crap for whatever reasons and you want to spot that. Also you want to record mobile visitors whos data might have been interrupted and the GA code didn't run.

Quote

05-11-2011 , 12:56 PM

#75

MrWooster

veteran

Join Date: Mar 2007 Posts: 2,984

Quote:

Originally Posted by clowntable

Haven't used either since I haven't done any freeflow webdevelopment in a bit. I'll do soon and am pretty happy that I found stuff like this because CSS used to drive me insane.

Yeah, same here. Be warned tho, I use blueprint because I am a developer not a designer and blurprint css allows me to overlook a lot of the design css, but I believe that it is not hugely popular among actual designers because it can be quite limiting.

So, (and this is very much just my opinion), if you are a developer and you dont like fighting with CSS, use blueprint, but if you are building something that is likely to have input from designers somewhere along the line, there might be better css options.

Quote

$25m Guaranteed WPM on CoinPoker

Join the action now

Daily Rewards • Splash Pots • CoinRaces

Page 3 of 12

First

1 2 3 4 5 6 7 8

Last

Post Reply Subscribe

...

Page 3 of 12

First

1 2 3 4 5 6 7 8

Last