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.pnghttp://img220.imageshack.us/images/thpix.gifhttp://img55.imageshack.us/images/thpix.gif http://img353.imageshack.us/images/thpix.gifhttp://img220.imageshack.us/img220/1338/ieyw3.th.pnghttp://img220.imageshack.us/images/thpix.gif
As you can see the result is a bit different. What did I do wrong?
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?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>
Thanks,
Waz ;]
