SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    left margin too wide in auto center

    can't figure this one out...i applied the auto centering techniques to my html, and it centers. however, the left margin that's set to auto is way too wide. any way to modify this?

    Code:
    /*
    CSS for Will Portfolio site
    */
    
    html {
    margin:-10px;
    padding: 0px;
    height: 1000px;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    }
    
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }
    a {
      font-weight: light;
      color: black;
      text-decoration: none;
    }
    
    a:link {
      text-decoration: none;
    }
    
    a:visited {
      color: black;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: none;
      color: #ec008c;
    }
    
    a: active {
      text-decoration: none;
      color: #ec008c;
    }
    
    li {
    list-style-type: none;
    }
    #bodycontent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 25px;
    font-weight:normal;
    width: 1000px;
    clear: left;
    padding-top: 34px;
    text-align:left;
    }
    div#navigation {
    height: 30px;
    width: 400px;
    margin: 0 0 0 105;
    padding: 75px 0 0 20px;
    float: right;
    }
    div#navigation li{
    display: inline;
    float: right;
    margin: 0 5px 0 25px;
    width: 75px
    text-align; left;
    }
    div#header img{
    float:left;
    width: 250px;
    display: block;
    }
    h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight:bold;
    padding: 18px;
    }
    div#links {
    width: 150px;
    float: left;
    }
    
    div#links li{
    margin: 0 0 0 -23px;
    }
    a img {
    border-style: none;
    display: block;
    }
    div#contactheader {
    float:left;
    }
    div#contact {
    padding: 30px 0 0 210px;
    }
    div#contact li {
    display:inline;
    float:left;
    padding: 0 3px 0 0;
    text-align: left;
    }
    .blackfont {
    font-size: 18px;
    font-weight:bold;
    margin: -20px 0px 0 -30px;
    }
    .pinkfont {
    font-size: 18px;
    font-weight:bold;
    color: #ec008c;
    margin: -20px 300px 0 0;
    }
    .pinkfont2 {
    font-size: 18px;
    font-weight:bold;
    color: #ec008c;
    margin: -20px 0 0 0;
    }
    .pink {
    color: #ec008c;
    }
    div#email {
    margin: 30 50 50 509;
    padding: -20 0 0 550;
    }
    #wrap {
    width:850px;
    margin:0 auto;
    background:#999;
    overflow:hidden;
    }
    #left {
    float:left;
    width:50%;
    background:#999;
    text-align:justify;
    padding: 0 20px 0 0;
    }
    #right {
    float:left;
    width:50%;
    background:#777;
    text-align:justify;
    vertical-align: top;
    }
    div#hs {
    width:150px;
    }
    div#gallery {
    width:500px;
    margin: -275px 0 0 175px;
    }

  2. #2
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pillsbury View Post
    can't figure this one out...i applied the auto centering techniques to my html, and it centers. however, the left margin that's set to auto is way too wide. any way to modify this?

    Code:
    /*
    CSS for Will Portfolio site
    */
    
    html {
    margin:-10px;
    padding: 0px;
    height: 1000px;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    }
    
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }
    a {
      font-weight: light;
      color: black;
      text-decoration: none;
    }
    
    a:link {
      text-decoration: none;
    }
    
    a:visited {
      color: black;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: none;
      color: #ec008c;
    }
    
    a: active {
      text-decoration: none;
      color: #ec008c;
    }
    
    li {
    list-style-type: none;
    }
    #bodycontent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 25px;
    font-weight:normal;
    width: 1000px;
    clear: left;
    padding-top: 34px;
    text-align:left;
    }
    div#navigation {
    height: 30px;
    width: 400px;
    margin: 0 0 0 105;
    padding: 75px 0 0 20px;
    float: right;
    }
    div#navigation li{
    display: inline;
    float: right;
    margin: 0 5px 0 25px;
    width: 75px
    text-align; left;
    }
    div#header img{
    float:left;
    width: 250px;
    display: block;
    }
    h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight:bold;
    padding: 18px;
    }
    div#links {
    width: 150px;
    float: left;
    }
    
    div#links li{
    margin: 0 0 0 -23px;
    }
    a img {
    border-style: none;
    display: block;
    }
    div#contactheader {
    float:left;
    }
    div#contact {
    padding: 30px 0 0 210px;
    }
    div#contact li {
    display:inline;
    float:left;
    padding: 0 3px 0 0;
    text-align: left;
    }
    .blackfont {
    font-size: 18px;
    font-weight:bold;
    margin: -20px 0px 0 -30px;
    }
    .pinkfont {
    font-size: 18px;
    font-weight:bold;
    color: #ec008c;
    margin: -20px 300px 0 0;
    }
    .pinkfont2 {
    font-size: 18px;
    font-weight:bold;
    color: #ec008c;
    margin: -20px 0 0 0;
    }
    .pink {
    color: #ec008c;
    }
    div#email {
    margin: 30 50 50 509;
    padding: -20 0 0 550;
    }
    #wrap {
    width:850px;
    margin:0 auto;
    background:#999;
    overflow:hidden;
    }
    #left {
    float:left;
    width:50%;
    background:#999;
    text-align:justify;
    padding: 0 20px 0 0;
    }
    #right {
    float:left;
    width:50%;
    background:#777;
    text-align:justify;
    vertical-align: top;
    }
    div#hs {
    width:150px;
    }
    div#gallery {
    width:500px;
    margin: -275px 0 0 175px;
    }

    [/HIGHLIGHT]

    I beleive thats because your bodycontainer {} Is 1000px; wide and this causes a horizontal scrollbar. Change it to
    Code CSS:
    width:100%;
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/



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
  •