Prev: Job offer: website css editing
Next: Remove white block from the right side of a page
From: Hendrik Maryns on 14 Jul 2008 04:36
Hi,

At this website:
http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml, just below the
section 'Sample .xmodmap file', you see some keys which are modeled with
<kbd>. The border looks nice in isolation, but as you can see, it
overlaps if they are just below each other. Is there a way to tell the
enclosing element to leave a little more space, such that the borders do
not overlap?

Thanks, H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
http://aouw.org
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html
From: dorayme on 14 Jul 2008 05:55
In article <g5f37b$dhc$1(a)newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02(a)sneakemail.com> wrote:

> Hi,
>
> At this website:
> http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml, just below the
> section 'Sample .xmodmap file', you see some keys which are modeled with
> <kbd>. The border looks nice in isolation, but as you can see, it
> overlaps if they are just below each other. Is there a way to tell the
> enclosing element to leave a little more space, such that the borders do
> not overlap?
>
> Thanks, H.

One thig that would solve your problem is to class the list items and
apply a bottom margin of, say, .4em. Here is a nexample without a class
and an inline style:

<li style="margin-bottom: .4em;">Ellipsis comes at
<kbd>AltGr+Shift+/</kbd>, easily reachable.

This will sort the clash of the bordered boxes.

Perhaps you know, you can simplify the css in an external or 'in the
document head' sheet by simply classing the ul and then

<ul class="kbd">

ul.kbd li {margin-bottom: .4em;}

saving having to class each list item.

--
dorayme
From: Hendrik Maryns on 14 Jul 2008 06:25
dorayme schreef:
> In article <g5f37b$dhc$1(a)newsserv.zdv.uni-tuebingen.de>,
> Hendrik Maryns <gtw37bn02(a)sneakemail.com> wrote:
>
>> Hi,
>>
>> At this website:
>> http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml, just below the
>> section 'Sample .xmodmap file', you see some keys which are modeled with
>> <kbd>. The border looks nice in isolation, but as you can see, it
>> overlaps if they are just below each other. Is there a way to tell the
>> enclosing element to leave a little more space, such that the borders do
>> not overlap?
>>
>> Thanks, H.
>
> One thig that would solve your problem is to class the list items and
> apply a bottom margin of, say, .4em. Here is a nexample without a class
> and an inline style:
>
> <li style="margin-bottom: .4em;">Ellipsis comes at
> <kbd>AltGr+Shift+/</kbd>, easily reachable.
>
> This will sort the clash of the bordered boxes.
>
> Perhaps you know, you can simplify the css in an external or 'in the
> document head' sheet by simply classing the ul and then
>
> <ul class="kbd">
>
> ul.kbd li {margin-bottom: .4em;}
>
> saving having to class each list item.

Thanks, but this solution would require me to add this to all containing
elements of kbd's. Isn't there something I can add to

kbd {
padding: 0px 1px 0px 1px;
border-width: 1px 2px 2px 1px;
border-style: solid;
}

such that this does not occur?

H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
http://aouw.org
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html
From: David Stone on 14 Jul 2008 10:18
In article <g5f9j3$mc8$1(a)newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02(a)sneakemail.com> wrote:

> dorayme schreef:
[snip]
> >
> > Perhaps you know, you can simplify the css in an external or 'in the
> > document head' sheet by simply classing the ul and then
> >
> > <ul class="kbd">
> >
> > ul.kbd li {margin-bottom: .4em;}
> >
> > saving having to class each list item.
>
> Thanks, but this solution would require me to add this to all containing
> elements of kbd's. Isn't there something I can add to
>
> kbd {
> padding: 0px 1px 0px 1px;
> border-width: 1px 2px 2px 1px;
> border-style: solid;
> }
>
> such that this does not occur?

Did you try margin-bottom?
From: Hendrik Maryns on 14 Jul 2008 11:52
David Stone schreef:
> In article <g5f9j3$mc8$1(a)newsserv.zdv.uni-tuebingen.de>,
> Hendrik Maryns <gtw37bn02(a)sneakemail.com> wrote:
>
>> dorayme schreef:
> [snip]
>>> Perhaps you know, you can simplify the css in an external or 'in the
>>> document head' sheet by simply classing the ul and then
>>>
>>> <ul class="kbd">
>>>
>>> ul.kbd li {margin-bottom: .4em;}
>>>
>>> saving having to class each list item.
>> Thanks, but this solution would require me to add this to all containing
>> elements of kbd's. Isn't there something I can add to
>>
>> kbd {
>> padding: 0px 1px 0px 1px;
>> border-width: 1px 2px 2px 1px;
>> border-style: solid;
>> }
>>
>> such that this does not occur?
>
> Did you try margin-bottom?

Yes. It does nothing.

I can change the li around the kbd, but then all other li's get the
margin as well, which is not as desired.

H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
http://aouw.org
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html
 |  Next  |  Last
Pages: 1 2
Prev: Job offer: website css editing
Next: Remove white block from the right side of a page