First try at divs

wazup999 · 16-11-2008, 04:23 PM

Well, I've been trying to code with divs for an hour now. I've looked at certain websites source and I just jumped into trying to code in divs lol.

I've run into a few problems which happens when you jump into something without thinking. I'm trying to make it fit different resolutions. And trying to make it work in firefox and IE. An god it's complicated.

this is how it looks so far in:

firefox.....................InternetE

As you can see the result is a bit different. What did I do wrong?

HTML Code:

<html>
<head>
<title>EMFriends</title>
</head>
<style type="text/css">
<!--
body {
  background-color: #FFFFFF;
  margin: auto;
}
#top {
  background-color: #2B2B2D;
  height: 13%;
  width: 100%;
}
#logo {
  background: url(logo.png);
  background-repeat: no-repeat;
  height: 150px;
  width: 300px;
  position:absolute;
  left:0.5%;
  top:1%;
}
#logged {
  height: 90%;
  width: 40%;
  position:relative;
  left: 45%;
}
#logged_left {
  width: 2%;
  height: 100%;
  float: left;
}
#logged_center {
  background-color: #598DB3;
  height: 100%;
  width: 96%;
  float: left;
}
#logged_right {
  background: url(logged_right.png);
  background-repeat: no-repeat;
  width: 2%;
  height: 100%;
  float: right;
}
#navigation {
  height: 35%;
  width: 40%;
  margin-top: 5%;
  float: right;
}
#navigation_left {
  background: url(nav_left.png);
  background-repeat: no-repeat;
  height: 100%;
  width: 5%;
  float: right;
}
#navigation_right {
  background-color: #FFFFFF;
  height: 100%;
  width: 95%;
  float: right;
}
#center {
  background-color: #FFFFFF;
  height: 100;
  width: 100%;
}
#bottom {
  background-color: #2B2B2D;
  height: 13%;
  width: 100%;
}
-->
</style>
<body>
<div id='top'>
<div id='logo'></div>
<div id='logged'>
  <img id='logged_left' src='logged_left.png'>
  <div id='logged_center'></div>
  <img id='logged_right' src='logged_right.png'>
</div>
</div>
<div id='top'>
  <div id='navigation'>
    <div id='navigation_right'></div>
    <div id='navigation_left'></div>
  </div>
</div>
<div id='center'></div>
<div id='bottom'></div>
</body>
</html>

Other than that little problem, when I write text in the div the text just spills out I guess. And how would I put the footer at the bottom of the page?

Thanks,
Waz ;]

~~Jackboy~~ · 16-11-2008, 05:07 PM

Is this the blue box:

#navigation_right {
background-color: #FFFFFF;
height: 100%;
width: 95%;
float: right;
}

wazup999 · 16-11-2008, 05:29 PM

no thats the nav bar thingy. the blue box is

HTML Code:

#logged {
  height: 90%;
  width: 40%;
  position:relative;
  left: 45%;
}
#logged_left {
  width: 2%;
  height: 100%;
  float: left;
}
#logged_center {
  background-color: #598DB3;
  height: 100%;
  width: 96%;
  float: left;
}
#logged_right {
  background: url(logged_right.png);
  background-repeat: no-repeat;
  width: 2%;
  height: 100%;
  float: right;
}

Iszak · 16-11-2008, 07:09 PM

Save headaches! Use a well formed document which includes a document type! this will stop the box model bug in Internet Explorer! The following example is one that is well formed to a certain degree.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    <title>Site Name - Site Slogan</title>
  </head>
  <body>

    

  </body>
</html>

wazup999 · 16-11-2008, 08:39 PM

lol

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

wrecks my layout completely. On IE everything is the wrong size and in firfox all the divs go white.

Waz

~~Jackboy~~ · 16-11-2008, 08:55 PM

Originally Posted by wazup999

lol

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

wrecks my layout completely. On IE everything is the wrong size and in firfox all the divs go white.

Waz

try transitional.

But when you start getting better at css / divs / xhtml then use strict.

I use tranditional sometimes

wazup999 · 16-11-2008, 09:10 PM

Still no worky.

Guess I'll have to go learn xhtml or something :/

Waz

Iszak · 17-11-2008, 03:59 PM

Yeah sorry I forgot to mention it'll wreck your page because you developed it without a document type - it's almost gaurateed that it'll be messed with a doctype as yours was developed in quirks mode, a doctype triggers standards mode. So start again with HTML 4.01 Strict and a well formed document.

wazup999 · 18-11-2008, 03:07 AM

After messing around with the values I've found out that I can't use % for dimensions? I changed a % value to a px value and the layout started appearing in firefox.

Now I'm just wondering are we allowed %s with xhtml? Because I had to put the height of the top header to px to make it appear??

Weird,
Waz ;]

~~Calon~~ · 18-11-2008, 03:10 AM

Originally Posted by wazup999

After messing around with the values I've found out that I can't use % for dimensions? I changed a % value to a px value and the layout started appearing in firefox.

Now I'm just wondering are we allowed %s with xhtml?

Waz ;]

Yes. You are allowed.

Thread: First try at divs

Thread Tools

First try at divs

Posting Permissions