Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Monday, April 8, 2013

Footer Fixes - Another Way by Matthew Taylor


  1. <body>
  2. <div id="wrapper">
  3. <div id="header"></div>
  4. <div id="content"></div>
  5. <div id="footer"></div>
  6. </div>
  7. </body>
====================

CSS



html,
body {
margin:0;
padding:0;
height:100%;
}

#wrapper {

min-height:100%;
position:relative;
}

#header {

padding:10px;
background:#5ee;
}

#content {

padding:10px;
padding-bottom:80px; /* Height of the footer element */
}

#footer {

width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}


    http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Saturday, March 30, 2013

Carousel Markup


<!--  Carousel - consult the Twitter Bootstrap docs at
      http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
  <div class="carousel-inner">
    <div class="item active"><!-- class of active since it's the first item -->
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
  </div><!-- /.carousel-inner -->
  <!--  Next and Previous controls below
        href values must reference the id for this carousel -->
    <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
</div><!-- /.carousel -->

Tuesday, March 12, 2013

HTML5 Template


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<link rel="stylesheet" href="style.css">
</head>
<body>



</body>
<!--CDNs -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.1.2/webfont.js"></script>
</html>