[SOLVED] Defining your box

DEVILofDARKNESS · June 30, 2009

I'm trying to do the same the same in css as the folowing:

<table border='100%' width='100%'>
<tr><td width='15%'>...</td><td width="85%">...</td>
</table>

is it something like?:

(I don't use margin, padding, border yet)

#navigation {

position: absolute;

width: 15%;

height: 100%;

font-weight: normal;

}

#Main {

position: absolute;

height: 100%;

width: 85%;

}

btw: I don't use pixels because I want to have the page displayed in every screen resolution the same.

Or is this also with pixels?

DEVILofDARKNESS · June 30, 2009

Okay don't think about the text above,

I've this php script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Intro - CSS</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="./css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="navigation">
	<i>Navigation</i>
	</div>
	<div id="main">
	Coming out Soon
	</div>
	<div id="footer">
	<i>Footer</i>
	</div>
</body>
</html>

and this css script:

body {

color: #FFFFFF;

background-color: #000000;

}

/************************* ID's *************************/

#navigation {

/*position: absolute;*/

float: left;

width: 15%;

height: 90%;

border: 1px solid #FFFFFF;

font-weight: normal;

}

#main {

/*position: relative;*/

float: left;

width: 75%;

height: 90%;

border: 1px dashed #FFFFFF;

}

#footer {

clear: both;

width: 100%;

height: 10%;

border: 1px dotted #FFFFFF;

}

But The Div's don't fill whole the page, what have I done wrong?

Hybride · June 30, 2009

Try adding a width:100% to the body tag.

DEVILofDARKNESS · June 30, 2009

No didn't work either

I just get a column Navigation then a column Main part and below both a column footer which is more wide.

Hybride · June 30, 2009

Ok, now I see what you were trying to do. Try this:

CSS

	
*{margin:0;padding:0} 

body {
width:100%;
height:100%;
color: #FFFFFF;
background-color: #000000;
}


#box{width:100%; height:100%}
/************************* ID's *************************/

#navigation {
float: left;
width: 15%;
height: 90%;
border: 1px solid #FFFFFF;
font-weight: normal;
}

#main {
/*position: relative;*/
float: left;
width: 75%;
height: 90%;
border: 1px dashed #FFFFFF;
}

#footer {
clear: both;
width: 100%;
height: 10%;
border: 1px dotted #FFFFFF;
}

And the HTML:

   <body>
<div id="box">
      <div id="navigation">
      <i>Navigation</i>
      </div>
      <div id="main">
      Coming out Soon
      </div>
      <div id="footer">
      <i>Footer</i>
      </div>
</div>
   </body>
</html>

Here's a link to how it looks: test page.

DEVILofDARKNESS · June 30, 2009

In first place that didn't work either,

but I find what was wrong,

my doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

what is wrong with it? if I include it, the page is ugly formatted...

Hybride · June 30, 2009

This is the page exactly as I have it on my site:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Intro - CSS</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <style rel="stylesheet" type="text/css">
*{margin:0;padding:0}
body {
width:100%;
height:100%;
color: #FFFFFF;

background-color: #000000;

}
html{height:100%}

#box{width:100%; height:100%}
/************************* ID's *************************/

#navigation {

float: left;

width: 15%;

height: 90%;

border: 1px solid #FFFFFF;

font-weight: normal;

}

#main {

/*position: relative;*/

float: left;

width: 75%;

height: 90%;

border: 1px dashed #FFFFFF;

}

#footer {

clear: both;

width: 100%;

height: 10%;

border: 1px dotted #FFFFFF;

}</style>
   </head>
   <body>
<div id="box">
      <div id="navigation">
      <i>Navigation</i>
      </div>
      <div id="main">
      Coming out Soon
      </div>
      <div id="footer">
      <i>Footer</i>
      </div>
</div>
   </body>
</html>

There's nothing wrong with your Doctype, am not understanding your question.

Maybe you linked to the external stylesheet wrong (as in, it's in the wrong folder/address)?

DEVILofDARKNESS · June 30, 2009

Indeed that works,

I've linked the stylesheet as following

<link href="./css/index.css" rel="stylesheet" type="text/css">

I don't see why that would be wrong?

because my background becomes black and the beackgroundcolor is defined in the css file.

Hybride · June 30, 2009

Can you post a link to your site so we can see what's going on directly?

Your link may not be resolving to the right folder: add an extra . to make it ../css/index.css

One period (./) is going to the folder above (so your ./css is going to site.com/whatever/css/); but two (../) resolves to a relative url (so site.com/css/).

DEVILofDARKNESS · June 30, 2009

Yes I know what ./ and ../ does,

but I get a black background, and the color for the background is defined in the same css file

I even made the path the full length http://localhost/europia/css/index.css

So I can't see what is wrong?

Hybride · June 30, 2009

Localhost doesn't help - that means it's running on your computer and not live (C:\inetpub\wwwroot\europia\css\index.css as it says on the error page).

Anyway, you might have a renegade "background" or "background-color" somewhere, or even the way you set your browser to display. I know you can change browser background colors to whatever you want, you might have to check that.

DEVILofDARKNESS · July 1, 2009

Nop, it has to work with localhost too becuase I specified a Non existing windows path, and the page was with and all the floats were away.

and the background was white!

I will just include whole the css in the file itself.

It has something to do with that doctype because if I let it away and I keep my external stylesheet, then it works like it should work.

I also used the W3C CSS validator and Html validator and they are both validated as valid.

DEVILofDARKNESS · July 1, 2009

Even if I include the stylesheet in the page it won't work untill I remove the doctype!

Because it works with your example, I tried to do the same except I removed your css and added my css, but here something goes wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Intro - CSS</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <style rel="stylesheet" type="text/css">
* {
margin: 0;
padding: 0;
}
body {
color: #FFFFFF;
width: 100%;
height: 100%;
background-color: #000000;
}
/************************* ID's *************************/
#box {
width:100%;
height:100%;
}
#navigation {
/*position: absolute;*/
float: left;
width: 10%;
height: 90%;
font-weight: normal;
}
#main {
/*position: relative;*/
float: left;
width: 90%;
height: 90%;
}
#footer {
clear: both;
width: 100%;
height: 10%;
}
</style>
   </head>
   <body>
<div id="box">
      <div id="navigation">
      <i>Navigation</i>
      </div>
      <div id="main">
      Coming out Soon
      </div>
      <div id="footer">
      <i>Footer</i>
      </div>
</div>
   </body>
</html>

But I tried some different doctypes and only the following worked:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I also tried some with URI's but those ignored my css percentages

(I read that that type of doctype still worked with older browsers, but I've downloaded Opera 7 yesterday, so I don't think that's the problem)

Hybride · July 1, 2009

If the background-color is a problem, you do have it set to black (#000) in your CSS style (white is #fff). Other than that, the CSS looks fine to me.

As far as doctype goes, I have no idea why your strict is not working, because it is on my layout. But if transitional works, then stick with that. Maybe strict is messing with previous settings, but I don't know.

Sorry I couldn't be of more help. :/

DEVILofDARKNESS · July 1, 2009

It's nothing, thanks for your time!

haku · July 2, 2009

Using a doctype is the right way to go. If your code was working without a doctype, it was probably only working in one browser. The doctype tells the browser what rules to evaluate the code by. If you don't include it, the browser has to guess, and different browsers make different guesses, meaning that your code isn't cross-browser compatible. So after adding a doctype, you may need to change your code, but that's a good thing.

In the future, it's best to start your code with the doctype already there, so you don't have to try and fix things later after adding it.

Sign In

[SOLVED] Defining your box

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information