Inita Posted December 16, 2005 Share Posted December 16, 2005 (edited) Hello,I making CSS, XHTML, but not for a very long time, im more beginner.I need help for making the down menu always down in the browser. I wrote short code to understand better what i realy want. So, if u see my page in the browser, the down menu is not very down, but i need to have it down, doesnt matter if the content is short or long, and if the content is longer then the browser height, than of course downmenu down the content . Hard to explain, but i think u know what i want . <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title>Help Inita</title> <style type="text/css" />body, html { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color:#FFF; background-color:#333; padding:0; margin:0;}#page { width:740px; background-color:#000; margin: 0 auto; padding:0}.imenu li { font-size: 12px; margin: 0; padding-right:17px; list-style-type:none; display:inline}.imenu li a { color:#FFF}.imenu li a:hover { color:#FFC}.center { text-align:center } </style></head><body><div id="page"> <table class="center menuup" border="0" cellpadding="0" cellspacing="0" style="width:100%"> <tr class="center" style="height:25px"> <td style="width:20%" class="menuup">[ <a href="/index.html"><b>Home</b></a> ]</td> <td style="width:20%" class="menuup">[ <a href="/login.html"><b>Login</b></a> ]</td> <td style="width:30%" class="menuup">[ <a href="#"><b>pictures</b></a> ]</td> <td style="width:30%" class="menuup">[ <a href="#"><b>Search </b></a> ]</td> </tr> </table> <p>content</p> <ul class="imenu center" style="padding:10px "> <li>[ <a href="#">My Name</a> ]</li> <li>[ <a href="#">Autos</a> ]</li> <li>[ <a href="#">Bears</a> ]</li> <li>[ <a href="#">See Tree</a> ]</li> <li>[ <a href="#">Contact Us</a> ]</li> <li>[ <a href="#">Site Map</a> ]</li> </ul></div></body></html> THANKS----------------------EDIT: Changed to [/CODEBOX] to save scroller... Edited December 16, 2005 by Jonas Link to comment Share on other sites More sharing options...
Chocolate570 Posted December 16, 2005 Share Posted December 16, 2005 I don't really understand. I think what you want could be either of the two things:1. A menu to stay static on the bottom of the screen, so when you scroll it stays at the bottom of your browser.2. The menu to just stay at the bottom of the page no matter how much content there is unless it goes to the next page? :s Link to comment Share on other sites More sharing options...
Inita Posted December 16, 2005 Author Share Posted December 16, 2005 I don't really understand. I think what you want could be either of the two things:1. A menu to stay static on the bottom of the screen, so when you scroll it stays at the bottom of your browser.2. The menu to just stay at the bottom of the page no matter how much content there is unless it goes to the next page? :s<{POST_SNAPBACK}> THANKS very much for ur answer :)1. A menu to stay static on the bottom of the screen, so when you scroll it stays at the bottom of your browser. *** no for sure sorry2. The menu to just stay at the bottom of the page no matter how much content there is unless it goes to the next page?*** I realy dont understand how u mean it, but i think YES :)If the content is less, downmenu stays on the bottom of screen, if the content is more then screen, than downmenu stays down the content, downmenu goes together to bottom with content :(MANY Thanks Link to comment Share on other sites More sharing options...
aspnetguy Posted December 16, 2005 Share Posted December 16, 2005 (edited) it hink this is what you are looking for <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title>Help Inita</title> <style type="text/css" />body, html {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;color:#FFF;background-color:#333;padding:0;margin:0;height: 100%;}#page { width:740px;background-color:#000;margin: 0 auto;padding:0;height: 100%;}.imenu { font-size: 12px; text-align:center; width:720px; background-color:#000000; margin:0px; padding:10px;}.imenu a {color:#FFF}.imenu a:hover {color:#FFC}.center { text-align:center} </style></head><body><div id="page"> <table class="center menuup" border="0" cellpadding="0" cellspacing="0" style="width:100%"> <tr class="center" style="height:25px"> <td style="width:20%" class="menuup">[ <a href="/index.html"><b>Home</b></a> ]</td> <td style="width:20%" class="menuup">[ <a href="/login.html"><b>Login</b></a> ]</td> <td style="width:30%" class="menuup">[ <a href="#"><b>pictures</b></a> ]</td> <td style="width:30%" class="menuup">[ <a href="#"><b>Search </b></a> ]</td> </tr> </table> <div style="height:96%">content</div> <div class="imenu"> [ <a href="#">My Name</a> ] [ <a href="#">Autos</a> ] [ <a href="#">Bears</a> ] [ <a href="#">See Tree</a> ] [ <a href="#">Contact Us</a> ] [ <a href="#">Site Map</a> ] </div></div></body></html> -----------------EDIT: Changed [/CODE] to [CODEBOX][/CODEBOX] to save scroller... Edited December 16, 2005 by Jonas Link to comment Share on other sites More sharing options...
Inita Posted December 16, 2005 Author Share Posted December 16, 2005 GREAT it works =))))))) im sooo lucky about that, looks beautiful, better cant be ... it was necessary for my work, great forum, comming there again for sure, if i will need a help and also will came there up to time, maybe i can help also to someone, i was trying this soooo long time, i was thinking about this problem even at night =))))many many many THANKS Link to comment Share on other sites More sharing options...
aspnetguy Posted December 16, 2005 Share Posted December 16, 2005 Glad I could help Link to comment Share on other sites More sharing options...
Inita Posted December 16, 2005 Author Share Posted December 16, 2005 =((((((((((((((((((but it doesnt work on MAC and also on FIREFOX if the content is longer, downmenu stays on screen bottom =((((and on Mac, if the content is longer, it takes black background only these height:96%, but after, there r no background, im trying in another way, but i cant Link to comment Share on other sites More sharing options...
aspnetguy Posted December 16, 2005 Share Posted December 16, 2005 (edited) This should fix it for FF....I left in the content I used for testing...it is really long so anything you throw at it should work. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title>Help Inita</title> <style type="text/css" />body, html {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;color:#FFF;background-color:#333;padding:0;margin:0;height: 100%;}#page { width:740px;background-color:#000;margin: 0 auto;padding:0;height: 100%;}.imenu { font-size: 12px; text-align:center; width:720px; background-color:#000000; margin:0px; padding:10px;}.imenu a {color:#FFF}.imenu a:hover {color:#FFC}.center { text-align:center} </style></head><body><div id="page"> <table class="center menuup" border="0" cellpadding="0" cellspacing="0" style="width:100%"> <tr class="center" style="height:25px"> <td style="width:20%" class="menuup">[ <a href="/index.html"><b>Home</b></a> ]</td> <td style="width:20%" class="menuup">[ <a href="/login.html"><b>Login</b></a> ]</td> <td style="width:30%" class="menuup">[ <a href="#"><b>pictures</b></a> ]</td> <td style="width:30%" class="menuup">[ <a href="#"><b>Search </b></a> ]</td> </tr> </table> <span style="height:96%"><div style="background-color:#000000">contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcvcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcvvvvvcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcvcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcvvvvvcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcvcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcvvvvvcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcvcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcvvvvvcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcvcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentccontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcvvvvvcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentc</div> </span> <div class="imenu" style="clear:both"> [ <a href="#">My Name</a> ] [ <a href="#">Autos</a> ] [ <a href="#">Bears</a> ] [ <a href="#">See Tree</a> ] [ <a href="#">Contact Us</a> ] [ <a href="#">Site Map</a> ] </div></div></body></html> As far as Safari I can't help you there, I have no way of getting to a MAC or to konquerer on Linux...can anyon else do this????-----------------EDIT: Changed [/CODE] to [CODEBOX][/CODEBOX] to save scroller... Edited December 16, 2005 by Jonas Link to comment Share on other sites More sharing options...
Inita Posted December 17, 2005 Author Share Posted December 17, 2005 MERCI Aspnetguy, but now, if the content is shorter than screen in Firefox, downmenu doesnt stay down the screen, down menu is after short content up =(((Im at home now, dont have there Mac too, only on monday will have mac, but i think, if it will work in IE and FF and Opera, than it have to go also on Mac Link to comment Share on other sites More sharing options...
Inita Posted December 19, 2005 Author Share Posted December 19, 2005 The answer on my question <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title>Help Inita</title> <style type="text/css">body, html {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;color:#FFF;background-color:#333;padding:0;margin:0;height: 100%;}#page { width:740px; background-color:#000; padding:0; margin-top: 0; margin-right: auto; margin-bottom: 10px; margin-left: auto; position: relative; min-height: 100%; /* For Modern Browsers */ height: auto !important; /* For Modern Browsers */ height: 100%; /* For IE */ }#downmenu { width:740px; margin: 0 auto; padding:0; position: absolute; bottom: 0 !important; bottom: -1px; height: 100px;}#content { margin: 15px; padding-bottom: 160px; height: auto !important; }.imenu { font-size: 12px; text-align:center; width:720px; background-color:#000000; margin:0px; padding:10px;}.imenu a {color:#FFF}.imenu a:hover {color:#FFC}.center { text-align:center} </style></head><body><div id="page"> <table class="center menuup" border="0" cellpadding="0" cellspacing="0" style="width:100%"> <tr class="center" style="height:25px"> <td style="width:20%" class="menuup">[ <a href="/index.html"><b>Home</b></a> ]</td> <td style="width:20%" class="menuup">[ <a href="/login.html"><b>Login</b></a> ]</td> <td style="width:30%" class="menuup">[ <a href="#"><b>pictures</b></a> ]</td> <td style="width:30%" class="menuup">[ <a href="#"><b>Search </b></a> ]</td> </tr> </table><div id="content">content</div><div id="downmenu"><div class="imenu"> [ <a href="#">My Name</a> ] [ <a href="#">Autos</a> ] [ <a href="#">Bears</a> ] [ <a href="#">See Tree</a> ] [ <a href="#">Contact Us</a> ] [ <a href="#">Site Map</a> ]</div></div></div></body></html> THANKS Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now