EladElrom.com

Deep Dive Into Technology

Category Archives: CSS

Organizing your HTML page's structure using iframe

HTML doesn’t have that OOP structure we all used to when developing high level languages and often I wonder how can I adjust my pages to be organized well. You can create a structure using templates or have a server side script to load pieces and create the document, however sometime you want a more straight forward simple approach. One approach is creating a document and using iframe to hold pieces of the document. for instance: left navigation, middle page, footer etc and than have a document that stitch these together.

For instance, look at the example below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
</head>

<body>
    <div class="boxborder">
    	<div class="LeftPanel">
	        <iframe id="leftframe" name="leftframe" vspace=0 hspace=0 marginwidth=0 marginheight=0 align="left" scrolling="no"
            	frameborder="0" height="500px" src="leftpage.html"></iframe>
        </div>
        <div class="RightPanel">
	        <iframe id="rightframe" name="rightframe" align="left" vspace=0 hspace=0 marginwidth=0 marginheight=0 scrolling="no"
            	frameborder="0" width="500px" height="500px" src="rightpage.html"></iframe>
        </div>
    <div>
</body>
</html>

Using the following CSS style sheet:

@charset "utf-8";
/* CSS Document */

html, body {
		border: 0px;
		margin: 0px;
}
.boxborder{border:1px black solid;float:left;margin:100px 0 0 100px;}
.LeftPanel{
	float:left;
	width:200px;
}
.RightPanel{
	float:left;
	width:500px;
}
.RightBody {
	background-color:#CCCCCC;
	height:500px;
	text-align:center;
	font-size:18px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	padding:10px 0 0 0;
}
.LeftBody {
	background-color:#666666;
	height:500px;
	color:#FFFFFF;
	font-size:18px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	padding:10px 0 0 55px;
}

You can than create the left page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
</head>

<body>
	<div class="LeftBody">
    	Left Page
    </div>
</body>
</html>

Centering horizontal and vertical elements using CSS for HTML div elements

Sounds trivial but took some time to find something that works and even than I had to modify the code. I was trying to center vertically and horizontally an HTML element using div element as well as position elements on different corners of the the screen.

Here’s the CSS code:

#horizental-vertical-center
{
	background-image:url('images/form_background.gif');
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-230px;/* half elements height*/
	margin-left:-207.5px;/* half elements width*/
	width:420px;
	height:415px;
	overflow:auto;/* allow content to scroll inside element */
	text-align:left;
}

div.bottom-left
{
	display:block;

	position:absolute;
	bottom:30px;
	left:22px;
	width:350px;
}

div.bottom-right
{
	background-image:url('images/suitecase.gif');

	position:absolute;
    bottom:0;
    right:0;
    width:119px;
	height:192px;
}

div.top-left
{
	background-image:url('images/airplane.gif');

    position:absolute;
    top:20px;
    left:20px;
    width:255px;
	height:231px;
}

And here’s the HTML code:

<body>
	<div class="top-left" />

        <div id="horizental-vertical-center">
        </div>
</body>