7 replies [Last post]
Patricknl
Patricknl's picture
Offline
newbie
Holland
Last seen: 12 years 18 weeks ago
Holland
Timezone: GMT+2
Joined: 2010-03-23
Posts: 4
Points: 6

Hello fellow programmers,

Let me first introduce a little: Im 17,from holland and as a project for school we must build a website
in an external css file and xhtml.
And my studypartner and i are trying to get it right so we have a little plan for our website.
We both have little experience with programming in css and xhtml.

This is a simple example of how it will be going to look like in the end.

* menu on the right
* banner with titel is most above
* textfield on the right below

If written this code but as you might see/read it does not really look like the picture
XHTML Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
	<link rel='stylesheet' href="box.css" type='text/css'/>
</head>
 
<body>
<div class="boxxx">
this is the menu box
</div>
<div class="boxxxx">
this is the body box
</div>
 
</body>
</html>

And this is the CSS code

.boxxx
{
	width: 100px;
	height: 400px;
	margin: 0;
	padding: 10px;
	border: 1px dotted black;
	background-color: red;
	color: black;
}
.boxxx
{
	position: absolute;
	float: left;
}
 
.boxxxx
 
{
	width: 400px;
	height: 400px;
	margin: 0;
	padding: 10px;
	border: 1px dotted black;
	background-color: red;
	color: black;
	float: right
}

As you might see there is a start but what im a doing wrong here searched for 2 days for a clear solution but i cant find it .
But i did find this forum Wink

Greetings from the netherlands,

Patrick

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 5 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

You can run a search on

You can run a search on google or yahoo for "Layout Gala"

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I think you need to dive into

I think you need to dive into your text-book, or whatever learning materials your instructor gave you, and read read read. some things to think about.

1. name your classes and ID's with names that make sense

2. do not use css positioning until you know how to use it

3. dont use float until you know how to use it.

4. no text should appear before DOCTYPE

5. why declare a class twice, when you can just do it once. Combine .boxxx classes.

6. research why menus need to be structured as UL lists

7. so you have a masthead, and the menu and content is to the right of the screen, what going to be on the left side?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Deuce wrote: You can run a

Deuce wrote:

You can run a search on google or yahoo for "Layout Gala"

I wouldnt suggest that for students. They need to learn, not get hand-outs

Patricknl
Patricknl's picture
Offline
newbie
Holland
Last seen: 12 years 18 weeks ago
Holland
Timezone: GMT+2
Joined: 2010-03-23
Posts: 4
Points: 6

Hi there, Thank you guys for

Hi there,

Thank you guys for the quick response !

Deuce : thank you for the search term is it very usefull indeed ,many samples.

CupidsToejam : thanks for the advise but im not quite clear about a couple of things

You said dont post any text before DOCTYPE but in my text-book it said
always use this line

<?xml version="1.0" encoding="UTF-8"?>
before DOCTYPE .we have to program in xhtml 1.1 strict
Who do i have to believe ?

How can combine both .boxxx classes when they are different size ?

The menu needs to be on the left was a typo.

Greetings Patrick

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

do whatever the book says to

do whatever the book says to get the grade, but to gain bonus points, explain to the instructor that anything before the DOCTYPE put IE into quirks mode. Research the term. As far as the xml and encoding goes, this is how my code usually looks...

<!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>Untitled Document</title>
</head>

according to your code above you have this...

.boxxx
{
	width: 100px;
	height: 400px;
	margin: 0;
	padding: 10px;
	border: 1px dotted black;
	background-color: red;
	color: black;
}
.boxxx
{
	position: absolute;
	float: left;
}

Why not combine them like this...

.boxxx
{
        position: absolute;
	float: left;
	width: 100px;
	height: 400px;
	margin: 0;
	padding: 10px;
	border: 1px dotted black;
	background-color: red;
	color: black;
}

Patricknl
Patricknl's picture
Offline
newbie
Holland
Last seen: 12 years 18 weeks ago
Holland
Timezone: GMT+2
Joined: 2010-03-23
Posts: 4
Points: 6

Thank you for the

Thank you for the explaination !

Never heard about Quirks mode going to research after i finish this comment.

About the .boxxx code and combining it ,i also thought that was more logical than making two codes but that was also what the book said .I will continu to use your code structure.
Thanks again . Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

before going off and using my

before going off and using my code, make sure your instructor is okay with it. instructors teach in steps, and maybe you guys arent too this step yet. I remember when I was in school, i often jumped ahead of the rest of the class, and got penalized for doing so.