...

View Full Version : HTML CSS basic HELP for coursework



leah2704
04-18-2011, 11:36 PM
Hi
It is really important for my coursework. I hope anyone of you can help.

what i need to do is. i need to convert the .gif image into a proper design. i have done most parts. but i do not know how to position the columns and the navigation. it needs to be the same as in the image.

Thank you very very much

I really need your help!!!!
Please please please

_Aerospace_Eng_
04-19-2011, 02:11 AM
This should get you started. The example uses float:left so you will need to change that. To what exactly I will leave up to you to find out.

http://bonrouge.com/2c-hf-fixed.php

Wojjie
04-19-2011, 04:19 AM
Just to add to what _Aerospace_Eng_ said, you can couple floats with margins to help space those 'floating objects'.

bullant
04-19-2011, 04:41 AM
It looks like you need a "standard" header, 2 column, footer layout.

Maybe use this demo "skeleton" layout as a starting guide.

It contains a header bar, a main content bar on the left (width 70%), a right side bar (width 30%) and a footer bar all centered on the web page.



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#wrapper {
width: 900px;
margin: 0px auto 0px auto;
border: 1px solid red;
}
#header {
border: 1px solid blue;
}
#content {
width: 70%;
float: left;
}
#content .gutter {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
}
#sidebar {
width: 30%;
float: right;
}
#sidebar .gutter {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
border: 1px solid green;
}
#footer {
clear: both;
border: 1px solid black;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER and NAVIGATION BAR</h1>
</div>
<div id="content">
<div class="gutter"> <!-- to set constant gutter around the content -->
<h1>LEFT MAIN CONTENT COLUMN</h1>
</div>
</div>
<div id="sidebar">
<div class="gutter"> <!-- to set constant gutter around the content -->
<h1>RIGHT SIDE BAR COLUMN</h1>
</div>
</div>
<div id="footer">
<h1>FOOTER BAR</h1>
</div>
</div>
</body>
</html>

leah2704
04-19-2011, 12:11 PM
thanks guys

bullant
04-19-2011, 12:35 PM
no problem :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum