i_love_sailors
10-14-2005, 01:10 AM
Is there any way in CSS to indent all of the text without having to do a blockquote? I found the blockquote indents too much for my website's layout.
Also, is there any way to push the text down with CSS or do I just have to put a hard return in there?
If you need to see my code just let me know, and tell me which button to push on the menu so you can see it (it's been FOREVER since I posted here!).
hobokenjam
10-14-2005, 08:02 AM
I'm not 100% sure that I understand what you are asking but if this doesn't answer your question, post a link and I'll see if I can help:
If you want to indent ALL of the text on your page, you can use CSS to set all of the margins or padding for the <p> tag like this...
p {
margin: 10px;
}
The result of the above is that all of the paragraph text (i.e., anything that starts with <p>) will have a 10 pixel margin on all sides. Remember that margins differ from padding in that the margin is the space outside of the object's border and padding is the space inside the object's border. In this case the object is the paragraph text.
Both margins and padding accept individual values too, so you can set the left, right, bottom and top margins or padding individually. There are two ways to do this, the first is to use the:
p {
padding-top: 5px;
padding-bottom: 3px;
padding-right: 12px;
padding-left: 20px;
}
You can also use the 'shorthand' method, so the above could be written as:
p {
padding: 5px 12px 3px 20px;
}
When you use the shorthand method, you include the values in order: top, right, bottom, left.
An important rule about the shorthand method to remember is that if you include only one value, it applies to all of the sides. Including two values sets the top and bottom (margins or padding) to the first value, and the left and right to the second value. If you use three values, the first value sets the top, the second value sets the left and right, and the third value sets the bottom.
To answer your second question, if you want to move text down a page to specific point on the page use positioning and set the text in a <div>. I use ids generally, but you can create a class to handle this as well. The id way is preferred for positioning. When using ids you insert a # (pound sign) before the name of the id in the stylesheet rather than a . (period) that you normally use for creating classes. Here is an example:
On your stylesheet or in the style tags in the head of your page add:
#maintext {
position: absolute;
top: 200px;
}
p {
margin: 10px;
}
Now in the body of the page set your text as follows:
<div id="maintext">
<p>Some text here</p>
<p>Some more text</p>
<p>Blah, blah, blah...</p>
</div>
The result of this code is that the text block will start 200 pixels down the page (regardless of the other elements on the page). Because the margins of the paragraphs are set to 10px all around, the first paragraph actually starts at 210 pixels from the top of the window.
Positioning can also accept the value of relative, static or fixed. I recommend that you stay away from fixed because it doesn't work in all browsers. Relative is useful if you want to have the object's position be affected by the elements around it. When you use 'relative' positioning it sets the position of the object related to the position that it would normally appear in the window. In other words, if you have text that appears just below an image that is 200 pixels in hieght and you set the position to relative and top 200 pixels, the text will simply move 200 pixels down from the bottom of the image. Therefore, the text will start 400 pixels from the top of the image.
Hope this is helpful...
i_love_sailors
10-14-2005, 01:40 PM
THANK YOU! That is exactly what I was asking.
Monkey Bizzle
10-14-2005, 04:58 PM
There actually is a text-indent property for CSS.
http://www.w3schools.com/css/pr_text_text-indent.asp
i_love_sailors
10-24-2005, 01:59 AM
I need the entire body text moved over, not just the first line. The padding and margins in the forst reply is what I needed. =)