/    Sign up×
Community /Pin to ProfileBookmark

Indented Lists

Hello there. I have a list of items for a store. In the list I want to increase the indent of the Reminding Reminder System bullet so it is kind of a sub category of Reminder. How would I do this in my css? Here is the code:

[code=html]<div id=”column_2″>
<div class=”column_headings”>
Client Communication Products
</div>
<div class=”section_headings”>
Sympathy Cards
</div>
<ul>
<li>Postcard, Tan Parchment</li>
<li>French-Fold,Blue Parchment</li>
</ul>
<div class=”section_headings”>
Postcards and Information Cards
</div>
<ul>
<li>Reminder</li>
<li id=”increased_indent”>Revolving Reminder System</li>
<li>Klient</li>
<li>Economy Reminder</li>
<li>Computer Reminder</li>
<li>Pet Ref Cards (Veterinary Referral)</li>
<li>Christmas</li>
</ul>
<div class=”section_headings”>
Educational Brochures
</div>
<ul>
<li>Groom-O-Gram</li>
<li>Display Holder</li>
<li>Learning to Brush Your Pet</li>
<li>Training Student Guide</li>
</ul>
<div class=”section_headings”>
Pet Release Forms
</div>
<ul>
<li>General</li>
<li>Fuzzy</li>
<li>Senior</li>
</ul>
<div class=”section_headings”>
Calendar Paws
</div>
<div class=”section_headings”>
Little Angel Awards
</div>
<div class=”section_headings”>
Gift Certificates
</div>
<div class=”section_headings”>
Posters
</div>
<div class=”section_headings”>
Super Sampler Packs
</div>
<div class=”section_headings”>
Groomers Club
</div>
<div class=”section_headings”>
Minit Money Maker Programs
</div>
<ul>
<li>K-9 Toothbrushing</li>
<li>Pup Potty Training</li>
<li>Whine &amp; Dine</li>
<li>Shed-Less</li>
<li>Reduce Shedding</li>
</ul>
<div class=”section_headings”>
Counter Signs
</div>
<ul>
<li>Tipping</li>
<li>Flea Funeral</li>
<li>Emergency Contact Information</li>
</ul>
<div class=”section_headings”>
Specialty Items
</div>
<ul>
<li>Kanine Kookie Kutters</li>
<li>Display Holder,GroomOgrams</li>
<li>Grooming Caddy</li>
</ul>
</div>[/code]

CSS:

[CODE]/* CSS Document */

body{
background-color:#FFFFFF;
}

#wrapper{
width:720px;
height:auto;
margin-left:auto;
margin-right:auto;
}

#content_wrapper{
width:720px;
}

#header{
width:650px;
height:auto;
margin-left:auto;
margin-right:auto;
}

#column_1{
background-color:#B0CC99;
width:230px;
float:left;
height:1070px;
}

#column_2{
background-color:#F6E8B1;
width:230px;
margin-left:auto;
margin-right:auto;
height:1070px;
}

#column_3{
background-color:#B7CA79;
width:230px;
float:right;
height:1070px;
}

.column_headings{
font-family:Arial;
font-weight:bold;
font-size:18px;
text-transform:uppercase;
text-align:center;
background-color:#89725B;
color:#FFFFFF
}

.section_headings{
font-family:Arial;
font-size:16px;
font-weight:bold;
margin-bottom:5px;
margin-top:5px;
background-color:#677E52;
color:#FFFFFF;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
}

#column_1 ul{
margin:10px;
padding:0px;
}

#column_1 li{
font-family:Arial;
font-size:12.5px;
margin-top:0px;
margin-left:10px;
}

#column_2 ul{
margin:10px;
padding:0px;
}

#column_2 li{
font-family:Arial;
font-size:12.5px;
margin-left:10px;
}

#column_3 ul{
margin:10px;
padding:0px;
}

#column_3 li{
font-family:Arial;
font-size:12.5px;
margin-left:10px;
}

#increased_indent li{
margin-left:20px;
}[/CODE]

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@jogolApr 05.2007 — why not make it a nested list?

[CODE]
<ul>
<li>Reminder
<ul>
<li>Revolving Reminder System</li>
</ul>
</li>
<li>Klient</li>
<li>Economy Reminder</li>
<li>Computer Reminder</li>
<li>Pet Ref Cards (Veterinary Referral)</li>
<li>Christmas</li>
</ul>[/CODE]


your code also suffers from divitis...

why use <div class="column_headings"> and <div class="section_headings"> when there´s the h1, h2, h3, etc. tags?

[CODE]
<h1>Client Communication Products</h1>
<h2>Sympathy Cards</h2>[/CODE]


simply apply the css to h1 and h2 like you´d do with .column_headings and .section_headings.

use [B]semantically correct markup[/B].
×

Success!

Help @bp_travis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...