Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
Like Tree4Likes

Thread: Help With Layout

  1. #1
    Junior Member
    Join Date
    Aug 2015
    Posts
    8
    Member #
    51763
    Liked
    2 times

    Help With Layout

    Hello

    I am creating a website for the company I work for. I am a Newb and would like some help. Basically I have this:

    Have.jpg

    and I want this

    Want.jpg

    __________________________________________________ __

    Index

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="robots" content= "ALL" />
    <meta name="description" content= "" />
    <meta name="keywords" content= "" />
    <meta name="classification" content= "" />
    <meta name="Brett Matthews" content= "" />
    <meta name="reply-to" content= "" />
    <meta name="copyright" content= "" />

    <title>Prestige Ltd</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

    <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->

    </head>

    <body>

    <div id="wrapper">

    <div id="navTop">

    <ul id="navlist">
    <li><a href="index.html" id="current">Home</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="Careers.html">Careers</a></li>
    <li><a href="#sitename">Resources</a></li>
    <li><a href="#sitename">Quotes</a></li>
    <li><a href="Careers.html">Careers</a></li>
    <li><a href="#sitename">Contact Us</a></li>
    </ul>

    </div>

    <div class="header generic nineforty">

    <div class="generic fiveeighty">

    <h1>Prestige Ltd</h1>
    <h2>Maintanence Services</h2>

    </div>

    <div class="generic threeforty">

    <p>Prestige Limited is a well-established multi-trade maintanence service provider operating throught the Central North Island.</p>

    </div>

    </div>


    <div class="boxblue generic twoeighty">

    <h2>Safer Homes</h2>
    <p>Currently we are working to gate off driveways in Housing New Zealand homes this will make home a safer place and keep young children away from dangerous driveways. </p>

    <p><a href="News.html">Read more...</a></p>

    </div>

    <div class="boxblue generic twoeighty">

    <h2>Earthquake Proofing</h2>
    <p>Prestige has been working to strengthen buildings in Palmerston North so tenants can feel secure in the event of an emergency</p>

    <p><a href="News.html">Read more...</a></p>

    </div>

    <div class="generic sixeighty">

    <h3> About </h3>
    <p>We are a customer-focused organization and we provide first class, quality assured services through our dedicated team of highly skilled and experienced staff. Prestige is Housing New Zealand Corporation's (HNZC) head maintenance service provider covering two of the Corporation's regions.
    East Cape / Hawkes Bay, and Manawatu / Taranaki / Wairarapa.</p>

    </div>

    <div class="footer generic nineforty">

    <ul id="footer">
    <li><a href="index.html">Home</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="#sitename">Sitemap</a></li>
    <li><a href="#sitename">Resources</a></li>
    <li><a href="#sitename">Quotes</a></li>
    <li><a href="#sitename">Careers</a></li>
    <li><a href="#sitename">Contact Us</a></li>
    </ul>

    </div>
    </div>

    </body>
    </html>

    Thank you for the help

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Code:
    <div class="boxblue generic twoeighty">
    (put your picture here)
    </div>
    You may have to adjust your twoeighty to whatever the width is of the image that will fit there, but that should give you the general idea.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Aug 2015
    Posts
    8
    Member #
    51763
    Liked
    2 times
    This is what happened when I tried what you suggested:

    Untitled1.jpg

    I have tried other things this is the best I could get

    Untitled.jpg

    Sorry for the late reply and thanks for your help
    Attached Images Attached Images
    Last edited by Brett; Sep 09th, 2015 at 04:56 PM.

  5. #4
    Senior Member timbo89's Avatar
    Join Date
    May 2015
    Location
    Adelaide, South Australia
    Posts
    126
    Member #
    49722
    Liked
    26 times
    This should work, see the inline styling.

    It's a bit hard to look at your site without the stylesheet though :P

    HTML Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="robots" content= "ALL" />
    <meta name="description" content= "" />
    <meta name="keywords" content= "" />
    <meta name="classification" content= "" />
    <meta name="Brett Matthews" content= "" />
    <meta name="reply-to" content= "" />
    <meta name="copyright" content= "" />
    
    <title>Prestige Ltd</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
    
    <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->
    
    </head>
    
    <body>
    
    <div id="wrapper">
    
    <div id="navTop">
    
    <ul id="navlist">
    <li><a href="index.html" id="current">Home</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="Careers.html">Careers</a></li>
    <li><a href="#sitename">Resources</a></li>
    <li><a href="#sitename">Quotes</a></li>
    <li><a href="Careers.html">Careers</a></li>
    <li><a href="#sitename">Contact Us</a></li>
    </ul>
    
    </div>
    
    <div class="header generic nineforty">
    
    <div class="generic fiveeighty">
    
    <h1>Prestige Ltd</h1>
    <h2>Maintanence Services</h2>
    
    </div>
    
    <div class="generic threeforty">
    
    <p>Prestige Limited is a well-established multi-trade maintanence service provider operating throught the Central North Island.</p>
    
    </div>
    
    </div>
    
    
    <div class="boxblue generic twoeighty" style="float:left; display:block; width:32%; margin:0 1% 0 0;">
    
    <h2>Safer Homes</h2>
    <p>Currently we are working to gate off driveways in Housing New Zealand homes this will make home a safer place and keep young children away from dangerous driveways. </p>
    
    <p><a href="News.html">Read more...</a></p>
    
    </div>
    
    <div class="boxblue generic twoeighty"  style="float:left; display:block; width:32%; margin:0 0 0 1%;">
    
    <h2>Earthquake Proofing</h2>
    <p>Prestige has been working to strengthen buildings in Palmerston North so tenants can feel secure in the event of an emergency</p>
    
    <p><a href="News.html">Read more...</a></p>
    
    </div>
    
    <div class="boxblue generic twoeighty" style="float:left; display:block; width:32%; margin:0 1% 0 1%;">
    
    <img src="********" style="width:100%;">
    
    </div>
    
    
    <hr style="clear:both; background:none; border-color:transparent; height:1px;">
    
    <div class="generic sixeighty">
    <h3> About </h3>
    <p>We are a customer-focused organization and we provide first class, quality assured services through our dedicated team of highly skilled and experienced staff. Prestige is Housing New Zealand Corporation's (HNZC) head maintenance service provider covering two of the Corporation's regions. 
    East Cape / Hawkes Bay, and Manawatu / Taranaki / Wairarapa.</p>
    
    </div>
    
    <div class="footer generic nineforty">
    
    <ul id="footer">
    <li><a href="index.html">Home</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="#sitename">Sitemap</a></li>
    <li><a href="#sitename">Resources</a></li>
    <li><a href="#sitename">Quotes</a></li>
    <li><a href="#sitename">Careers</a></li>
    <li><a href="#sitename">Contact Us</a></li>
    </ul>
    
    </div>
    </div>
    
    </body>
    </html>
    Last edited by timbo89; Sep 09th, 2015 at 06:12 PM.
    Brett likes this.

  6. #5
    Junior Member
    Join Date
    Aug 2015
    Posts
    8
    Member #
    51763
    Liked
    2 times
    Code:
    *{
    	outline: none;
    }
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
    	margin:0; 
    	padding:0; 
    } 
    table { 
    	border-collapse:collapse; 
    	border-spacing:0; 
    } 
    fieldset,img {  
    	border:0; 
    } 
    address,caption,cite,code,dfn,em,strong,th,var { 
    	font-style:normal; 
    	font-weight:normal; 
    } 
    ol,ul { 
    	list-style:none; 
    } 
    caption,th { 
    	text-align:left; 
    } 
    h1,h2,h3,h4,h5,h6 { 
    	font-size:100%; 
    	font-weight:normal; 
    } 
    q:before,q:after { 
    	content:''; 
    } 
    abbr,acronym {
    	border:0; 
    }
    
    /*
              MAIN STRUCTURE STYLES                                                      
    */
    
    html{
    	font-size:100%;
    	min-height:101%;
    }
    body{
    	font-size:62.5%;
    	font-family: Arial, Helvetica, Sans-Serif;
    	color:#666;
    	padding:0 1em;
    }
    #wrapper{
    	width:94em;
    	margin:0 auto;
    }
    
    /*NAVIGATION
    -------------------------------------------------------- */
    
    #navTop{
    	background: url(img/navTop.png) no-repeat 0% 0%;
    	height: 60px;	
    	margin-bottom: 1em;
    	padding: 2em 0 0 0.5em;
    	width:94em;
    }
    
    #navlist li{
    	display: inline;
    	list-style-type: none;
    	padding: 0 0 0 0.25em;
    }
    
    #navlist li a{
    	color: #fff;
    	font-size: 1.25em;
    	padding: 0.5em;
    	text-decoration: none;
    }
    
    #navlist li a:hover{
    	background-color: #e6edf8;
    	border-top: 5px solid #fc0;
    	color: #666;
    	padding-top: 0.2em;
    	text-decoration: none;
    }
    
    #navlist a#current{
    	background-color: #e6edf8;
    	border-top: 5px solid #799ddb;
    	color: #666;
    	padding-top: 0.2em;
    }
    
    .header a{
    	color: #ffc;
    }
    
    .header a:hover{
    	color: #ffc;
    	text-decoration: underline;
    }
    
    #navRight li{
    	background: url(img/arrow_right.png) no-repeat left center;
    	list-style: none;
    	margin: 0;
    }
    
    #navRight li a{
    	padding-left: 1.8em;
    }
    
    *+html #navRight li a{
    	padding-left: 0.5em;
    }
    
    * html #navRight li a{
    	padding-left: 0.5em;
    }
    
    /*FOOTER NAVIGATION
    -------------------------------------------------------- */
    #footer{
    	text-align: center;
    	padding-top: 0.5em;
    }
    
    #footer li{
    	display: inline;
    	list-style-type: none;
    	padding-right: 20px;
    }
    #footer li a{
    	color: #fff;
    }
    #footer li a:hover{
    	color: #ffc;
    }
    /*GRIDS
    -------------------------------------------------------- */
    /* Set styles common among all grids - all grid divs must be assigned this class */
    .generic{
    	float:left;
    	padding-top:1em;
    	margin-bottom:2em;
    }
    /* Sets styles for any 'start' grids - this class MUST be given to a grid that is the first in a horizontal series */
    .clear:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    
    .clear {
    	display: inline-block;
    }
    
    * html .clear {
    height: 1%;
    }
    /* Sets styles for any 'end' grids - this class MUST be given to a grid that is the last in a horizontal series */
    .end{
    	margin-left:0 !important;
    	margin-right:0 !important;
    }
    
    /* 220px */
    .twotwenty{
    	width:22em;
    	margin-right:2em;
    }
    /* 280px */
    .twoeighty{
    	width:28em;
    	margin-right:2em;
    }
    /* 340px */
    .threeforty{
    	width:34em;
    	margin-left:2em;
    	margin-top:8em;
    }
    /* 400px */
    .fourhun{
    	width:40em;
    	margin-right:2em;
    }
    /* 460px */
    .foursixty{
    	width:46em;
    	margin-right:2em;
    }
    /* 520px */
    .fivetwenty{
    	width:52em;
    	margin-right:2em;
    }
    /* 580px */
    .fiveeighty{
    	width:58em;
    	margin-right:2em;
    }
    /* 640px */
    .sixforty{
    	width:64em;
    	margin-right:5em;
    }
    /* 700px */
    .sevenhun{
    	width:70em;
    	margin-right:2em;
    }
    /* 760px */
    .sevensixty{
    	width:76em;
    	margin-right:2em;
    }
    /* 820px */
    .eighttwenty{
    	width:82em;
    	margin-right:2em;
    }
    /* 880px */
    .eighteighty{
    	width:88em;
    	margin-right:2em;
    }
    /* 940px */
    .nineforty{
    	width:94em;
    }
    /*-------------------------------------------+
    |                                            |
    |                FONT STYLES                 |
    |                                            |
    +-------------------------------------------*/
    /*PARAGRAPHS
    -------------------------------------------------------- */
    .generic p{
    	font-size:1.2em;
    	line-height:1.5em;
    	margin-bottom:1.5em;
    }
    /* Styles an introductory paragraph, similar to newspapers. Assign this class to the first paragraph in an article */
    p.intro:first-line{
    	font-variant:small-caps;
    }
    /* Styles a drop cap on each paragraph with this class */
    p.drop:first-letter{
    	float:left;
    	font-size:3em;
    	margin-top:-0.05em;
    	margin-right:0.1em;
    	margin-bottom:-0.5em;
    }
    /*HEADINGS
    -------------------------------------------------------- */
    h1{
    	color:#1c509b;
    	font-size:3em;
    	margin-bottom:0.6em;
    	font-style:italic;
    	line-height:1.2em;
    }
    h2{
    	color:#1c509b;
    	font-size:2em;
    	margin-bottom:0.9em;
    	line-height:0.9em;
    }
    h3{
    	color:#1c509b;
    	font-size:1.5em;
    	margin-bottom:1.2em;
    	line-height:1.2em;
    	font-variant:small-caps;
    }
    h4{
    	color:#000;
    	font-size:1.2em;
    	margin-bottom:1.5em;
    	line-height:1.5em;
    	font-variant:small-caps;
    }
    h5{
    	color:#000;
    	font-size:1em;
    	margin-bottom:1.8em;
    	line-height:1.8em;
    	font-variant:small-caps;
    }
    h6{
    	color:#000;
    	font-size:1em;
    	margin-bottom:1.8em;
    	line-height:1.8em;
    }
    /*LINKS
    -------------------------------------------------------- */
    p a{
    	color:#0066ff;
    	text-decoration: none;
    }
    p a:hover{
    	color: #c00;
    	text-decoration:underline;
    }
    h1 a{
    	color:#000;
    }
    h1 a:hover{
    	text-decoration:none;
    }
    li a{
    	color:#0066ff;
    	text-decoration: none;
    }
    li a:hover{
    	color: #c00;
    	text-decoration:underline;
    }
    /*ALL THE TRIMMINGS
    -------------------------------------------------------- */
    blockquote p{
    	font-size:1.2em!important;
    	line-height:1.5em!important;
    	margin-bottom:1.5em!important;
    	font-style:italic;
    	font-weight:bold;
    }
    blockquote p cite{
    	font-style:normal;
    }
    .generic strong{
    	color: #c00;
    	font-variant:small-caps;
    }
    .generic em{
    	font-style:italic;
    	font-weight:inherit;
    }
    .amp{ /* Give those ampersands a right sexy look */
    	font-family:Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
    	font-style:italic;
    	font-weight:normal;
    	line-height:inherit;
    }
    abbr{
    	border-bottom:1px dotted #666;
    	border-color:inherit;
    	cursor:help;
    }
    .clear{
    	clear:both;
    }
    .right-float{ /* Float any item to the right */
    	float:right;
    	margin-left:2em;
    	margin-right:0;
    }
    .left-float{ /* Float any item to the left */
    	float:left;
    	margin-right:2em;
    	margin-left:0;
    }
    .code{ /* Styling for and code type items */
    	font-family:Courier, "Courier New", monospace;
    	background:#ddd;
    	font-size:1em;
    }
    /*-------------------------------------------+
    |                                            |
    |               IMAGE STYLES                 |
    |                                            |
    +-------------------------------------------*/
    img{
    	font-size:1em;
    }
    img.left-img{ /* Float any image to the LEFT and give it some margin */
    	font-size:1em;
    	float:left;
    	padding:4px;
    	border:1px solid #666;
    	margin-bottom:1.8em;
    	margin-right:2em;
    	margin-top:0.3em;
    }
    img.right-img{ /* Float any image to the RIGHT and give it some margin */
    	font-size:1em;
    	float:right;
    	padding:4px;
    	border:1px solid #666;
    	margin-bottom:1.8em;
    	margin-left:2em;
    	margin-top:0.3em;
    }
    
    /*CONTACT FORM STYLES
    -------------------------------------------------------- */
    #contact-form{
    }
    #contact-form label{
    	width:10em;
    	float:left;
    	margin-top:0.6em;
    }
    #name, #form-email, #url, #location{
    	width:42.7em;
    	height:20px;
    	padding:3px;
    	padding-top:5px;
    	border:2px solid #666;
    	margin-bottom:18px;
    	background:#fff !important;
    }
    #comments{
    	width:43.8em;
    	height:10em;
    	padding:3px;
    	border:2px solid #666;
    	margin-bottom:18px;
    	overflow:auto;
    	background:#fff !important;
    }
    #name:active, #form-email:active, #url:active, #location:active, #comments:active, #submit:active, #name:focus, #form-email:focus, #url:focus, #location:focus, #comments:focus, #submit:focus{
    	border:2px solid #000;
    }
    #submit{
    	clear:both;
    	padding:5px;
    	border:2px solid #666;
    	background:#fff !important;
    	cursor:pointer;
    	margin-left:9em;
    }
    #reset{
    	clear:both;
    	padding:3px;
    	border:none;
    	background:#f00 !important;
    	cursor:pointer;
    	float:right;
    	color:#fff;
    	margin-top:-28px;
    }
    /*-------------------------------------------+
    |                                            |
    |                LIST STYLES                 |
    |                                            |
    +-------------------------------------------*/
    ul{
    	margin-bottom:1.8em;
    	list-style:square inside;
    }
    ul li{
    	font-size:1.2em;
    	line-height:1.5em;
    }
    ul li.caption{ /* Apply this class to the first list item in a list to give it a caption */
    	font-variant:small-caps;
    	list-style:none;
    	color:#000;
    }
    li > ul, li > ol{
    	margin-bottom:0;
    	margin-left:5em;
    }
    li > ul li, li > ol li{
    	font-size:1em;
    }
    ol{
    	margin-bottom:1.8em;
    	list-style:decimal inside;
    }
    ol li{
    	font-size:1.2em;
    	line-height:1.5em;
    }
    /*-------------------------------------------+
    |                                            |
    |               MISC. STYLES                 |
    |                                            |
    +-------------------------------------------*/
    
    .header {
    	background: url(img/header.jpg) no-repeat 0% 0%;
    	color: #fff;
    	height: 359px;
    }
    
    .header h1 {
    	line-height:1em;
    	color:#fff;
    	font-weight:bold;
    	text-transform:uppercase;
    	font-style: normal;
    	letter-spacing: 2px;
    	margin: 0 20px;
    }
    
    .header h2 {
    	line-height:1em;
    	color:#fff;
    	font-weight:normal;
    	font-style: normal;
    	letter-spacing: 1px;
    	margin: 0 20px;
    }
    
    .header p {
    	margin-right: 20px;
    }
    
    .boxblue{
    	background-color: #e6edf8;
    	height: 200px;
    }
    
    .boxblue p {
    	margin: 10px;
    }
    
    .boxblue h2 {
    	color: #1c509b;
    	margin: 0 10px;
    }
    
    .footer {
    	background: #1c509b url(img/footer.png) no-repeat top left;
    	color: #fff;
    	height: 40px;
    }

  7. #6
    Junior Member
    Join Date
    Aug 2015
    Posts
    8
    Member #
    51763
    Liked
    2 times
    As you can probably see I have a basic understanding of coding, I grabbed some open source code and played around with it. I understand how to add and change txt and pictures, and add and remove pages. I also understand how information is grabbed from the style sheet. What I don't understand is how to move elements around the page.

    !!!Warning Dumb Questions Ahead!!!

    Wouldn't it be easier to just make the web page 1 picture and add links in behind? Why bother going through all the trouble of coding it all out?

  8. #7
    Senior Member timbo89's Avatar
    Join Date
    May 2015
    Location
    Adelaide, South Australia
    Posts
    126
    Member #
    49722
    Liked
    26 times
    Quote Originally Posted by Brett View Post
    As you can probably see I have a basic understanding of coding, I grabbed some open source code and played around with it. I understand how to add and change txt and pictures, and add and remove pages. I also understand how information is grabbed from the style sheet. What I don't understand is how to move elements around the page.

    !!!Warning Dumb Questions Ahead!!!

    Wouldn't it be easier to just make the web page 1 picture and add links in behind? Why bother going through all the trouble of coding it all out?

    This works for what you wanted to do (3 columns)

    The reason(s) you can't just use one big image for a website are;
    • It would use too much bandwith and take too long to load
    • It would not be indexed by any search engines, so it would not show up in search results
    • It wouldn't render correctly on mobile devices
    • It would be useless for screen readers and any browser that ignores images
    • It would be a lot more difficult to update because of client side caching
    • Text will scale well, images will pixelate and not be readable


    .... those are the ones that i can think off off hand, i'm certain the list would go on for pages and pages.

    HTML Code:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="robots" content= "ALL" />
    <meta name="description" content= "" />
    <meta name="keywords" content= "" />
    <meta name="classification" content= "" />
    <meta name="Brett Matthews" content= "" />
    <meta name="reply-to" content= "" />
    <meta name="copyright" content= "" />
    
    <title>Prestige Ltd</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
    
    <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->
    
    </head>
    
    <body>
    
    <div id="wrapper">
    
    <div id="navTop">
    
    <ul id="navlist">
    <li><a href="index.html" id="current">Home</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="Careers.html">Careers</a></li>
    <li><a href="#sitename">Resources</a></li>
    <li><a href="#sitename">Quotes</a></li>
    <li><a href="Careers.html">Careers</a></li>
    <li><a href="#sitename">Contact Us</a></li>
    </ul>
    
    </div>
    
    <div class="header generic nineforty">
    
    <div class="generic fiveeighty">
    
    <h1>Prestige Ltd</h1>
    <h2>Maintanence Services</h2>
    
    </div>
    
    <div class="generic threeforty">
    
    <p>Prestige Limited is a well-established multi-trade maintanence service provider operating throught the Central North Island.</p>
    
    </div>
    
    </div>
    
    <div class="clearafter">
    
    <div class="boxblue generic twoeighty">
    
    <h2>Safer Homes</h2>
    <p>Currently we are working to gate off driveways in Housing New Zealand homes this will make home a safer place and keep young children away from dangerous driveways. </p>
    
    <p><a href="News.html">Read more...</a></p>
    
    </div>
    
    <div class="boxblue generic twoeighty">
    
    <h2>Earthquake Proofing</h2>
    <p>Prestige has been working to strengthen buildings in Palmerston North so tenants can feel secure in the event of an emergency</p>
    
    <p><a href="News.html">Read more...</a></p>
    
    </div>
    
    <div class="boxblue generic twoeighty">
    
    <p>image goes here</p>
    
    </div>
    
    </div>
    
    <div class="generic sixeighty">
    
    <h3> About </h3>
    <p>We are a customer-focused organization and we provide first class, quality assured services through our dedicated team of highly skilled and experienced staff. Prestige is Housing New Zealand Corporation's (HNZC) head maintenance service provider covering two of the Corporation's regions. 
    East Cape / Hawkes Bay, and Manawatu / Taranaki / Wairarapa.</p>
    
    </div>
    
    <div class="footer generic nineforty">
    
    <ul id="footer">
    <li><a href="index.html">Home</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="#sitename">Sitemap</a></li>
    <li><a href="#sitename">Resources</a></li>
    <li><a href="#sitename">Quotes</a></li>
    <li><a href="#sitename">Careers</a></li>
    <li><a href="#sitename">Contact Us</a></li>
    </ul>
    
    </div>
    </div>
    
    </body>
    </html>
    Brett likes this.

  9. #8
    Senior Member timbo89's Avatar
    Join Date
    May 2015
    Location
    Adelaide, South Australia
    Posts
    126
    Member #
    49722
    Liked
    26 times
    These are the changes that need to be made to your css.
    HTML Code:
    .twoeighty{
    	width:32%;
    	margin:0 .70%;
    }
    .sixeighty {
    	display:block;
    	float:none;
    	clear:both;
    	margin:10px auto;
    }
    Brett likes this.

  10. #9
    Junior Member
    Join Date
    Aug 2015
    Posts
    8
    Member #
    51763
    Liked
    2 times
    Quote Originally Posted by timbo89 View Post
    These are the changes that need to be made to your css.
    HTML Code:
    .twoeighty{
    	width:32%;
    	margin:0 .70%;
    }
    .sixeighty {
    	display:block;
    	float:none;
    	clear:both;
    	margin:10px auto;
    }
    Sweet I think I get what you did here 32x3=96 and 6x.7= 4.2 this spaces each item out evenly and adds margin.
    I ended up adjusting the blue box so I had 3 rather than 6 spaced out all weird like. I managed to add and remove
    space where I wanted.

    Ended up with this:

    Untitled.jpg

    Thanks a lot for your help I learned heaps from your pointers
    timbo89 likes this.

  11. #10
    Senior Member timbo89's Avatar
    Join Date
    May 2015
    Location
    Adelaide, South Australia
    Posts
    126
    Member #
    49722
    Liked
    26 times
    no problem, messing around with that sort of thing is the easiest way to learn how to get things positioned correctly
    Self-taught web designer. LinkedIn

    Recent Websites:
    Coyote Creek Artistry, North East Counselling, Creswick Motel
    Feedback is always welcome


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com