Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   spacing display: inline elements (http://www.velocityreviews.com/forums/t958266-spacing-display-inline-elements.html)

Ivan Shmakov 03-02-2013 08:18 AM

spacing display: inline elements
 
Is there an easy way to arrange a known number of
display: inline so that the last has its "natural" width, while
the rest of the window's width is distributed equally among the
other elements? Like:

[element 1] [elt 2] [element 3] ["natural" width for the last one]

Also, how do I ensure certain spacing between the elements? The
only way I could think of is something like (for 1em spacing):

..elt-first {
margin-left: 0;
margin-right: .5em;
}
..elt-middle {
margin-left: .5em;
margin-right: .5em;
}
..elt-last {
margin-left: .5em;
margin-right: 0;
}

However, it's mildly inconvenient, as it requires all the
elements to be explicitly tagged as "first", "middle", and
"last." Or should I be using some kind of a "spacer" element
in-between the "payload" ones?

..spacer { width: 1em; }

TIA.

--
FSF associate member #7257 np. Out of the Shadows -- Iron Maiden

123Jim 03-02-2013 08:46 AM

Re: spacing display: inline elements
 
On 02/03/2013 08:18, Ivan Shmakov wrote:
> Is there an easy way to arrange a known number of
> display: inline so that the last has its "natural" width, while
> the rest of the window's width is distributed equally among the
> other elements? Like:
>
> [element 1] [elt 2] [element 3] ["natural" width for the last one]
>
> Also, how do I ensure certain spacing between the elements? The
> only way I could think of is something like (for 1em spacing):
>
> .elt-first {
> margin-left: 0;
> margin-right: .5em;
> }
> .elt-middle {
> margin-left: .5em;
> margin-right: .5em;
> }
> .elt-last {
> margin-left: .5em;
> margin-right: 0;
> }
>
> However, it's mildly inconvenient, as it requires all the
> elements to be explicitly tagged as "first", "middle", and
> "last." Or should I be using some kind of a "spacer" element
> in-between the "payload" ones?
>
> .spacer { width: 1em; }
>
> TIA.
>



Put them in a container <div>, apply padding to it. then use the same
margin across all of the elements contained therein.
http://www.w3.org/TR/CSS2/box.html

123Jim 03-02-2013 09:37 AM

Re: spacing display: inline elements
 
On 02/03/2013 08:46, 123Jim wrote:
> On 02/03/2013 08:18, Ivan Shmakov wrote:
>> Is there an easy way to arrange a known number of
>> display: inline so that the last has its "natural" width, while
>> the rest of the window's width is distributed equally among the
>> other elements? Like:
>>
>> [element 1] [elt 2] [element 3] ["natural" width for the
>> last one]
>>
>> Also, how do I ensure certain spacing between the elements? The
>> only way I could think of is something like (for 1em spacing):
>>
>> .elt-first {
>> margin-left: 0;
>> margin-right: .5em;
>> }
>> .elt-middle {
>> margin-left: .5em;
>> margin-right: .5em;
>> }
>> .elt-last {
>> margin-left: .5em;
>> margin-right: 0;
>> }
>>
>> However, it's mildly inconvenient, as it requires all the
>> elements to be explicitly tagged as "first", "middle", and
>> "last." Or should I be using some kind of a "spacer" element
>> in-between the "payload" ones?
>>
>> .spacer { width: 1em; }
>>
>> TIA.
>>

>
>
> Put them in a container <div>, apply padding to it. then use the same
> margin across all of the elements contained therein.
> http://www.w3.org/TR/CSS2/box.html


In respect of the last element having a natural width you can do
something with max-width but again apply it to all your boxes, as you
won't know which box would be the right most box due to the variability
of Browser window width.

dorayme 03-02-2013 01:00 PM

Re: spacing display: inline elements
 
In article <87ehfy5i55.fsf@violet.siamics.net>,
Ivan Shmakov <oneingray@gmail.com> wrote:

> Is there an easy way to arrange a known number of
> display: inline so that the last has its "natural" width, while
> the rest of the window's width is distributed equally among the
> other elements? Like:
>
> [element 1] [elt 2] [element 3] ["natural" width for the last one]
>


What is a *natural* width for something (an element perhaps) that goes
inline? An image that is natively 200px wide perhaps? An anonymous box
of text? A span? A floated div with normal shrink-to-fit property?

Anyway, if the three (or other number) of elements are to be spaced
evenly (and not according to their "natural" width?), then perhaps
best to make a container for these three, margin or padding the
contents evenly (padding-right for all but the last of the children),
float the container itself left, if it is a DIV say, to get the
shrink-to-fit effect and then add the last inline element. If the
first three are not to be their natural width, what are you
contemplating, that they be given an unnatural width?

Remember that the browser viewport might not be wide enough to allow
what you are aiming for, the last element (or indeed, other elements
unless you make special provisions) can drop and wrap.


> Also, how do I ensure certain spacing between the elements? The
> only way I could think of is something like (for 1em spacing):
>
> .elt-first {
> margin-left: 0;
> margin-right: .5em;
> }
> .elt-middle {
> margin-left: .5em;
> margin-right: .5em;
> }
> .elt-last {
> margin-left: .5em;
> margin-right: 0;
> }
>


If you have three elements, there are other ways to target them
without creating classes for all. For example, if there are three
SPANS in a DIV (and no other DIV has spans), you can just class the
last and

div span {margin-right: .5em;}
div .last {margin-right: 0;}

> However, it's mildly inconvenient, as it requires all the
> elements to be explicitly tagged as "first", "middle", and
> "last." Or should I be using some kind of a "spacer" element
> in-between the "payload" ones?
>
> .spacer { width: 1em; }
>

Don't do this last, it is too inelegant.

Above all, how about a real URL with some real markup and example so
we can see what you might be doing?

--
dorayme

Ivan Shmakov 03-03-2013 11:18 AM

Re: spacing display: inline elements
 
>>>>> dorayme <dorayme@optusnet.com.au> writes:

[...]

> Remember that the browser viewport might not be wide enough to allow
> what you are aiming for, the last element (or indeed, other elements
> unless you make special provisions) can drop and wrap.


Yes. I find it acceptable, though.

[...]

> If you have three elements, there are other ways to target them
> without creating classes for all. For example, if there are three
> SPANS in a DIV (and no other DIV has spans), you can just class the
> last and


> div span {margin-right: .5em;}
> div .last {margin-right: 0;}


Indeed, that's much better. Thanks!

(Still, I'd prefer not to add any special classes just for a
purpose like this. As in: given two adjacent margins, the
largest would "magically win" and be used instead of both.)

BTW, there's a similar problem for display: block elements, and
margin-top:, margin-bottom:. I guess a solution like the above
will fit this case, too.

[...]

> Above all, how about a real URL with some real markup and example so
> we can see what you might be doing?


Not at this moment.

--
FSF associate member #7257

dorayme 03-03-2013 11:17 PM

Re: spacing display: inline elements
 
In article <87obf04tps.fsf@violet.siamics.net>,
Ivan Shmakov <oneingray@gmail.com> wrote:

> >>>>> dorayme <dorayme@optusnet.com.au> writes:

>
> [...]


> > If you have three elements, there are other ways to target them
> > without creating classes for all. For example, if there are three
> > SPANS in a DIV (and no other DIV has spans), you can just class the
> > last and

>
> > div span {margin-right: .5em;}
> > div .last {margin-right: 0;}

>
> Indeed, that's much better. Thanks!
>
> (Still, I'd prefer not to add any special classes just for a
> purpose like this. As in: given two adjacent margins, the
> largest would "magically win" and be used instead of both.)
>


Depending on your exact situation, you can even do without any
classing. For example if there is an element with three sibling spans
inside like

<div>
<span>text</span>
<span>text</span>
<span>text</span>
</div>

you can target all of them with styles by using adjacent sibling
selecting

span {padding-right: 5em;}
span+span+span {padding-right: 0;}

--
dorayme

Ivan Shmakov 03-04-2013 12:01 PM

Re: spacing display: inline elements
 
>>>>> dorayme <dorayme@optusnet.com.au> writes:
>>>>> Ivan Shmakov <oneingray@gmail.com> wrote:
>>>>> dorayme <dorayme@optusnet.com.au> writes:


[...]

>>> div span {margin-right: .5em;}
>>> div .last {margin-right: 0;}


>> Indeed, that's much better. Thanks!


>> (Still, I'd prefer not to add any special classes just for a purpose
>> like this. As in: given two adjacent margins, the largest would
>> "magically win" and be used instead of both.)


> Depending on your exact situation, you can even do without any
> classing. For example if there is an element with three sibling
> spans inside like


> <div>
> <span>text</span>
> <span>text</span>
> <span>text</span>
> </div>


> you can target all of them with styles by using adjacent sibling
> selecting


> span {padding-right: 5em;}
> span+span+span {padding-right: 0;}


Unfortunately, I may have several contexts like that, each
having different number of children.

However, I've found that CSS3 adds a number of what they call
"structural pseudo-classes" [1], including :last-child (CSS2
already had :first-child), :first-of-type, and :last-of-type.

Thus, my .css now reads:

..login-form > p,
..update-type > p {
display: inline;
margin-left: .71ex;
margin-right: .71ex;
padding: 0;
}

..login-form > p:first-of-type,
..update-type > p:first-of-type {
margin-left: 0;
}

..login-form > p:last-of-type,
..update-type > p:last-of-type {
margin-right: 0;
}

Now, it makes me wonder how widely these pseudo-classes are
implemented nowadays? (Then, however, I've used a few of the
HTML5 elements just as well...)

[1] http://www.w3.org/TR/css3-selectors/#structural-pseudos

>> BTW, there's a similar problem for display: block elements, and
>> margin-top:, margin-bottom:. I guess a solution like the above will
>> fit this case, too.


Curiously enough, this is exactly how top and bottom margins
appear to work in my Firefox (or, rather, Iceweasel, as of
10.0.12esr debian 1.) Still, it may be necessary to amend the
margins of the topmost and bottommost elements. Like, e. g.:

article > *, body > * {
margin-top: 3.14ex;
margin-bottom: 3.14ex;
}

article > :first-child, body > :first-child {
margin-top: 0;
}

article > :last-child, body > :last-child {
margin-bottom: 0;
}

--
FSF associate member #7257

dorayme 03-05-2013 12:38 AM

Re: spacing display: inline elements
 
In article <87a9qj4bmg.fsf@violet.siamics.net>,
Ivan Shmakov <oneingray@gmail.com> wrote:

> >>>>> dorayme <dorayme@optusnet.com.au> writes:
> >>>>> Ivan Shmakov <oneingray@gmail.com> wrote:
> >>>>> dorayme <dorayme@optusnet.com.au> writes:

>
> [...]
>
>
> > you can target all of them with styles by using adjacent sibling
> > selecting

>
> > span {padding-right: 5em;}
> > span+span+span {padding-right: 0;}

>
> Unfortunately, I may have several contexts like that, each
> having different number of children.
>
> However, I've found that CSS3 adds a number of what they call
> "structural pseudo-classes" [1], including :last-child (CSS2
> already had :first-child), :first-of-type, and :last-of-type.
>

Good point. But check to see how IE handles such (IE8 and below are
not likely to)
>
> Now, it makes me wonder how widely these pseudo-classes are
> implemented nowadays? (Then, however, I've used a few of the
> HTML5 elements just as well...)
>
> [1] http://www.w3.org/TR/css3-selectors/#structural-pseudos
>


--
dorayme

Gus Richter 03-05-2013 04:12 AM

Re: spacing display: inline elements
 
On 3/4/2013 7:01 AM, Ivan Shmakov wrote:
> Now, it makes me wonder how widely these pseudo-classes are
> implemented nowadays?


<http://caniuse.com/#search=css3%20selectors>

--
Gus



Ivan Shmakov 03-05-2013 01:09 PM

Re: spacing display: inline elements
 
>>>>> dorayme <dorayme@optusnet.com.au> writes:
>>>>> Ivan Shmakov <oneingray@gmail.com> wrote:


[...]

>> However, I've found that CSS3 adds a number of what they call
>> "structural pseudo-classes" [1], including :last-child (CSS2 already
>> had :first-child), :first-of-type, and :last-of-type.


> Good point. But check to see how IE handles such (IE8 and below are
> not likely to)


Neither these support XML-based HTML (application/xhtml+xml),
which I also happen to use.

Perhaps I will implement some hacks to get around these issues
(first and foremost the XHTML vs. XML one), but given that the
pages in question are, to some extent, oriented at "network
professionals," I'd expect that the majority of those interested
will use a more standards-compliant Web agent, anyway.

>> Now, it makes me wonder how widely these pseudo-classes are
>> implemented nowadays? (Then, however, I've used a few of the HTML5
>> elements just as well...)


>> [1] http://www.w3.org/TR/css3-selectors/#structural-pseudos


--
FSF associate member #7257


All times are GMT. The time now is 12:45 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.