Forum: web design and graphics community

Celestial Star Forum > Web Development > Coding > Problems with DIV Layout

Pages: [1]

« previous next »

Author

Topic: Problems with DIV Layout (Read 495 times)

Aiko-Chan123

Angeling

Posts: 19

Problems with DIV Layout

« on: February 17, 2008, 06:38:46 PM »

Hello there again.
Hm....while I was coding my DIV layout, I cam a cross some problems that I can't fix at all. For some weird reasons I can't see my footer image and the background (where the content is) doesn't repeat at all. Can someone help me out please? All you have to do is fix my mistakes and problem solve ^.^V

Code:

<html>
<head>
<title>emily</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>

body {
font: 11px/17px Verdana, Arial, sans-serif;
font-size : 11px;
color : #d47686;
cursor: default;
}

#container {
width: 800px;
margin: 0 auto;
text-align: left;
}

#header {
width: 698px;
height: 360px;
background-image: url('http://i272.photobucket.com/albums/jj167/cpdesigns/iEMILY/emily_02_02.jpg');
}

#sidebar {
float: left; /
}

#content {
float: left;
width: 698px;
background-color: #fff;
background-image: url('http://i272.photobucket.com/albums/jj167/cpdesigns/iEMILY/bg-2.jpg');
background-repeat: repeat-y;
font-family: Verdana;
font-color: #d47686;
font-size: 11px;
padding-left: 8px;
padding-top: 4px;
word-spacing: 1pt;
cursor: default;
}

#footer {
background-image: url('http://i272.photobucket.com/albums/jj167/cpdesigns/iEMILY/emily_02_06.jpg');
width: 698px;
}

</style>
</head>
<body background="http://i272.photobucket.com/albums/jj167/cpdesigns/iEMILY/bg.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>


<div id="container">
<div id="header"> </div>
<div id="content">

<div style="top:510; left:3; width:526; overflow:auto;">



Your content here ... lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus viverra, risus sed viverra congue, dui nibh ullamcorper nisl, a dictum lectus erat sed odio. Nunc porttitor imperdiet felis. Cras ornare risus vitae ipsum. Nullam porta sollicitudin nunc. Curabitur euismod iaculis enim. Integer semper ultricies felis. Duis dapibus, ante sed dignissim ultrices, pede ligula ornare orci, sit amet dapibus erat turpis vitae lacus. Aliquam eu nisl at diam dapibus malesuada. Mauris magna. Sed quis tortor. Donec ante.</p>

<p>Your content here ... pellentesque aliquam eros sit amet odio cursus tristique. Etiam semper euismod elit. Vivamus faucibus, felis pretium fermentum fermentum, pede velit laoreet nisl, nec sollicitudin eros velit ac quam. Maecenas augue. Mauris pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et tortor vel turpis tristique ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque dui nisl, vestibulum et, blandit sed, eleifend quis, velit. Etiam rutrum semper nulla. </p>

<p>Your content here ... curabitur ornare nisi vel erat. Aliquam tempor, magna at laoreet egestas, pede libero interdum augue, a interdum erat leo vel risus. Pellentesque neque urna, semper vel, mollis vel, tempus volutpat, leo. Suspendisse gravida posuere erat. Etiam nec lorem. Duis at dui in diam tincidunt tincidunt. Quisque adipiscing sodales purus. Suspendisse sed quam ut arcu sollicitudin faucibus. Donec nulla purus, pulvinar et, blandit vitae, eleifend at, nisi. In est dolor, cursus at, suscipit ut, dignissim id, nulla. </p>



</div>
</div>

<div id="sidebar">

<div style="position: absolute; top:360; left:774; width:146; overflow:auto;">



<p>Your content here ... lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus viverra, risus sed viverra congue, dui nibh ullamcorper nisl, a dictum lectus erat sed odio. Nunc porttitor imperdiet felis. Cras ornare risus vitae ipsum.</p>

<p>Nullam porta sollicitudin nunc. Curabitur euismod iaculis enim. Integer semper ultricies felis. Duis dapibus, ante sed dignissim ultrices, pede ligula ornare orci, sit amet dapibus erat turpis vitae lacus. Aliquam eu nisl at diam dapibus malesuada. Mauris magna. Sed quis tortor. Donec ante.</p>



</div>



<div id="footer"> </div>



</div>
</center>
</body>
</html>

~ Thank you!!!