Totally stumped on where to change margins its like they dont exist

HTML & CSS
1

So far using this temp from volusion ive changed three flaws within it. (free glow gray)

can someone please point me where to change the margins?! it needs to go much farther to the left. I do not see a page width in the css or html files?

here is template.css

body{
                margin:0px;
                padding:0px;
                font-size:12px;
                font-family:Arial, Verdana, Helvetica, Sans-serif;
                text-align:center;
                background:url(../images/template/header_background.jpg) repeat-x left top;
}

#body a{
	text-decoration:none;
	outline:none;
}
#body a:hover{
	text-decoration:underline;
}
#body img {
	border:none;
}

#body .end {
	border-right:none !important;
}
#content_area .colors_pricebox{text-align:left !important;}
/* ############################### HEADER ############################### */
#headerwrapWide {
	height:234px;
	width:100%;
	margin:0 auto;
	padding:0;
	background:url(../images/template/headerwrap.jpg) no-repeat center;}

#header{
	width:960px;
	height:234px;
	margin:0px auto;
	padding:0px;
	text-align:left;
	background:url(../images/template/header_bg.gif) no-repeat 0 0;
	position:relative;
}
#header h1 {
    background: none repeat scroll 0 0 transparent;
    height: 179px;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    text-indent: 0;
    top: 0;
    width: 710px;
}

#display_homepage_title a{
text-indent:-99999px;
display:block;
width:300px;
height:40px;
text-align:left;
color:#fff;
/* background:url(../images/template/logo.gif) no-repeat 0 0; */
}

#display_homepage_title #homepage_title {
    background: none repeat scroll 0 0 transparent;
    color: #FFFFFF;
    display: block;
    font-size: 30px;
    height: 100%;
    line-height: 220px;
    text-align: left;
    text-indent: 29px;
    width: 100%;
}

#header h1 a{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	text-align:left;
	display:block;
font:bold 36px arial;
color:#fff;}

#site_tools{
	margin:0px;
	padding:0px;
	color:#fff;
	text-align:right;
	position:absolute;
	top:14px;
	right:3px;
}
#site_tools a{
	padding:0px 13px;
	font:normal 11px Arial, Helvetica, sans-serif;
	color:#fff;
	text-transform:uppercase;
}

#phone {height:50px;width:300px;text-align:right;position:absolute;top:80px;right:20px;}
#phone p {text-align:right;margin:0;padding:0;font:normal 12px Arial, Helvetica, sans-serif;color:#707070;text-transform:uppercase;}
#phone p span {margin:0;padding:0;font:normal 10px Arial, Helvetica, sans-serif;color:#707070;text-transform:lowercase;}

/* ############################### TOP NAVIGATION ############################### */
#horznav{
	width:425px;
	margin:0px auto;
	padding:0px;
	text-align:left;
	position:absolute;
	top:194px;
	left:7px;
}
#horznav ul {
	margin:0;
	padding:0;}

#horznav ul li{
	margin:0px;
	padding:0px;
	list-style:none;
	display:inline;
}
#horznav ul li a{
	margin:0px;
	padding:7px 25px;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#606060;
	background:url(../images/template/horznav_divider.gif) bottom right no-repeat;
}
#horznav ul li a#horznav_end {background:none;}
/* ############################### SEARCH BOX ############################### */
#display_search_wrapper {
	width:182px;
	height:22px;
	margin:0px;
	padding:0px;
	display:block;
	background:url(../images/template/search_background.gif) top left no-repeat;
	position:absolute;
	right:4px;
	top:190px;
	color:#666;
}
#display_search{
	margin:0px;
	padding:0px;
	text-align:left;
}
#display_search_wrapper input{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #fff;
font-size:12px;
height:12px;
left:10px;
margin:0;
padding:1px;
position:absolute;
top:4px;
width:136px;
font:normal 10px Arial, Helvetica, sans-serif;
color:#666;
}
#display_search_wrapper input.empty{color:#666;font:normal 10px Arial, Helvetica, sans-serif;}

#display_search_wrapper img{
	margin:0px;
	padding:0px;
	position:absolute;
	right:19px;
	top:5px;
}

/* ############################### Left Nav ############################### */

#left_nav {background:url(../images/template/leftnav_background.gif) repeat-y 0 0;width:211px;margin:0;padding:10px 0 20px 20px;}
#left_nav h3 {color:#5a5a5a;font:bold 14px Arial, Helvetica, sans-serif;text-align:left;margin:30px 0 0 0;padding:2px 0 0 11px;background:url(../images/template/menutitle_background.gif) no-repeat 0 0;width:190px;height:24px;text-transform:uppercase;}
#left_nav .menu img{
	display:none !important;
}
#left_nav .menu {
	width:189px;
	margin:0;
	padding:5px 0;
	text-align:left;
}

/* ############################### List Items ############################### */

#left_nav  ul {
	margin:0 0 0 5px;
	padding:0;
	width:163px;}

#left_nav  ul li{
	margin:0px;
	padding:5px 0;
	list-style:none;
	width:175px;
}
#left_nav ul li a{
	margin:0px;
	padding:5px 5px 5px 7px;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#727272;
	width:161px;
	display:block;
	background:url(../images/template/menu_arrow.gif) center right no-repeat;

}
#left_nav ul li a:hover {text-decoration:none;background:#cecece url(../images/template/menu_arrow_mo.gif) center right no-repeat;color:#5b5b5b;}


/* ############################### SmartTree SmartExpand ############################### */


#left_nav  td.nav {
	margin:0 0 0 5px;
	padding:0;
	width:163px;}

#left_nav  td.nav a {
	margin:0px;
	padding:5px 5px 5px 7px;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#727272;
	width:161px;
	display:block;
	background:url(../images/template/menu_arrow.gif) center right no-repeat;
}

#left_nav td.nav_hover {text-decoration:none;color:#5b5b5b;}

#left_nav td.nav_hover a {
background:#cecece url(../images/template/menu_arrow_mo.gif) center right no-repeat;}

#left_nav td.subnav {
background:none;
margin:0 0 0 20px;
padding:0;
width:120px;}

#left_nav td.subnav a {font:normal 11px arial;color:#666;padding:2px 0 2px 28px;margin:0;background:none;}

#left_nav td.subnav_hover {background:none;color:#000;}
#left_nav td.subnav_hover a {color:#000;text-decoration:none;}

/* ############################### SHOPPING CART DISPLAY ############################### */

#display_cart_summary {
	display:none;
	}
#cart_wrapper {
	font-weight:normal;
	position:absolute;
	top:80px;
	right:0px;
}
#view_cart_text_right {
	display:inline;
}
		
/* ############################### DROP DOWNS ############################### */
#DropDown_ShopBy_Manufacturer select{
	width:160px;
	padding:0px;
	margin:8px 0px;
	font-size:11px;}
#DropDown_ShopBy_Category select{
	width:160px;
	padding:0px;
	margin:8px 0px;
	font-size:11px;}
#DropDown_ShopBy_Price select{
	width:160px;
	padding:0px;
	margin:8px 0px;
	font-size:11px;}

/* ############################### PROMOTIONS ############################### */
#display_promotions_999{
	margin:0px;
	padding:10px 0px;
	text-align:center;
	vertical-align:middle;
}

/* ############################### CONTENT ############################### */
#contentwrap {background:url(../images/template/contentwrap.jpg) repeat-y center;width:100%;margin:0 auto;padding:0;}

#content{
	width:960px;
	margin:0px auto;
	padding:0;
	text-align:left;
}
#content_area{
	width:750px;
	margin:0px;
	padding:5px 15px 15px 10px;
	text-align:left;
	background:none;
}

/* ############################### FOOTER ############################### */
#footerwrap {background:#7a766d;margin:0 auto;padding:0;width:100%;height:206px;}

#footer{
	width:960px;
	height:206px;
	margin:0px auto;
	padding:0px;
	text-align:left;
	background:#7a766d;
}
/* ############################### MAILING LIST ############################### */
#eList {
	width:176px;
	height:50px;
	padding:0px;
	margin:18px 46px 0 26px;
	font-size:10px;
	font-weight:bold;
	color:#000;
	text-align:center;
	position:relative;
	background:url(../images/template/elist_background.gif) no-repeat 0 20px;
	float:left;}

#eList p {
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#fff;
	padding:0px;
	margin:0px;
	position:absolute;
	top:2px;
	left:11px;
}
#elist_field {
border:1px solid #fff;
height:13px;
left:8px;
margin:5px 0;
padding:1px;
position:absolute;
top:20px;
width:139px;
font:normal 10px Arial, Helvetica, sans-serif;
color:#666;
}
#elist_field.empty{ background:transparent url(../images/template/mail_empty.gif) no-repeat 0 0;
}
#elist_btn {
	padding:0px;
	margin:0px;
	position:absolute;
	right:15px;
	bottom:9px;
}

input#elist_field.empty {}

#footer ul{
	float:left;
	margin:18px 20px 70px;
	padding:0 29px 0 0;
	list-style:none;
	text-align:left;
	background:url(../images/template/footernav_divider.jpg) no-repeat bottom right;
}
#footer ul.footernavend {background:none;float:left;clear:right;}
#footer ul li{
	text-align:left;
	margin:0;
	padding:3px 0;
}
#footer ul li.footerhead h2 {
	text-transform:uppercase;
	color:#fff;
	font:bold 11px Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
}
#footer ul li a{
	padding:0;
	color:#fff;
	font:normal 11px Arial, Helvetica, sans-serif;
}
#copyright{
	width:auto;
	text-align:left;
	margin:0 0 0 266px;
	padding:10px 0px;
	color:#fff;
	font:normal 11px Arial, Helvetica, sans-serif;
	float:left;
}
#copyright p{
	margin:0px;
	padding:0px;
	color:#fff;
	font:normal 11px Arial, Helvetica, sans-serif;
	display:inline;
}
#copyright a{
	color:#fff;
	font:normal 11px Arial, Helvetica, sans-serif;
	display:inline;
}

please help its been days and its driving me nuts… thank you here is the html file:

<!--
DYNAMIC PAGE-SPECIFIC META TAGS WILL BE PLACED HERE
DO NOT ADD YOUR OWN META TAGS, ONLY PUT CSS/JAVSCRIPT INCLUDES IN YOUR HEAD TAG
-->

<link href="v/vspfiles/templates/133/css/Imports.css" rel="stylesheet" type="text/css" />
<script src="v/vspfiles/templates/133/js/search_text_change.js" type="text/javascript"></script>

</head>

<body id="body">

<!-- ==================== HEADER ==================== -->
<div id="headerwrapWide">
  <div id="header">
    <h1 id="display_homepage_title">Config_WebsiteTitle</h1>

    <div id="site_tools">
      <a href="Config_FullStoreURLshoppingcart.asp">View Cart</a> |
      <a href="Config_FullStoreURLmyaccount.asp">My Account</a> |
      <a href="Config_FullStoreURLlogin.asp" class="end">Login</a>
    </div>

    <div id="phone"><p>To Order Call: 123.456.7899<br /><span>Monday-Saturday 9am-5pm Central</span></p></div>

    <!-- ==================== SEARCH BOX ==================== -->
    <div id="display_search_wrapper">
      <div id="display_search">
        <form action="/SearchResults.asp" method="get" name="SearchBoxForm">
          <input type="text" name="Search" class="empty" value="search..." onfocus="if (this.value == 'search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search...';}" />
          <img src="v/vspfiles/templates/130/images/template/search_arrow.gif" alt="Go" border="0" align="top" style="cursor: pointer;" onclick="document.forms['SearchBoxForm'].submit();" />
        </form>
      </div>
    </div>

    <!-- ==================== UL LAYOUT ==================== -->
    <div id="horznav">
      <ul>
        <li><a href="Config_FullStoreURLdefault.asp">Home</a></li>
        <li><a href="Config_FullStoreURLAboutUs.asp">About Us</a></li>
        <li><a href="Config_FullStoreURLhelp.asp">Help</a></li>
        <li><a href="mailto:Config_EmailAddress_From?subject=Contact%20Us" id="horznav_end">Contact Us</a></li>
      </ul>
    </div>
  </div>
</div>

  <!-- ==================== CONTENT ==================== -->
  <div id="contentwrap">
    <div id="content">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td valign="top" id="left_nav">

            <!-- ==================== UL LAYOUT ==================== -->
            <h3 id="Menu1_Title">Menu 1 Title</h3>
            <div class="menu" id="display_menu_1">display_menu_1</div>

            <h3 id="Menu2_Title">Menu 2 Title</h3>
            <div class="menu" id="display_menu_2">display_menu_2</div>

            <h3 id="Menu3_Title">Menu 3 Title</h3>
            <div class="menu" id="display_menu_3">display_menu_3</div>

            <div id="display_promotions_999">display_promotions</div>
          </td>
          <td id="content_area" valign="top" >content_area</td>
        </tr>
      </table>
    </div>
  </div>

  <!-- ==================== FOOTER ==================== -->
  <div id="footerwrap">
    <div id="footer">

      <!-- ==================== Mailing List Section==================== -->
      <div id="eList">
        <p>Join Our Mailing List</p>
        <form name="MailingList" method="post" action="/MailingList_subscribe.asp">
          <input id="elist_field" class="empty" name="emailaddress" type="text" value="email address..." onfocus="if (this.value == 'email address...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'email address...';}" />
          <input id="elist_btn" name="Submit" type="image" src="v/vspfiles/templates/133/images/Template/elist_arrow.gif" value="" />
        </form>
      </div>

      <ul>
        <li class="footerhead"><h2>Company Information</h2></li>
        <li><a href="Config_FullStoreURLAboutUs.asp">About Us</a></li>
        <li><a href="Config_FullStoreURLterms.asp">Terms and Conditions</a></li>
        <li><a href="Config_FullStoreURLTerms_privacy.asp">Privacy</a></li>
      </ul>
      <ul>
        <li class="footerhead"><h2>My Account</h2></li>
        <li><a href="Config_FullStoreURLLogin.asp">Login/Register</a></li>
        <li><a href="Config_FullStoreURLOrders.asp">Orders</a></li>
        <li><a href="Config_FullStoreURLwishlist.asp">My Wishlist</a></li>
      </ul>
      <ul class="footernavend">
        <li class="footerhead"><h2>Customer Service</h2></li>
        <li><a href="Config_FullStoreURLhelp.asp">FAQs</a></li>
        <li><a href="Config_FullStoreURLreturns.asp">Returns</a></li>
        <li><a href="mailto:Config_EmailAddress_From?subject=Contact%20Us">Contact Us</a></li>
      </ul>

      <div id="copyright">
        <p><a href="Config_FullStoreURLterms.asp">Copyright &copy; <script type="text/javascript">document.write((new Date()).getFullYear());</script>  &nbsp;Config_CompanyNameLegal. All Rights Reserved.</a></p>

        <!--
        ===========================================================================================
        VOLUSION LINK - BEGIN
        ===========================================================================================
        Customer has agreed per Volusion's Terms of Service (http://www.volusion.com/agreement_monthtomonth.asp)
		to maintain a text hyperlink to "http://www.volusion.com" in the footer of the website. The link must be standard html, contain no javascript, and be approved by Volusion.
		Removing this link breaches the Volusion agreement.
        -->
        <p>Built with <a href="http://www.volusion.com" target="_blank" rel="nofollow">Volusion</a>.</p>
        <!--
        ===========================================================================================
        VOLUSION LINK - END
        ===========================================================================================
        -->
      </div>
    </div>
  </div>
</div>

</body>
</html>
2

You wouldn’t happen to have a live website would you?

3

It’s really not clear what your question is.

(As a side note: Please remember to place 3 backticks before and after your code to format it properly here. I.e. type ``` on a separate line before and after your code blocks.)

1 Like
4

this is the first site ive done, i attached my url but volusion said i would not be “live” not sure there telling me the truth on this because i see i have a maintenece message up… and i thought i read there was a way to close the store not just have maintenence up… could this effect me editing margins ect?

5

my question is how do i change the margins on the page for example the left navigation bar is sitting too far to the right and the whole page could be moved over to the left, there is a huge space on the left of the page. sorry for the code, this is my first post. i would attach a picture however it will not allow me as im a new user…

6

try putting your code up here.

this is actually a nice and helpfull way to share your probs or experiments.

1 Like
7

The code that you posted doesn’t work too badly and doesn’t demonstrate what you are describing. As said, try CodePen and make sure the code demonstrates the issue. :slight_smile:

8

could it just be on my screen that i see like 4 inches or more of blank white page next to the nav bars>? and thank you so much for that site it is very helpful!

9

All theoretical without the demo, I’m afraid. :slight_smile:

Glad you find the site helpful. We’ll definitiely help you sort this out, but we do need that working demo, too. :wink:

10

well ive gotten the header (company name, home, ect) all the way to the left, still cant seem to move those menu titles to the left however. thank you for your help

11

i believe ive gotten it… well thank you all so much that program is a life saver!!!

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.