Jump to content

Help with tabless design.

RooMeat

By RooMeat
in HTML/XHTML

 Share

Recommended Posts

RooMeat Newbie

RooMeat

Posted
Posted

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
RooMeat Newbie

RooMeat

Posted
  • Author
Posted

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
Cronthenoob Member

Cronthenoob

Posted
Posted

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
Cronthenoob Member

Cronthenoob

Posted
Posted

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
Err Dedicated Member

Err

Posted
Posted

@ 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
Cronthenoob Member

Cronthenoob

Posted
Posted

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
RooMeat Newbie

RooMeat

Posted
  • Author
Posted

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...