text aligned to far to left of margin, what is the code to change this in css?

• 

  markjagdev · Member · Apr 18, 2012 at 2:21 am

  • Copy link
  • Add topic to favorites

  Hi guys,

  All my text that I write in the text editor appears right to the edge of the left margin on all pages. See this example: http://evolutionarycities.com/services/

  Is there some css code that can help indent all text so it sits slightly to the right of the left edge of the dimmed back panel?

  Thanks for all your help in advance.
  mark
  Blog url: http://evolutionarycities.wordpress.com/

• 

  kardotim · Member · Apr 18, 2012 at 11:02 am

  • Copy link

  Please try to add this CSS code into your CSS editor.

  p, fieldset, table {
  margin-bottom: 15px;
  margin-left: 10px;
  }
  
  div.sharedaddy, #content div.sharedaddy, #main div.sharedaddy {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  clear: both;
  margin-left: 10px;
  }
  .wf-active h3 {
  font-size: 16px;
  margin-left: 10px;
  }

• 

  markjagdev · Member · Apr 20, 2012 at 1:32 am

  • Copy link

  Thanks Kardotim,

  I just got the time to try out your guidance. It has worked but their are a few challenges. If you look at this page: http://evolutionarycities.com/about/

  .. you will see that the prezi is also slightly to the left which is something I don’t want, the right side of the prezi now overflows off the shadowed/opaque background. I need css code that will only indent the text including the numbers and bullet points.

  The numbers, on the page I link to above, and bullet points i.e. at the bottom of this page: http://evolutionarycities.com/cities-of-the-future/ –> don’t get indented.

  Please help! :)

  Thank You.
  mark

• 

  kardotim · Member · Apr 20, 2012 at 8:42 am

  • Copy link

  The CSS code below should center your prezi slider a bit.

  iframe {
  z-index: 0;
  margin-left: -7px;
  }

  And use this part to fix your bullet points.

  .post-content ul li {
  background: url(images/bullet.jpg) top left no-repeat;
  padding: 0 0 0 15px;
  margin-left: 10px;
  }

  As you can see I added margin-left to increase or decrease the margin position. Feel free to adjust this number to change the position.

• 

  markjagdev · Member · Apr 20, 2012 at 10:30 am

  • Copy link

  Hi Kardotim,

  Using your code the prezi here: http://evolutionarycities.com/about/
  –> is still no change and indented by the same amount as the body text – even when I change the -7px to -1 or even down to 0px

  The numbered text now indents to the left but only for headings i.e. see the headings here: http://evolutionarycities.com/services/ as opposed to the numbers in the body text at the bottom of the page here: http://evolutionarycities.com/about/

  The bullet points now don’t show up at all.. see here for the last two sentences that are meant to be bullet pointed: http://evolutionarycities.com/cities-of-the-future/

  Can you re-write the code for what you have suggested so far so I don’t keep adding amended versions of code on top of what you have already given me? I can then just replace what you have given me with something that works, is that possible?

• 

  staff-blorbo · Staff · Apr 20, 2012 at 7:56 pm

  • Copy link

  Instead of the whole “.iframe” section above, try just this:

  iframe {
      margin-left: -7px;
  }

  Instead of the whole “.post-content ul li” section above, try just this:

  .post-content ul {
      margin-left: 10px;
  }

  and:

  .post-content ol {
      margin-left: 10px;
  }

  Adjust the px amount as necessary.

• 

  markjagdev · Member · Apr 20, 2012 at 10:40 pm

  • Copy link

  Everything seemingly works good now except… the numbers on the about page are replaced with bullet points and they need to be indented see here: http://evolutionarycities.com/about/

• 

  staff-blorbo · Staff · Apr 20, 2012 at 11:01 pm

  • Copy link

  They’re still numbers, but the numbers themselves are hanging over the content edge, leaving just the decimals behind.

  Try increasing the margin-left on .post-content ol to 25px.