SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to page structure ?

    Hi all

    I have an images here to illustrate my question.

    www.ttmt.org.uk/page.png

    The thin lines going down are to illustrate the page sides.

    I would like to have a black area across the bottom of the page that stretches the full width of the window.

    My problems is I want the height of the black area to be different heights on either side of page with a step down on the page itself.

    How would I go about coding this up so the page width is responsive and the height of the white area can go taller to shorter with content and still have the black area at different levels on the different sides of the page.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Show us some code. What have you done so far? I'm unable to tell what sets the heights of the white areas, especially since the "step" is within the center section of the page. Is the height of the step fixed or does it change with content? What would control/set the heights of the white areas along the sides of the page? You realize that "responsive" implies that a desktop sized page usually gets considerably longer when viewed on mobile devices. How is this design supposed to behave "responsively"?

    It's an interesting idea, but I'm not sure what you have in mind for the content. Could you elaborate, please?

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry that was a terrible explanation - I was running out of battery power. Hopful this will be better.

    http://www.ttmt.org.uk/mt-page/

    The height of the white area will be determined by it's content which will get taller as the page gets narrower.

    The red area is just a section in the page who's title I wanted to show in a stepped up block which then goes off the page.

    So as you can see the background color is 100% width. On the left side it is higher than the right side.

    Here I have done it by creating a white block and positioning it absolutely next to the title and making the width enough to strech off the page, but it is too wide and causes scroll bars on thre bottom.

    So how can I do this so it is responsive and without the scroll bars.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ttmt View Post
    The red area is just a section in the page who's title I wanted to show in a stepped up block which then goes off the page.
    Is the red area and title supposed to scroll off-page bottom as the content becomes taller (narrower widths, perhaps)? or is the red area and title supposed to be fixed to the bottom of the viewport? or something other?

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Give this a try, please, and see if it is in the ballpark.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="robots" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title of the document</title>
        <style type="text/css">
    html,body {
        height:100%;
        padding:0;
        margin:0;
    }
    body {
        color:#fff;
        font-family:sans-serif;
        overflow-y:scroll;  /* optional */
        padding:0;
        margin:0;
    }
    .outer {
        display:table;
        height:100%;
        outline:1px dashed #f00;  /* Test Outline */
        max-width:800px;
        margin:0 auto;
    }
    .trow {
        display:table-row;
    }
    
    p {
        color:black;
        margin:2em 0;
    }
    
    .tcell {
        display:table-cell;
        height:1px;
    }
    
    .stripe1 {
        -webkit-box-shadow: -799px 0px 0px #f00;
        -moz-box-shadow:    -799px 0px 0px #f00;
        box-shadow:         -799px 0px 0px #f00;
    }
    .titlebar {
    /*    outline:1px solid lime;  /* Test Outline */
        background:white;
    }
    h2 {
        display:inline-block;
        color:#fff;
        background:#f00;
        padding:.5em 2em .5em 0;
        margin:0;
    }
    
    .tcell.stripe2 {
        height:auto;
        background:#f00;
        -webkit-box-shadow: -799px 0px 0px #f00, 799px 0px 0px #f00;
        -moz-box-shadow:    -799px 0px 0px #f00, 799px 0px 0px #f00;
        box-shadow:         -799px 0px 0px #f00, 799px 0px 0px #f00;
    }
    .last .tcell.stripe2 {
        height:30px;
    }
    
        </style>
    </head>
    <body>
    
    <div class="outer">
        <div class="trow">
            <section class="tcell">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </section>
        </div>
        <div class="trow">
            <section class="tcell stripe1">
                <div class="titlebar"><h2>Section Title</h2></div>
            </section>
        </div>
        <div class="trow">
            <section class="tcell stripe2"></section>
        </div>
        <div class="trow last">
            <section class="tcell stripe2"></section>
        </div>
    </div>
    
    </body>
    </html>

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Slightly improved. The fourth row was unnecessary.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="robots" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--
    http://www.sitepoint.com/forums/showthread.php?1212291-How-to-page-structure
    2014.06.16 17:53
    ttmt
    
    -->
        <title>Title of the document</title>
        <style type="text/css">
    html,body {
        height:100%;
        padding:0;
        margin:0;
    }
    body {
        color:#fff;
        font-family:sans-serif;
        overflow-y:scroll;  /* optional */
        padding:0;
        margin:0;
    }
    .outer {
        display:table;
        height:100%;
        outline:1px dashed #f00;  /* Test Outline */
        max-width:800px;
        margin:0 auto;
    }
    .trow {
        display:table-row;
    }
    
    p {
        color:black;
        margin:2em 0;
    }
    
    .tcell {
        display:table-cell;
        height:1px;
    }
    
    .stripe1 {
        -webkit-box-shadow: -799px 0px 0px #f00;
        -moz-box-shadow:    -799px 0px 0px #f00;
        box-shadow:         -799px 0px 0px #f00;
    }
    .titlebar {
    /*    outline:1px solid lime;  /* Test Outline */
        background:white;
    }
    h2 {
        display:inline-block;
        color:#fff;
        background:#f00;
        padding:.5em 2em .5em 0;
        margin:0;
    }
    
    .tcell.stripe2 {
        height:auto;
        background:#f00;
        -webkit-box-shadow: -799px 0px 0px #f00, 799px 0px 0px #f00;
        -moz-box-shadow:    -799px 0px 0px #f00, 799px 0px 0px #f00;
        box-shadow:         -799px 0px 0px #f00, 799px 0px 0px #f00;
        padding-bottom:30px;
    }
        </style>
    </head>
    <body>
    
    <div class="outer">
        <div class="trow">
            <div class="tcell">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
        <div class="trow">
            <div class="tcell stripe1">
                <div class="titlebar"><h2>Section Title</h2></div>
            </div>
        </div>
        <div class="trow">
            <div class="tcell stripe2"></div>
        </div>
    </div>
    
    </body>
    </html>

  7. #7
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ronpat, thats looks exactly like what was looking for

    Can you explain how the box-shadow is working.

    I take it this wouldn't work in IE8.

    I need it to work in IE8. Do you think there is a way to do this that will work in IE8

  8. #8
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I have it working using a simpler method.

    http://www.ttmt.org.uk/mt-page2/

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    	<head>	
    		<meta charset="UTF-8">
    		<meta name="description" content="">
    		<meta name="keywords" content="">
    		<meta name="robots" content="">
    		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      
      
    		<style type="text/css">
          *{
            color: white;
            font-family: sans-serif;
            margin: 0;
            padding: 0;
          }
          
          .wrap,
          section{
            width: 100%;
          }
          
          .page{
            margin: 0 auto;
            max-width: 800px;
            position: relative;
          }
          
          .page h2{
            padding: 10px;
            color: #eee;
            position: absolute;
            top: -45px;
            background: red;
          }
          
          .top-section p{
            color: black;
            margin: 100px 0;
          }
          
          .bottom-section{
            background: red;
            min-height: 500px;
          }
                
          .block{
            width: 1000px;
            height: 50px;
            background: red;
            position: absolute;
            top: -45px;
            left: -1000px;
          }
    		</style>
      
        
    		<title>Title of the document</title>
    	</head>
      
    <body>
      
      <div class="wrap">
        <section class="top-section">
          <div class="page top-page">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>  
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              
            </p>
          </div>  
        </section>  
        <section class="bottom-section">
          <div class="page bottom-page">
            <h2>Section Title</h2>
            <div class="block"></div>
          </div>  
            <div class="knock-out-2"></div>
        </section>  
      </div>  
      
    
    </body>
    
    </html>

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I would avoid the absolute positioning as that limits you to set heights and also makes it difficult for zoom to scale that section well.

    I would draw the line using :before and use absolute positoioning for the red line but relative to the h2 so that it stays pace with the h2 whatever its size.

    Be careful with your universal selector usage as that kills inheritance. Only use it globally for properties that don't inherit such as margin and padding otherwise you destroy the cascade which is the very essence of CSS.

    Here's how I would do it using most of your code but tidied up a bit.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="robots" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	color: white;
    	background:red;
    	font-family: sans-serif;
    }
    .wrap, section {
    	width: 100%;
    	background:#fff;
    }
    .page {
    	margin: 0 auto;
    	max-width: 800px;
    	position: relative;
    }
    .page h2 {
    	padding: 10px;
    	color: #eee;
    	background: red;
    }
    .top-section{padding:100px 0 0}
    .top-section p {
    	color: black;
    	margin:0 0 100px;
    }
    .page h2 {
    	display:inline-block;
    	position:relative
    }
    .page h2:before {
    	content:" ";
    	position:absolute;
    	top:0;
    	bottom:0;
    	left:-999em;
    	width:999em;
    	background:red;
    }
    </style>
    <title>Title of the document</title>
    </head>
    <body>
    <div class="wrap">
    		<section class="top-section page top-page">
    						<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    						<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    		</section>
    		<section class="bottom-section page bottom-page">
    						<h2>Section Title</h2>
    		</section>
    </div>
    </body>
    </html>

    Note that I set the body background to red so that there's no need for heights at all. The page wrapper is set to white so that you get the remainder of the page as red as required.

    Don't add divs for the sake of it. You have added a section so why add another div unless you are dividing that section up. If you hadn't used the section element you wouldn't use 2 divs to do the job so why use section and a div?

  10. #10
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B that perfect


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
  •