SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 41
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

    HTML Code:
    <!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


    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;
    
    
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That's your html. What about the css?

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    That's your html. What about the css?
    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-styleutset; 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; }

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Where was the css there

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     </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; }

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look under css then you'll see code at bottom of post

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Huh my apologies I guess. It wasn't there on my iPhone. Now it is in the iPad.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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???

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Everything goes in the body. Not above it.

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    Everything goes in the body. Not above it.
    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

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  14. #14
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    PicnicTutorials is explaining a simple fact of life. The tag of an HTML file is where specific instruction are placed that affect how the page works. NOTHING between the tags is directly displayed on the page. It's NOT the same as the "header" section within the of a page. The images and the code for your menu should be placed within the 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.
    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

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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?

  16. #16
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.
    Code:
    #wrap { 
        width: 964px;
    These matching min-max widths will not stretch.
    Code:
    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.

  18. #18
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  19. #19
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bump

    Sent from my GT-I9500 using Tapatalk 2

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by djCurzed View Post
    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?
    No I don't.
    Quote Originally Posted by djCurzed View Post
    The actual class middle bar which is the smaller middle bar is going to change but I'm just doing the general layout first.
    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.

  21. #21
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so this bar underneath this text stretches to the end of the page on the left.

    left_bar.png

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

    middle_bar.png

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

    left_bar.png

    ...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

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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?

    Code:
    <!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>

  23. #23
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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?

    Code:
    <!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?

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  25. #25
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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???


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •