Solved

Help to center template

Posted on 2008-06-24
5
249 Views
Last Modified: 2011-10-03
I'm getting in a mess with this layout! How can I get this layout to center and still all work! html and css below. Thanks
html

<head>
 

<link href="suttons.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body>

<div id="main">

<div id="suttonlogo">

<div id="topnavtext">Mortgages &#9679; Furniture &amp; Refurbishment &#9679; Guide to Manchester &#9679;  Job Vacancies &#9679; Contact Us</div>

</div><!--suttonlogo end-->

<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>

      <div id="content">

          <div class="left">

    <ul class="link_list">

     <li><a href="#">Property for Sale</a></li>

      <li><a href="#">Property for Let</a></li>

      <li><a href="#">Selling your Property</a></li>

      <li><a href="#">Renting your Property</a></li>

      <li><a href="#">Black Management</a></li>

      <li><a href="#">Mortgages</a></li>

      <li><a href="#">Furniture &amp; Refurbishment</a></li>                      

    </ul>

          <div id="orangeband"><span class="property">PROPERTY</span><span class="search">SEARCH</span></div>

               <!-- start module quick_search -->

      <div class="module_quick_search">

        <form name="quick_search"class="searchform quicksearch" method="post" action="index.php?option=com_content&id=38&task=view">

          <!--<h3>Quick Search</h3>-->

          <p class="formLine"> 

            <label for="name"><strong>Min. price:</strong></label>

            <select name="min_price">

              <option value="0">0</option>

              <option value="100000">100K</option>

              <option value="200000">200K</option>

              <option value="300000">300K</option>

              <option value="400000">400K</option>

              <option value="500000">500K</option>

              <option value="650000">650K</option>

              <option value="800000">800K</option>

              <option value="1000000">1M</option>

            </select>

          </p>

          <p class="formLine">

            <label for="name"><strong>Max. price: </strong></label>

            <select name="max_price">

              <option value="100000">100K</option>

              <option value="200000">200K</option>

              <option value="300000">300K</option>

              <option value="400000">400K</option>

              <option value="500000">500K</option>

              <option value="650000">650K</option>

              <option value="800000">800K</option>

              <option value="1000000">1M</option>

              <option value=""selected="selected">No limit</option>

            </select>

          </p>

          <p class="formLine">

            <label for="name"><strong>Bedrooms: </strong></label>

            <select name="num_beds">

              <option value="0" selected="selected">0</option>

              <option value="1">1</option>

              <option value="2">2</option>

              <option value="3">3</option>

              <option value="4">4</option>

              <option value="5">5</option>

              <option value="6">6</option>

              <option value="7">7</option>

              <option value="">No limit</option>

            </select>

          </p>

          <p class="formLine hidden"><strong>Location, Postcode, Keywords: </strong><input name="area_str_0" type="text" id="keywords" class="textbox" value=""/></p>

          <p class="formSubmit">

            <input type="submit"class="formButton"value="Search"/>

          </p>

        </form>

    </div>

    <!-- end module quick_search --> 

          

        </div><!--left end-->   

        <b class="b1d"></b><b class="b2d"></b><b class="b3d"></b><b class="b4d"></b>

          <div class="banner">

          <div id="headertext">

          <span class="bannerproperty">PROPERTY</span><span class="bannerfor">FOR</span><span class="bannersale">SALE</span>

          </div>

        </div><!--banner end-->

        

    <b class="b4d"></b><b class="b3d"></b><b class="b2d"></b><b class="b1d"></b>

    <div id="maincontent"><?php mosMainBody(); ?></div>

    </div>

<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>

<div id="footerinfo">&copy; Living Ltd 2008</div>

</div>

</body>
 
 

CSS
 

@charset "utf-8";

/* CSS Document */

/*body template*/

body{background-color:#223289; margin: 0; padding:0;}

#main {width: 920px;height:100%;text-align:center;background-color:#223289;

padding-top:0%; margin: 0 auto;}

#content{width:920px;height:98%;padding:1%;background-color:#fbfeee;}

#content .left{float:left;width:20%;height:98%;background-color:#868686; }

#content .banner{width:100%;height:10%;margin-top:0px;background-color:#FF9900;z-index:2;position:relative; text-align:left;}

.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}

.b1f {height:1px; background:#fbfeee; margin:0 5px;}

.b2f {height:1px; background:#fbfeee; margin:0 3px;}

.b3f {height:1px; background:#fbfeee; margin:0 2px;}

.b4f {height:2px; background:#fbfeee; margin:0 1px;}
 

.b1c, .b2c, .b3c, .b4c{font-size:1px; overflow:hidden; display:block;}

.b1c {height:1px; background:#868686; margin:0 5px;}

.b2c {height:1px; background:#868686; margin:0 3px;}

.b3c {height:1px; background:#868686; margin:0 2px;}

.b4c {height:2px; background:#868686; margin:0 1px;}
 

.b1d, .b2d, .b3d, .b4d{font-size:1px; overflow:hidden; display:block;}

.b1d {height:1px; background:#FF9900; margin:0 5px;}

.b2d {height:1px; background:#FF9900; margin:0 3px;}

.b3d {height:1px; background:#FF9900; margin:0 2px;}

.b4d {height:2px; background:#FF9900; margin:0 1px;}

/*jen*/

#suttonlogo{

width: 100%;

background:url(images/suttonslogo.gif) no-repeat;

height: 80px;

}

#mainlogo{

width: 192px;

float:left;

background-color:#CC9900;

}

#topmenu{

width:728px;

float:left;

background-color:#33CC00;

}

#topnavtext{

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

color:#FFFFFF;

padding: 55px 0px 0px 340px;

text-align:left;

}

/*body template end*/

      ul.link_list {

        margin: 0;

        padding: 0px;

list-style-type: none;

        width: 200px;

		text-align:left;

		padding-bottom: 20px;

      }

      ul.link_list li {

        margin: 0;

        padding: 0;

      }

      ul.link_list a {

        display: block;

        width: 200px;

        height: 20px;

        border-bottom: 1px #FFF solid;

        font-family: Arial, Helvetica, sans-serif;

        font-weight: bold;

        font-size: 12px;

        line-height: 20px;

        padding: 0 5px;

        text-decoration: none;

      }

      ul.link_list a:link, ul.link_list a:visited {

        color: #fff;

        background: #868686;

      }

      ul.link_list a:focus, ul.link_list a:hover {

        color: #FFF;

        background: #777;

      }

      ul.link_list a:active {

      }

      ul.link_list li.color_2 a:link, ul.link_list li.color_2 a:visited {

        color: #fff;

        background: #7D7B7C;

      }

      ul.link_list li.color_2 a:focus, ul.link_list li.color_2 a:hover {

        color: #FFF;

        background: #777;

      }

      ul.link_list li.color_2 a:active {

        color: #fff;

        background: #7D7B7C;

      }

	        ul.link_list li.color_2 a:hover{

        color: #fff;

        background: #D0D0D0;

      }
 

	  /*nav end*/

#productheader{

width: 140px;

height: 35px;

background:url('images/pinkproducts.gif') no-repeat;

}

#leftnav{

background-color:#fff;

width: 140px;

padding: 0px 0px 0px 0px;

float:left;

}
 

#orangeband{

width: 200px;

height: 35px;

background-color:#FF9D1C;

padding: 10px 0 0 10px;

text-align:left;

}

.property{

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

color:#000066;

}

.search{

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

color:#ffffff;

}

#headertext{

width: 300px;

padding: 25px 0 0 10px;

}

.bannerproperty{

font-family:Arial, Helvetica, sans-serif;

font-size:16px;

font-weight:bold;

color:#000066;

text-align:left;

padding: 0px 0 0 20px;

margin: 0;

}

.bannerfor{

font-family:Arial, Helvetica, sans-serif;

font-size:16px;

font-weight:bold;

color:#fff;

text-align:left;
 

}

.bannersale{

font-family:Arial, Helvetica, sans-serif;

font-size:16px;

font-weight:bold;

color:#000066;

text-align:left;

}

/*search script*/

p.formLine{

padding: 0 0 0 0;

margin: 5px;

font-family:Arial, Helvetica, sans-serif;

font-size:11px;

color:#FFFFFF;

}

label

{

width: 8em;

float: left;

text-align: left;

margin-left: 0em;

display: block;

padding: 5px 0 0 0;

}

.formButton{

color:#223289;

background-color:#FF9D1C;

font-weight:bold;

}

.formSubmit{

padding-left: 5px;

}

#searchtitle{

width: 94px;

height: 30px;

background:url(../images/search_back.gif) no-repeat;

}

.module_quick_search{

background:url(../images/searchline.gif) repeat-x;

width: 200px;

padding-top: 20px;

}

.searchtext{

color:#fff;

font-size: 12px;

font-weight:bold;

padding: 10px 0 0 7px;

font-family:Arial, Helvetica, sans-serif;

}

.formLine hidden{

text-align:left;

}

#footerinfo{

width: 100%;

height: 20px;

color:#FFFFFF;

font-family:Arial, Helvetica, sans-serif;

font-size:10px;

padding-top: 5px;

}

/*main body*/

#maincontent{

width: 100%;

text-align:left;

padding: 10px 5px 0px 5px;

}

Open in new window

0
Comment
Question by:signpost2
  • 3
  • 2
5 Comments
 
LVL 17

Accepted Solution

by:
ram_0218 earned 500 total points
Comment Utility
in your css,
for element #main  add
position:absolute; left:15%;

and see what it does.
0
 

Author Comment

by:signpost2
Comment Utility
This does indeed work, however I need it work of the margin: 0 auto somehow in order to get it to look good in all resolutions. I can't understand why it ignores this statement.
0
 
LVL 17

Expert Comment

by:ram_0218
Comment Utility
your margin statement is being ignored because either the container's layout or the wrapper(in this case the body)'s layout is not *fixed*

add position:absolute; either to body or to your mail and check.
0
 

Author Comment

by:signpost2
Comment Utility
It just gets ignored and the page doesn't center.
0
 

Author Closing Comment

by:signpost2
Comment Utility
Can't get this to work, am going to rebuild site again.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now