Help - Search - Members - Calendar
Full Version: margin
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
minidiapolis
Hello,

I need to move some text over. I have tried

<p [text-indent: 35%] text </p>

and

<p style = margin-left: 35%> text </p>

but the text won't move.
pandy
Both should work (margin depending on the situation). So should padding. Can you post the URL to a sample page so we can see what you are up to?
Darin McGrew
QUOTE
Both should work
Not without fixing the syntax errors...
George in TX
You could use inline CSS with the <p> tag like this:

<p style="text-indent: 35%">Text here.</p>

However that's not the recommended way to do it. If you need to apply this to several paragraphs the inline style will get very bulky. Instead in the <head> section of the document put this:

<style type ="text/css">
p.moved {text-indent: 35%;}
</style>

Then where you need to apply this style you would use:

<p class="moved">Some text here with a wide left margin</p>
pandy
QUOTE(Darin McGrew @ Oct 18 2006, 10:41 PM) *

QUOTE
Both should work
Not without fixing the syntax errors...

You think? Maybe you are right. tongue.gif

Sorry, minidiapolis. I didn't look too close. You need to quote the values and those square brackets have to go. You can see the correct syntax here.
http://www.htmlhelp.com/reference/css/styl...l.html#inlining
George is right though. Inlined CSS should be a last resort.
minidiapolis
I thought about using css, but it is only for one paragraph. The page is http://www.cs.iupui.edu/~mjsmith//resume under the freelance work. Please excuse the rest of the page. I'm still working on it.
Thanks.

Mindy
pandy
You already use CSS. You have both inline CSS (in style attributes) and a style block in head. smile.gif

You just need to get the quotes right. You have done it right in other places.

Wrong:
<p style = margin-left: 25%>

Right:
<p style="margin-left: 25%">


But, as George said, it's better to give the P a class and put the CSS in the style block you already have in head.
minidiapolis
I'm sorry, I'm relatively new to CSS. I did some practice pages and sometimes I would forget the quotes and it worked okay. What is the rule for using quotes?

Also, in the same section I put it in a <span></span> because I thought it forces that section to stay together but on the page why is there a space?
pandy
QUOTE(minidiapolis @ Oct 19 2006, 01:40 AM) *

I'm sorry, I'm relatively new to CSS. I did some practice pages and sometimes I would forget the quotes and it worked okay. What is the rule for using quotes?

This part is actually HTML. 'style' is a HTML attribute. Its value is CSS though. Does that make sense?
HTML attribute values need to be quoted with some exceptions. I think it's good practice to always quote even if it isn't necessary. If nothing else it's more consistent. In this case you have to quote because the value contains both spaces and funky characters. You can read the rules here.
http://www.htmlhelp.com/reference/html40/s...html#attributes

QUOTE

Also, in the same section I put it in a <span></span> because I thought it forces that section to stay together but on the page why is there a space?

I don't understand what you mean, but I'm sure SPAN won't do it. Hold together how? Also, SPAN is an inline element and you have nested a P that is a block level element inside it. You can't do that (read the page I linked to). You also have half a list in there. You can't use list items, LI, on their own. They must be contained in a wrapper element that tells what kind of list it is, UL or OL. http://www.htmlhelp.com/reference/html40/lists/li.html

A basic unordered list looks like this and it can't be in a SPAN.
CODE
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>


The validator helps you with those things. It can be scary at first, but take the errors one by one, follow the links and read about the different elements and you'll soon get the hang of it.
http://www.htmlhelp.com/tools/validator/
ShadowyBob
pandy,
QUOTE
A basic unordered list looks like this and it can't be in a SPAN.

This works:
CODE
<span style="color: blue; font-style: oblique">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</span>
Darin McGrew
QUOTE(ShadowyBob @ Oct 20 2006, 03:39 PM) *
This works:
CODE
<span style="color: blue; font-style: oblique">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</span>
So it does, at least in the browsers I tried it with. But it works only because the browsers do error correction the way you expect them to.

Is there any reason not to use valid markup (a div rather than a span)?
ShadowyBob
QUOTE
Is there any reason not to use valid markup (a div rather than a span)?

None at all Darin! Just making a point. But then I wasn't aware of things like 'error-correction'. Thanks for that.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.