Skip to content

positioning the basic parts of a web page

October 23, 2013

this post is about positioning and  behavior of the div after we put some elements there, texts or other objects that would alter the size of the div.


Simple, Free Image and File Hosting at MediaFire

 HTML CODE

<html>
    <head>
        <title>Explore and Learn</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href = "main_css.css" media = "all" rel = "stylesheet" type = "text/css" >

    </head>
    <body>
        <div id ="navigation_fixedbar">
			navigation_fixedbar ::: is fixed at the top
			</div>

        <div id ="body">

            <div id ="banner">
			<br><br><br><br><br>
				banner ::: will be always at the top left corner of the page
			</div>

            <div id ="navigation_horizontalbar">
				navigation_horizontalbar ::: also relative to the other div
			</div>
            <div id ="navigation_sidebar">
                <strong>navigation_sidebar</strong>
				::: the text here are wrapped around the div with a constant
				width using the css property word-wrap. Meaning the height of
				the div elements adjusts to the texts and the width remains 
				the same.
                <br><br>

                the text here are wrapped around the div with a constant width 
				using the css property word-wrap. Meaning the height of the div 
				elements adjusts to the texts and the width remains the same.

            </div>

            <div id ="content">
				<h3>title</h3>
				<p>
					this part. the div will adjust according to the size of the text.
					same behavior from the div of the banner and the horizontal bar
				</p>
			</div>
        </div>

        <div id ="footer">
			footer ::: this area will stay at the bottom 
			and be placed relative to the height of 
			the sidebar or the content area. thus always 
			at the bottom.
		</div>

    </body>
</html>

 

 

in the css, the key properties to note to be able to position the div

  1. margin-left and right set to auto enables the div to center
  2. float set to left or right enables the div to be at left or right
  3. top, left, right, and bottom set to pixel positions the div specifically
  4. position property set to fixed (relative to window) absolute (relative to parent element) relative (normal) z-index ( which element should be placed in front of or behind)

 

in the css, the key properties to note to be able to control the behavior of the div

  1. display set to table, allows the div to adjust the size of the div according to the elements inside it
  2. word-wrap to break-word, allows text to not overlap
  3. word-break set to keep-all or break-all, similar to word-wrap

 

 

CSS CODE

/*
Document   : main_css
Created on : Oct 19, 2013, 9:06:23 AM
Description:
styling the main parts of the page.

=the banner
=the navigations : sidebar and horizontal bar
=the footer and
=content areatags*/
/*+clearfix {*/
#navigation_sidebar:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
}
#navigation_sidebar
{
	display: inline-block;
}
#navigation_sidebar
{
/*\*/
	display: block;
/**/
	-height: 1px;
}
/*+}*/
BODY
{
	margin: 0px;
	padding: 0px;
}
/*top fixed navigation bar*/
#navigation_fixedbar
{
	height: 45px;
	width: 100%;
	background-color: #2333D1;
	top: 0px;
	position: fixed;
}
/*holds the navigations, content, and banner area*/
#body
{
	display: table;
	background-color: #879AD8;
	width: 820px;
	height: 89.3%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 45px;
}
/*main parts*/
#banner
{
	width: 100%;
	height: 142px;
	background-color: #D123A9;
}
#navigation_horizontalbar
{
	width: 100%;
	height: 29px;
	background-color: #BA540B;
}
/*[clearfix]*/#navigation_sidebar
{
	width: 156px;
	background-color: #63CBDB;
	display: table;
	float: left;
	margin: 21px 0px 21px 21px;
}
#content
{
	display: table;
	height: 238px;
	background-color: #8CB80D;
	word-wrap: break-word;
	float: left;
	margin: 21px;
	width: 600px;
}
/*bottom relative footer*/
#footer
{
	width: 100%;
	height: 25px;
	background-color: #AB0A2C;
}

FINISHED!!!

Advertisements

From → CSS, HTML

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

TurtleAndRobot.com

Children's Book Reviews

Malav Shah

official Web Site

My Road to Programming

The journey of how I taught myself to program.

paritoshmishra

Look at what's brewing up guys! we all are work in progress. So don't meander, lets micromesh everything and have candid conversation about every problem related to C, C++ and JAVA. We can rejuvenate the crinkled faces.

ProgramThat;

A simple guide to programming...

ITechonology

Information Techonology

Rahul's Work

My Work Tips and Tutorial on Various Tech.

Turnip Farmers

Kingdom Scans

Gigaom

Technology news, trends and analysis covering mobile, big data, cloud, science, energy and media

The Neighborhood

Society online's creative conscious.

HarsH ReaLiTy

A Good Blog is Hard to Find

VentureBeat

News About Tech, Money and Innovation

retireediary

The Diary of a Retiree

50 Year Project

My challenge to visit 192 countries, read 1,001 books, and watch the top 100 movies

[BTW] : Ben Trube, Writer

Writer, Programmer, Singer

My Arch Walkthrough

Arch linux made easy

Don Charisma

because anything is possible with Charisma

SutoCom Solutions

Success & Satisfaction with the Cloud

%d bloggers like this: