PDA

View Full Version : Is there anyway to indent text within an Unnumber List in CSS



ianlyy
Apr 27th, 2007, 01:58 PM
Hello.., i am kinda new in CSS..

I modified a template by that using the WYSIWYG edtior but it gives indentication problems.., when i press space..

Thus.., someone suggested i should try foarnt the very DIV using CSS.., but i have never really learn css before..

I heard that using <li> can somehow solves the problem.., i wonder does this consider coding abuse..?

Anyhow.., i had decided to try to tackle the CSS file.. :)

Heres the temporary working file together with Andreas CSS for your better reference:

http://www.ianlyy.com/index4onlineversion.html

http://www.ianlyy.com/andreas08.css

Text are not right in indentication which i need to work on are the ones in the unnumber list and the red colour text note..

Any idea on how to "push" those words with CSS , such as, "think" and "depends" same position under thw word "Dare" in first un-number list?

Thanks very much.. :)

Excavator
Apr 27th, 2007, 05:37 PM
Goodmorning ianlyy,
That's not really a list. I think a Definition List would be more appropriate there. Try this:
CSS:


#container #content .about {
width: 400px;
}
#container #content .about dt {
background: url(http://www.nopeople.com/homepage/ball.gif) no-repeat left;
text-indent: 20px;
}
#container #content .about dd {
margin-left: 50px;
}


Markup:

class=c5>of, a blog, affiliate links and pages. Feel free to browse around my
site by clicking the menus above. The blog is the main focus of my site, leave
comments as you wish, but flames are not welcome, thank you.<BR><BR></SPAN>
<dl class="about">
<dt class="c6">Title:</dt>
<dd>
Dare to dream, dare to achieve, the reason
for chosen this title is because i think we all should have our own dream,
whether to achieves the goal or not is depends on individual then. Atleast a
dream is something to start with.
</dd>
<dt class="c6">Blog:</dt>
<dd>
Moo Moos Milky Way, lol, i have always
interested on stuff that related to Astronomy, and cows are related to milky
way. My blog will be focus on variety of topics, very broad and wide as the
milky way.. :)
</dd>
<dt class="c6">Affiliates:</dt>
<dd>
Well., i do need a little income, do i?
:) I am planning to add the links on the dedicate pages after my application
has been approved. One of them is Amazon.com.
</dd>
</dl>


<SPAN class=c8><SMALL>*Note to the locals (Malaysians),
unfortunately some items from Amazon.com may not be shipped to our country. Such
as videos games and so

ianlyy
Apr 27th, 2007, 05:53 PM
Thanks for the prompt response.. :)

Hey, your code really makes those words indented.., thanks but, original it was an un-numberlist..


<ul>
<li><span class="c6">Title:</span> Dare to
dream, dare to achieve, the reason for chosen this title is because i
think we all should have our own dream, whether to achieves the goal or
not is depends on individual then. Atleast a dream is something to
start with.</li>
</ul><ul>
<li><span class="c6">Blog:</span> Moo Moos
Milky Way, lol, i have always interested on stuff that related to
Astronomy, and cows are related to milky way. My blog will be focus on
variety of topics, very broad and wide as the milky way.. :) </li>
</ul><ul>
<li><span class="c6">Affiliates:</span> Well.,
i do need a little income, do i? :) I am planning to add the links on
the dedicate pages after my application has been approved. One of them
is Amazon.com. </li>
</ul> <span class="c7"> </span>

Is that possible to indent a list using CSS??

Thanks again...

Excavator
Apr 27th, 2007, 06:28 PM
It's an Unordered List and I still think your misusing it. Your Title, Blog and Affilitates descriptions are not really a list. It really is the perfect situation for a Definition List. (http://www.maxdesign.com.au/presentation/definition/)

In the code I showed you, change the dd margin to indent the text as little or as much as you want.
#container #content .about dd {
margin-left: 50px; /*<---change this number*/
}

To indent a ul put margin on ul or li, whichever your trying to move. It's not going to work very well in your case since Title and the sentences your wanting indented are all enclosed in the same li tag. See the affect this CSS has -

#content li {
margin: 0 0 0 50px;
}

ianlyy
Apr 27th, 2007, 07:10 PM
You are right about the code won't work well for my case.. :(

Maybe i should just took your advice by using the dl instead... :D I 'll see what can i do.. ;)

Thanks again..