SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Left margin

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Left margin

    Hi, I've created a new page on my site.

    The text is right up against the left hand side how do I get the
    text over a bit <center> has not worked. http://www.see360degrees.com.au/testimonals.html
    Thanks.

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,834
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Try either or both margin-left: 1em or padding-left: 1em
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Presumably you want your content centered just like the content in the header section. Presuming you are going to have a sidebar too, I would suggest that you wrap your .content_630 div in a wrapper:

    Code:
    <div class="content">
      <div class="content_630">
      </div>
    </content>
    and then style it like so:

    Code:
    .content {
      margin: 0 auto;
      width: 960px;
      overflow: hidden;
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Presumably you want your content centered just like the content in the header section. Presuming you are going to have a sidebar too, I would suggest that you wrap your .content_630 div in a wrapper:

    Code:
    <div class="content">
      <div class="content_630">
      </div>
    </content>
    and then style it like so:

    Code:
    .content {
      margin: 0 auto;
      width: 960px;
      overflow: hidden;
    }
    Will do! Thanks

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barry360 View Post
    Will do! Thanks
    I must be doing something wrong, I placed the code is the css file and altered the code on the page it won't move?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Barry360 View Post
    I placed the code is the css file
    It's not online yet. Maybe you forgot to update the CSS file.

  7. #7
    Non-Member
    Join Date
    Apr 2013
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why dont you define the entire content in a container and set the css margin as

    margin:0 auto;

    what this actually means is that the margin from the left and margin from the right is taken as auto. When both left and right is defined as auto, the content is automatically centralized.

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sounds Easy!

    Quote Originally Posted by shamshadali View Post
    Why dont you define the entire content in a container and set the css margin as

    margin:0 auto;

    what this actually means is that the margin from the left and margin from the right is taken as auto. When both left and right is defined as auto, the content is automatically centralized.
    Thanks Shamshadali,
    This sounds easy, but my knowledge is limited,
    When I open the CSS file I can see where do I change the margin.

    .wr360_player
    {
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:relative;
    background:#FFFFFF;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    }

    #container
    {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:0;
    }

    .wr360_player .preloader .theme_panel
    {
    position:absolute;
    width:100%;
    bottom:0;
    left:0;
    margin-bottom:0px;
    background-color:#FFFFFF
    }

    .wr360_player .preloader .theme_header
    {
    }

    .wr360_player .preloader .theme_header .progress_bar
    {
    background:url(../img/load.gif) left top no-repeat;
    margin-left:3px;
    display:block;
    float:left;
    width:53px;
    height:53px;
    cursorointer
    }

    .wr360_player .preloader .theme_header .progress_bar .progress_num
    {
    position: relative;
    left: 3px;
    top: 18px;
    text-align:center;
    color:#A0A0A0;
    font-family:Arial;
    font-size:15px;
    }

    .wr360_player .preloader .theme_header a.watermark
    {
    margin-left:5px;
    margin-top:5px;
    display:block;
    float:left;
    width:1px;
    height:1px;
    cursorointer;
    display:none
    }

    .wr360_player .preloader .theme_panel .toolbar
    {
    position:relative;
    height:35px;
    margin: 0px auto -1px auto;
    width:110px;
    }

    .wr360_player .preloader .theme_panel .toolbar a.left_button
    {
    background:url(../img/basic/left_combined.png) no-repeat 0 0;
    display:block;
    float:left;
    width:22px;
    height:24px;
    margin: 4px 0 0 11px;
    cursorointer
    }

    .wr360_player .preloader .theme_panel .toolbar a.left_button:hover
    {
    background:url(../img/basic/left_combined.png) no-repeat -23px 0;
    display:block;
    float:left;
    width:22px;
    height:24px;
    margin: 4px 0 0 11px;
    cursorointer;
    }

    .wr360_player .preloader .theme_panel .toolbar a.play_button
    {
    background:url(../img/basic/play_combined.png) no-repeat 0 0;
    display:block;
    float:left;
    width:24px;
    height:24px;
    margin: 4px 0 0 11px;
    cursorointer
    }

    .wr360_player .preloader .theme_panel .toolbar a.play_button:hover
    {
    background:url(../img/basic/play_combined.png) no-repeat -24px 0;
    display:block;
    float:left;
    width:24px;
    height:24px;
    margin: 4px 0 0 11px;
    cursorointer
    }

    .wr360_player .preloader .theme_panel .toolbar a.pause_button
    {
    background:url(../img/basic/pause_combined.png) no-repeat 0 0;
    display:block;
    float:left;
    width:24px;
    height:24px;
    margin: 4px 0 0 11px;
    cursorointer
    }

    .wr360_player .preloader .theme_panel .toolbar a.pause_button:hover
    {
    background:url(../img/basic/pause_combined.png) no-repeat -24px 0;
    display:block;
    float:left;
    width:24px;
    height:24px;
    margin: 4px 0 0 11px;
    cursorointer
    }

    .wr360_player .preloader .theme_panel .toolbar a.right_button
    {
    background:url(../img/basic/right_combined.png) no-repeat 0 0;
    display:block;
    float:left;
    width:22px;
    height:24px;
    margin: 4px 0 0 11px;
    cursorointer
    }

    .wr360_player .preloader .theme_panel .toolbar a.right_button:hover
    {
    background:url(../img/basic/right_combined.png) no-repeat -23px 0;
    display:block;
    float:left;
    width:22px;
    height:24px;
    margin: 4px 0 0 11px;
    cursorointer;
    }

  9. #9
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The easiest way is to use float: left and then give a margin up to your requirement in your CSS file.


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
  •