Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Grid Coding

  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Grid Coding

    Hi guys,

    I'm new here so I apologise if I posted this in the wrong place.

    I've just started learning to code using grids. Unfortunately, I'm a bit stuck with a project - please see the below layout I'm trying to code using the grids system.



    Everything seems pretty straightforward apart from the top header. I have no idea how to make the blue header 100% width and then add the menu/nav on top of it.

    I'd really appreciate your help and advice.

    Thanks,

    Andi

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello andi192,
    A picture like you've given us doesn't provide any information as to how you're coding this site or what the problem could be. You need to post your code or, even better, put up a test site we can look at.

    Myself, I hate that grid crap. I think it's totally outdated. It would be simple enough to make a site like you've layed out in your picture using divs positioned with margins and floats.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi there,

    Thanks very much for your reply.

    Here's a CodePen of what I'm trying to do: http://codepen.io/andreiionescu/pen/tkHzE

    I'm quite a newbie, that's the first page I code in HTML/CSS and I just want to make sure I'm doing it properly.

    Thanks,

    Andi

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,449
    Thanks
    23
    Thanked 630 Times in 629 Posts
    I can never see anything in codepen. Please post it here. Use the # icon in toolbar above you when you are in the 'message' box.(When doing Quick Reply)
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New Coder
    Join Date
    Jul 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for this. There you go:

    Code:
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
        <title>Smells Like Bakin' Andi's Version</title>
        <link rel="stylesheet" href="normalize.css" type="text/css" media="screen">
        <link rel="stylesheet" href="grid.css" type="text/css" media="screen">
      </head>
      <body>
    
          <div id="full-width-div">
            <div class="container clearfix ">
    
              <div class="grid_12 authentification">
              Log in here
              </div>
    
              <div class="grid_12">
                <img src="http://yumm.ro/wp-content/themes/yumm.ro/images/yumm.png" alt="Logo here">
              </div>
    
              <div class="grid_12 nav">
                <ul>
                  <li>Home</li>
                  <li>About Us</li>
                  <li>Services</li>
                  <li>Contact</li>
                </ul>
              </div>
            </div>
          </div>
    
          <div class="container clearfix">
    
            <div id="search" class="grid_12">
              Text here
            </div>
    
            <div id="left-box" class="grid_8">
              Text here
            </div>
    
            <div id="right-box" class="grid_4 omega">
             Lorem Ipsum
            </div>
    
            
             <div id="copyright" class="grid_12">
              <p>Footer</p>
            </div>
    
          </div> 
      </body>
    </html>
    Code:
    /* Reset */
    
    /*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
    
    /* =============================================================================
       HTML5 display definitions
       ========================================================================== */
    
    /*
     * Corrects block display not defined in IE6/7/8/9 & FF3
     */
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    nav,
    section,
    summary {
        display: block;
    }
    
    /*
     * Corrects inline-block display not defined in IE6/7/8/9 & FF3
     */
    
    audio,
    canvas,
    video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }
    
    /*
     * Prevents modern browsers from displaying 'audio' without controls
     * Remove excess height in iOS5 devices
     */
    
    audio:not([controls]) {
        display: none;
        height: 0;
    }
    
    /*
     * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
     * Known issue: no IE6 support
     */
    
    [hidden] {
        display: none;
    }
    
    
    /* =============================================================================
       Base
       ========================================================================== */
    
    /*
     * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
     *    http://clagnut.com/blog/348/#c790
     * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
     *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
     */
    
    html {
        font-size: 100%; /* 1 */
        -webkit-text-size-adjust: 100%; /* 2 */
        -ms-text-size-adjust: 100%; /* 2 */
    }
    
    /*
     * Addresses font-family inconsistency between 'textarea' and other form elements.
     */
    
    html,
    button,
    input,
    select,
    textarea {
        font-family: sans-serif;
    }
    
    /*
     * Addresses margins handled incorrectly in IE6/7
     */
    
    body {
        margin: 0;
    }
    
    
    /* =============================================================================
       Links
       ========================================================================== */
    
    /*
     * Addresses outline displayed oddly in Chrome
     */
    
    a:focus {
        outline: thin dotted;
    }
    
    /*
     * Improves readability when focused and also mouse hovered in all browsers
     * people.opera.com/patrickl/experiments/keyboard/test
     */
    
    a:hover,
    a:active {
        outline: 0;
    }
    
    
    /* =============================================================================
       Typography
       ========================================================================== */
    
    /*
     * Addresses font sizes and margins set differently in IE6/7
     * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
     */
    
    h1 {
        font-size: 1.875em;
        margin: 1em 0;
    }
    
    h2 {
        font-size: 1.5em;
        margin: 0;
    }
    
    h3 {
        font-size: 1em;
        margin: 1em 0 0 0;
    }
    
    h4 {
        font-size: 1em;
        margin: 1.33em 0;
    }
    
    h5 {
        font-size: 0.83em;
        margin: 1.67em 0;
    }
    
    h6 {
        font-size: 0.75em;
        margin: 2.33em 0;
    }
    
    /*
     * Addresses styling not present in IE7/8/9, S5, Chrome
     */
    
    abbr[title] {
        border-bottom: 1px dotted;
    }
    
    /*
     * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
    */
    
    b,
    strong {
        font-weight: bold;
    }
    
    blockquote {
        margin: 1em 40px;
    }
    
    /*
     * Addresses styling not present in S5, Chrome
     */
    
    dfn {
        font-style: italic;
    }
    
    /*
     * Addresses styling not present in IE6/7/8/9
     */
    
    mark {
        background: #ff0;
        color: #000;
    }
    
    /*
     * Addresses margins set differently in IE6/7
     */
    
    p,
    pre {
        margin: 1em 0;
    }
    
    /*
     * Corrects font family set oddly in IE6, S4/5, Chrome
     * en.wikipedia.org/wiki/User:Davidgothberg/Test59
     */
    
    pre,
    code,
    kbd,
    samp {
        font-family: monospace, serif;
        _font-family: 'courier new', monospace;
        font-size: 1em;
    }
    
    /*
     * Improves readability of pre-formatted text in all browsers
     */
    
    pre {
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    /*
     * 1. Addresses CSS quotes not supported in IE6/7
     * 2. Addresses quote property not supported in S4
     */
    
    /* 1 */
    
    q {
        quotes: none;
    }
    
    /* 2 */
    
    q:before,
    q:after {
        content: '';
        content: none;
    }
    
    small {
        font-size: 75%;
    }
    
    /*
     * Prevents sub and sup affecting line-height in all browsers
     * gist.github.com/413930
     */
    
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    
    sup {
        top: -0.5em;
    }
    
    sub {
        bottom: -0.25em;
    }
    
    
    /* =============================================================================
       Lists
       ========================================================================== */
    
    /*
     * Addresses margins set differently in IE6/7
     */
    
    dl,
    menu,
    ol,
    ul {
        margin: 1em 0;
    }
    
    dd {
        margin: 0 0 0 40px;
    }
    
    /*
     * Addresses paddings set differently in IE6/7
     */
    
    menu,
    ol,
    ul {
        padding: 0 0 0 40px;
    }
    
    /*
     * Corrects list images handled incorrectly in IE7
     */
    
    nav ul,
    nav ol {
        list-style: none;
        list-style-image: none;
    }
    
    
    /* =============================================================================
       Embedded content
       ========================================================================== */
    
    /*
     * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
     * 2. Improves image quality when scaled in IE7
     *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
     */
    
    img {
        border: 0; /* 1 */
        -ms-interpolation-mode: bicubic; /* 2 */
    }
    
    /*
     * Corrects overflow displayed oddly in IE9
     */
    
    svg:not(:root) {
        overflow: hidden;
    }
    
    
    /* =============================================================================
       Figures
       ========================================================================== */
    
    /*
     * Addresses margin not present in IE6/7/8/9, S5, O11
     */
    
    figure {
        margin: 0;
    }
    
    
    /* =============================================================================
       Forms
       ========================================================================== */
    
    /*
     * Corrects margin displayed oddly in IE6/7
     */
    
    form {
        margin: 0;
    }
    
    /*
     * Define consistent border, margin, and padding
     */
    
    fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    }
    
    /*
     * 1. Corrects color not being inherited in IE6/7/8/9
     * 2. Corrects text not wrapping in FF3
     * 3. Corrects alignment displayed oddly in IE6/7
     */
    
    legend {
        border: 0; /* 1 */
        padding: 0;
        white-space: normal; /* 2 */
        *margin-left: -7px; /* 3 */
    }
    
    /*
     * 1. Corrects font size not being inherited in all browsers
     * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
     * 3. Improves appearance and consistency in all browsers
     */
    
    button,
    input,
    select,
    textarea {
        font-size: 100%; /* 1 */
        margin: 0; /* 2 */
        vertical-align: baseline; /* 3 */
        *vertical-align: middle; /* 3 */
    }
    
    /*
     * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
     */
    
    button,
    input {
        line-height: normal; /* 1 */
    }
    
    /*
     * 1. Improves usability and consistency of cursor style between image-type 'input' and others
     * 2. Corrects inability to style clickable 'input' types in iOS
     * 3. Removes inner spacing in IE7 without affecting normal text inputs
     *    Known issue: inner spacing remains in IE6
     */
    
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        cursor: pointer; /* 1 */
        -webkit-appearance: button; /* 2 */
        *overflow: visible;  /* 3 */
    }
    
    /*
     * Re-set default cursor for disabled elements
     */
    
    button[disabled],
    input[disabled] {
        cursor: default;
    }
    
    /*
     * 1. Addresses box sizing set to content-box in IE8/9
     * 2. Removes excess padding in IE8/9
     * 3. Removes excess padding in IE7
          Known issue: excess padding remains in IE6
     */
    
    input[type="checkbox"],
    input[type="radio"] {
        box-sizing: border-box; /* 1 */
        padding: 0; /* 2 */
        *height: 13px; /* 3 */
        *width: 13px; /* 3 */
    }
    
    /*
     * 1. Addresses appearance set to searchfield in S5, Chrome
     * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
     */
    
    input[type="search"] {
        -webkit-appearance: textfield; /* 1 */
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box; /* 2 */
        box-sizing: content-box;
    }
    
    /*
     * Removes inner padding and search cancel button in S5, Chrome on OS X
     */
    
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }
    
    /*
     * Removes inner padding and border in FF3+
     * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
     */
    
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
    
    /*
     * 1. Removes default vertical scrollbar in IE6/7/8/9
     * 2. Improves readability and alignment in all browsers
     */
    
    textarea {
        overflow: auto; /* 1 */
        vertical-align: top; /* 2 */
    }
    
    
    /* =============================================================================
       Tables
       ========================================================================== */
    
    /*
     * Remove most spacing between table cells
     */
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    /*
     Width: 1000px
     # Columns : 12 
     Column width: 65px
     Gutter : 20px 
    
     */
    
     /* Style.css */
    
    body {
    	background-color:#f3f3f3;
    }
    
    #full-width-div {
    	width: 100%;
    	background-color: #036aa3;
    	height: 150px;
    }
    
    .authentification {
    	font-size: 14px;
    	text-align: right;
    	color: #fff;
    }
    
    .nav {
    	background-color: #fff;
    	height: 50px;
    	box-shadow: 0px 3px 3px #c8c8c8;
    }
    .nav ul {
    	margin: 0;
    	padding: 15px;
    	list-style-type: none;
    }
    .nav ul li {
    	display: inline;
    	margin-right:30px;
    }
    
    #search {
    	color: #fff;
    	background-color: #ff144b;
    	height: 100px;
    }
    
    #left-box {
    	background-color: #fff;
    }
    
    #right-box {
    	background-color: #fff;
    }
    
     /* Style.css */
    
    .grid_1 { width: 65px; }
    .grid_2 { width: 150px; }
    .grid_3 { width: 235px; }
    .grid_4 { width: 320px; }
    .grid_5 { width: 405px; }
    .grid_6 { width: 490px; }
    .grid_7 { width: 575px; }
    .grid_8 { width: 660px; }
    .grid_9 { width: 745px; }
    .grid_10 { width: 830px; }
    .grid_11 { width: 915px; }
    .grid_12 { width: 1000px; }
    
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {
    	margin: 0 20px 10px 0;
    	float: left;
    	display: block;
    }
    
    .alpha{margin-left:0px;}
    .omega{margin-right:0px;}
    
    .container{
    	width: 1000px; 
    	margin: auto;
    }
    
    
    
    .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    93
    Thanks
    5
    Thanked 15 Times in 15 Posts
    Here's a much better way of doing a grid system in my opinion:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<title>Fluid Grid: With Box Sizing</title>
    	<meta name="description" content="">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../css/assignment01-fluid-grid-boxes.css">
    </head>
    
    <body>
    	<header class="container">
        	<h1>With Box Sizing</h1>
        </header>
    	<div class="container">
    		<div class="row">
    			<!-- When using the span method, your span's total can not exceed 12 -->
    			<div class="span1">1</div>
                <div class="span1">1</div>
                <div class="span1">1</div>
                <div class="span1">1</div>
                <div class="span1">1</div>
                <div class="span1">1</div>
                <div class="span1">1</div>
                <div class="span1">1</div>
                <div class="span1">1</div>
                <div class="span1">1</div>
                <div class="span1">1</div>
                <div class="span1">1</div>
    		</div>
            <div class="row">
            	<div class="span2">2</div> 
                <div class="span2">2</div>
                <div class="span2">2</div>
                <div class="span2">2</div>
                <div class="span2">2</div>
                <div class="span2">2</div>       
            </div>
            <div class="row">
            	<div class="span3">3</div>
                <div class="span3">3</div>
                <div class="span3">3</div>
                <div class="span3">3</div>
            </div>
            <div class="row">
            	<div class="span4">4</div>
                <div class="span4">4</div>
                <div class="span4">4</div>
            </div>
            <div class="row">
            	<div class="span5">5</div>
                <div class="span7">7</div>
            </div>
            <div class="row">
            	<div class="span6">6</div>
                <div class="span6">6</div>
            </div>
            <div class="row">
            	<div class="span7">7</div>
                <div class="span5">5</div>
            </div>
            <div class="row">
            	<div class="span8">8</div>
                <div class="span4">4</div>
            </div>
            <div class="row">
            	<div class="span9">9</div>
                <div class="span3">3</div>
            </div>
            <div class="row">
            	<div class="span10">10</div>
                <div class="span2">2</div>
            </div>
            <div class="row">
            	<div class="span11">11</div>
                <div class="span1">1</div>
            </div>
            <div class="row">
            	<div class="span12">12</div>
            </div>
    	</div>
    </body>
    </html>
    The css:
    Code:
    /* DEFAULT STYLES
    ----------------------------------- */
    
    body {
    	margin: 0;
    }
    .container {
    	*zoom: 1;
    	width: 100%;
    	max-width: 960px;
    	margin: 0 auto 10px auto;
    	background-color: #f4f4f4;
    	box-sizing: border-box;
    }
    
    .container:after {
    	clear: both;
    }
    
    .container:before, .container:after {
    	content: " ";
    	display: table;
    }
    
    header { 
    	border-bottom: 2px solid #000;
    	padding-left: 5px; 
    }
    
    /* BEGIN FLUID GRID CONSTRUCTION
    ----------------------------------- */
    .row {
    	/* * For IE 6/7 only * Include this rule to trigger has Layout and contain floats. */
    	*zoom: 1;
    	margin-bottom: 20px; /* Just for visual separation  of rows */
    }
    
    .row:after {
    	clear: both;
    }
    
    .row:before, .row:after {
    	content: " ";
    	display: table;
    }
    
    /* Create a Selector that will select all class names that begin with "span" */
    [class^="span"] {
    	float: left; /* Required */
    	box-sizing: border-box; /* Required */
    	-moz-box-sizing: border-box; /* Required */
    	padding: 10px 0; /* Just for display */
    	text-align: center; /* Just for display */
    }
    
    .span1 {
    	width: 8.3333333333333333%;
    	background-color: violet;
    }
    
    .span2 {
    	width: 16.66666666666667%;
    	background-color: red;	
    }
    
    .span3 {
    	width: 25%;
    	background-color: yellow;	
    }
    
    .span4 {
    	width: 33.33333333333333%;
    	background-color: green;
    }
    
    .span5 {
    	width: 41.66666666666667%;
    	background-color: blue;		
    }
    
    .span6 {
    	width: 50%;
    	background-color: magenta;	
    }
    
    .span7 {
    	width: 58.33333333333333%;
    	background-color: orange;	
    }
    
    .span8 {
    	width: 66.66666666666667%;
    	background-color: lightblue;
    }
    
    .span9 {
    	width: 75%;
    	background-color: #960;		
    }
    
    .span10 {
    	width: 83.33333333333333%;
    	background-color: lightgreen;	
    }
    
    .span11 {
    	width: 91.66666666666667%;
    	background-color: #C6C;	
    }
    
    .span12 {
    	width: 100%;
    	background-color: #603;
    }
    
    	/* start grid using box-sizing */
    	/* 
    		Calculator Recommendation: http://web2.0calc.com/
    
    		Step 1: Determine the width of the parent element.
    				In this case its the container which has a width of 960px
    
    		Step 2: Determine the width one column would equal based on a 12 column grid.
    				We can find this number following this method:
    					960 / 12 = 80px
    
    		Step 3: Now that we have our single column width
    				we can calculate our spans using this number (80)
    				Formula is as follows:
    					{ TARGET }                / { CONTEXT }      = { RESULT }
    					((number of columns * 80) / 960)       * 100 = result as a percentage
    
    		EXAMPLE: We want to figure out how wide 4 columns would be.
    				 So we take the number of columns * 80 - [ 4 * 80 = 320 ]
    				 Then we divide that number (our TARGET) by 960 (our CONTEXT) : [ 320 / 960 = 0.33333333333 ]
    				 Next we multiple that number by 100 to get our RESULT as a percentage: [ 0.33333333333 * 100 = 33.3333333333 ]
    				 Our width for a span4 is equal to 33.3333333333%
    				 Try it out. ( Hint: span3, span6, span9, & span12 are simple. Do you know why?)
    	*/
    True courage is about knowing not when to take a life, but when to spare one. PDO Tutorial

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,449
    Thanks
    23
    Thanked 630 Times in 629 Posts
    You should not leave thing go so far before trying to fix them. As you code you should look at the final results and make sure they are the way you want it. When you added the nav div you should have worked on it. Nuff said, here's what I did.
    Put the img div and the nav div together in a div. and moved the grid_12 class to that encompassing div. Next changed the CSS to make the nav class height smaller. I then had to move the menu choices up with line-height to center it vertically. In order to put the shadow effect into the 100$ width div I had to increase it's height to 160px.

    The HTML:
    Code:
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
        <title>Smells Like Bakin' Andi's Version</title>
    	<link rel="stylesheet" href="normalize.css" type="text/css" media="screen">
        <link rel="stylesheet" href="grid.css" type="text/css" media="screen">
      </head>
      <body>
    
    <div id="full-width-div">
    	<div class="container clearfix ">
    		<div class="grid_12 authentification">
    		Log in here
    		</div>
    
    		<div class="grid_12">
    			<div >
    			<img src="http://yumm.ro/wp-content/themes/yumm.ro/images/yumm.png" alt="Logo here">
    			</div>
    			<div class="nav" >
    			<ul>
    			<li>Home</li>
    			<li>About Us</li>
    			<li>Services</li>
    			<li>Contact</li>
    			</ul>
    			</div>
    		</div>
    	</div>
    </div>
    
          <div class="container clearfix">
    
            <div id="search" class="grid_12">
              Text here
            </div>
    
            <div id="left-box" class="grid_8">
              Text here
            </div>
    
            <div id="right-box" class="grid_4 omega">
             Lorem Ipsum
            </div>
    
    
             <div id="copyright" class="grid_12">
              <p>Footer</p>
            </div>
    
          </div>
      </body>
    </html>
    What was changed in the CSS only:
    Code:
    #full-width-div {
    	width: 100%;
    	background-color: #036aa3;
    height: 160px;
    }
    .nav {
    	background-color: #fff;
    line-height: 5px;
    padding: 15px;
    height: 7px;
    	box-shadow: 0px 3px 3px #c8c8c8;
    }
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #8
    New Coder
    Join Date
    Jul 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a lot!

    The main issue now is that the white nav bar is expanding 100% including the 20px margin of grid 12. Also this white nav bar should be between the blue 100% width header and the gray body background like in the picture I send initially.

    When using a grid system, what is the best way to code 100% width headers or footers?

    Thanks,

    Andi

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,449
    Thanks
    23
    Thanked 630 Times in 629 Posts
    Is this what you were looking for? No change to the CSS files.
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
    <title>Smells Like Bakin' Andi's Version</title>
    <link rel="stylesheet" href="normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="grid.css" type="text/css" media="screen">
    </head>
    <body>
    <div id="full-width-div">
    	<div class="container clearfix ">
    		<div class="grid_12 authentification">
    			Log in here
    		</div>
    
    		<div class="grid_12">
    			<img src="http://yumm.ro/wp-content/themes/yumm.ro/images/yumm.png" alt="Logo here">
    		</div>
    	</div>
    </div>
    
    <div class="container clearfix">
    	<div class="grid_12 nav">
    		<ul>
    			<li>Home</li>
    			<li>About Us</li>
    			<li>Services</li>
    			<li>Contact</li>
    		</ul>
    	</div>
    
    	<div id="search" class="grid_12">
    		Text here
    	</div>
    
    	<div id="left-box" class="grid_8">
    		Text here
    	</div>
    
    	<div id="right-box" class="grid_4 omega">
    		Lorem Ipsum
    	</div>
    </div>
    
    <div id="copyright">
    <p>Footer</p>
    </div>
    </body>
    </html>
    When your talking 100% the question is always 100% of what? When you give something a width of 100% it takes that from it's parent. For your header the body is the parent and you have not given that a width so things look OK. And that;s the best you can do.For the footer you must remove it from the <div class="container clearfix"> to make it work for you. In either case you don't need to put width:100%; in the CSS. Just making a div with no parent lets it expand edge to edge.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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