html

How to create a mixed 2 to 3 column layout with footer and header

Tagged golden ratio, vertical flow, design, css, html  Languages html

This is a draft, and an experiment with composing to a vertical flow and the golden ratio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>3 column</title>
<style type="text/css">

/** Reset styles */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
  margin:0;
  padding:0;
} 

/** 3 column layout */

#container{
  background-color:#9cc;
  width: 69em;
  margin: 0 auto;
}

#content{
  float: left;
  width: 41em;
}

#sidebar{
  float: right;
  width: 23em;
}

#column1{
  float: left;
  width:23em;
}

#column2{
  float: left;
  width:23em;
}

#column3{
  float: left;
  width:23em;
}


/* Vertical flow */

body {
  font-size: 75%;
}
  
html>body {
  font-size: 14px;
}
  
p {
  line-height 1.5em;
}


/* Temp styles */
#column1, #column2, #column3, #content, #sidebar {
#  background: blue;
  #  border: 1px solid black;
}

/** */
body{
  font-family: Palatino,"Palatino Linotype",Georgia,serif;
}

</style>
</head>
<body>

  <div id="header">
    <div id="container">
      <div id="column1">Header 1</div>
      <div id="column2">Header 2</div>
      <div id="column3">Header 3</div>
    </div>
  </div>

  <div id="container">
    <div id="content">Content</div>
    <div id="sidebar">Sidebar</div>
  </div>

  <div id="footer">
    <div id="container">
      <div id="column1">Footer 1</div>
      <div id="column2">Footer 2</div>
      <div id="column3">Footer 3</div>
    </div>
  </div>

</body>
</html>

How to get min-width and max-width working in IE 6

Tagged ie6, hack, min-width, max-width  Languages html

Far from optimal, but should work in most cases:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-is-a-shitty-browser.css" />
<![endif]-->
#wrapper { 
   width:expression(document.body.clientWidth < 950 ? "950px" : "100%" ); 
}

Note that users might get security warnings.

How to stretch content to fill browser's height

Tagged fill, stretch, fullscreen, height, css  Languages html

Note that load_translations and store_translations have been removed.

<html>
<body>
<style type="text/css">
html, body {
  overflow: hidden; 
  height: 100%; 
  max-height: 100%; 
  margin: 0;
  padding: 0;
}

#container {
  display: block;
  overflow: hidden;
  background-color: green;
  height: 100%; /** IE 6 */
  min-height: 100%;
}

#navigation { overflow: auto; float: left; width: 260px; background: white; height: 100%; }

#content { overflow: auto; background: blue; margin-left: 260px; height: 100%; border-bottom: 2px solid white;}

</style>
  <div id="container">
    <div id="navigation">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
    <div id="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>

    </div>
  </div>
</body>
</html>

Google Maps Version 3 Example with Markers and InfoWindow

Tagged google-maps, maps, google  Languages html
<style media="screen" type="text/css">
  #map { width:960px; height:330px; }
</style>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div id="map"></div>

<script type="text/javascript">
  var map;
  var marker;
  var initialized = false;

  var infowindow = new google.maps.InfoWindow({
    content: '',
    //disableAutoPan: true // Not compatible with InfoWindows. They are cropped...
  });

  // Triggered when map is loaded or moved
  var boundsChangedListener = function() {
    if(initialized == true) { return };

    initialized = true;

    addMarkers();
  };

  function addMarkers() {
    var bounds = map.get_bounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();

    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();

    var icon = '/images/icons/xxx-club-16.gif';

    for (var i = 0; i < 10; i++) {
      var point = new google.maps.LatLng(
        southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random()
      );

      var marker = new google.maps.Marker({
        position: point, 
        map:      map, 
        icon:     icon, 
        title:    "Marker"
      });   

      addMarker(marker);
    }
  }

  function addMarker(marker) {
    google.maps.event.addListener(marker, 'mouseover', function() {
      marker.html = 'Marker xxx';
      infowindow.open(map, marker);
    });

    google.maps.event.addListener(marker, 'mouseout', function() {
      infowindow.close();
    });
  }
</script>

How to make rounded buttons with the button element

Tagged button, element, css, html, rounded  Languages html

25 pixel high buttons at your service:

button { 
    border: 0; 
    padding: 0;
    font-variant: small-caps;
    height:25px;
    background: transparent url('../images/button-background-left.png') no-repeat;
    cursor: pointer;
    text-align: center; 
}

button span { 
    font-family: georgia,serif;
    line-height: 25px;
    background: transparent url('../images/button-background.png') no-repeat top right;
    position:relative; 
    display:block; 
    white-space:nowrap; 
    margin-top: -2px;
    padding:0 15px; 
}

HTML:

<button type="submit" value="Hello"><span>Hello&nbsp;&raquo;</span></button>

IE 6 & 7 might need:

button { 
  width:auto; 
  overflow:visible; 
}
button span { 
  margin-top:1px; 
}

References

Elastic 2 column XHTML and CSS layout

Tagged xhtml, css, layout, 2 column  Languages html

This is a slight modification of Roger Johansson's code that I found while reading this article. I've modified the code to use ems instead of pixels--Mike Jolley has written about why ems are preferrable over pixels.

<!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" lang="en" xml:lang="en">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content=""/>
  <style type="text/css">
  * {
    font-size:95%;
    font-family: georgia,'Times',serif;
  }

  body {
    min-width:62em;
  }
  
  #wrap {
    margin:0 auto;
    width:60em;
    border: 1px solid blue;
  }
  
  #content {
    float:left;
    width:40em;
    border: 1px solid blue;
  }

  #sidebar {
    float:right;
    width:19em;
    border: 1px solid blue;
  }

  #footer {
    clear:both;
    border: 1px solid blue;
  }
  </style>
</head>
<body>
  <div id="wrap">
    <div id="header">
      Header
    </div>
    <div id="nav">
    Navigation
    </div>
    <div id="content">
      Content
    </div>
    <div id="sidebar">
      Sidebar
    </div>
    <div id="footer">
      Footer
    </div>
  </div>
</body>
</html>

How to fix Internet Explorer and Firefox form encoding issues when posting data to a server having a different encoding

Tagged utf-8, iso-8859-1, internet explorer, firefox, encoding, form  Languages html

This snippet explains how to fix Internet Explorer and Firefox form encoding issues when posting data to a server having a different encoding than the source system.

This happens, for example, when you host a form on a server using ISO-8859-1 that posts data to a server using UTF-8.

The fix for Firefox (and Opera and other sensible browsers) is to use the accept-charset attribute:

<form ...  accept-charset="utf-8">

The fix for Internet Explorer is to use a hack:

<form ...  accept-charset="utf-8">
  <input type="hidden" name="enc" value="&#153;">
</form>

The hidden input field will make Internet Explorer understand that you want it to support UTF-8.

Big Search Field & Button = Beautiful?

Tagged form, input, search  Languages html
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"/>
<style>

.search-form {
  width: 40%;
  min-width: 400px;
  border: 6px solid rgba(0, 0, 0, 0.7);
  margin: 20px auto 0;
}

input.text {
  float: left;
  width: 80%;
  border: 5px solid #fff;
  margin: 0;
  outline: none;
  font-size: 17px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-appearance: none;
  color: #3c3c3c;
}


input.text, input.button {
  padding: 15px;
  font-size: 17px;
  font-weight: 800;
  display: inline-block;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

input.button {
  float: right;
  width: 20%;
  margin: 0;
  border: 5px solid grey;
  color: #fff;
  background-color: grey;
  -webkit-appearance: none;
  padding-left: 0;
  padding-right: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}

.clearfix {
  overflow: auto;
}

* {
  font-family: "Helvetica", sans-serif;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

</style>
</head>
<body>
  <div class="search-form clearfix">
    <input name="query" class="text" type="text" placeholder="Find your dog&hellip;">
    <input type="submit" value="Search" class="button">
  </div>
</body>
</html>

How to embed Google Maps driving directions on your site

Tagged google-maps, driving, directions  Languages html
<form action="http://maps.google.com/maps" method="get">
  <label for="saddr">Where are you starting your trip?</label>
  <input type="text" name="saddr" id="saddr" value="Adelaide, Australia" />
  <input type="submit" value="Go" />
  <input type="hidden" name="daddr" value="Melbourne, Australia" />
  <input type="hidden" name="hl" value="en" />
</form>