/    Sign up×
Community /Pin to ProfileBookmark

padding question

Copy linkTweet thisAlerts:
May 18.2004

I’ve been having some trouble with [url=http://www.samingle.com/msdredo.htm]this[/url] page. the area that is causing difficulty it the left nav. I want to have the sub-ul’s indent as they are now, but have the borders on them extend all the way across the 180px of the left nav. Any on ideas how I can do this? I could use text-indent, but that doesn’t indent the text for multiple lines. Any ideas?
[b]edit:[/b]
I’ve just looked at this page in IE for the first time, and I realize it is 4 px off on the left nav, but its IE, so I won’t care for now (just eval this question from as if you’d only seen this page in a browser)

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@SamauthorMay 19.2004 — I was able to fix it by adding spans and putting this chunk of code in. I'd prefer to lose the spans entirely, since they're semantically meaningless here, but if thats not possible, my next goal would be to lessen/clean up the css here:
[code=php]#extraNav ul li ul li span{display:block;padding-left:10px;}
#extraNav ul li ul li ul li span{display:block;padding-left:20px;}
#extraNav ul li ul li ul li ul li span{display:block;padding-left:30px;}
#extraNav ul li ul li ul li ul li ul li span{display:block;padding-left:40px;}
[/code]
I'm wondering if there's any way to simplify this down into 1 rule (with the 10px padding increase for each level of unordered lists.
Copy linkTweet thisAlerts:
@Ben_RogersMay 20.2004 — Use ul {margin: 0; } with li {padding: 10px; }. That's all you need to do, as it will build up because the inner lists are nested within li's.
Copy linkTweet thisAlerts:
@SamauthorMay 20.2004 — that was what I originally had, but it breaks the borders (the borders don't extend the entire width of the container, since they are nested within padded line items
Copy linkTweet thisAlerts:
@Ben_RogersMay 20.2004 — Heh, this would be so much easier if it weren't for those borders. I'm working on something, but I'll have to try again tomorrow... I gotta go right now.

EDIT: I just realized something that might work, however only the first and second tiers appear correctly, the third won't show as you like.
<i>
</i>&lt;style&gt;
ul { padding: 0; margin: 0; list-style: none; background: blue; }
li {border-bottom: solid thin; padding: 0; }
li ul li { background: red; padding-left: 10px; }
li ul li ul {background: yellow; padding-left: 20px; left: 0; }
&lt;/style&gt;

&lt;ul&gt;
&lt;li&gt;Lorem&lt;/li&gt;
&lt;li&gt;Ipsum &lt;ul&gt;
&lt;li&gt;Lorem&lt;/li&gt;
&lt;li&gt;Ipsum
&lt;li&gt;Ipsum &lt;ul&gt;
&lt;li&gt;Lorem&lt;/li&gt;
&lt;li&gt;Ipsum&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;Lipsum&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;Lipsum&lt;/li&gt;
&lt;/ul&gt;


EDIT 2: I'm not sure if this is valid or not, but if you don't put the second tier lists within an li, it's simple:
<i>
</i>&lt;style&gt;
ul { padding: 0; margin: 0; list-style: none; background: blue; }
ul li {border-bottom: solid thin; padding: 0; }
ul ul li { background: red; padding-left: 10px; }
ul ul ul li { background: yellow; padding-left: 20px;}
&lt;/style&gt;

&lt;ul&gt;
&lt;li&gt;Lorem&lt;/li&gt;
&lt;li&gt;Ipsum&lt;/li&gt;
&lt;ul&gt;
&lt;li&gt;Lorem&lt;/li&gt;
&lt;li&gt;Ipsum
&lt;li&gt;Ipsum&lt;/li&gt;
&lt;ul&gt;
&lt;li&gt;Lorem&lt;/li&gt;
&lt;li&gt;Ipsum&lt;/li&gt;
&lt;/ul&gt;
&lt;li&gt;Lipsum&lt;/li&gt;
&lt;/ul&gt;
&lt;li&gt;Lipsum&lt;/li&gt;
&lt;/ul&gt;
Copy linkTweet thisAlerts:
@SamauthorMay 20.2004 — that second would ruin it semantically. It really needs to support unlimited tears (as my current solution does). Its just quite cumbersome adding all those spans in there (this will eventually be serverside generated, but thats beside the point)
Copy linkTweet thisAlerts:
@Ben_RogersMay 20.2004 — Heh, well random spans aren't too semantic either, but it doesn't matter because the second solution is invalid XHTML... too bad, if it weren't so, this problem would be THAT much easier to solve.
×

Success!

Help @Sam 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.24,
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,
)...