Unholy Prayer Posted February 13, 2007 Share Posted February 13, 2007 Ok, I want my navigation bar on the left side to be touching the bottom of my page at all times, no matter what content is on the page next to it. My site consists of dynamic php database content and I have design tutorials that are very long and when I view them, the navbar doesn't touch the bottom of the page. How would I do this? This is my source: <HTML> <head> <title>//M-Tech Development</title> <link rel=stylesheet href="styles/default/mtech.css"> </head> <body> <div align="center" class="logostrip" height="120"><img src="styles/default/images/logo.gif"></div> <div align="center" class="midbar" width="800" id="headlinks"><a href="index.php">INDEX</a> | <a href="support.php">SUPPORT</a> | <a href="forums/index.php">FORUMS</a> | <a href="staff.php">STAFF</a></div><div id="middle"> <div align="left" id="nav"> <div class="navtop">Main Navigation</div> <div class="navlink"><a href="index.php">Index</a></div> <div class="navlink"><a href="news/news.php">News Archives</a></div> <div class="navlink"><a href="support.php">Tech Support</a></div> <div class="navlink"><a href="feedback.php">Site Feedback</a></div> <div class="navtop">Tutorials</div> <div class='navlink'><a href='viewprogram.php?id=1'>Adobe PhotoShop</a></div><div class='navlink'><a href='viewprogram.php?id=2'>The GIMP</a></div><div class='navlink'><a href='viewprogram.php?id=3'>PHP Programming</a></div><div class='navlink'><a href='viewprogram.php?id=4'>Cascading Style Shee</a></div><div class='navlink'><a href='viewprogram.php?id=5'>HTML Coding</a></div> <div class="navtop">Services</div> <div class="navlink"><a href="hosting.php">Hosting</a></div> <div class="navlink"><a href="services/sitedesign.php">Site Design</a></div> <div class="navlink"><a href="services/installation.php">Script Installation</a></div> <div class="navtop">Downloads</div> <div class="navlink"><a href="downloads.php">Free Scripts</a></div> <div class="navlink"><a href="downloads/templates.php">Site Templates</a></div> <div class="navlink"><a href="downloads/resources.php">Program Resources</a></div> <div class="navtop">Community</div> <div class="navlink"><a href="irc.php">IRC Chat</a></div> <div class="navlink"><a href="forums/index.php">Discussion Forums</a></div> <div class="navlink"><a href="services/installation.php">Script Installation</a></div> <div class="navlink"><a href="affiliates.php">Affiliates</a></div> <div class='navlink' id='navbottom'><a href='http://i3.photobucket.com/albums/y82/Daredeviles/Buttons/sglogo.jpg'><img src='http://i3.photobucket.com/albums/y82/Daredeviles/Buttons/sglogo.jpg' width='88' height='31' alt='Storm Gaming'></a><a href='http://www.dev.mtechdev.com/portal/styles/default/images/bbu.gif'><img src='http://www.dev.mtechdev.com/portal/styles/default/images/bbu.gif' width='88' height='31' alt='bbUltimate.com'></a></div></div><div align='center' id='news' class='content'><p align='left'><b>Site Under Construction</b></p><br> <p align='left'>The site is still under construction. If you are navigating through the site, don't expect all areas to be complete.</p><br> <p align='right'><b>Posted by Unholy Prayer on 2007-01-21.</b></div><div align='right' id='members'> <div class='navtop'>Members Area</div> <div class='navlink'><a href='login.php'>Login</a></div> <div class='navlink'><a href='logout.php'>Logout</a></div> <div class='navlink'><a href='login.php?act=password'>Lost Password</a></div> <div class='navlink'><a href='faqs.php'>Why Register?</a></div> <div id='poll'> <div class='navtop'>Weekly Poll</div> <div class='navlink'><p align='center'>Do you like our site template?</p><br> <input type='radio'>Yes<br><br><input type='radio'>No<br><br><input type='submit' value='Vote Now'></div> <div class='navtop'>Advertisement</div> <div class='navlink'><script type="text/javascript"><!-- google_ad_client = "pub-1347884490353570"; google_ad_width = 120; google_ad_height = 240; google_ad_format = "120x240_as"; google_ad_type = "text_image"; //2007-02-12: mtech_website google_ad_channel = "7842738859"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div></div> </div></div></div><div align="center" id="copyright" class="midbar"> ©2006-2007 //M-Tech Development, All Rights Reserved. </div> and this is my css: body { background-color: #fff6f6; font-family: arial; font-size: 11px; color: #b30e0e; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } #nav { float:left; width: 170px; margin-right :10px; padding: 0 10 0 0; margin-bottom: 0px; } #members { float:right; float: top; width: 170px; margin-left :10px; padding: 0 0 0 0; align: top; } #headlinks{ float:left; width: 100%; margin: 0px; padding: 0 0 0 0; height: 18px; vertical-align: center; } #tutorial{ float: right; width: 50%; margin: 0px; vertical-align: center; } #copyright{ float:left; width: 100%; margin: 0px; padding: 0 0 0 0; height: 18px; vertical-align: center; } #news{ float:center; width: 75%; padding: 10 0 10 10; align: center; } .midbar { background-image: url(images/c_top.gif); text-align: center; font-family: arial; font-size: 10px; color: #FFFFFF; vertical-align: middle; } .midbar a:link, .midbar a:active, .midbar a:visited { color: #FFFFFF; text-decoration: none; } .midbar a:hover { color: #FFFFFF; text-decoration: underline; } .navtop { background-color: #fdd9d9; font-family: arial; font-size: 10px; text-align: center; padding: 3px; vertical-align: middle; width: 150px; border-right: 1px solid #ea989a; border-left: 1px solid #ea989a; margin: 0px; } .navlink { background-color: #ffecec; text-align: right; color: #ea9898; font-family: arial; font-size: 10px; padding: 3px; vertical-align: middle; width: 150px; border-bottom: 1px solid #ea9898; border-right: 1px solid #ea989a; border-left: 1px solid #ea989a; margin-bottom: 0px; margin-top: 0px; } .navlink a:link, .navlink a:active, .navlink a:visited { color: #ea9898; text-decoration: none; } .navlink a:hover { color: #ea9898; text-decoration: none; } .table { background-color: #b30e0e; border: 1px solid #b30e0e; } .content { background-color: #ffecec; text-align: left; color: #ea9898; font-family: arial; font-size: 10px; padding: 3px; vertical-align: middle; border: 1px solid #ea9898; } .content a:link, .content a:hover, .content a:visited, .content a:active { color: #b30e0e; text-decoration: none; } .sidebar { background-image: url(images/s_bar.gif); height: 100%; width: 15px; margin: 0px 0px 0px 0px; } .logostrip { background-image: url(images/logobg.gif); text-align: center; } .inforow { background-color: #fff6f6; text-align: left; padding: 4px; color: #ea9898; } .inforow a:link, .inforow a:hover, .inforow a:visited, .inforow a:active { color: #ea9898; text-decoration: none; } .newshead { text-align: left; color: #ea9898; font-weight: bold; font-family: arial; font-size: 10px; } .newsmessage { text-align: left; color: #ea9898; font-weight: normal; font-family: arial; font-size: 10px; } .newsinfo { text-align: right; color: #ea9898; font-weight: bold; font-family: arial; font-size: 10px; .navbottom{ background-color: #ffecec; text-align: center; color: #ea9898; font-family: arial; font-size: 10px; vertical-align: middle; width: 150px; border-bottom: 1px solid #ea9898; border-right: 1px solid #ea989a; margin-bottom: 0px; margin-top 0px; height: 100%; } .navbottom a:link, .navbottom a:active, .navbottom a:visited { color: #ea9898; text-decoration: none; } Thanks in advance. Quote Link to comment https://forums.phpfreaks.com/topic/38355-bottom-margin-of-a-div/ Share on other sites More sharing options...
ToonMariner Posted February 14, 2007 Share Posted February 14, 2007 WOW DIV overload there... Why not use a nice unordered list for teh navigation -after all it is just a LIST of links. to get this to be '100%' high the approach that will work cross browser is (been mentioned a lot lately') the faux column method. Quote Link to comment https://forums.phpfreaks.com/topic/38355-bottom-margin-of-a-div/#findComment-184228 Share on other sites More sharing options...
Unholy Prayer Posted February 14, 2007 Author Share Posted February 14, 2007 Hmm... not sure what you mean by faux column method. Please explain. Quote Link to comment https://forums.phpfreaks.com/topic/38355-bottom-margin-of-a-div/#findComment-184967 Share on other sites More sharing options...
cmgmyr Posted February 15, 2007 Share Posted February 15, 2007 You should try position: absolute; bottom: 0; that should attach your div to the bottom of the page at all times. Hint: to clean up your code a little bit you don't need all those divs on the nav links. you could: 1. <a href="index.php" class="navlink">Index</a><br /> 2. Have: #nav a { background-color: #ffecec; text-align: right; color: #ea9898; font-family: arial; font-size: 10px; padding: 3px; vertical-align: middle; width: 150px; border-bottom: 1px solid #ea9898; border-right: 1px solid #ea989a; border-left: 1px solid #ea989a; margin-bottom: 0px; margin-top: 0px; } with <a href="index.php">Index</a> hope that helps! -Chris Quote Link to comment https://forums.phpfreaks.com/topic/38355-bottom-margin-of-a-div/#findComment-185048 Share on other sites More sharing options...
ToonMariner Posted February 15, 2007 Share Posted February 15, 2007 Support for absolute positioning is patchy depedning on your dtd. Quote Link to comment https://forums.phpfreaks.com/topic/38355-bottom-margin-of-a-div/#findComment-185066 Share on other sites More sharing options...
dbrimlow Posted February 16, 2007 Share Posted February 16, 2007 Support for absolute positioning is patchy depending on your dtd. And forget about IE 5.x (PC and Mac) and 5.5 pc. Until my stats show under 1,000 monthly unique visits from these browsers, I stay away from absolute positioning. The reality is that most people online are used to long scrolled content, these days. In the '90s we used a left nav frame. From 2001 to 2003, we got rid of the evil frames and limited our content to 600px from the window-top and have a "more -->" or a "continued -->" link to another page (this was way too "heavy" though. Now we live with scrolling and add "back to top" every 400px or so. There is a function - "position:fixed" - that does not work in various IEs. Many Microsoft haters, though, have waste.. um, I mean ... spent considerable amount of time and effort to get IE to emulate it with hacks and other creative IE jousting. If you Google position:fixed, you can wade through them and perhaps find one you are comfortable with. For me, though ... I'm tired. I don't try to champion the good fight against IEs anymore. I just try to code carefully. Quote Link to comment https://forums.phpfreaks.com/topic/38355-bottom-margin-of-a-div/#findComment-186622 Share on other sites More sharing options...
Unholy Prayer Posted February 17, 2007 Author Share Posted February 17, 2007 You should try position: absolute; bottom: 0; that should attach your div to the bottom of the page at all times. Hint: to clean up your code a little bit you don't need all those divs on the nav links. you could: 1. <a href="index.php" class="navlink">Index</a><br /> 2. Have: #nav a { background-color: #ffecec; text-align: right; color: #ea9898; font-family: arial; font-size: 10px; padding: 3px; vertical-align: middle; width: 150px; border-bottom: 1px solid #ea9898; border-right: 1px solid #ea989a; border-left: 1px solid #ea989a; margin-bottom: 0px; margin-top: 0px; } with <a href="index.php">Index</a> hope that helps! -Chris Uh, that kind of made it worse with the position attribute. http://www.dev.mtechdev.com/portal/index.php Quote Link to comment https://forums.phpfreaks.com/topic/38355-bottom-margin-of-a-div/#findComment-187235 Share on other sites More sharing options...
Unholy Prayer Posted February 21, 2007 Author Share Posted February 21, 2007 I changed both of my navigation menus to lists but it's still not doing what I want it to. Can someone please help me with this? Quote Link to comment https://forums.phpfreaks.com/topic/38355-bottom-margin-of-a-div/#findComment-190178 Share on other sites More sharing options...
dbrimlow Posted February 22, 2007 Share Posted February 22, 2007 Oh man. This is a mess. No wonder it hasn't been working. You need to immediately fix a few very simple code errors. 1. doctype, 2. close list elements 3. close html and body 4. if you can loose the frame. First, you need to get out of using "quirks mode" and declare a proper doctype! Use transitional for now: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>//M-Tech Development</title> <link rel=stylesheet href="styles/default/mtech.css"> </head> <body> < Second, you need to use proper html structure. That includes closing your list tags </li> ... example: you have this: <ul align='left'> <li class="navtop">Main Navigation <li class='navlink'><a href="index.php">Index</a> <li class="navlink"><a href="news/news.php">News Archives</a> <li class="navlink"><a href="support.php">Tech Support</a> <li class="navlink"><a href="feedback.php">Site Feedback</a> <li class="navtop">Tutorials change it to: <ul align='left'> <li class="navtop">Main Navigation</li> <li class='navlink'><a href="index.php">Index</a></li> <li class="navlink"><a href="news/news.php">News Archives</a></li> <li class="navlink"><a href="support.php">Tech Support</a></li> <li class="navlink"><a href="feedback.php">Site Feedback</a></li> <li class="navtop">Tutorials</li> etc, ... </ul> Also, it is a good idea to get used to always using lower case tags (for when you transition to xhtml) So your <HTML> should become <html> Lastly, close your document tags! </body> tag and </html> tag. If you can, get rid of putting the google ads in a (GAK!) frame! You may see an immediate difference once you fix these few items. You've been driving yourself nuts working on the css, but it wouldn't work right anyway so long as the actual code was bad. Quote Link to comment https://forums.phpfreaks.com/topic/38355-bottom-margin-of-a-div/#findComment-191549 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.