Forum Moderators: open
I'm new to css and can't seem to manage to make a simple indent.
What I'm trying to do is the following (except using a bullet instead of an asterisk):
* Sample heading
Text aligned here
Text aligned here
Text aligned here
Among other things, I've tried using
ul {list-style: none;}
for the "Text aligned here" text, but it leaves a line space between the heading and the next line. I tried ul and li with a top-margin: 0, but that didn't have any effect on the extra space.
Any help is most appreciated.
Thanks.
You said that you wanted the layout to be like:
* Sample heading
Text aligned here
Text aligned here
Text aligned here
Where the Sample heading is a bullet, but nothing else is bulleted, right? Which part do you want indented? (Text align here...etc?)
Also:
for the "Text aligned here" text, but it leaves a line space between the heading and the next line
So I'm not sure whether you want the first line on the same line as 'Sample heading' or not.
If I'm guessing correctly, when you're saying list-style:none, then you don't want bullets?
If that's the case, use <DL><DT><DD> (and this is off the top of my head so don't flame me if the html is wrong)
<dl>
<dt>Sample heading</dt>
<dd>Text you wanted aligned here</dd>
<dd>Text you wanted aligned here</dd>
<dd>Text you wanted aligned here</dd>
</dl>
Does that work?
for the "Text aligned here" text, but it leaves a line space between the heading and the next line. I tried ul and li with a top-margin: 0, but that didn't have any effect on the extra space.
Have you tried
top-margin: 0;
bottom-margin: 0;
There are many ways to achieve this, but first a simple question: do you actually intend to use a list? Or do wish a "bulleted" heading followed by a paragraph?
The correct CSS declaration is {margin-top:0;}, not top-margin.... It's an easy mistake - a holdover from earlier attributes.
You may wish to reveiw the W3C CSS-2 List properties: [w3.org...]
Here is one example you might try:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Definition Lists for Fun & Profit!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Examples of XHTML Definition Lists, styled and unstyled" />
<style type="text/css" media="screen">
body{
margin:0;
padding:0;
font:12px georgia, "Book Antiqua", palatino, serif;
color:#000;
background:#fff;
}
dt {
padding:10px;
}
dd {
padding-right:10px;
}
dt.bottom {
margin-bottom:-10px;
}
dd.left {
margin:0;
padding-left:10px;
}
h1,h2 {
font-family:helvetica, arial, sans-serif bold;
color: #699;
background-color: transparent;
margin:5px 0 0 10px;
}
h1 {
font-size:24px;
}
h2 {
font-size:18px;
}
a:link{
color:#699;
background-color: transparent;
}
a:visited{
color:#699;
background-color: transparent;
}
a:active{
color:#000;
background-color: transparent;
}
a:hover{
color:#066;
background-color: transparent;
text-decoration:underline overline;
}
</style>
</head>
<body>
<h1>Woodworking Projects Are Fun!</h1>
<dl>
<dt><a href="bookcase_tutorial.htm">Build Me A Bookcase!</a> Lesson One.</dt>
<dd>Building a bookcase is a fun project. It is not complicated and can take many shapes and
sizes. Read more about this "easy-to-do" project in our Building a Bookcase Tutorial!</dd>
<dt><a href="trimwork.htm">Adding Fancy Trimwork</a> Lesson Two</dt>
<dd style="padding-bottom:10px;">The bookcase is almost complete: it's functional, it's
sturdy, it's also rather plain. Let's add some trim work to spruce it up. Afterall, it's
going to be standing in your hallway.</dd>
<dd style="padding-bottom:10px;">Metal trim can also be added as a replacement for wooden
trimwork or an enhancement. We will take a look at some of the ways metal trimwork can add
flare to your project.</dd>
<dd>Want even more trim options? Well we have plenty of examples to show you of
"not-so-commom" trimming options, including some very neat plastic (yes, plastic!) corner
gaurds that double as connectors for stacking additional bookcases!</dd>
<dt><a href="wood_finishing_tutorial.htm">Wood Finishing Made Easy</a> Lesson Three</dt>
<dd>Now that you have built your bookcase and added some fancy trim, now it's time to add
some stain and choose a finish. Are you ready for the Wood Finishing Tutorial? I know I
am!</dd>
</dl>
<h2>A Definition List: Indented Style!</h2>
<dl>
<dt class="bottom">• <a href="bookcase_tutorial.htm">Build Me A Bookcase!</a> Lesson One.</dt>
<dd class="left">Building a bookcase is a fun project. It is not complicated and can take many shapes and
sizes. Read more about this "easy-to-do" project in our Building a Bookcase Tutorial!</dd>
<dt class="bottom">• <a href="trimwork.htm">Adding Fancy Trimwork</a> Lesson Two</dt>
<dd class="left" style="padding-bottom:10px;">The bookcase is almost complete: it's functional, it's
sturdy, it's also rather plain. Let's add some trim work to spruce it up. Afterall, it's
going to be standing in your hallway.</dd>
<dd class="left" style="padding-bottom:10px;">Metal trim can also be added as a replacement for wooden
trimwork or an enhancement. We will take a look at some of the ways metal trimwork can add
flare to your project.</dd>
<dd class="left">Want even more trim options? Well we have plenty of examples to show you of
"not-so-commom" trimming options, including some very neat plastic (yes, plastic!) corner
gaurds that double as connectors for stacking additional bookcases!</dd>
<dt>• <a href="wood_finishing_tutorial.htm">Wood Finishing Made Easy</a> Lesson Three</dt>
<dd class="left">Now that you have built your bookcase and added some fancy trim, now it's time to add
some stain and choose a finish. Are you ready for the Wood Finishing Tutorial? I know I
am!</dd>
</dl>
</body>
</html>
In the above example, I added an negative value margin to "tighten-up" the default spacing between the <dt> and the <dd> - you could use margin-controlled headings and paragraphs to accomplish the same physical appearance; it all depends on the actual page structure and the nature of your content.
Ems can be used just as easily in place of .px - it's your preference.
There are other variations, but this might give you some ideas. - papabaer
Thanks to all of you for your wonderful help.
When I typed my example, the "Text aligned here" was aligned under the "S" in Sample Heading, but I guess it closed up when it posted. You did well to figure out what I meant.
Yes, the Definition List works great to do what I want, with a negative value on the margin to tighten the space up. I had totally forgotten about Definition Lists...
Thanks Papabaer for the heads up on the correct CSS declaration for margin-top. I mistyped it in my haste last night, but it's something I can easily do again if I'm not careful.
Thank you all again. I'm glad I found this forum.
Kathy
