0

Ok well I have a DIV menu bar that I want to stretch 100% in height. It worked perfectly fine until I added the XHTML doctype. So I tried absolute positioning which worked but then my other divs started overlapping them.

So I want to know if there is any javascript code to make my menu bar stretch vertically. The name of the div I want to stretch is the class "sidemenu".

CSS

html {
	height: 100%;

}

body {
	min-height: 100%;	
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	background: #000;
	margin: 0;
	padding: 0;
	color: #CCC;

}
.container {
	width: 100%;
	background-color: #0c0c0c;
	background-image: url();
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;
	position: absolute;
	margin-left: auto;
	margin-right: auto;

}
.content {
	background-color: #222;
	padding: 5px;
	position: relative;
	width: 1000px;
	min-height: 500px;
	margin-left: auto;
	margin-right: auto;
			
}
.sidemenu {
	background-color: #111;
	padding: 5px;
	width: 250px;
	height: 100%;
	position: relative;
	float: right;
	margin-right: -5px;
	margin-top: -5px;
	
}
.footer {
	padding: 5px;
	height: 210px;
	background-image: url(../Images/footerbackground.gif);
	background-repeat: no-repeat;
	background-color: #0c0c0c;
	position: relative;
	width: 960px;
	margin-left: auto;
	margin-right: auto;

}
.headerleft {
	background:url(../Images/header-left.png) no-repeat left top;
	height: 209px;
	
}
.header {
	background:url(../Images/header-middle.gif) repeat-x left top;
	height: 209px;
	max-width:1920px;
	min-width: 960px;
	background-color: #073444;
	
}
.headerright {
	background:url(../Images/header-right.png) no-repeat right top;
	height: 209px;
	z-index: -999;

}

.menu {
	position: absolute;
	margin-top: -35px;
	width: 1024px;
	margin-left: 10px;

}

#content2 {
	min-width: 610px;
	max-width: 940px;
	position: relative;	

}

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" lang="en" xml:lang="en">
<head>
<title>Metal Gear Planet</title>

<link rel="stylesheet" type="text/css" href="sheets/style.css"/>
<link rel="stylesheet" type="text/css" href="sheets/navcss.css"/>

</head>


<body>
		<div class="header"><div class="headerleft"><div class="headerright"></div></div></div>	
		
		<div class="menu">
			<ul id="nav">
				<li><a href="../index.php">Home</a></li>
				<li><a href="../news/">News</a></li>
				<li><a href="#">Walkthroughs</a>
							<ul>
								<li><a href="../walkthroughs/mgs1/intro.html">Metal Gear Solid 1</a></li>
								<li><a href="../walkthroughs/mgs2/intro.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/intro.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/intro.html">Metal Gear Solid 4</a></li>
							</ul>
				</li>
				<li><a href="#">Videos</a>
							<ul>
								<li><a href="../walkthroughs/mgs1/more/video.html">Metal Gear Solid 1</a></li>
								<li><a href="../walkthroughs/mgs2/more/video.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/more/video.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/more/video.html">Metal Gear Solid 4</a></li>
							</ul>
				</li>
				<li><a href="#">Hints</a>
							<ul>
								<li><a href="../walkthroughs/mgs1/more/hints.html">Metal Gear Solid 1</a></li>
								<li><a href="../walkthroughs/mgs2/more/hints.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/more/hints.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/more/hints.html">Metal Gear Solid 4</a></li>
							</ul>
				</li>
				<li><a href="../downloads/">Downloads</a></li>
				<li><a href="../downloads/">Affiliates</a></li>
			</ul>
		</div>
<div class="container">		

	<div class="content">
	 		              
    <div class="sidemenu">
	    <p>Content</p>
	</div>
            
			<div id="content2">
				<h1>What the shit!</h1>
				<p>JHlasdklj asdjlksafjskld sfjl;asd asdjl; asdjkalsd asjdl;smdas sadljas dadjl asdkj</p>
				<p>Welcome to the Metal Gear Solid 3 Walkthrough. Note that the choice of difficulty for this Walkthrough is based on Normal which could be the difference in quantity of items, an enemy’s vision, how much life you have, quantity of enemy’s in an area, and how much damage you can tolerate.</p>
                				
			</div>
</div>

	<div class="footer"><p>Hi</p></div>

</div>

</body>
</html>

Edited by louie540: n/a

4
Contributors
11
Replies
12
Views
6 Years
Discussion Span
Last Post by Troy III
0

use

function getHeight() { //function to geht the Clients window Height
 if(window.innerHeight) {
  return window.innerHeight;
 } else if (document.body && document.body.offsetHeight) {
   return document.body.offsetHeight;
 } else { 
  return 0; 
 }
}

document.getElementById('yourdiv').style.height = getHeight();

-Agarsia

0

Just don't specify its height.

[and why do you need to use that godamn xhtml when working on HTML?!!]

0

Just don't specify its height.

I guess I'll try that. Thanks.


[and why do you need to use that godamn xhtml when working on HTML?!!]

Why not?

0

That's because xhtml is not HTML.

Use <!DOCTYPE html> instead. The working group on xhtml is discontinued. They've dropped it completely.

0

Well your method seemed very promising (seeing as though doing 4.01 strict wouldn't let me do it so easily) but it still didn't work. But I had an idea to move it over by using the content width - the sidemenu width and then margin it left with whatever x equaled which was 710px. I switched it back to absolute so I can make it 100% again, and margin-left 710px; and it work even when I resize my browser window.

Thanks for trying to help though. I think I just needed a break.

0

The working group on xhtml is discontinued. They've dropped it completely.

This needs to be qualified Troy.

"The working group on xhtml is discontinued" - True. The W3C XHTML working group's charter lapsed in 2010.

"They've dropped it completely" - False. The reason that the XHTML working group's charter was allowed to lapse is that XHTML is now encompassed by the HTML working group. If anything, this makes XHTML more authoritative and here-to-stay, not less.

Under current W3C Working Draft and WHATWG Living Standard, HTML and XHTML are alternative "concrete syntaxes", both of which, according to the standards, conform to the same "in-memory representation" standard known as "DOM HTML" or "DOM" for short. The standards also allow for other "concrete syntaxes".

In both W3C and WHATWG documentation (each is a variant of the other, and the two working groups "work together"), "The HTML syntax" and "The XHTML syntax" are adjacent chapters:

For whatever reason, you may not like XHTML, but please don't start false rumours of its demise.

XHTML is alive and kicking.

Of course, if you can point to something that indicates otherwise, I will be pleased to read it.

Best wishes, as always

Airshow

Edited by Airshow: n/a

0

This needs to be qualified Troy.

"The working group on xhtml is discontinued" - True. The W3C XHTML working group's charter lapsed in 2010.

"They've dropped it completely" - False. The reason that the XHTML working group's charter was allowed to lapse is that XHTML is now encompassed by the HTML working group. If anything, this makes XHTML more authoritative and here-to-stay, not less.

Under current W3C Working Draft and WHATWG Living Standard, HTML and XHTML are alternative "concrete syntaxes", both of which, according to the standards, conform to the same "in-memory representation" standard known as "DOM HTML" or "DOM" for short. The standards also allow for other "concrete syntaxes".

In both W3C and WHATWG documentation (each is a variant of the other, and the two working groups "work together"), "The HTML syntax" and "The XHTML syntax" are adjacent chapters:

For whatever reason, you may not like XHTML, but please don't start false rumours of its demise.

XHTML is alive and kicking.

Of course, if you can point to something that indicates otherwise, I will be pleased to read it.

Best wishes, as always

Airshow

No. It's dead.
Plain dead, -not 'gone to heavens'; not 'they're with god now'; not 'they've passed..(into another world)" which are nothing but classical examples of euphemism of the direct notion.

No, the
"working group on xhtml is discontinued" means: they're gone; They are, no more!

It doesn't have to do with any kind of "liking" or "disliking" tasty or not; xhtml is simply Wrong. W3C was wrong for a decade.
xhtml is a fatal misunderstanding of the web and one of the gravest errors in its history.

Call it "Dog ate Dolly" if you like, -when a company is merged under another, the previous doesn't exist, because thankfully Dolly is a verbal cutie for Chimera, or a went wrong experiment.

0

Troy,

High on humour but no hyperlinks to anything authoritative.

For now, I will stick with my version of the truth based on the documentation I have read.

I like XHTML by the way, but I also like "Dog ate Dolly".

Airshow

0

Well, the denial phase sometimes lasts longer than anticipated.
In practice xhtml never existed.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.