SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: website support

  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    website support

    Hello,

    I have a website that has html/php I was wondering how can I add a center for my website here is the link as you can see it only has left and right but no center, on the left I would like to add some boxes this is my main page.

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You coud adjust your css like this

    Code CSS:
     
    #wrapper {
        width:1020px;
        margin:0 auto;
        overflow: hidden;
        border-left:2px solid #DF0101;
        border-right:2px solid #DF0101;
    }
     
    .sidebar { /* class instead of id since we gonna use the sidebar twise */
        width:220px;
        min-height: 100px;
        margin-bottom:25px;
        float:left;
        color:white;
    }
     
    .right {/* class to float the second sidebar right */
        float: right
    }
     
    #content {
        width:580px;
        min-height: 100px;
        float:left;
         /* I took the padding out!  It is better to use padding or margin on the containing content like paragraphs etc */
    }

    and in your html
    Code HTML4Strict:
    <div id="wrapper">
     
    	<div id="header">
    		<h2>HyperFragServers</h2>
    	</div> <!-- end #header -->
     
    	<!-- start Navigation --> 
        <div id="nav">
     
    	</div> <!-- end #nav -->
     
    	<!-- start sidebar left -->    
    	<div class="sidebar">
     
    	</div><!-- end sidebar left -->    
     
     	<!-- start content -->    
    	<div id="content">
     
    	</div> <!-- end #content -->
     
    	<!-- Start sidebar right -->
    	<div class="sidebar right">
     
    	</div> <!-- end #sidebar -->
     
     
    	<div id="footer">
    		<p>Copyright &copy; HyperFrag Servers All Rights Reserved.</p>
    	</div> <!-- end #footer -->
     
    </div> <!-- End #wrapper -->

    Hope this is what you need .

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for replying but it looks a bit distorted I was thinking something more along the lines of this and this basically the layout like that, I was trying myself but nothing.

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Matt.B View Post
    thanks for replying but it looks a bit distorted I was thinking something more along the lines of this and this basically the layout like that, I was trying myself but nothing.
    Maybe I missed something but this is what you wrote in the first post:
    I was wondering how can I add a center for my website here is the link as you can see it only has left and right but no center, on the left I would like to add some boxes this is my main page.
    and that is exactly what I did, give you a three column layout. Talking about the examples. Both of them, as far as I can see, are two column layouts, just like yours, they only make better use of the space.

  5. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No take a look at the site I meant up/down columns

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Matt.B View Post
    No take a look at the site I meant up/down columns
    I'm sorry Matt, but you have to be a bit more precise. What do you mean with up/down columns?

  7. #7
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2 left Columns, a few right then a big center columns for news and such.

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the example I gave you there are three floating divs involved. But if you do a little bit of math ( you have to keep the width of the wrapper in mind ) you can of course use more columns. But what is more important I think, is understanding the principles of floating elements. If you understand that, you can position elements nearly everywhere you want, may it be with one, two, three or how many columns you would like. Here is an example of four columns. Two small ones at the left, a wider one in the middle and a small one to the right.
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
        width:1020px;
        margin:100px auto 0;
        overflow: hidden;
    	background: blue;
    }
     
    .sidebar, .content {
        width:200px;
        min-height: 100px;
        float:left;
        color:white;
    	background: #000;
    }
     
    .left {
    	width: 220px;
    	min-height: 100px;
    	background: red;	
    }
     
    .right {
        float: right;
    	background: red;
    }
     
    .content {
        width:400px;
    	margin-top: 10px;
    	background: yellow;
    }
    </style>
    </head>
     
    <body>
     
    <div id="wrapper">
     
    	<!-- Start First Sidebar Left -->
    	<div class="sidebar">
     
    	</div><!-- End Second Sidebar Left -->
     
        <!-- Start Second Sidebar Left  -->
    	<div class="sidebar left">
     
        </div><!-- End Second Sidebar Left -->
     
        <!-- Start Content -->
    	<div class="content">
     
        </div><!-- End Content -->
     
         <!-- Start Sidebar Right -->
    	<div class="sidebar right">
     
        </div><!-- End Sidebar Right -->
     
    </div>     
     
    </body>
    </html>


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
  •