SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trying to center my website

    Hello all. My website is slightly to the left of center and I am trying to figure out how to move it over to the right 20 px. Could someone help me do this? The site is in my signature.

    Here is the style.css:

    Code:
    <p style="font-size: 16px; color: #868686; text-align: left;"><img class="size-full wp-image-2571 alignright" style="margin-left: 30px;" title="team" src="http://mindfulnessangermanagement.com/wp-content/uploads/2011/08/Family.jpg" alt="positive emotions" width="365" height="242" />Our 8 Week <em><a style="color: #3e74ac; text-decoration: none;" href="http://mindfulnessangermanagement.com/anger-management-programs/">Mindfulness Approach Anger Management™</a></span></em> program can help you:</p>
    <ul class="homelist">
    <li style="text-align: left; font-size: 14px;">get at the root causes of anger and release yourself from its grip</li>
    	<li style="text-align: left;">improve interpersonal and relationship skills</li>
    	<li style="text-align: left;">become less reactionary and triggered to anger</li>
    	<li style="text-align: left;">improve interpersonal and relationship skills</li>
    	<li style="text-align: left;">find more satisfaction and joy in your life</li>
    </ul>
    <a href="http://mindfulnessangermanagement.com/anger-management-programs/"><img class="size-full wp-image-2648 alignleft" style="margin-left: 47px;" src="http://mindfulnessangermanagement.com/wp-content/uploads/2011/10/downloadnow.gif" /></a>
    
    &nbsp;
    
    &nbsp;
    
    <span style="font-size: large; font-weight: bold; color: #3ca328;">How Our Program is Unique</span></strong>
    
    Rather than simply present technical information about anger, our 8 week anger management program is designed to help you achieve deep and lasting changes. <em>Mindfulness Approach Anger Management™</em> engages you with daily processes that help you get to the heart of anger, to loosen its grip, and to live with more dignity and joy. 
    
    Each week there is a reading, a workshop module, mindfulness practices, and daily 'in the field' anger management exercises. The program is presented in an easy to follow, user friendly format, so you will actually accomplish the work.
    <div class="testimonial"></div>
    <div class="testimonial">
    
    <span style="color: #3e74ac; font-size: 15px; font-family: tahoma,palatino; font-style: italic;">“Mindfulness Approach Anger Management™ is a brilliantly designed program, coming from the fiery inner-depths of someone who has truly transformed his own volcanic anger into powerful wisdom. I can assert with confidence that, if you follow this course faithfully, you too will transform, finding peace and joy in your life, even if before it was littered with the wreckage of your anger.”</span>
    
    <span style="font-style: italic; font-size: 13px;">- Dr. Timothy Walker</span>
    <span style="font-style: italic; font-size: 9px;">Psychotherapist and author of
    <strong>The Healing Circle</strong></span>
    
    </div>
    <div class="testimonial">
    
    <span style="color: #3e74ac; font-size: 15px; font-family: tahoma,palatino; font-style: italic;">"Mindfulness is at the cutting edge in the field of anger management. <em>Mindfulness Approach Anger Management</em>™  is an excellent resource for utilizing mindfulness practice as an effective anger management tool."</span>
    
    <span style="font-style: italic; font-size: 13px;">- Dr. Richard Pfeiffer</span>
    <span style="font-style: italic; font-size: 9px;">President
    <strong>National Anger Management Association</strong></span>
    
    </div>
    <span style="font-size: large; font-weight: bold; color: #3ca328;">Mindfulness Meditation: A Powerful Antidote to Chronic Anger</span>
    
    If anger management problems are sabotaging your quality of life and destroying your peace of mind, there is a strong and effective antidote—one that’s been implemented for thousands of years and has been proven more recently through scientific research. It’s accurate to say that mindfulness is a centuries old and yet completely up to date anger management methodology. Mindfulness meditation is actually a very simple technique, and is especially effective in relieving the anger burdened mind.
    <blockquote>Studies show that mindfulness helps anger management issues in a variety of ways. Extensive research shows that mindfulness increases emotional well being, improves overall satisfaction with life, creates a more flexible mind that is less easily triggered to anger, and more.</blockquote>
    This research supports the thousands of years of anecdotal evidence, proving what the ancients have known all along: <em><strong>mindfulness works.</strong></em>
    
    <a href="http://mindfulnessangermanagement.com/anger-management-programs/"><img class="size-full wp-image-2648 alignleft" style="margin-left: 47px;" src="http://mindfulnessangermanagement.com/wp-content/uploads/2011/10/downloadnow.gif" /></a><script type="text/javascript">
    setTimeout(function(){var a=document.createElement("script");
    var b=document.getElementsByTagName('script')[0];
    a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0011/8161.js";
    a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
    </script><br/>
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    First and for most using inline styles is extremely bad practice as it makes it much harder to update in the long run, the above code you said was your CSS but all i see is a random snippet of HTML which doesn't help us to help you as there is nothing in the inline styles that suggests your page is been centered.

    Could you please review this and post all of your CSS and HTML that you can that way we will be help to help get your markup and CSS more semantically valid.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you add a background-color to #wrapper you will see that the main part of the site is perfectly centred.

    Your inner elements however don't stretch the full 100px width and therefore look off centred a little.

    If you were perhaps to give the wrapper a suitable subtle background color it would then look centred. Or alternatively resize the wrapper smaller to fit the contents.

    e.g.
    Code:
    #wrapper {
       width: 920px !important;
    }
    #primary, #secondary {
        width: 200px;
    }
    I've only tested that on the home page so if you have larger elements on other pages you will need to take that into consideration.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Could you please review this and post all of your CSS and HTML that you can that way we will be help to help get your markup and CSS more semantically valid.
    The link is in the signature as mentioned
    The site is in my signature.

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    The link is in the signature as mentioned
    Has been a long day of IE6 debugging, guess my head needs a little rest

  6. #6
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick way to get the result you want: In your css file, just add 20 px worth of padding and it'll bump your main content text over 20 px (new code in red)....

    .entry-content, .entry-summary {
    font-size: 13px;
    line-height: 1.6em;
    padding-left: 20px;
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by binarykern View Post
    Here's a quick way to get the result you want: In your css file, just add 20 px worth of padding and it'll bump your main content text over 20 px (new code in red)....

    .entry-content, .entry-summary {
    font-size: 13px;
    line-height: 1.6em;
    padding-left: 20px;
    }
    Thank you for this solution. It's the most doable straightforward solution in the post, but unfortunately it creates a problem of compressing the text on my front page, which doesn't look good. I'm going to let it go for now, as it seems too complicated for my skill level.
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone for your help. Unfortunately I haven't been able to any of the strategies people offered to work, as my skill level with css is minimal, not enough to do anything more than add a line or two of code. I'll have to abandon the plan for now and have a designer look at it later on.
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by fifthhouse View Post
    Thanks everyone for your help. Unfortunately I haven't been able to any of the strategies people offered to work, as my skill level with css is minimal, not enough to do anything more than add a line or two of code. I'll have to abandon the plan for now and have a designer look at it later on.
    Did you try my code? It couldn't be any simpler. What problems are you having with it?

    The only issue I can see is on the purchase the program page where you have made the page wider than the others (not a good approach at the best of times). However you could change the code just for that page.

    Code:
    #wrapper {
       width: 920px !important;
    }
    #primary, #secondary {
        width: 200px;
    }
    .page-id-2310 #wrapper {
       width: 1000px !important;
    }
    All you have to do is add that code at the end of the css file. No need ot chnage anything else.


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
  •