Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    why cant i get the margins right?



    i got a template for my martial arts club and i'm having trouble editing it. the content is center in the page with a white background and there is a background image behind that (margins i think) that is gray. i've been working with it for a couple of weeks now but have decided i want the content and the white background behind it, to be wider, in essence shrinking the side margins with the gray background. i've tried changing so many different parts of the css to accomplish this and i can't get anything to work. someone please help me. it's hosted on my computer through my server and is only hosted when my computer is on so i can't provide a link. attached is the html and css code. all help is greatly appreciated!

    css:
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    /** Content **/
    
    
    
    #content {
    	position: relative;
    	height: auto !important;
    	height: 100%;
    	min-height: 100%;
    	background-image:url();
    	background-position: center bottom;
    	background-repeat: no-repeat;
    }
    /** Top menu**/
    
    
    
    #topContainer {
    	clear: both;
    	position: relative;
    	margin: 0 auto;
    	width: 800px;
    	padding-left: 1px;
    }
    #header {
    	clear: both;
    	position: relative;
    	height: 2.3em;
    	margin: 0 auto;
    	border-bottom: 2px solid #191D76;
    	background-image: none;
    	text-align:right;
    	background-color: #000000;
    }
    #header img {
    	position: absolute;
    	top: 5%;
    }
    /** top navigation **/
    
    #header ul {
    	margin: 1em 1em 0 0 !important;
    	margin: 1em 0.5em 0 0;
    	padding: 0;
    	float: right;
    }
    #header ul li {
    	display: inline;
    	list-style: none;
    }
    #header ul li a {
    	float: left;
    	padding: 0 1em;
    	font: 400 12px arial, sans-serif;
    	font-weight:bold;
    	letter-spacing: 0.1em;
    	line-height: 0.8em !important;
    	line-height: 1em;
    	color: #FFF;
    	border-right: 1px solid #4D5760;
    }
    #header ul li a:hover {
    	color: #999;
    }
    /** Header **/
    
    
    
    .headerlogo {
    	position: absolute;
    	right: 0px;
    	top: 31px;
    	width: 1100px;
    	height: 175px;
    }
    #headerImg {
    	margin: 0 auto;
    	height: 175px;
    	background: url(images/header_image.jpg) no-repeat;
    }
    .holdspace {
    	color:#FFF;
    	font-weight: bold;
    	text-align:left;
    	font-size: 1.1em;
    	padding: 115px 0 0 125px;
    }
    /** main navigation **/
    
    
    
    #menu {
    	margin: 0 auto;
    }
    #menu ul {
    	width: 100%;
    	float: left;
    	margin: 0;
    	padding: 0;
    	text-align: left;
    	background-image: none;
    	background-color: #000000;
    }
    #menu ul li {
    	display: inline;
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #menu ul li a {
    	float: left;
    	width: 133.33px;
    	height: 2em;
    	font: 12px arial, sans-serif;
    	font-weight: bold;
    	letter-spacing: 0.0em;
    	color: #FFF;
    	border-top: 6px solid #051f34;
    	text-align:center;
    }
    #menu ul li a span {
    	display: block;
    	padding: 2px 7px;
    }
    #menu ul li a span.desc {
    	font-size: 0.8em;
    	color: #8C8D94;
    }
    #menu ul li a:hover,  #menu ul li a.here {
    	border-top: 6px solid #990000;
    	color: #ccc;
    	background-image: none;
    	background-color: #000000;
    }
    #menu ul li a:hover span.desc,  #menu ul li a.here span.desc {
    	color: #FFF;
    }
    /** Side menu **/
    
    
    
    #side {
    	height: 100%;
    	width: 180px;
    	float: left;
    }
    /** Page Content **/
    
    
    
    #page {
    	clear: both;
    	float: left;
    	width: 100%;
    	margin-bottom: .5em;
    	text-align: left;
    	height:100%;
    }
    #columns {
    	margin: 0 auto;
    	padding-top: 10px;
    	padding-left: 10px;
    }
    /* Column widths */
    
    .width {
    	width: 800px;
    }
    .widthPad {
    	width: 750px;
    }
    .width25 {
    	width: 180px;
    }
    .width73 {
    	width: 73%;
    }
    .width75 {
    	width: 75%;
    }
    .width100 {
    	width: 100%;
    }
    /** Footer **/
    
    
    
    
    
    #footer {
    	clear: both;
    	width: 100%;
    	height: 2.0em;
    	position: relative;
    }
    #footer #bg {
    	position: relative;
    	height: 2.0em;
    	margin: auto;
    	background-image: none;
    	border-top: 6px solid #051f34;
    	background-color: #000000;
    }
    #footer #bg ul {
    	margin: .6em 1em 0 0 !important;
    	margin: .6em 1em 0 0;
    	padding: 0;
    }
    #footer #bg ul li {
    	display: inline;
    	list-style: none;
    }
    #footer #bg ul li a {
    	float: left;
    	padding: 0 1em;
    	font: 400 12px arial, sans-serif;
    	letter-spacing: 0.1em;
    	line-height: 0.8em !important;
    	line-height: 1em;
    	color: #fff;
    	border-right: 1px solid #4D5760;
    }
    #footer #bg ul li a:hover {
    	color:#999999;
    }
    /** Submenu Styles **/
    
    
    
    ul.submenu1 {
    	margin: 0 0 0px 0;
    	padding: 0;
    }
    ul.submenu1 li {
    	margin: 0;
    	padding: 3px;
    	list-style: none;
    	height: auto;
    	list-style-image: url(css/foo.gif); /* IE fix */
    }
    ul.submenu1 li a {
    	display: block;
    	height: auto !important;
    	/* Start hide from IE Mac \*/
    
      height: 1%;
    	/* End hide from IE Mac */
    
    
    
      padding: 1px 5px 1px 20px;
    }
    ul.submenu1 li a {
    	background: url(images/submenu1.gif) no-repeat 5px 50%;
    }
    ul.submenu1 a:hover {
    	color: #990000;
    	background: #ccc url(images/submenu1.gif) no-repeat 5px 50%;
    }
    ul.submenu1 li a#current {
    	background: #191D76 url(images/submenu1.gif) no-repeat 5px 50%;
    	color: #fff;
    }
    ul.submenu2 {
    	padding: 0;
    	margin-top: 0;
    	margin-right: 0;
    	margin-bottom: 0px;
    	margin-left: 5px;
    }
    ul.submenu2 li {
    	list-style: none;
    	height: auto;
    	list-style-image: url(css/foo.gif); /* IE fix */
    	margin-top: 0;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 5px;
    	padding-top: 1px;
    	padding-right: 1px;
    	padding-bottom: 1px;
    	padding-left: 5px;
    }
    ul.submenu2 li a {
    	display: block;
    	height: auto !important;
    	/* Start hide from IE Mac \*/
    
      height: 1%;
    	/* End hide from IE Mac */
    
    
    
      padding: 1px 5px 1px 40px;
    }
    ul.submenu2 li a {
    	background: url(images/submenu1.gif) no-repeat 5px 50%;
    }
    ul.submenu2 a:hover {
    	color: #990000;
    	background: #ccc url(images/submenu1.gif) no-repeat 5px 50%;
    }
    ul.submenu2 li a#current {
    	background: #191D76 url(images/submenu1.gif) no-repeat 5px 50%;
    	color: #fff;
    }
    /** Generic Display **/
    
    
    
    
    
    .block {
    	display: block;
    }
    .clear {
    	clear: both;
    }
    .marginRight {
    	margin-right: 15px;
    }
    .paddingLeft {
    	padding-left: 5px;
    }
    .paddingRight {
    	padding-right: 5px;
    }
    .floatLeft {
    	float: left;
    }
    .floatRight {
    	float: right;
    }
    .alignLeft {
    	text-align: left;
    }
    .alignRight {
    	text-align: right;
    }
    .alignTop {
    	vertical-align: top;
    }
    .alignMiddle {
    	vertical-align: middle;
    }
    .alignBottom {
    	vertical-align: bottom;
    }
    .lightGreyBg {
    	background-color: #EDEBEB;
    	border: 1px;
    	border-color: #666;
    	border-style: dotted;
    	margin-bottom: 10px;
    }
    .dark {
    	color: #353E47;
    }
    .fineprint {
    	font-size: 9px;
    	line-height: 12px;
    }
    /** HTML Elements **/
    
    
    
    html,  body {
    	height: 100%;
    }
    body {
    	margin: 0;
    	padding: 0;
    	text-align: center;
    	background: url(images/light_body.gif) repeat-y top center;
    	font: 12px verdana, arial, sans-serif;
    	line-height: 150%;
    	color: #555;
    }
    /* Headers */
    
    h1, h2, h3, h4, h5, h6 {
    	margin: 0 0 5px 0;
    	padding: 0;
    }
    h1 {
    	padding-bottom: 0em;
    	font: bold 1.6em arial, sans-serif;
    	color: #191D76;
    	border-bottom: 1px dotted #000;
    }
    h2 {
    	font-size: 1.2em;
    	color: #990000;
    	border-bottom: 1px dotted #000;
    }
    h3 {
    	font-size: 1.1em;
    	color: #191D76;
    }
    h4 {
    	font-size: 0.85em;
    }
    h5 {
    	font-size: 0.8em;
    }
    /* Needed to horizontally pad in a colored container */
    
    .horzPad h1,  .horzPad h2,  .horzPad h3,  .horzPad h4,  .horzPad h5,  .horzPad p {
    	padding-left: 1px;
    	padding-right: 1px;
    }
    /* Links */
    
    a {
    	text-decoration: none;
    	color: #191D76;
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #666;
    }
    a:hover {
    	color: #ccc;
    }
    a img {
    	border: 1px;
    }
    /* Images */
    
    img.floatRight {
    	margin: 5px 0 10px 10px;
    	border:1px solid #333333;
    }
    img.floatLeft {
    	border:1px solid #333333;
    	margin: 5px 10px 10px 0;
    }
    img.vert {
    	vertical-align:middle;
    }
    img.border {
    	border:1px solid #333333;
    }
    .imgBlock {
    	padding-bottom: 90px;
    }
    /* Lists */
    
    ul li {
    	list-style-image: url(images/submenu1.gif);
    }
    /* Extra Styles that got added later */
    .style2 {
    	font-size: 14px;
    	font-weight: bold;
    	color: #FF0000;
    }
    .style71 {
    	color: #191D76;
    	font-weight: bold;
    }
    html:
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>Homepage</title>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
    <meta name="description" content="" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="bedroc.css" />
    
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <script src="/public_html/demo/Scripts/swfobject_modified.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="content">
      <div id ="topContainer">
        <div id="header" class="width">
          <div class="headerlogo">
            <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="175">
              <param name="movie" value="bedroc.swf" />
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="swfversion" value="9.0.45.0" />
              <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
              <param name="expressinstall" value="/public_html/demo/Scripts/expressInstall.swf" />
              <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
              <!--[if !IE]>-->
              <object type="application/x-shockwave-flash" data="flash.swf" width="800" height="175">
                <!--<![endif]-->
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />
                <param name="swfversion" value="9.0.45.0" />
                <param name="expressinstall" value="/public_html/demo/Scripts/expressInstall.swf" />
                <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                <div>
                  <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
                </div>
                <!--[if !IE]>-->
              </object>
              <!--<![endif]-->
            </object>
          </div>
          <ul>
            <li><a href="contact.html">Contact Us</a></li>
            <li><a href="members.html">Members Only</a></li>
            <li><a href="bb.php" target="_blank">Message Board</a></li>
          </ul>
        </div>
        <div id="headerImg" class="width">
          <div class="holdspace"></div>
        </div>
        <div id="menu" class="width">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us </a></li>
            <li><a href="schedule.html">Schedule</a></li>
            <li><a href="events.html">Events</a></li>
            <li><a href="store.html">Store</a></li>
            <li><a href="media.html">Media</a></li>
          </ul>
        </div>
      </div>
      <div id="page">
        <div id="columns" class="widthPad">
          <!-- Main Content Start-->
          <div class="floatLeft width73 horzPad">
            <h1>Welcome to the Homepage!</h1>
            <p>content</p>
            <p>content</p>
            <h1>content</h1>
            <p><content</p>
          </div>
          <!-- Center news column end -->
          <div id="side2">
            <!-- Right link start -->
            <div class="floatRight width25 horzPad">
              <h2>Recent News</h2>
              <ul class="submenu1">
                <li><a href="media.html">New Videos Posted In Our Media Section</a></li>
                <li></li>
              </ul>
            </div>
            <!-- Right links end -->
            <div class="floatRight width25 lightGreyBg horzPad">
              <h2 align="center" class="style3">video</h2>
                <p class="style4">would like to put video here</p>
              </div>
            </div>
          </div>
          <!--end side-->
        </div>
        <!-- columns end -->
      </div>
      <!-- page end -->
    </div>
    <!-- content end -->
    <div id="footer">
      <div id="bg" class="width">
        <ul>
          <li><a href="#" target="_blank">Privacy Policy </a></li>
          <li><a href="location.html">Location</a></li>
        </ul>
      </div>
    </div>
    <script type="text/javascript">
    <!--
    swfobject.registerObject("FlashID");
    //-->
    </script>
    </body>
    </html>

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    A link to the site would be very useful.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    A link to the site would be very useful.

    Frank
    that's the biggest problem getting help right now is we haven't purchased a domain yet. we're holding off until we get the website all up and running. we're not doing this for a profit so money is tight.


  •  

    Posting Permissions

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