dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: How do I put grey sidebars on the website?

  1. #1
    Join Date
    Nov 2013
    Posts
    45

    How do I put grey sidebars on the website?

    Ok if you look at my website it has the white part that spans out the whole of the page (http://www.codexx.co.uk/seo-in-poole/), I want the page divided into two rather where the page look neat but at the moment the page spans across the whole screen. If you look on this page it has sidebars (http://www.ipage.com), the page is in the middle rather than spans out the whole page which doesn't look neat.

    I want my page to look like the picture in the attachment, it's just a plan though.
    Attached Images Attached Images

  2. #2
    Join Date
    Oct 2013
    Posts
    609
    Here's one way:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Grey sidebars</title>
    <style>
    body{
     background-color:grey;
     margin:0px;
    }
    #wrapper{
     background-color:white;
     min-height:650px;
     width:90%;
     margin:0px auto;
    /* margin:0px 50px 0px 50px; */
     padding:5px;
    }
    </style>
    </head>
    <body>
    
    <div id="wrapper">
    
    <header>
    	<h1>Grey Sidebars</h1>
    </header>
    
    <section>
    <article>
    	<h3>A quick way to create &ldquo;sidebars&rdquo;</h3>
    	
    	<p>This method has sidebars which expand and contract based on the width of the viewport; they are percentages of the total width. If you want hardcoded pixel widths, comment out or delete these lines:</p>
    	<pre>	width:90%;
    	margin:0px auto;</pre>
    
    	<p>Then uncomment this line:</p>
    	<pre>	/* margin:0px 50px 0px 50px; */</pre>
    	
    	<p>Of course adjust widths, colors, etc. to suit.</p>
    
    </article>
    </section>
    
    <footer>
    	Boilerplate footer stuff goes here.
    </footer>
    
    </div>
    
    </body>
    </html>

  3. #3
    For this first you need to make a main page. put your all code that you have did in a main page then make a left or right side bar and then include the left and right side bar in main page. Also you need to give some margin from both sides. Not Put your code in left or side bar. try to use this code.

    body {
    background:#000;
    color:#555555;
    font-family:Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
    font-size:12px;
    }

    #sidebar {
    background-color:grey;
    float:right;
    font-size:95%;
    line-height:145%;
    overflow:hidden;
    padding-top:8px;
    width:300px;
    }

  4. #4
    Join Date
    Nov 2013
    Posts
    45
    Quote Originally Posted by Kevin2 View Post
    Here's one way:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Grey sidebars</title>
    <style>
    body{
     background-color:grey;
     margin:0px;
    }
    #wrapper{
     background-color:white;
     min-height:650px;
     width:90%;
     margin:0px auto;
    /* margin:0px 50px 0px 50px; */
     padding:5px;
    }
    </style>
    </head>
    <body>
    
    <div id="wrapper">
    
    <header>
    	<h1>Grey Sidebars</h1>
    </header>
    
    <section>
    <article>
    	<h3>A quick way to create “sidebars”</h3>
    	
    	<p>This method has sidebars which expand and contract based on the width of the viewport; they are percentages of the total width. If you want hardcoded pixel widths, comment out or delete these lines:</p>
    	<pre>	width:90%;
    	margin:0px auto;</pre>
    
    	<p>Then uncomment this line:</p>
    	<pre>	/* margin:0px 50px 0px 50px; */</pre>
    	
    	<p>Of course adjust widths, colors, etc. to suit.</p>
    
    </article>
    </section>
    
    <footer>
    	Boilerplate footer stuff goes here.
    </footer>
    
    </div>
    
    </body>
    </html>
    Would that be global? Does it make the whole website follow that template?

  5. #5
    Join Date
    Oct 2013
    Posts
    609
    That's only sample/example code to demonstrate one technique. To make it "global" you'll have to apply the CSS and the HTML to existing global files, or create a template based on same.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles