Gamerz Posted December 2, 2009 Share Posted December 2, 2009 Hello, I have been working on this template for a website. I am also close to finishing, but the main part is missing...the main content!! Every time I try writing something in the main contents place, it just either goes to really bottom, or it just messed the whole template up.. Below is the FULL code of the website. Try it out by going to Notepad or Wordpad and pasting the code, and then testing.. The main content is basically the blank space left on the webpage. I want to be able to fill everything with text from top to bottom in this white space. To go directly to the main content place, Find in my code below: <!-- I have attempted to add the main contents here, but failed....so try it yourself! --> <html> <head> <style type="text/css"> p.first { background-image: url('http://www.happylily.info/project/footer.jpg'); background-position: bottom; background-repeat: no-repeat; color:white; } </style> </head> <body> <!-- Displays the header image --> <img src="http://www.happylily.info/project/header.jpg" height="110" width="1350" /> <!-- Displays the white vertical line (For seperation use.) inside the image --> <DIV STYLE="position:absolute; top:10px; right:110px"> <table border="0" cellpadding="0" cellspacing="5"> <tr valign="top" align="left"> <td width="1" bgcolor="white"><br /> </td> <td width="150" valign="top" align="left"> <p><br><br><br><br><br></p> </td> </tr> </table> </DIV> <!-- Positions the login form inside the image --> <DIV STYLE="position:absolute; top:5px; right:25px"><CENTER><FONT COLOR="00ff00"><br> <form action="login.php" method="POST"> Username: <input type="text" size="20"><br> Password: <input type="password" size="20"><br><br> <input type="submit" value="Login!"> <input type="submit" value="Forgot Password?"> </form> </FONT></CENTER> </DIV> <!-- Displays the gray bar below the header. --> <img src="http://www.happylily.info/project/second-bar.jpg" height="50" width="1350" /> <!-- Displays the white vertical line (for seperation use) inside the image. --> <DIV STYLE="position:absolute; top:120px; left:275px"> <table border="0" cellpadding="0" cellspacing="5"> <tr valign="top" align="left"> <td width="1" bgcolor="white"><br /> </td> <td width="150" valign="top" align="left"> <br><br></td> </tr> </table> </DIV> <DIV STYLE="position:absolute; top:135px; left:400px"> <table border="0" cellpadding="0" cellspacing="5"> <tr valign="top" align="left"> </td> <td width="150" valign="top" align="left"> <!-- Delete this comment, and replace with top navigation bar. --> </td> </tr> </table> </DIV> <!-- Displays the restuarant finder form inside the gray image. --> <DIV STYLE="position:absolute; top:100px; left:20px"><FONT COLOR="00ff00"><br> Search Restaurants: (<a href="advance_search.php">Advanced Search</a>)<br> <form action="search_submit.php" method="post"> <input type="text" name="search" size="20"> <input type="submit" value="Search"> </form> </FONT> </DIV> <!-- Displays the navigation menu and contents --> <img src="http://www.happylily.info/project/third-bar.jpg" height="45" width="267" align="top" /><br> <a href="LOL">LOL</a><br> <img src="http://www.happylily.info/project/navi-skinny.jpg" height="2" width="272" /><br> <a href="LOL">LOL</a><br> <img src="http://www.happylily.info/project/navi-skinny.jpg" height="2" width="272" /><br> <a href="LOL">LOL</a><br> <img src="http://www.happylily.info/project/navi-skinny.jpg" height="2" width="272" /><br> <a href="LOL">LOL</a><br> <img src="http://www.happylily.info/project/navi-skinny.jpg" height="2" width="272" /><br> <a href="LOL">LOL</a><br> <img src="http://www.happylily.info/project/navi-skinny.jpg" height="2" width="272" /><br> <a href="LOL">LOL</a><br> <img src="http://www.happylily.info/project/navi-skinny.jpg" height="2" width="272" /><br> <a href="LOL">LOL</a><br> <img src="http://www.happylily.info/project/navi-skinny.jpg" height="2" width="272" /><br> <a href="LOL">LOL</a><br> <img src="http://www.happylily.info/project/navi-skinny.jpg" height="2" width="272" /><br> <DIV STYLE="position:absolute; top:148px; left:280px"><FONT COLOR="00ff00"><br> <img src="http://www.happylily.info/project/navi-skinny.jpg" height="375" width="2" /> </FONT> </DIV> <center> <!-- I have attempted to add the main contents here, but failed....so try it yourself! --> <!-- Copyright Text --> <b><p class="first" style="position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;">Copyright © 2009.</p></b> </body> </html> Quote Link to comment Share on other sites More sharing options...
rajivgonsalves Posted December 2, 2009 Share Posted December 2, 2009 I tried it out, your html is all absolute divs not so useful.. you should structure it differently Quote Link to comment Share on other sites More sharing options...
Gamerz Posted December 2, 2009 Author Share Posted December 2, 2009 How would I structure it different, and what do you mean by all absolute DIV's not useful? Quote Link to comment Share on other sites More sharing options...
rajivgonsalves Posted December 2, 2009 Share Posted December 2, 2009 Well simply put don't use absolute divs, using absolute divs you are specifying a given position on screen, I am not too sure if thats the best way to do it Quote Link to comment Share on other sites More sharing options...
Gamerz Posted December 2, 2009 Author Share Posted December 2, 2009 Okay, well, is there ANY possible way to add main contents on my current code without re-constructing it? I just spent the whole afternoon doing this...I want to make it worth it. Quote Link to comment Share on other sites More sharing options...
haku Posted December 2, 2009 Share Posted December 2, 2009 An afternoon on a layout is nothing. Consider it a learning experience. Absolute positioning is not the way to go. Spend some time doing some float tutorials and learn how to layout your site using floats. Go to some sites that have wireframes for various site designs, and code them one step at a time to see how they work. Quote Link to comment Share on other sites More sharing options...
rajivgonsalves Posted December 2, 2009 Share Posted December 2, 2009 the only way out is make another div put the content in there and position it absolutely (thats if you don't want to rework it) Quote Link to comment Share on other sites More sharing options...
Gamerz Posted December 2, 2009 Author Share Posted December 2, 2009 Okay, um where and how do I code the div to display the main content? Is there a specific place I should put it? And what would the code say Quote Link to comment Share on other sites More sharing options...
rajivgonsalves Posted December 2, 2009 Share Posted December 2, 2009 try this put it anywhere in body <div style="position:absolute; top:150px;left:290"> <p>testing</p> <p>testing</p> <p>testing</p> <p>testing</p> <p>testing</p> <p>testing</p> <p>testing</p> <p>testing</p> <p>testing</p> <p>testing</p> <p>testing</p> <p>testing</p> <p>testing</p><p>testing</p><p>testing</p><p>testing</p><p>testing</p><p>testing</p> </div> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.