PDA

View Full Version : 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
http://img220.imageshack.us/img220/9308/ffgt4.th.png (http://img220.imageshack.us/my.php?image=ffgt4.png)http://img220.imageshack.us/images/thpix.gif (http://g.imageshack.us/thpix.php)http://img55.imageshack.us/images/thpix.gif http://img353.imageshack.us/images/thpix.gif (http://g.imageshack.us/thpix.php)http://img220.imageshack.us/img220/1338/ieyw3.th.png (http://img220.imageshack.us/my.php?image=ieyw3.png)http://img220.imageshack.us/images/thpix.gif (http://g.imageshack.us/thpix.php)


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

<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

#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.


<!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
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
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.
wazup999
18-11-2008, 03:40 AM
Yes. You are allowed.

Ok but why would I have to put a pixel value for the header instead of a %?

When I use % for the header the whole page goes white on firefox and on IE everything messes up with xhtml. But with the px everything appears perfect O.o lol I'm so lost.

Waz ;]
Calon
18-11-2008, 03:51 AM
Ok but why would I have to put a pixel value for the header instead of a %?

When I use % for the header the whole page goes white on firefox and on IE everything messes up with xhtml. But with the px everything appears perfect O.o lol I'm so lost.

Waz ;]
I never seem to experiance problems using %..
Iszak
18-11-2008, 01:12 PM
Erm, using percentages in XHTML? Sure I don't see why you can use it in context.. but I mean when it comes to CSS yes you're also allowed on a number of things - but it's not a matter of can XHTML or can HTML, but can CSS, which it can. I personally don't use percentages for heights, more so widths, because if you've got an element directly in the body that is height 100% and you want it to cover the entire screen, it will not do so - simply because body and the html elements aren't 100% to start with, to get around this you can use something like.



<!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>

<style type="text/css">
html, body
{
height: 100%;
overflow: auto;
margin: 0;
border: 0;
}

#full-body
{
width: 100%;
height: 100%;
background-color: #ccc;
}
</style>
</head>
<body>

<div id="full-body"></div>

</body>
</html>


That will produce a 100% width and height, full-body. I might also add some browsers may not have by default the width 100% on html, and body so you might want to add that too but I wouldn't worry. The Margin is there to remove the default styling of most broswers, as for border that's to remove the border in IE6. Again I don't really advise percentages in heights unless you've got a fixed height container, but I guess it goes for your situation.
wazup999
18-11-2008, 03:02 PM
Yeah I understand what u mean

Thanks,
Waz ;]

Want to hide these adverts? Register an account for free!