White space under footer and unable to stretch top bar across screen

djCurzed · June 13, 2013, 10:42am

Hi all,

Me again, and my noobness.

I am having problems with my footer having white space beneath it that i want to remove. I have been sitting here for hours trying to figure it out.:S

I am also having a problem with the top black bar stretching so that it is across the window at all times. I have googled and tried lots of solutions but still cant find something. It perhaps could be my coding.

PLease may i ask someone to help me…so much of frustration …sigh.

HTML

<!DOCTYPE HTML>
		<html xmlns="http://www.w3.org/1999/xhtml">


		<head>
		
		<meta charset="UTF-8">
		<link href="general.css" rel="stylesheet" type="text/css">
		<title>TEMP NAME</title>
		
		<div class = "top_bar">
		<div class="left_bar">
		<img src="left_bar.png" alt="Left Bar"></img>
		</div>
		<div class="middle_bar">
		<img src="middle_bar.png" alt="Middle Bar"></img>
		</div>
		<div class="right_bar">
		<img src="right_bar.png" alt="Right Bar"></img>
		</div>
		</div>
		<div class="header_main">
		<img src="header.png" alt="header"></img>
		</div>
		</head>
		
		<body id="wrap">
		
		
		
		
		<div class="whole">
		
		<div class="window">
		
		<div class="windows">
		<video id="vid1" width="130" height="400" poster="cube.png" loop>
		<source src="test.mov" type="video/mov">
		</source>
		</video>
		</div>
		<div class="windows">
		<video id="vid1" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
		<source src="test.mov" type="video/mov">
		</source>
		</video>
		</div>
		<div class="windows">
		<video id="vid1" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
		<source src="test.mov" type="video/mov">
		</source>
		</video>
		</div>
		<div class="windows">
		<video id="vid1" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
		<source src="test.mov" type="video/mov">
		</source>
		</video>
		</div>
		<div class="windows">
		<video id="vid1" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
		<source src="test.mov" type="video/mov">
		</source>
		</video>
		</div>
		</div>
		
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		
		
		
		
		</div>
		<div class="footer">
		<img src="footer.png" alt="Footer"></img>
		</div>
		</body>
		<footer>
		
		
		</footer>
		<script src="code.js" type="text/javascript"></script>
		</html>

CSS

#wrap{
	width: 964px;
	margin: auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -40px;
	background:url(blue.png);
	background-size: cover;

	
	
	
	
}
#bg{
  width: 100%;
  height:100%;
  min-width:1000px;
  min-height: 750px;
  position: absolute;
  top: 0;
  left: 0;
}
div.body{
	




}

div.header_main{

	position:relative;
	text-align : center;
	width: 964px;
	min-width:964x;
	max-width:964px;
	height: 150px;
	margin-left:auto;
	margin-right:auto;
	



}
div.top_bar{
	
   left :0;
   top:0;
   margin: 0;
   padding: 0;





}
div.left_bar{

	
	display : block;
	position:relative;
	width: 385.6px;
	min-width:386px;
	max-width:386px;
	height : 80px;
	float: left;
	
	
	
}
div.middle_bar{

	
	display : block;
	position:relative;
	width: 192px;
	min-width:192px;
	max-width:192px;
	height : 80px;
	float : left;
	

}
div.right_bar{

	
	display : block;
	position:relative;
	width: 386px;
	min-width:386px;
	max-width:386px;
	height : 80px;
	float : left;
	
	
	
}
div.left_panel{
	
	
	display : block;
	float : left;
	position: relative;
	width:44px;
	height:600px;
	
	
	
}
div.right_panel{
	
	display : block;
	float : right;
	position: relative;
	width:44px;
	height:600px;
	
	
}
div.footer_bar{

	
	
	width: 964px;
	position:relative;
	min-width:964px;
	max-width:964px;
	height : 40px;
	
}
div.window
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 680px;
	height:400px;
	background-image:url('white.png');
	background-size : 100% 100%;
}
div.windows
{
	margin-top:30px;
	border-style:outset;
	width: 130px;
	height:400px;
	float:left;
	position :relative;
	margin-bottom : 40px;

}

div.border
{
	border-style:solid;
	border-width:3px;
	border-color: rgb(0,0,0);
	border-width:25px 25px 25px 25px;
	-moz-border-image:url("b1.png") 30 30 30 30 Stretch stretch;
	-webkit-border-image:url("b1.png") 30 30 30 30 Stretch stretch;
	border-image:url("b1.png") 30 30 30 30 Stretch stretch;

}
p.content
{
	display : block;
	width: 850px;
	min-width:850px;
	max-width:850px;
	text-align: center;
	
	
	
}
div.whole{
	background-image:url('white.png');
	background-size : 100% 100%;
	opacity:0.9;
	margin-top:80px;


}
div.footer{

position:fixed;
bottom:0;
left:auto;
padding:0px;
margin:0px;
clear: both;




}
iframe.test{


display: block;
border:0;
margin: 0 auto;
overflow: hidden;
width : 100%;
height :900px;
max-width : 900px;
position: relative;


}

djCurzed · June 13, 2013, 2:19pm

Ok so I fixed the space. Turns out the footer needed to actually have the height specified.

Still having problems with the top bar though

Sent from my GT-I9500 using Tapatalk 2

PicnicTutorials · June 13, 2013, 4:04pm

That’s your html. What about the css?

djCurzed · June 13, 2013, 4:19pm

Css is there Bro here it is again

</footer> <script src=“code.js” type=“text/javascript”></script> </html>CSS*Code:#wrap{ width: 964px; margin: auto; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -40px; background:url(blue.png); background-size: cover; } #bg{ width: 100%; height:100%; min-width:1000px; min-height: 750px; position: absolute; top: 0; left: 0; } div.body{ } div.header_main{ position:relative; text-align : center; width: 964px; min-width:964x; max-width:964px; height: 150px; margin-left:auto; margin-right:auto; } div.top_bar{ left :0; top:0; margin: 0; padding: 0; } div.left_bar{ display : block; position:relative; width: 385.6px; min-width:386px; max-width:386px; height : 80px; float: left; } div.middle_bar{ display : block; position:relative; width: 192px; min-width:192px; max-width:192px; height : 80px; float : left; } div.right_bar{ display : block; position:relative; width: 386px; min-width:386px; max-width:386px; height : 80px; float : left; } div.left_panel{ display : block; float : left; position: relative; width:44px; height:600px; } div.right_panel{ display : block; float : right; position: relative; width:44px; height:600px; } div.footer_bar{ width: 964px; position:relative; min-width:964px; max-width:964px; height : 40px; } div.window { display: block; margin-left: auto; margin-right: auto; width: 680px; height:400px; background-image:url(‘white.png’); background-size : 100% 100%; } div.windows { margin-top:30px; border-style:outset; width: 130px; height:400px; float:left; position :relative; margin-bottom : 40px; } div.border { border-style:solid; border-width:3px; border-color: rgb(0,0,0); border-width:25px 25px 25px 25px; -moz-border-image:url(“b1.png”) 30 30 30 30 Stretch stretch; -webkit-border-image:url(“b1.png”) 30 30 30 30 Stretch stretch; border-image:url(“b1.png”) 30 30 30 30 Stretch stretch; } p.content { display : block; width: 850px; min-width:850px; max-width:850px; text-align: center; } div.whole{ background-image:url(‘white.png’); background-size : 100% 100%; opacity:0.9; margin-top:80px; } div.footer{ position:fixed; bottom:0; left:auto; padding:0px; margin:0px; clear: both; } iframe.test{ display: block; border:0; margin: 0 auto; overflow: hidden; width : 100%; height :900px; max-width : 900px; position: relative; }

PicnicTutorials · June 13, 2013, 4:23pm

Where was the css there

djCurzed · June 13, 2013, 4:26pm

 </footer> 		<script src="code.js" type="text/javascript"></script> 		</html>CSS*Code:#wrap{ 	width: 964px; 	margin: auto; 	min-height: 100%; 	height: auto !important; 	height: 100%; 	margin: 0 auto -40px; 	background:url(blue.png); 	background-size: cover; 	 	 	 	 } #bg{ width: 100%; height:100%; min-width:1000px; min-height: 750px; position: absolute; top: 0; left: 0; } div.body{ 	 } div.header_main{ 	position:relative; 	text-align : center; 	width: 964px; 	min-width:964x; 	max-width:964px; 	height: 150px; 	margin-left:auto; 	margin-right:auto; 	 } div.top_bar{ 	 left :0; top:0; margin: 0; padding: 0; } div.left_bar{ 	 	display : block; 	position:relative; 	width: 385.6px; 	min-width:386px; 	max-width:386px; 	height : 80px; 	float: left; 	 	 	 } div.middle_bar{ 	 	display : block; 	position:relative; 	width: 192px; 	min-width:192px; 	max-width:192px; 	height : 80px; 	float : left; 	 } div.right_bar{ 	 	display : block; 	position:relative; 	width: 386px; 	min-width:386px; 	max-width:386px; 	height : 80px; 	float : left; 	 	 	 } div.left_panel{ 	 	 	display : block; 	float : left; 	position: relative; 	width:44px; 	height:600px; 	 	 	 } div.right_panel{ 	 	display : block; 	float : right; 	position: relative; 	width:44px; 	height:600px; 	 	 } div.footer_bar{ 	 	 	width: 964px; 	position:relative; 	min-width:964px; 	max-width:964px; 	height : 40px; 	 } div.window { 	display: block; 	margin-left: auto; 	margin-right: auto; 	width: 680px; 	height:400px; 	background-image:url('white.png'); 	background-size : 100% 100%; } div.windows { 	margin-top:30px; 	border-style:outset; 	width: 130px; 	height:400px; 	float:left; 	position :relative; 	margin-bottom : 40px; } div.border { 	border-style:solid; 	border-width:3px; 	border-color: rgb(0,0,0); 	border-width:25px 25px 25px 25px; 	-moz-border-image:url("b1.png") 30 30 30 30 Stretch stretch; 	-webkit-border-image:url("b1.png") 30 30 30 30 Stretch stretch; 	border-image:url("b1.png") 30 30 30 30 Stretch stretch; } p.content { 	display : block; 	width: 850px; 	min-width:850px; 	max-width:850px; 	text-align: center; 	 	 	 } div.whole{ 	background-image:url('white.png'); 	background-size : 100% 100%; 	opacity:0.9; 	margin-top:80px; } div.footer{ position:fixed; bottom:0; left:auto; padding:0px; margin:0px; clear: both; } iframe.test{ display: block; border:0; margin: 0 auto; overflow: hidden; width : 100%; height :900px; max-width : 900px; position: relative; }

djCurzed · June 13, 2013, 4:27pm

Look under css then you’ll see code at bottom of post

PicnicTutorials · June 13, 2013, 4:38pm

Huh my apologies I guess. It wasn’t there on my iPhone. Now it is in the iPad.

PicnicTutorials · June 13, 2013, 4:40pm

If you want it to be as wide as the screen at all times then open it and close it above everything else.

<div></div>
Everything else

djCurzed · June 13, 2013, 4:49pm

It’s in the head though so it shouldn’t be inheriting any properties… Must I put it even before the head or at the start of it???

PicnicTutorials · June 13, 2013, 5:25pm

Everything goes in the body. Not above it.

djCurzed · June 14, 2013, 6:28am

Ye dude but like the top bar is made of 3 sections the middle being the smallest is where my menu will come out obviously using the hover class. That needs to stay the same but the other 2 bars on the side should be stretching across the whole screen. They aren’t I’m thinking it’s cause of the body wrap. But if I take that away the whole layout changes. Sigh it’s frustrating cause it’s not like java which compiles and tells you the exact error and then you fix it. Here you fix it it still doesn’t work cause it relies On some other stuff in the code. Dunno what else to do but maybe take the wrap off body and but a separate container with the content using a div and placing that as wrap. I’ll try that now

Sent from my GT-I9500 using Tapatalk 2

ronpat · June 14, 2013, 6:44am

PicnicTutorials is explaining a simple fact of life. The <head> tag of an HTML file is where specific instruction are placed that affect how the page works. NOTHING between the <head> tags is directly displayed on the page. It’s NOT the same as the “header” section within the <body> of a page. The images and the code for your menu should be placed within the <body> of the page. If doing so breaks your layout, then your layout is fundamentally broken and needs to be rewritten. End of story. No, it’s not at all like Java.

djCurzed · June 14, 2013, 6:57am

I know. But when I put it in the head it is displayed on the screen my layout is fine unless I take the wrap Id out of the body. Then errrrwthing goes haywire… The funny thing is it should still be able to stretch even if the wrap is holding it In place… Doesn’t the div properties over ride the wrap??? Even when I take wrap away the top bar is still not stretching… Ps … God I love my galaxy s4

Sent from my GT-I9500 using Tapatalk 2

ronpat · June 14, 2013, 7:57am

OK, I think I’ve set up the code that you posted. Except for the fixed footer thing, and a slew of position:relatives, it almost sorta makes sense… almost. I fixed the top of the page and nothing changed. Taking #wrap away from the body caused things to look a bit awkward, but not drastically; so I left it in place. Now, please explain again what is it not doing that you would like for it to do? And why the min-width max-width properties with the same value?

djCurzed · June 14, 2013, 8:07am

Well that’s why I’m here. I have no idea why it’s not doing what I want it to… The min width max width are so the bar stays the same no matter the size of the windows. In turn this should stretch the image right a across the page and keep it like that upon resizing no matter how big or small the window is

Sent from my GT-I9500 using Tapatalk 2

ronpat · June 14, 2013, 8:37am

I did not ask you to tell me why it is not doing what you wish, I asked you to DESCRIBE what it is not doing that you wish it to do.

I do not understand your explanation about the min-width max-width properties. For examples:

The #wrap will not stretch.


#wrap {
    width: 964px;

These matching min-max widths will not stretch.


div.left_bar {
    display : block;
    position:relative;
    width: 385.6px;
    min-width:386px;
    max-width:386px;
    height : 80px;
    float: left;
}
div.middle_bar {
    display : block;
    position:relative;
    width: 192px;
    min-width:192px;
    max-width:192px;
    height : 80px;
    float : left;
}
div.right_bar {
    display : block;
    position:relative;
    width: 386px;
    min-width:386px;
    max-width:386px;
    height : 80px;
    float : left;
}
div.footer_bar {
    width: 964px;
    position:relative;
    min-width:964px;
    max-width:964px;
    height : 40px;
}
p.content {
    display : block;
    width: 850px;
    min-width:850px;
    max-width:850px;
    text-align: center;
}

I do not yet understand how you want your page to behave.

djCurzed · June 14, 2013, 8:47am

Oh sorry haha… I placed that code that you put there into a div called top bar… So that it all behaves as one, but still has individual properties… I want that bar to be at the top of the screen at all times because my navigation menu will drop down from there… Do you know what I mean? So I want that bar to span the width of the page. The actual class middle bar which is the smaller middle bar is going to change but I’m just doing the general layout first.

Sent from my GT-I9500 using Tapatalk 2

djCurzed · June 18, 2013, 6:55am

Bump

Sent from my GT-I9500 using Tapatalk 2

ronpat · June 18, 2013, 8:21am

No I don’t.

Give us something more to go on. A photoshop layout or something that shows what stretches and what doesn’t. Have you decided what the class of the smaller middle bar will be? How’s the plan progressing?

We are glad to help, but we need more to work with.