Jump to content

DIV tag

shadowayex

By shadowayex
in HTML/XHTML

Recommended Posts

shadowayex Invested Member

shadowayex

Posted
Posted

I'm converting my website from using tables to using the DIV tag. One problem I've come across is I want one DIV to be at the bottom of the page but it doesn't. It sits on top of another. I don't really want to use absolute positioning because my middle column changes size a lot with the updates being listed as they are made. Is there any way to make it go to the bottom without absolute positioning.

Link to comment
Share on other sites
shadowayex Invested Member

shadowayex

Posted
  • Author
Posted

HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>Another Unofficial Digimon World 2 Website</title><link rel="stylesheet" type="text/css"href="http://dw2.freehostia.com/mystyle.css" /></head><body class="blueback myfont"><!--Top--><div class="banner"><a name="top"><img src="http://dw2.freehostia.com/Two/Images/banner.jpg" alt="banner" /></a></div><!--End of Top--><!--Page--><div class="width983"><!--Navigation Bar--><div class="navi2">Home<br /><a href="http://dw2.freehostia.com/Two/beginner.html">Beginner's Guide</a><br /><a href="http://dw2.freehostia.com/Two/Digimon/digimon.html">Digimon</a><br /><a href="http://dw2.freehostia.com/Two/Domains/domains.html">Domains</a><br /><a href="http://dw2.freehostia.com/Two/DNA-Checker.php">DNA Digivolution</a><br /><a href="http://dw2.freehostia.com/Two/Items/items.html">Items</a><br /><a href="http://dw2.freehostia.com/Two/Coliseum/coliseum.html">Coliseum</a><br /><a href="http://dw2.freehostia.com/Two/digi-center.html">Digimon Center</a><br /><br /><br /><img src="http://dw2.freehostia.com/Images/veemon.jpg" alt="veemon" /><br /><br /><a href="java script:onClick(window.open('http://validator.w3.org/check?uri=http%3A%2F%2Fdw2.freehostia.com%2FTwo%2Fhome.html'))"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" class="center" /></a><br />Click to Validate</div><!--End of Navigation Bar--><!--Main Section--><div class="center"><div class="main2"><h1 class="center">Welcome!!</h1><p class="left">Hello players! Sorry if you're not one and just checking out the site, hello to you, too. If you are a player, I suggest you read my Beginner's Guide before surfing the site, if you haven't already, especially if you're a first time player. Have fun!</p><br /><br /><br /><h1 class="center">News</h1><br /><br /><br /><div class="news"><h3 class="center">Saturday, August 4th</h3><p class="left">Once again, I'm still working on the database. Still needs a lot of work, but I think tomorrow I'm gonna add a little more to the site itself. I haven't had much time to work lately though. I've got real life to take care of too lol. Anyways, I'm going to bed. Keep checking for updates.</p></div><br /><br /><div class="news"><h3>Friday, August 3rd</h3><p class="left">Ok, not much work on the site itself today. Becuase of a suggestion of a fellow web developer on a site I visit frequently, I've changed the font to Arial. Pretty huh? Lol. Anyways, I worked a couple hours today, but not on the site. The MySQL server works now, so I'm making my database for the DNA Digivolution page. Yay! I have 1500 records to retype, as well and actually type up many many more. I got l around 250 done today in the short time I work. After that, I'll need to write the scripting to make it all work. *Sigh* Lots of work. Oh well, I'm having fun. Well, I'm going to bed. Night all.</p></div><br /><br /><div class="news"><h3>Thursday, August 2nd</h3><p class="left">I got my homepage and my Beginner's Guide validated in XHTML 1.0 Strict, not that many of you know what that means. Basically all that really means it they are written to standards of those who write the rules for web building. In other words, these pages are written perfect =D. I take pride in that. If anyone wants to check, click this:</p><br />    <a href="http://validator.w3.org/check?uri=referer"><img        src="http://www.w3.org/Icons/valid-xhtml10-blue"        alt="Valid XHTML 1.0 Strict" height="31" width="88" class="center" /></a><p class="left">There's a copy of that on the bottom of the Beginner's Guide also. That's proof they are validated in Strict and yeah. Anyways, I also worked on the Digimon section. Honestly, it sucked. Too much alphabetizing and sorting, and that was just one of the pages. I don't even have any information yet. And the SQL Server is still down, so yes the DNA Digivolution section is still down, it needs work anyways, hasn't been converted to my current format yet. Oh well. Domains and Coliseum sections haven't been updated, and the rest aren't even created yet. I might work on it more later on. I'll keep you updated.</p></div><br /><br /><div class="news"><h3>Wednesday, August 1st</h3><p class="left">I've got the resolution problem figured out. I'm not satisfied with the results all that much, but I'll have to live with it. I added stuff to the Coliseum and Domains sections, although there's no useful information yet. I so badly want to continue but it's late and if I keep going I'll never stop. Tomorrow I'll continue my work. It's all starting to come together.</p></div><br /><br /><div class="news"><h3>Tuesday, July 31st</h3><p class="left">Well, I tweaked the layout in a way that makes it look alright in both 800x600 and 1024x768 resolutions. It's hard considering the improvements on the navigation bar included an image that wanted to disort the layout in 800x600. That's the only thing I haven't fixed yet. Other than that, not much else has changed. I spent most of the day trying to figure out how to fix the image problem. Maybe tomorrow I can fix it.PS-Most of the links on the navigation bar don't actually work. The only existing page besides this one is the DNA Digivolution Page, which doesn't actually work. This server is having problems with databases, so yeah. Might be a while before that's up. Oh well, come back daily and check out all the new updates.</p></div><br /><a href="http://dw2.freehostia.com/Two/news.html">More News</a><br /><br /><a href="#top">Back to Top</a><br /><br /><br /></div></div><!--End on Main Section--><!--Ad Section--><div class="ad2">Ads</div><!--End of Ad Section--><!--End of Page--><!--Bottom--><div class="center"><div class="bottom2"><a href="java script:onClick(window.open('http://dw2.freehostia.com/terms.html'))">Terms and Conditions</a> | <a href="java script:onClick(window.open('mailto:cooltrainer_2001@hotmail.com'))">Contact Me</a><br />Copywrite© 2007 shadowayex<br /><br /></div></div><!--End of Bottom--></div> </body></html>

CSS:

.black        {color:black}.blueback     {background-color:blue}.bold         {font-weight:bold}.border       {border-style:ridge}.bottom       {text-align:bottom}.bottomborder {border-bottom-style:ridge}.center       {text-align:center}.left         {text-align:left}.leftborder   {border-left-style:ridge}.middle       {vertical-align:middle;text-align:center}.myfont       {font-size:12pt;font-family:arial;color:black}.news         {font-size:28pt}.orangeback   {background-color:#ff9000}.right        {text-align:right}.rightborder  {border-right-style:ridge}.topborder    {border-top-style:ridge}.width2       {width:2%}.width19      {width:19%}.width58      {width:58%}.width63      {width:63%}.width99      {width:99%}.width100     {width:100%}.width983     {width:983px}div.banner    {text-align:center;background-color:#ff9000;               border-style:ridge}div.news      {text-align:center;background-color:#ff9000;border-style:ridge;               width:80%;padding:10px}div.navi2     {position:absolute;left:10px;top:160px;width:152px;height:400px;               background-color:#ff9000;border-style:ridge;padding:10px}div.main2     {position:absolute;left:210px;top:160px;width:555px;               background-color:#ff9000;border-style:ridge;padding:10px}div.ad2       {position:absolute;left:813px;top:160px;width:152px;height:400px;               background-color:#ff9000;border-style:ridge;padding:10px}div.bottom2   {position:absolute;left:210px;width:555px;text-align;center;               padding:10px}div.respage   {text-align:center;width:50%;background-color:#ff9000;border-style:ridge}a:link        {color:#c80000}a:visited     {color:#c80000}a:hover       {color:white;background-color:black}a:active      {color:purple}

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

Study the Tutorials on the Main w3schools site to learn about "normal" positioning and manipulation of div spacing using the Normal Flow of the document, Floats, Padding and Margins.Absolute positioning is not 'bad', but it should be avoided for beginning to learn proper web design until you understand the workings of an HTML page better. Also, google on "Footer Stick HTML" for a couple of ideas on placing the footer, but with all the position Absolute in your page, it might be a problem.http://www.google.com/search?ie=UTF-8&...oter+Stick+HTML

Link to comment
Share on other sites
shadowayex Invested Member

shadowayex

Posted
  • Author
Posted

So does that mean my code is like... not really all that good for the purpose or what? I started off using tables and switched to DIVs under recommendation of a lot of people. DIVs are more complex so yeah. I read through tutorials but like most times, a lot of it went through one eye and out the other. I looked up CSS position class and read fixed and it's like the exact same as absolute from what I read. So like, this whole DIV thing has me lost

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...