MyBB Community Forums

Full Version: CSS Assistance Required
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Guys, look at the link he posted. He already has a stylesheet and page structure in place. He just needs to know how to style a certain aspect of the page.
Ok, I think the following should fix the issue:

.container {
	background: #ffffff;
}
(2011-10-15, 04:33 PM)euantor Wrote: [ -> ]Guys, look at the link he posted. He already has a stylesheet and page structure in place. He just needs to know how to style a certain aspect of the page.
Ok, I think the following should fix the issue:

.container {
	background: #ffffff;
}

That works for the content, I want outside of the content though.
there is a problem in your index file too.

First you don't need <div class="subpagewrapper"> so remove it .

then add .container class in your css.

here is the solution:-

your index file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Astounding Host - Home</title>
<link rel="stylesheet" type="text/css" href="file.css" />
<script type="text/javascript" src="http://www.astoundinghost.com/includes/jscript/jquery.js"></script>
<link href="http://www.astoundinghost.com/templates/VibrantHost/html/css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://www.astoundinghost.com/templates/VibrantHost/glossy-buttons.css"/>
<script type="text/javascript" src="http://www.astoundinghost.com/templates/VibrantHost/html/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.astoundinghost.com/templates/VibrantHost/html/js/hoverIntent.js"></script>
<script type="text/javascript" src="http://www.astoundinghost.com/templates/VibrantHost/html/js/superfish.js"></script>

<link rel="stylesheet" type="text/css" href="http://www.astoundinghost.com/templates/VibrantHost/html/css/superfish.css" media="screen">

<script type="text/javascript">
// initialise plugins
jQuery(function(){
	jQuery('ul.sf-menu').superfish();
});
</script>


</head>

<body>

<div class="container">
  <div class="header">
    
	<div class="logo"><a href="index.php"></a></div>
    <div id="menu">

	
<ul class="sf-menu">
      <li class="active"><a href="index.php"><span class="lt"></span>Home<span class="rt"></span></a></li>
        <li><a href="sharedhosting.php"><span class="lt"></span>Web&nbsp;Hosting<span class="rt"></span></a></li>
        <li><a href="resellerhosting.php"><span class="lt"></span>Reseller&nbsp;Hosting<span class="rt"></span></a></li>
        <li><a href="clientportal.php"><span class="lt"></span>Clients<span class="rt"></span></a>
            <ul>

              <li><a href="supporttickets.php">Support Tickets</a></li>
              <li><a href="announcements.php">Announcements</a></li>
              <li><a href="networkissues.php">Network Issues</a></li>
             
            </ul>
      </ul>
    </div>
    
  </div>

  <div class="banner">
    <div class="subbannerCon"> 
      <ul>
        <li>Unlimited FTP Accounts</li>
        <li>Unlimited Databases</li>
        <li>Unlimited Email Accounts    </li>
      </ul>

      <ul>
        <li>99.9% Uptime Guarantee</li>
        <li>High Quality Support</li>
        <li>15 Day Money Back Guarantee!</li>
      </ul>
    
    </div>
  </div>

  <div class="bodyCon">

    <div class="bodyConLeft">
      <div class="box1">
        <div class="box1Top">asBasic</div>
        <div class="priceCon">
          <div class="priceConLeft img1"></div>
          <div class="priceConRight price1"></div>
        </div>

        <div class="box1Content">
          <ul>
            <li><span class="text03">5GB</span> Disk space</li>
            <li><span class="text03">25GB</span> Bandwidth</li>
			<li class="no_BorderBottom">Free & Instant Setup</li>

          </ul>
          <div class="BtnCon">
            <div class="orderNowBtn"><a href="cart.php?a=add&pid=1"></a></div>
            <a href="sharedhosting.php" class="BtnCona">More info</a>
          </div>
        </div>
        <div class="box1Bottom">&nbsp;</div>
      </div>

      <div class="box1">
        <div class="box1Top">asPlus</div>
        <div class="priceCon">
          <div class="priceConLeft img1"></div>
          <div class="priceConRight price2"></div>
        </div>
        <div class="box1Content">
          <ul>

            <li><span class="text03">25GB</span> Disk space</li>
            <li><span class="text03">50GB</span> Bandwidth</li>
            <li class="no_BorderBottom">Free & Instant Setup</li>
          </ul>
          <div class="BtnCon">

            <div class="orderNowBtn"><a href="cart.php?a=add&pid=2"></a></div>
            <a href="sharedhosting.php" class="BtnCona">More info</a> </div>
        </div>
        <div class="box1Bottom">&nbsp;</div>
      </div>
      <div class="box1 no_Margin">
        <div class="box1Top">asPro</div>

        <div class="priceCon">
          <div class="priceConLeft img1"></div>
          <div class="priceConRight price3"></div>
        </div>
        <div class="box1Content">
          <ul>
            <li><span class="text03">75GB</span> Disk space</li>

            <li><span class="text03">150GB</span> Bandwidth</li>
            <li class="no_BorderBottom">Free & Instant Setup</li>
          </ul>
          <div class="BtnCon">
            <div class="orderNowBtn"><a href="cart.php?a=add&pid=3"></a></div>
            <a href="sharedhosting.php" class="BtnCona">More info</a> </div>

        </div>
        <div class="box1Bottom">&nbsp;</div>
      </div>
      <div class="clr"></div>
      <div class="Box2">
      <div class="Box2Top"></div>
        <div class="Box2Content">
          <div class="reasonsCon">
            <h1 class="reasonsConh1">Why choose us?</h1>

            <div class="box01">
                  <div class="box01Left">1</div>
                  <div class="box01right">
                    <h1>Fast & Reliable</h1>
                    <p>We use fully up-to-date hardware and software to try and keep your site running fast, without issues.</p>
                  </div>
            </div>

            <div class="box01">
                  <div class="box01Left">2</div>
                  <div class="box01right">
                    <h1>High Quality Support</h1>
                    <p>With multiple support methods available, you can be assured you can find help when needed.</p>
                    
              </div>
            </div>

            <div class="box01">
                  <div class="box01Left">3</div>
                  <div class="box01right">
                    <h1>Low prices</h1>
                    <p>We want to provide you with a great quality service, for prices that'll keep you happy!</p>
              </div>
            </div>

             <div class="box01">
                  <div class="box01Left">4</div>
                  <div class="box01right">
                    <h1>Package upgrades/downgrades</h1>
                    <p>You can upgrade or downgrade your hosting package when you want to, no questions asked. </p>
               </div>
            </div>

            <div class="box01">
                  <div class="box01Left">5</div>
                  <div class="box01right">
                    <h1>No hidden costs</h1>
                    <p>You get no hidden costs, no contracts or nasty surprises.</p>
              </div>
            </div>

            <div class="box01">
                  <div class="box01Left">6</div>
                  <div class="box01right">
                    <h1>Addons</h1>
                    <p>We provide cheap addons/extras for your account to help enhance your website.</p>
              </div>
            </div>

            <div class="clr"></div>
          </div>
        </div>
      </div>
   
    <div class="clr"></div>
    </div>
<div class="bodyConRight">
           
    
            <div class="siderBox">
              <div class="siderBoxTop">Features Included</div>

              <div class="siderBoxContent">
                <ul class="ulStyle02">
                  <li><span class="text03">FREE</span> Domain </li>
                  <li><span class="text03">LiteSpeed</span> webserver</li>
                  <li>Money Back <span class="text03">Guarantee</span></li>

                  <li>Softaculous Installer</li>
                  <li><span class="text03">Optimization</span> cPanel module</li>
                  <li class="no_BorderBottom">RVSiteBulder Pro </li>
                </ul>
                
              </div>
            </div>

            <div class="siderBox">
              <div class="siderBoxTop">About us</div>
              <div class="siderBoxContent">
Our aim is to provide top quality web hosting for affordable prices. 
We've got a skilled team of people who know what they're doing, in order to
 be able to work with our clients and get the best for them, this is essential. 
Our excellance is found within the quality of the service we offer, 
high quality support, fast and stable servers and an easy to use client panel.
                 
                </p>
              </div>
            </div>
</div>
  </div>
  <div class="clr"></div>

</div>

  <div class="footerCon">
    <div class="container">     	
      <div class="clr"></div>
      	<div class="copyRightCon">
      	  <ul>
      	  	    <a href="index.php">Home</a> &nbsp; - &nbsp;

	    <a href="support.php">Support</a> &nbsp; - &nbsp; 
           <a href="terms.php">Terms of Service</a> &nbsp; - &nbsp;
      	    <a href="clientportal.php">Client Area</a> &nbsp; - &nbsp; 
      	    <a href="http://www.twitter.com/astoundinghost">Twitter</a> &nbsp; - &nbsp;

           <a href="http://www.facebook.com/astoundinghost">Facebook</a>				
          </ul>      	      
   	  </div>
    </div>
  
  </div>
</body>
</html>


And your css file :-

.absmiddle{vertical-align:middle;}
.breadcrumb{background-color:#F5F5F5;margin:0 0 10px;padding:10px;}
.clear{clear:both;}
.green{color:#006F0F;}
.header{color:#1a4d80;font-size:14px;font-weight:700;}
.red{color:#BF0000;}
.small{font-size:11px;}
.warning{background-color:#FFFFDF;border:1px solid #FDFF3F;margin:0 0 10px;padding:10px;}
.contentbox{padding:10px;margin:0 0 10px;text-align:center;}
.errorbox{background-color:#FFBFBF;padding:10px;margin:0 0 10px;text-align:center;color:#7F0000;}
.successbox {border: 1px solid #66CC00;font-weight: bold;background-color: #DDFFC6;text-align: center;padding: 10px;color: #009933;}
.clientareatableactive{background-color:#DFFFE0}
.clientareatablepending{background-color:#EFEFEF}
.clientareatablesuspended{background-color:#FFF6CF}
.clientareatableterminated{background-color:#FFCFCF}
.clientticketreplyheader{background-color:#EBEBEB;color:#333;border-top:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #EBEBEB;border-left:1px solid #CCC;}
.clientticketreply{background-color:#F5F5F5;margin:0 0 10px;padding:10px;border-right:1px solid #CCC;border-bottom:1px solid #CCC;border-left:1px solid #CCC;}
.adminticketreplyheader{background-color:#CFE6FF;color:#333;border-top:1px solid #CAE6FF;border-right:1px solid #CAE6FF;border-bottom:1px solid #CAE6FF;border-left:1px solid #CAE6FF}
.adminticketreply{background-color:#EEF6FF;padding:10px;margin:0 0 10px;border-right:1px solid #CAE6FF;border-bottom:1px solid #CAE6FF;border-left:1px solid #CAE6FF;}
.networkissueaffected{background-color:#EFEFEF;padding:10px;margin: 0 0 10px;}
.textgreen{color:#158F00;}
.textred{color:#9F0000;}
body,td,th{color:#666;font-family:Arial, Helvetica, sans-serif, Calibri;font-size:12px;background:#ccc}
form{margin:0;padding:0;}
hr{background-color:#EBEBEB;border:0;border-top:1px solid #EBEBEB;height:0;margin:10px 0;overflow:hidden;}
input,select,textarea{color:#666;font-family:Arial, Helvetica, sans-serif, Calibri;font-size:12px;margin:0;padding:2px;}
p{margin:0;padding:3px 0 8px;}
table.data{margin:0 0 10px;padding:0;}
table.data td{background-color:#FFF;border-bottom:1px solid #EBEBEB;}
table.data th{background-color:#1B1B1B;border-bottom:1px solid #333;color:#FFF;font-weight:400;}
table.data th a {color:#FFF;}
table.data tr.clientareatableactive td{background-color:#DFFFE0 !important;}
table.data tr.clientareatablepending td{background-color:#EFEFEF !important;}
table.data tr.clientareatablesuspended td{background-color:#FFF6CF !important;}
table.data tr.clientareatableterminated td{background-color:#FFCFCF !important;}
table.frame{margin:0 0 10px;padding:0;border:1px solid #EBEBEB;border-bottom:0;}
table.frame table td{background-color:#FFF;border-bottom:1px solid #EBEBEB;}
table.frame table td.fieldarea{background-color:#F5F5F5;color:#333;text-align:right;border-right:1px solid #EBEBEB;}
.kbarticle {padding: 2px 5px 5px 15px;}
.kbviews {color:#A8A8A8;font-size:10px;}
.kbalsoread {padding: 5px 5px 5px 15px;background-color: #F5F5F5;border-bottom: 1px solid #ccc;font-weight: bold;margin: 10px 0 10px 0;}
.searchinput {font-size: 11px;padding:0;}
#twitterfeed ul {list-style-type: none;padding: 0;margin: 15px 0 20px 0;}
#twitterfeed li {background-image: url(../../images/twittericon.png);background-repeat: no-repeat;background-position: 0;margin: 0 20px 10px 20px;padding-left: 25px;}
#twitterfeed p {text-align:center;margin:15px;}

/* --------------------------------------------------------------
   QUOTES
-------------------------------------------------------------- */

.quotecontainer {
    border: 1px solid #ccc;
    background-color: #fff;
    background-image:url('../../images/quote.png');
    background-repeat:no-repeat;
    background-position: 10px 11px;
    color: #666;
    margin: 10px;
}
.container{
background:#fff;
}

.quotecontainer:hover {
    background-color: #efefef;
    cursor: hand;
    cursor: pointer;
}

.quotecontainer .quoteid {
    float: left;
    width: 80px;
    padding: 13px 0 0 40px;
    text-align: center;
    font-size: 24px;
}

.quotecontainer .quoteleft {
    float: left;
    padding: 10px 0 10px 0;
    font-size: 11px;
}

.quotecontainer .quoteleft .subject {
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 4px;
    color: #000;
    width: 350px;
}

.quotecontainer .quoteright {
    float: right;
    padding: 10px 15px 0 0;
    text-align: right;
}

.quotecontainer .quoteright .stage {
    font-weight: bold;
    font-size: 12px;
    padding-bottom: 4px;
}




Edit:

Make sure to change

<link rel="stylesheet" type="text/css" href="file.css" />

to

<link rel="stylesheet" type="text/css" href="templates/VibrantHost/style.css" />
Pages: 1 2