-
1. Re: Styling inline definition lists with CSS
Nancy O. Jun 16, 2011 11:27 AM (in response to phyllisj9)Some of your CSS is redundant, contradictory and unsupported by all browsers. As an example, I'm utterly confused by this rule and I'm sure most browsers will be too.
#folioInside dt {
color: #ffd264;
font-weight: bold;
margin-right: 6px;
display: run-in;
clear: both;
float: left;
}More on the Display property and why run-in is not a good choice here:
http://www.quirksmode.org/css/display.html
Keep things simple. You'll have far fewer problems with pre-IE9 and other lesser browsers.
More on Definition Lists and how to style them:
http://www.maxdesign.com.au/articles/definition/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
2. Re: Styling inline definition lists with CSS
phyllisj9 Jun 16, 2011 12:04 PM (in response to Nancy O.)Thanks,
Here's a page where I've tried to simplify matters. I'm only going to try to do the main experience section inline (and just do the rest as a paragraph with a class toward the front).
http://phyllis.fellowshipx.org/ResumeAttempt2.html
Any idea how I could get the year and the company name on the same line? I've got display inline in there right now, but it has no effect (so could remove it).
Would tables be the best solution?
Funny, I worked on this new sample before I saw your page. I'm trying to mimic #7 on the link you sent me (though without the rule line). Can't get it to work though. And their output sample is actually an image (so maybe it doesn't work!).
Thanks, Phyllis
-
3. Re: Styling inline definition lists with CSS
Nancy O. Jun 16, 2011 12:23 PM (in response to phyllisj9)This code works fine for me in Firefox, Chrome & IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Definition List Example #7</title> <style type="text/css"> dl.event { margin: 2em 0; padding: 0; font-family: georgia, times, serif; } .event dt { position: relative; left: 0; top: 1.1em; width: 5em; font-weight: bold; } .event dd { border-left: 1px solid #000; margin: 0 0 0 6em; padding: 0 0 .5em .5em; } </style> </head> <body> <dl class="event"> <dt>23 March</dt> <dd>Car club meeting</dd> <dd>7 pm</dd> <dd>See a wide range of classic cars on display... </dd> <dt>13 June</dt> <dd>Cake stall</dd> <dd>12 pm</dd> <dd>Cakes of every type. All proceeds go to the... </dd> </dl> </body> </html>Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
4. Re: Styling inline definition lists with CSS
phyllisj9 Jun 16, 2011 12:29 PM (in response to Nancy O.)I finally got it!!!
I had to replace one piece of their code at a time. Finally figured out that if you set a line-height on DL, it messes up the spacing. I can do without the line-height.
Thanks for your help. No one even responded to me on other forums.
Thanks, Phyllis
-
5. Re: Styling inline definition lists with CSS
phyllisj9 Jun 16, 2011 12:44 PM (in response to phyllisj9)Any idea why the dt has to be set 1.1 em from the top? Changing that value messes up the spacing, but I can't figure out a way to make adjustments. I'm hoping to eventually figure out some way to use line-height in this also because it would look better.
Thanks, Phyllis
-
6. Re: Styling inline definition lists with CSS
phyllisj9 Jun 16, 2011 12:55 PM (in response to phyllisj9)Discovered I can't make any adjustments to the spacing at all or it's no longer lined up. And that's spaced too far apart to be used in my online resume.
Can you think of any other way to write this? Or are tables my best bet?
Thanks, Phyllis
-
7. Re: Styling inline definition lists with CSS
Nancy O. Jun 16, 2011 1:14 PM (in response to phyllisj9)No one even responded to me on other forums.
I don't know which forums you posted to. For code and layout questions, check out the Dreamweaver General Discussion Forum
http://forums.adobe.com/community/dreamweaver/dreamweaver_general?view=discussions
This removes line space between definitions:
event .dd {
padding: 0;
}
This moves title down
event .dt {
top: 2.25em;
}
Also experiment with margins.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
8. Re: Styling inline definition lists with CSS
phyllisj9 Jun 17, 2011 5:27 AM (in response to Nancy O.)Thanks Nancy,
The other forums weren't part of Adobe (posted on webdeveloper).
I appreciate all your input! I'll keep playing around with it. It's possible I'll opt for tables to be on the safe side as I'm afraid the inline spacing is a bit ornery on different browsers. I'm probably just too anti-table since they've been preached against for a long time now. But my year/job info is more or less tabular data anyway. I definitely wouldn't lay out page designs with a table (using CSS only for that).
Funny I got through putting together a Javascript section on my portfolio site faster than this one bit of HTML....
Thanks for your help,
Phyllis




