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

Ok so this bar underneath this text stretches to the end of the page on the left.

The next bar underneath this text(the middle bar) stays the same as this is where i will animate a drop down menu from.

The next bar (the right bar) underneath this text will stretch all the way to the right of the page.

…the size of the bar shouldnt matter as it should stretch anyway although i did make them all together equal the size of the page wrap. I have tried making them bigger but all it does is extend it to the right of the screen.

So much of frustration.

Left bar and right bar are the same size and are bigger than the middle bar

It will take some time before the images are approved.

In the meanwhile, the 3 images in the top row are coded as foreground images. Is that intentional, or could they be background-images? Do you expect the images to be resized, or do you expect their boxes to show more or less of them as the width of the page changes? If resized, do you expect them to maintain their native aspect ratio or can they stretch out or shape? And while the images are being resized, do you expect the height of the top row to be fixed?

It sounds like the top row has 3 image containers of equal height, the middle image container has a fixed width, the left and right containers have flexible widths that follow the width of the browser window. Presumably the row has a fixed height.

What you seem to be asking to do isn’t hard. But what comes next?


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="general.css" rel="stylesheet" type="text/css">
    <script src="code.js" type="text/javascript"></script>
    <title>TEMP NAME</title>
    <style type="text/css">
body {
    background-color:#ace;    /* TEST COLOR */
    padding:0;
    margin:0;
}
img {
    display:block;
}
.wrapper {
    outline:1px dotted red;    /* TEST OUTLINE */
    border:1px solid transparent;
    width:90%;  /* Set the width of the page here. */
    min-width:680px;    /* equals width of .window (the widest non-fluid element of the page) */
    background:#def url(blue.png);  /* TEST COLOR APPLIED */
    background-size:cover;
    margin:0 auto;
}
.top_bar {
    outline:1px solid green;    /* TEST OUTLINE */
    background-color:pink;      /* TEST COLOR */
    padding:0 97px;    /* padding = 1/2 width of middle box */
    margin:0;
    overflow:hidden;
}
.left_box {
    outline:1px solid cyan;    /* TEST OUTLINE */
    width:50%;
/*    height:nnpx;  /* */
    float:left;
    text-align:center;  /* ??? */
    margin-left:-97px;    /* margin = 1/2 width of middle box */
}
.right_box {
    outline:1px solid cyan;    /* TEST OUTLINE */
    width:50%;
/*    height:nnpx;  /* */
    float:right;
    text-align:center;  /* ??? */
    margin-right:-97px;    /* margin = 1/2 width of middle box */
}
.middle_box {
    outline:1px solid cyan;    /* TEST OUTLINE */
    width:192px;    /* box and bar margins and padding must be 1/2 this width */
    text-align:center;
    overflow:hidden;
    margin:0 auto;
}
.header_main {
    outline:1px solid magenta;    /* TEST OUTLINE */
    height:150px;
    text-align:center;
}
.whole {
    background-image:url('white.png');  /* ??? */
    background-size:100% 100%;
    opacity:0.9;  /* ??? */
}
.window {
    outline:1px solid blue;    /* TEST OUTLINE */
    width:680px;
    height:400px;
    background-image:url('white.png');  /* ??? */
    background-size:100% 100%;
    margin:30px auto 40px;
}
.windows {
    border-style:outset;
    width:130px;
    height:400px;
    float:left;
/*  position:relative;  /* ??? */
}
.content {
    outline:1px solid lime;    /* TEST OUTLINE */
    max-width:850px;
    clear:both;
    margin:0 auto;
}
.footer {
    height:40px;
    background-color:#333;
}
.footer_bar {
    color:#fff;
    text-align:center;
    padding:0px;
    margin:0px;
}

/* THE FOLLOWING STYLES HAVE NO CORRESPONDING HTML */
.left_panel {
    float:left;
/*  position:relative;  /* ??? */
    width:44px;
    height:600px;
}
.right_panel {
    float:right;
/*  position:relative;  /* ??? */
    width:44px;
    height:600px;
}
.border {
    border-style:solid;
    border-width:3px;  /* ??? */
    border-width:25px 25px 25px 25px;  /* ??? */
    border-color:rgb(0,0,0);
    -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;
}

iframe.test {
    border:0;
    width:100%;
    max-width:900px;
    height:900px;
/*    position:relative;  /* ??? */
    overflow:hidden;
    margin:0 auto;
}
    </style>
</head>
<body>
<div class="top_bar">
    <div class="left_box">
        <img src="left_bar.png" alt="left_bar.png"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem.</p>
    </div>
    <div class="right_box">
        <img src="right_bar.png" alt="right_bar.png"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
    </div>
    <div class="middle_box">
        <img src="middle_bar.png" alt="middle_bar.png"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum....</p>
    </div>
</div>
<div class="wrapper">
    <div class="header_main">
        <img src="header.png" alt="header.png">
    </div>
    <div class="whole">
        <div class="window">
            <div class="windows">
                <video id="vid1" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
                    <source src="test.mov" type="video/mov">
                </video>
            </div>
            <div class="windows">
                <video id="vid2" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
                    <source src="test.mov" type="video/mov">
                </video>
            </div>
            <div class="windows">
                <video id="vid3" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
                    <source src="test.mov" type="video/mov">
                </video>
            </div>
            <div class="windows">
                <video id="vid4" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
                    <source src="test.mov" type="video/mov">
                </video>
            </div>
            <div class="windows">
                <video id="vid5" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
                    <source src="test.mov" type="video/mov">
                </video>
            </div>
        </div>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing.</p>
    </div>
</div>
<div class="footer">
    <div class="footer_bar">
        <img src="footer.png" alt="footer.png">
    </div>
</div>
</body>
</html>

Ok The top container you can ignore for the meantime. The bars can be background as long as the middle bar can be used as a drop down menu or interactive object.

The bars on the left and right i need to be stretched out with the window when resized, but not height wise. Only width wise, keeping the aspect ratio. THat should be find though cause that texture image that i am using is generic and can be stretched without any visual differences(I tested it in paint)
I was that bar to stay on the top of the screen at all times and it to maintain that property of stretching across the screen and staying at the top upon resizing the window no matter what.
The top_bar in css is only a container containing left_bar middle_bar right_bar. I thought that was required in order for them all to retain the top of the page propertie and for it to be stretched. This css code can be removed though aas well as the HTML.

Anything that does not have corresponding HTML in the CSS can be ignored as well.

Im not quite sure as to what you mean by what comes next?

With the images approved, it looks like the top row contains one long repeating background-image and three text containers. If that is right, then delete the foreground images and assign one repeating image to .top_bar. The text boxes will remain as-is except that they will just hold text.

ok so what you are saying is that i should rather change the tags to image tags and not div tags for the left_bar , middle_bar, right_bar?? Cause i dont want text boxes there and thats what im assuming you mean when you say get rid of the foreground images. Why do i want one repeating image if im going to have drop down animation there??
Dont i need seperate bars so that i can assign the dropdown text to one of them???

It’s very hard to follow what’s going in this thread but is sounds to me as though you want a fixed positioned header from this comment:

I was that bar to stay on the top of the screen at all times and it to maintain that property of stretching across the screen and staying at the top upon resizing the window no matter what.

To create a repeating image all the way across the window is done by using one element and just repeating the image all the way across; its as simple as that. If you then want a centred section on that full width bar you just nest an inner element width the width you require and use auto margins to center it. I’m not sure if that’s what you require though as I got lost in the thread:)

It might be easier if you could do a rough drawing of what you want if Ron’s examples don’t match your requirements.

Hey man

Kind of but I need something above the header actually you can call it my navigation bar. And yes fixed to top of screen spanning whole width
Sent from my GT-I9500 using Tapatalk 2

That shouldn’t be an issue as such as its the same technique no matter what comes first. You’d just do the nav and then do the wide element underneath or indeed as a repeating image on the bottom of the nav container (or wherever it needs to be). You will need to remove your widths from the body as in your very first example and use inner html elements instead.

It seems that its one of those questions where we need to see a live version (or mock up) of what you have got so far and then we can say “Oh yeah - do it like this”:slight_smile:

If you don’t have a live site the posting basics thread gives you some ideas of how you can post your code if you have no live version in order that we can get something up and running so we can debug properly.

I think Ron has more idea of what you might want as he has been involved in the thread from the start but I am still having a hard time visualising what you want and how to offer something useful for you to work with. :wink:

djCurzed,

Did you copy the code that I posted in post #22 to an html file and open it in your brower? If not, please do that exactly as it is written and tell us if that is on the right track or not.

As requested twice before, posting a mockup or photoshop drawing of your intended page design would be the most helpful thing you could offer at this point because your descriptions are difficult to follow.

Yes i copied and pasted. its not the layout i was looking for. I did what you said and extended the wrapper 90% ofcourse had to readjust some of the content, but now i cant get the footer to the center and still a problem with that nav bar,here is a small mock up.

thats more or less the basic structure hope its understandabe…will put the code up again tomorrow. I have a feeliing its the size of the actual jpeg images.

Let me be sure I understand what you did… Did you

(1) Copy the code into an a new file, give that file a suffix of .htm (or .html) and open it in you browser without making any changes?

(2) Copy portions of the code into YOUR code and try to make it work with your code?

The sketch is helpful. I sounds like you want a fixed position header at the top of the window whose left and right boxes are fluid except that the right box might need a min-width.

(1) Can you give the height and/or width dimensions in px of any of the fixed boxes?

(2) Can you post or link to the images that you wish to use on the page? Not screen shots… the actual images.

I am assuming that your code does not yet reside on a server. When it does, that will be a giant leap.

Hi,

In order to help I’ve put a starting page up here so that you can tell us whether any aspects are correct or not. I assumed you just wanted a repeating strip at the top and not proper elements.

No, that’s not what I am saying. The <div> tags should stay. They can “contain” the text, fixed background images or animation. They allow you to set unique widths for each container: left - fluid, middle - fixed, right - fluid with a minimum width. The images should probably be assigned as background images in CSS rather than foreground images in HTML.

As I have said several times, you descriptions aren’t very clear, but they ARE getting better.

You probably don’t. However a single repeating background image across the row will be hidden by foreground images, etc., so, unless it is distracting is some way (as yet unknown) it is an efficient method of applying a consistent background across the row.

According to your description, you need separate BOXES, not necessarily bars. The words box and bar are not synonymous.

djCurzed,

Please look at this image and tell us if the top_bar looks the way you want it to. The blue-green lines mark the edges of the boxes. The middle box is 192px wide per your image. The row is 80px high. The left and right boxes extend to the edge of the window, however wide that may be.

(1) What should the menu in .middle_box look like? What should it say?

(2) Should there be text or buttons in .right_box? If so, what should they say?

Below the .top_bar…

(3) .wrapper is set at 90% of the width of the browser window which you said you did not like. What would you like? If a fixed width, how wide should it be?

(4) What should be in the box .header_main? header.png? Right now, it’s an empty box with a height of 150px. Do you have an image you can post?

Your turn :slight_smile:

Hey man really appreciate.

That image is exactly what im looking for. I fiddled with your code but it still shows background color of pink as you made it, when you extend the window.The image is now on the left end and it stays there but as i said before when you extend it, instead of it extending the bar, it shows the pink background. It also places the images underneath eachother when i make the window smaller that the bar itself. I need it to be fixed so that it scrolls with the page.As in as you scroll down the page, it moves with the top of the window.

its needs to be 100% wrapper as i need it to be full across the page and it isnt when i make the wrapper 90%.

There is no text in the left box or the right box and the middle box is going to be a drop down menu that i will manually create.

Dont worry about the header, i still need to design that.

Really appreciate all your help guys.

what paul did is kind of what im looking for except without all those menus it only displays MENU in the middle bar.

FYI: To make it a “100%” wrapper, simply delete (or comment out) width:90%. You do not need to specify width:100%. The default behavior of a <div> (or any block object) is width:100%. So you do not need to specify width:100%.

The problem with the images is that you have placed them as foreground images in the HTML instead of using just one repeating background-image in CSS. In the page that is shown in the link, the menubar image is coded as a background image in .top_bar. There are no images in HTML.

Paul’s example shows a fixed top menubar that is always visible at the top of the window even when the rest of the page is scrolled. Is that the way you want it? Or do you want the menubar to scroll up with the rest of the page? In other words, do you want that menu bar to be attached to the top of the page and scroll out of sight when the page is scrolled, or do you want that menu bar to be attached to the top of the window and never move, even when the page is scrolled?

On your computer, are your images in the same folder with the HTML file, or are then in a sub-folder, maybe one name images or something?

Are you planning to design the drop-down menu, or do you want me to leave one of Paul’s buttons as a guide?

Hey man,
Thanks.

Images are in same folder.
It needs to be always visible.
I want it exactly like pauls.
I will be planning a drop down menu which will make, for instance, the whole of the middle bar look like it is pressed down and then a drop down menu comes underneath that.

I have gotten it to stretch across the top using the background method.

but now it is showing an extra space between the bar and the header.

I still need the footer to be centered and its not doing that.

New code below.

<!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>
		
		
		</head>
		
	
		
		<body id="wrap">
		<div class="top_bar">
		<div class="left_bar">
		</div>
		<div class="middle_bar">
		</div>
		<div class="right_bar">
		
		</div> 
		</div>
		
		
		
		
		
			
		<div class="whole">
		<div class="header_main">
		<img src="header.png" alt="header"></img>
		</div>
		<div class="window">
		
		
		<video class="vid1" width="130" height="400" loop onMouseOver="this.play();" onMouseOut="this.pause();">
		<source src="movie1.mp4" type='video/mp4'>
		</video>
		
		
		
		<video class="vid1" width="130" height="400" loop onMouseOver="this.play();" onMouseOut="this.pause();">
		<source src="movie2.mp4" type='video/mp4'>
		</video>
		
		
		
		<video class="vid1" width="130" height="400" loop onMouseOver="this.play();" onMouseOut="this.pause();">
		<source src="movie3.mp4" type='video/mp4'>
		</video>
		
		
		
		<video class="vid1" width="130" height="400" loop onMouseOver="this.play();" onMouseOut="this.pause();">
		<source src="movie4.mp4" type='video/mp4'>
		</video>
		
		
		<video class="vid1" width="130" height="400" loop onMouseOver="this.play();" onMouseOut="this.pause();">
		<source src="movie5.mp4" type="video/mp4">
		</source>
		</video>
		
		</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>
				
		</html>
#wrap{ 
	/* width: 100%; */
	margin: auto; 
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	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.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{
	
  	/* width: 100%;
	max-width: 100%;
	min-width: 100%;
	position:relative;
	display : block;
	float:left;
	height:80px; */
	outline:1px solid green;    /* TEST OUTLINE */
    background-color:pink;      /* TEST COLOR */
    padding:0 97px;    /* padding = 1/2 width of middle box */
    margin:0;
    overflow:hidden;
	background:url("left_bar.png");
	
	



}
div.left_bar{

	
	display : block;
	position:relative;
	width: 385.6px;
	min-width:386px;
	height : 80px;
	float: left;
	
	margin-left:-97px;
	
	
	
}
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;
	height : 80px;
	float : left;
	
	margin-right:-97px;
	
	
}
/* 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.window
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 680px;
	min-width:680px;
	max-width:680px;
	height:400px;
	background-image:url('white.png');
	background-size : 100% 100%;
	
}
video
{
	margin-top:30px;
	border-style:outset;
	width: 130px;
	height:400px;
	float:left;
	position :relative;
	margin-bottom : 40px;

}


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


}
div.footer{
   
position:fixed;
bottom:0px;
height : 80px;
margin-left:auto;
margin-right:auto;
width: 964px;
min-width:964px;
max-width:964px;
text-align : center;




}
iframe.test{


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


}

To make the footer center instead of extending to the full width of the page:


    [color=red]</div>[/color]    /* move this close div */
    <div class="footer">
        <img src="footer.png" alt="Footer"></img>
    </div>
[color=blue]</div>[/color]    /* down here */
</body>
</html>

It’s almost 5am my time and I need to get some sleep. I’ll be back later today.

Lol have you guys given up on me hehe still can’t get it right… Used the background method so it fills the top… But like it doesn’t scroll with the page and when I set position to fixed it moves the bar down a bit and behind the content.

Sent from my GT-I9500 using Tapatalk 2