I'm converting my pages from HTML to CSS,,, Help me!

ahm531 · #1 (**permalink**) Sep 1st, 2006, 12:46

Hi all,
I attached two pics, one i designed before learning CSS using table and one i'm trying to do using CSS,
As you see in the first picture there is empty blue area i want to fill with the table shown in the second picture using CSS, i tried by setting margin but it did't work, the contents was shown below the webscope division.

HELP PLEASE!!

ahm531 · #2 (**permalink**) Sep 1st, 2006, 12:49

The CSS file is below:

/*This is testing CSS on my Engineering website*/
body {background:#4682B4}
div.layout{background-color:#EAF4FF;margin-right:15%; margin-left:15%;margin-top=10%;border:outset 4pt; widht:1200px}
div.webscope {background: url('Images/Sydney2.jpg') no-repeat; width: 70%; height: 450px; margin-top: 5px;}
div.high&know {margin-left:900px;
border-left:1px solid gray;
padding:1em;}
.floatl{float:left}
.floatr{float:right}
/* TEXT STYLES*/
.f1{font:10pt italic bold arial}
.f2{font:12pt arial; color:black; font-weight:bold; font-style:italic; line-height:1.5}
.f3{font:8pt arial}

And the page code is,

<html dir="LtR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AHM 531</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<center>
<img alt="Banner" src="Images/BANNER1.bmp" height="35%" width="80%"/>
</center>
<div class="layout">
<marquee behavior="alternate" scrollamount="1" style="font-family: Courier New; font-size: 10pt; font-weight: bold">"Scientists discover the world that exists; Engineers create the world that never was."</marquee></font></b></p>
<div class="webscope"><font class=f2>
AHM 531's Scope....<br><br>
AHM 531.COM aims to serve students of Civil Engineering all over the world,
though most of the pages on this site are prepared especially for students in the University of Jordan.<br><br>
Also this site defines Civil Engineering with all of its branches to
help new students to decide whether they join Civil Engineering profession or not.<br><br>
E-Books gathered from all over the net are contained within this page to provide the help and reference to students,
besides lecture note provided by doctors in UJ and written by students Studying in UJ, LAB reports and Past Exams.<br><br>
AHM 531 is trying to connect Civil Engineers to world wide web, so that they can reach information where ever it was,
using AHM 531's Web directory you can access the most important Civil Engineering web sites.
</font></div>
</div>
</body>
</html>

ukgeoff · #3 (**permalink**) Sep 1st, 2006, 20:35

It would be a great help and more chance of you getting a response if you formated your html and css in the normal manner so it can be read easily.

Ryan Fait · #4 (**permalink**) Sep 1st, 2006, 22:10

A link to the page in action would be best, however.

Tim356 · #5 (**permalink**) Sep 2nd, 2006, 07:55

Here we go:

HTML: Select all

/*This is testing CSS on my Engineering website*/
body {background:#4682B4}
div.layout{background-color:#EAF4FF;margin-right:15%; margin-left:15%;margin-top=10%;border:outset 4pt; widht:1200px}
div.webscope {background: url('Images/Sydney2.jpg') no-repeat; width: 70%; height: 450px; margin-top: 5px;}
div.high&know {margin-left:900px;
border-left:1px solid gray;
padding:1em;}
.floatl{float:left}
.floatr{float:right}
/* TEXT STYLES*/
.f1{font:10pt italic bold arial}
.f2{font:12pt arial; color:black; font-weight:bold; font-style:italic; line-height:1.5}
.f3{font:8pt arial}

HTML: Select all

<html dir="LtR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AHM 531</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<center>
<img alt="Banner" src="Images/BANNER1.bmp" height="35%" width="80%"/>
</center>
<div class="layout">
<marquee behavior="alternate" scrollamount="1" style="font-family: Courier New; font-size: 10pt; font-weight: bold">"Scientists discover the world that exists; Engineers create the world that never was."</marquee></font></b></p>
<div class="webscope"><font class=f2>
AHM 531's Scope....<br><br>
AHM 531.COM aims to serve students of Civil Engineering all over the world,
though most of the pages on this site are prepared especially for students in the University of Jordan.<br><br>
Also this site defines Civil Engineering with all of its branches to
help new students to decide whether they join Civil Engineering profession or not.<br><br>
E-Books gathered from all over the net are contained within this page to provide the help and reference to students,
besides lecture note provided by doctors in UJ and written by students Studying in UJ, LAB reports and Past Exams.<br><br>
AHM 531 is trying to connect Civil Engineers to world wide web, so that they can reach information where ever it was,
using AHM 531's Web directory you can access the most important Civil Engineering web sites.
</font></div>
</div>
</body>
</html>

ahm531 · #6 (**permalink**) Sep 2nd, 2006, 10:12

I haven't uploaded the page yet.
Can't any one help me here please?!!

ahm531 · #7 (**permalink**) Sep 4th, 2006, 22:57

It still didn't work, and I didn't hear from you for a long time. Any comments?!!
Or is it impossible to do that

ukgeoff · #8 (**permalink**) Sep 5th, 2006, 10:28

There are a number of things I would like you to do with your code to bring it into line with standards which also involve getting rid of propriatory code:

1. Give it a DOCTYPE.

2. Change the charset to an ISO standard.

3. Get rid of the <center></center> tags.

4. Get rid of the <marquee></marquee> tags.

5. All styling should be handled through css. This sought of coding, <font classs=f2> is both syntactically wrong and very bad practice.

6. I'm not sure without looking it up but I think the use of the ampersand(&) in a class name is not allowed, eg., div.high&low.

Take care of this sought of thing and then lets see what you have.

ahm531 · #9 (**permalink**) Sep 5th, 2006, 22:29

Thanx for the advices UKGEOFF, I could handle most of them except the charset point.
I haven't heard of this before, i looked it over the net and read an article about the ISO 10646 and UNICODE on w3.org; What i couldn't get what should i use as a character encoding, and how should it be declared, the page provided three methods as I understood

An HTTP "charset" parameter in a "Content-Type" field.
A META declaration with "http-equiv" set to "Content-Type" and a value set for "charset".
The charset attribute set on an element that designates an external resource.

Which one is better and what is the third method?
And if the HTTP protocol has its default encoding, why should we determine one.
It is so complicated!

ukgeoff · #10 (**permalink**) Sep 6th, 2006, 10:06

For the time being, stick with this method and you won't go far wrong.

Code: Select all

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

If you are coding to xhtml standard and decide to use utf-8 for your charset, then use this variant.

Code: Select all

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Beware though that moving to utf-8 has thigs you will need to be aware of.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] converting flash to html	Posie	Starting Out	3	Dec 2nd, 2007 20:04
[SOLVED] Converting BBcode to HTML	AdRock	PHP Forum	10	Oct 9th, 2007 08:53
Converting from HTML to XHTML	Aaron1988	Web Page Design	1	Dec 4th, 2006 15:09
help with converting HTML to XHTML	sing2trees	Web Page Design	4	Sep 20th, 2006 03:35

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
I'm converting my pages from HTML to CSS,,, Help me!