Saki's Blog » html http://blog.extjs.eu For good of all productive developers Mon, 16 Aug 2010 23:12:57 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Simplest 3 Columns Layout with CSS http://blog.extjs.eu/know-how/simplest-3-columns-layout-with-css/ http://blog.extjs.eu/know-how/simplest-3-columns-layout-with-css/#comments Tue, 08 Apr 2008 02:30:33 +0000 Saki http://blog.extjs.eu/?p=24 After experimenting with Designing a 3 columns web page using TableLayout I have came with the solution that is, IMO, simplest possible: <!-- vim: ts=2:sw=2:nu:fdc=2:spell   An Application Page   @author Ing.Jozef Sakáloš @copyright (c) 2008, by Ing. Jozef Sakáloš @date 2. April 2008 @version $Id$   @license application.html is licensed under the terms of [...]]]>

After experimenting with Designing a 3 columns web page using TableLayout
 I have came with the solution that is, IMO, simplest possible:

<!-- vim: ts=2:sw=2:nu:fdc=2:spell
 
An Application Page
 
@author    Ing.Jozef Sakáloš
@copyright (c) 2008, by Ing. Jozef Sakáloš
@date      2. April 2008
@version   $Id$
 
@license application.html is licensed under the terms of the Open Source
LGPL 3.0 license. Commercial use is permitted to the extent that the 
code/component(s) do NOT become part of another Open Source or Commercially
licensed development library or toolkit without explicit permission.
 
License details: http://www.gnu.org/licenses/lgpl.html
-->
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
  <link rel="shortcut icon" href="../img/extjs.ico">
  <title>3 Columns Layout Example</title>
 
  <!-- Layout Mandatory Styles -->
  <style type="text/css">
    #ct-wrap {
      text-align:center;
    }
    #ct {
      text-align:left;
      margin:auto;
    }
    #north, #navlinks, #south {
      float:none;
      clear:both;
    }
    #west {
      float:left;
      clear:left;
    }
    #center {
      float:left;
    }
    #east {
      float:right;
      clear:right;
    }
  </style>
 
  <!-- Mandatory Dimensions -->
  <style type="text/css">
    #ct {
      width:640px;
    }
    #west {
      width:180px;
    }
    #east {
      width: 80px;
    }
    #center {
      width: 380px;
    }
  </style>
 
  <!-- This Example Customizations -->
  <style type="text/css">
    body {
      font-size:13px;
      vertical-align:middle;
      margin:0;
      padding:0;
    }
    #north {
      height:40px;
      color:white;
      background:#203d8e;
    }
    #navlinks {
      height: 24px;
      color:blue;
      background:#ffc800;
    }
    #west, #center, #east {
      height:400px;
    }
    #west, #east {
      color:white;
      background:#203d8e;
    }
    #south {
      height: 30px;
      background:#ffc800;
    }
    #center {
      background:#e8e8e8;
    }
  </style>
</head>
<body>
<div id="ct-wrap">
  <div id="ct">
    <div id="north">north</div>
    <div id="navlinks">navlinks</div>
    <div id="west">west</div>
    <div id="center">center</div>
    <div id="east">east</div>
    <div id="south">south</div>
  </div>
</div>
</body>
</html>
<!-- eof -->

Works perfectly cross-browser in both standards compliant mode and quirks mode.

Online example of the above: Simplest 3 Columns Layout with CSS Example

]]> http://blog.extjs.eu/know-how/simplest-3-columns-layout-with-css/feed/ 9 How to center an element in quirks mode http://blog.extjs.eu/know-how/how-to-center-an-element-in-quirks-mode/ http://blog.extjs.eu/know-how/how-to-center-an-element-in-quirks-mode/#comments Tue, 08 Apr 2008 01:57:25 +0000 Saki http://blog.extjs.eu/?p=23 It has been my problem because I needed to use quirks mode due to Ext not playing well in standards compliant mode and still have an element, a container with fixed width, centered in the browser’s window working cross-browser. Standard approach is to use css: #ct { width: 960px; margin: auto; } Nice [...]]]>

It has been my problem because I needed to use quirks mode due to Ext not playing well in standards compliant mode and still have an element, a container with fixed width, centered in the browser’s window working cross-browser.

Standard approach is to use css:

#ct {
    width: 960px;
    margin: auto;
}

Nice and simple but it doesn’t work in IE in quirks mode, works in strict mode though.

Another approach I’ve found googling for a solution was:

body {
    text-align: center;
}
#ct {
    width: 960px;
    margin: auto;
    text-align: left;
}

This works, also in IE, but the problem is that Ext creates many elements as direct children of the body so it introduced many rendering problems such as menu items appeared centered, combo box dropdown items were centered, messages in message boxes, etc.

Finally, this works everywhere without bad side effects:

#ct-wrap {
    text-align: center;
}
#ct {
    width: 960px;
    margin: auto;
    text-align: left;
}

with this markup:

<body>
  <div id="ct-wrap">
    <div id="ct">
    </div>
  </div>
</body>

We do not touch body here but we create a “container wrap” that center aligns texts and inside of it our real container in which we set text alignment back to left.

Works perfect cross browser.

]]> http://blog.extjs.eu/know-how/how-to-center-an-element-in-quirks-mode/feed/ 1 HTML File Pattern http://blog.extjs.eu/patterns/file-patters/html-file-pattern/ http://blog.extjs.eu/patterns/file-patters/html-file-pattern/#comments Wed, 02 Apr 2008 14:21:33 +0000 Saki http://blog.extjs.eu/?p=7 <!-- vim: ts=2:sw=2:nu:fdc=2:spell   An Application Page   @author Ing.Jozef Sakáloš @copyright (c) 2008, by Ing. Jozef Sakáloš @date 2. April 2008 @version $Id$   @license application.html is licensed under the terms of the Open Source LGPL 3.0 license. Commercial use is permitted to the extent that the code/component(s) do NOT become part of another [...]]]> 
<!-- vim: ts=2:sw=2:nu:fdc=2:spell
 
An Application Page
 
@author    Ing.Jozef Sakáloš
@copyright (c) 2008, by Ing. Jozef Sakáloš
@date      2. April 2008
@version   $Id$
 
@license application.html is licensed under the terms of the Open Source
LGPL 3.0 license. Commercial use is permitted to the extent that the 
code/component(s) do NOT become part of another Open Source or Commercially
licensed development library or toolkit without explicit permission.
 
License details: http://www.gnu.org/licenses/lgpl.html
-->
 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
  <link id="theme" rel="stylesheet" type="text/css" href="css/empty.css">
  <link rel="stylesheet" type="text/css" href="css/icons.css">
  <link rel="stylesheet" type="text/css" href="css/application.css">
  <link rel="shortcut icon" href="img/extjs.ico">
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
  <script type="text/javascript" src="application.js"></script>
  <title id="page-title">Application Title</title>
</head>
<body>
 
<!-- delete following line if you don not want stats included -->
<?if("extjs.eu"===$_SERVER["SERVER_NAME"])include("stats.php");?>
</body>
</html>
<!-- eof -->

Basic HTML Page

<!-- Do NOT put any DOCTYPE here unless you want problems in IEs. -->
<html>
 
<!-- Each valid html page must have a head; let's create one. -->
<head>
  <!-- The following line defines content type and utf-8 as character set. -->
  <!-- If you want your application to work flawlessly with various local -->
  <!-- characters, just make ALL strings, on the page, json and database utf-8. -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
  <!-- Ext relies on its default css so include it here. -->
  <!-- This must come BEFORE javascript includes! -->
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
 
  <!-- Include here your own css files if you have them. -->
 
  <!-- First of javascript includes must be an adapter... -->
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
 
  <!-- ...then you need the Ext itself, either debug or production version. -->
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
 
  <!-- Include here your extended classes if you have some. -->
 
  <!-- Include here you application javascript file if you have it. -->
 
  <!-- Set a title for the page (id is not necessary). -->
  <title id="page-title">Title</title>
 
  <!-- You can have onReady function here or in your application file. -->
  <!-- If you have it in your application file delete the whole -->
  <!-- following script tag as we must have only one onReady. -->
  <script type="text/javascript">
 
  // Path to the blank image must point to a valid location on your server
  Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
 
  // Main application entry point
  Ext.onReady(function() {
	// write your application here
  });
  </script>
 
<!-- Close the head -->  
</head>
 
<!-- You can leave the body empty in many cases, or you write your content in it. -->
<body></body>
 
<!-- Close html tag at last -->
</html>
]]> http://blog.extjs.eu/patterns/file-patters/html-file-pattern/feed/ 4