RooMeat Posted September 6, 2006 Share Posted September 6, 2006 Hi. This is a awesome site. Looks like I will be spending lots of time here haha.Anyhow.. I am trying to create a new site for a friend and from everything I have been reading.. using tables is not a good thing. So I have tried to create a page without tables.. and it's come up ok.. but having troubles with placement of the bottom div (where the text links are).I need to make it so that no matter how long the page is.. that div stays at the very bottom.My page at the moment.. will put that grey section over the white content area if you resize the page.Can anyone here advise as to what I am doing wrong??The page can be seen here:http://www.impactsportsmanagement.com/index.htmland for those interested.. here is the code for the page... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Impact Sports Management</title><link href="new.css" rel="stylesheet" type="text/css"><script type="text/javascript"> AC_FL_RunContent = 0; </script><script src="AC_RunActiveContent.js" type="text/javascript"></script><script type="text/javascript"><!--// -----------------------------------------------------------------------------// Globals// Major version of Flash requiredvar requiredMajorVersion = 8;// Minor version of Flash requiredvar requiredMinorVersion = 0;// Revision of Flash requiredvar requiredRevision = 0;// -----------------------------------------------------------------------------// --></script><script type="text/vbscript"><!-- // Visual basic helper required to detect Flash Player ActiveX control version informationFunction VBGetSwfVer(i) on error resume next Dim swControl, swVersion swVersion = 0 set swControl = CreateObject("ShockwaveFlash.ShockwaveFlash." + CStr(i)) if (IsObject(swControl)) then swVersion = swControl.GetVariable("$version") end if VBGetSwfVer = swVersionEnd Function// --></script><script type="text/javascript"><!--// Detect Client Browser typevar isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;// JavaScript helper required to detect Flash Player PlugIn version informationfunction JSGetSwfVer(i){ // NS/Opera version >= 3 check for Flash plugin in plugin array var flashVer = -1; if (navigator.plugins != null && navigator.plugins.length > 0) { if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) { var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : ""; var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description; var descArray = flashDescription.split(" "); var tempArrayMajor = descArray[2].split("."); var versionMajor = tempArrayMajor[0]; var versionMinor = tempArrayMajor[1]; if ( descArray[3] != "" ) { tempArrayMinor = descArray[3].split("r"); } else { tempArrayMinor = descArray[4].split("r"); } var versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0; var flashVer = versionMajor + "." + versionMinor + "." + versionRevision; } } // MSN/WebTV 2.6 supports Flash 4 else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4; // WebTV 2.5 supports Flash 3 else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3; // older WebTV supports Flash 2 else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2; return flashVer;}// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is availablefunction DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision){ reqVer = parseFloat(reqMajorVer + "." + reqRevision); // loop backwards through the versions until we find the newest version for (i=25;i>0;i--) { if (isIE && isWin && !isOpera) { versionStr = VBGetSwfVer(i); } else { versionStr = JSGetSwfVer(i); } if (versionStr == -1 ) { return false; } else if (versionStr != 0) { if(isIE && isWin && !isOpera) { tempArray = versionStr.split(" "); tempString = tempArray[1]; versionArray = tempString .split(","); } else { versionArray = versionStr.split("."); } var versionMajor = versionArray[0]; var versionMinor = versionArray[1]; var versionRevision = versionArray[2]; var versionString = versionMajor + "." + versionRevision; // 7.0r24 == 7.24 var versionNum = parseFloat(versionString); // is the major.revision >= requested major.revision AND the minor version >= requested minor if (versionMajor > reqMajorVer) { return true; } else if (versionMajor == reqMajorVer) { if (versionMinor > reqMinorVer) return true; else if (versionMinor == reqMinorVer) { if (versionRevision >= reqRevision) return true; } } return false; } }}// --></script></head><body><div class="flashbox"> <script type="text/javascript"><!--var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);if(hasRightVersion) { // if we've detected an acceptable version if (AC_FL_RunContent == 0) { alert("This page requires AC_RunActiveContent.js. In Flash, run \"Apply Active Content Update\" in the Commands menu to copy AC_RunActiveContent.js to the HTML output folder."); } else { // embed the flash movie AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0', 'width', '800', 'height', '175', 'src', 'banner', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'align', 'top', 'play', 'true', 'loop', 'true', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', 'banner', 'bgcolor', '#ffffff', 'name', 'banner', 'menu', 'true', 'allowScriptAccess','sameDomain', 'movie', 'banner', 'salign', '' ); //end AC code }} else { // flash is too old or we can't detect the plugin var alternateContent = 'Alternate HTML content should be placed here.' + 'This content requires the Macromedia Flash Player.' + '<a href=http://www.macromedia.com/go/getflash/>Get Flash< /a>'; document.write(alternateContent); // insert non-flash content}// --> </script></div> <div class="banner"> <img src="images/bannerback2.gif" alt="side banner" width="81" height="175"></div> <div class="topimage"><img src="images/contenttop.gif" alt="contenttop" width="76" height="38"> </div> <div class="topimage2">WELCOME</div> <div class="content"> <div class="text"> <p> <strong>IMPACT SPORTS MANAGEMENT GROUP</strong> is an innovative sponsorship, sports marketing, personal representation, conference & event management consultancy.</p> <p> We are a young, dynamic team of professionals dedicated to the creation of world class, client solutions. We work with clients in a highly individualistic manner.</p> <p> We pride ourselves in the quality of our delivery and work with some of the worlds most recognised companies. We employ a partnership approach with our clients and are focused on driving business value through the programmes we develop, manage and evaluate.</p> <p>Please note our website is currently under developement. We hope to have all sections running very soon. Please check back for updates.</p> <p class="center"><img src="images/toolbag.jpg" alt="toolbag" width="200" height="200"></p> </div> <div class="bottom"><img src="images/footleft.gif" alt="contentbottom" width="76" height="38"></div></div><div class="foot"><a href="index.html" target="_self">HOME</a> | <a href="about.htm" target="_self">ABOUT</a> | CONTACT | SPONSORSHIP | EXPERTISE | REPRESENTATION | CONFERENCE | INCENTIVE | EVENT MANAGEMENT | VENUE FINDER </div></body></html> And the css html,body { margin:0; padding:0; height:100%; border:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; background-color: #22306B; color: #000000;}.flashbox { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; background-color: #FFFFFF; background-image: url(images/bannerback3.gif); position: absolute; height: 175px; width: 100%; left: 0px; top: 0px; color: #000000;}.banner { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; background-color: #FFFFFF; background-image: url(images/bannerback3.gif); position: absolute; height: 175px; right: 0px; top: 0px; color: #000000;}.topimage { background-color: #A7A8AC; position: absolute; height: 38px; width: 80%; visibility: inherit; top: 195px; right: 10%; text-align: right; color: #000000;}.topimage2 { position: absolute; height: 38px; width: 80%; visibility: inherit; top: 195px; right: 10%; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-style: italic; font-weight: bold; color: #000000; margin-top: 5px;}.content { background-color: #FFFFFF; position: absolute; width: 80%; visibility: visible; top: 233px; right: 10%; text-align: left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; font-variant: normal; color: #000000; z-index: auto; clip: rect(auto,auto,auto,auto); overflow: visible; font-style: normal;}.bottom { position: relative; height: 38px; width: 100%; visibility: visible; text-align: left; padding: 0px; clip: rect(auto,0px,0px,auto);}.text { background-color: #FFFFFF; position: relative; visibility: visible; text-align: left; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; padding: 10px; overflow: visible; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; font-style: normal; font-weight: normal; vertical-align: top;}.center { background-color: #FFFFFF; position: relative; visibility: visible; text-align: center; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; overflow: visible; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; font-style: normal; font-weight: normal; height: 200px; margin: 0px; padding: 0px;}.foot { font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; font-weight: normal; color: #000000; background-color: #A7A8AC; text-align: center; margin: 0px; height: 20px; width: 100%; padding-top: 5px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; position: absolute; left: 0px; bottom: 0px;} Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 6, 2006 Share Posted September 6, 2006 Put a wrapper div, around everythingthen just after bottom links div put<br style="clear:both"/>Im guessing that'll work, cause I havnt looked at your CSS yet.Oh and welcome to the forum. Link to comment Share on other sites More sharing options...
holmedwa04 Posted September 6, 2006 Share Posted September 6, 2006 Well, I wouldn't say that tables are really bad, I was told to us them, to lay out all of my website, and so I have done.But having said that, your website does look really quite good without, did you use a stylesheet? Link to comment Share on other sites More sharing options...
RooMeat Posted September 6, 2006 Author Share Posted September 6, 2006 Yes I did use a style sheet. It is listed above Put a wrapper div, around everythingthen just after bottom links div put<br style="clear:both"/>Im guessing that'll work, cause I havnt looked at your CSS yet.Oh and welcome to the forum.Could you please elaborate a bit more on that??Not sure I understand what you mean,Do I put a <div> </div> around the entire page... then after the </div> of the lnks section place the <br style="clear:both"/>Thanks for the helps guys. Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 6, 2006 Share Posted September 6, 2006 Yep you got it! <div class="wrapper"> All your divs and stuff here <div class="your bottom links div"> </div> <br style="clear:both"/></div> You shouldnt have to give the wrapper div any sort of style, but it might not work the way you want it if you don't. Link to comment Share on other sites More sharing options...
RooMeat Posted September 7, 2006 Author Share Posted September 7, 2006 didn't work :)Bottom section still climbs up over the content area if I resize the browser window Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 7, 2006 Share Posted September 7, 2006 Ok I've looked at your code. And played with it a bit.In firefox this works, but for some reason in IE the bar gets sent to the top of the page and behind everything else. Sort of like it disappears.I'll mess with it more and see what I come up with.in your CSS for the foot div use this: .foot { position: fixed;} Link to comment Share on other sites More sharing options...
Err Posted September 7, 2006 Share Posted September 7, 2006 @ Cronthenoob:That's because he's using the relative style, which so-to-speak rasies everything. So anything that doesn't have a relative position gets sent back behind the contents... That's a reason why I place everything static on my page, no absolute/relative positions, espicially for layouts. I just hate dealing with EVERY pixel to get the effect I wanted.Also, isn't that fixed position going to make his footer float and scroll down/up with the page? Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 7, 2006 Share Posted September 7, 2006 What it does is fix the footer to the bottom of the page, it never moves. So yah it kinda floats there. I thought it looked cool, lol. But yah, I have no idea how to fix it for real. I'm definatly not an expert, but I try to help people.Sometimes my suggestions get people thinking, and they discover a better answer on their own. Link to comment Share on other sites More sharing options...
Err Posted September 7, 2006 Share Posted September 7, 2006 Well in that case you shouldn't have even tried!lol, Just kidding! Every suggestion counts. Link to comment Share on other sites More sharing options...
Cronthenoob Posted September 7, 2006 Share Posted September 7, 2006 Link to comment Share on other sites More sharing options...
RooMeat Posted September 7, 2006 Author Share Posted September 7, 2006 Thanks for the help guys.I am sure there is a way around this problem.. but at the moment I am running out of time and need to get this site functional.The only way I can see myself achieving the look I want is to use frames for now... but I will come back to the css version later to get it working :)I really want to learn this method as I think it is way better than frames / tables at the end of the day. 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