Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > pl.comp.lang.javascript > #3571 > unrolled thread

Wyrównanie pozycji w menu

Back to article view | Back to pl.comp.lang.javascript

Contents

  Wyrównanie pozycji w menu Roman Tyczka <noemail@because.no> - 2019-01-24 12:59 +0100
    Re: Wyrównanie pozycji w menu Borys Pogoreło <borys@pl.edu.leszno> - 2019-01-24 14:40 +0100
      Re: Wyrównanie pozycji w menu zpksoft <zpksoft@op.pl> - 2019-01-24 08:05 -0800
        Re: Wyrównanie pozycji w menu Roman Tyczka <noemail@because.no> - 2019-01-24 20:40 +0100
          Re: Wyrównanie pozycji w menu zpksoft <zpksoft@op.pl> - 2019-01-25 04:30 -0800
            Re: Wyrównanie pozycji w menu Roman Tyczka <noemail@because.no> - 2019-01-25 14:08 +0100
              Re: Wyrównanie pozycji w menu zpksoft <zpksoft@op.pl> - 2019-01-25 05:24 -0800
                Re: Wyrównanie pozycji w menu Roman Tyczka <noemail@because.no> - 2019-01-25 14:35 +0100
      Re: Wyrównanie pozycji w menu Roman Tyczka <noemail@because.no> - 2019-01-24 20:42 +0100
        Re: Wyrównanie pozycji w menu Borys Pogoreło <borys@pl.edu.leszno> - 2019-01-25 02:28 +0100

#3571 — Wyrównanie pozycji w menu

Mam zrobione w Bootstrapie 4 menu, z jedną pozycją rozwijaną w dół. Dodałem
tam sobie ikonki i zaczęło to wyglądać koszmarnie:

http://snap.ashampoo.com/fSKu5yIkFNAGC3nRqxTtUOf4fsXXJn2ObGe7aMIg2jM7FZqVsEJitpEYc6RLln2m

kod tego submenu:

<div class="dropdown-menu" role="menu">
  <a class="dropdown-item" role="presentation" href="#">
   <i class="fa fa-fax text-primary"></i><span>&nbsp;Jeden</span>
 </a>
 <a class="dropdown-item" role="presentation" href="#">
   <i class="fa fa-info text-primary"></i><span>&nbsp;Dwa</span>
 </a>
 <a class="dropdown-item" role="presentation" href="#">
   <i class="fa fa-copy text-primary"></i><span>&nbsp;Trzy</span>
 </a>
</div>

Jak spowodować by opisy pozycji menu były równo, w jednej linii w pionie i
nie zależały od szerokości ikonek?


-- 
pozdrawiam
Roman Tyczka

[toc] | [next] | [standalone]

#3572

Dnia Thu, 24 Jan 2019 12:59:14 +0100, Roman Tyczka napisał(a):

> Jak spowodować by opisy pozycji menu były równo, w jednej linii w pionie i
> nie zależały od szerokości ikonek?

Zamień ikonę na element typu inline-block (o ile już takim nie jest) i
nadaj mu określoną szerokość. Albo wstaw ikonę w tło danego elementu +
padding z lewej.

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

[toc] | [prev] | [next] | [standalone]

#3573

>ciach
> Albo wstaw ikonę w tło danego elementu +
> padding z lewej.
> 
> -- 
> Borys Pogoreło
> borys(#)leszno,edu,pl

Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)

Zapewne klasy fa-fax, fa-info i fa-copy to definiują.

Paweł

[toc] | [prev] | [next] | [standalone]

#3574

On Thu, 24 Jan 2019 08:05:20 -0800 (PST), zpksoft wrote:

>> Albo wstaw ikonę w tło danego elementu +
>> padding z lewej.
> 
> Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)

Świat jest na innym etapie, <i> to już nie italic:

"In earlier versions of the HTML specification, the <i> element was merely
a presentational element used to display text in italics, much like the <b>
element was used to display text in bold letters. This is no longer true,
as these tags now define semantics rather than typographic appearance. A
browser will typically still display the contents of the <i> element in
italic type, but is, by definition, no longer required to."

Teraz <i> jest bliżej do <icon> niż <italic>, zaleca go sam oogiel, buk
internetów:

http://google.github.io/material-design-icons/#icon-font-for-the-web

-- 
pozdrawiam
Roman Tyczka

[toc] | [prev] | [next] | [standalone]

#3577

W dniu czwartek, 24 stycznia 2019 20:40:03 UTC+1 użytkownik Roman Tyczka napisał:
> On Thu, 24 Jan 2019 08:05:20 -0800 (PST), zpksoft wrote:
> 
> >> Albo wstaw ikonę w tło danego elementu +
> >> padding z lewej.
> > 
> > Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)
> 
> Świat jest na innym etapie, <i> to już nie italic:

A zrobiłeś test? :)

> 
> "In earlier versions of the HTML specification, the <i> element was merely
> a presentational element used to display text in italics, much like the <b>
> element was used to display text in bold letters. This is no longer true,
> as these tags now define semantics rather than typographic appearance. A
> browser will typically still display the contents of the <i> element in
> italic type, but is, by definition, no longer required to."
> 

A ten cytat to skąd? Zresztą zapytam Googla

> Teraz <i> jest bliżej do <icon> niż <italic>, zaleca go sam oogiel, buk
> internetów:
> 
> http://google.github.io/material-design-icons/#icon-font-for-the-web

jakoś to do mnie nie przemawia. 
cyt: <i class="material-icons">face</i>
każdemu znacznikowi możesz przypisać jakąś klasę więc przypisanie jej pod <i> nie wiem dlaczego miałoby być interpretowane jakoś szczególnie.
Napisz np. <bla class="material-icons">face</bla> i zobacz jak to zadziała.

> 
> -- 
> pozdrawiam
> Roman Tyczka

Paweł

[toc] | [prev] | [next] | [standalone]

#3578

On Fri, 25 Jan 2019 04:30:10 -0800 (PST), zpksoft wrote:

>>>> Albo wstaw ikonę w tło danego elementu +
>>>> padding z lewej.
>>> 
>>> Pewnie jest ikona w tle, ale dlaczego w tle znacznika <i>? (co tu jest italic?)
>> 
>> Świat jest na innym etapie, <i> to już nie italic:
> 
> A zrobiłeś test? :)

A czytałeś to co jest poniżej?
Czyli: " A browser will typically still display the contents of the <i>
element in italic type, but is, by definition, no longer required to".

 
> jakoś to do mnie nie przemawia. 
> cyt: <i class="material-icons">face</i>
> każdemu znacznikowi możesz przypisać jakąś klasę więc przypisanie jej pod <i> nie wiem dlaczego miałoby być interpretowane jakoś szczególnie.
> Napisz np. <bla class="material-icons">face</bla> i zobacz jak to zadziała.

Może do Ciebie nie przemawiać, ale jest taka konwencja i tyle, nikt Cię nie
zmusza do podążania za światem, możesz iść w drugą stronę, wolna wola.

-- 
pozdrawiam
Roman Tyczka

[toc] | [prev] | [next] | [standalone]

#3579

> Może do Ciebie nie przemawiać, ale jest taka konwencja i tyle, nikt Cię nie
> zmusza do podążania za światem, możesz iść w drugą stronę, wolna wola.
> 
> -- 
> pozdrawiam
> Roman Tyczka

A czy ja twierdzę że ktoś mnie zmusza? Ja nie krytykuję ścieżki którą podążasz.
Artykuuję swoje zdanie. Możesz go nie czytać.

Co do ikon to raczej stosuję tzw. htmlentities a nie obrazki (jpg, gif, svg czy inne).

Paweł

[toc] | [prev] | [next] | [standalone]

#3580

On Fri, 25 Jan 2019 05:24:33 -0800 (PST), zpksoft wrote:

>> Może do Ciebie nie przemawiać, ale jest taka konwencja i tyle, nikt Cię nie
>> zmusza do podążania za światem, możesz iść w drugą stronę, wolna wola.

> A czy ja twierdzę że ktoś mnie zmusza? Ja nie krytykuję ścieżki którą podążasz.
> Artykuuję swoje zdanie. Możesz go nie czytać.

Tak samo jak ja.

> Co do ikon to raczej stosuję tzw. htmlentities a nie obrazki (jpg, gif, svg czy inne).

Ja też nie używam grafik w podanym przykładzie.

-- 
pozdrawiam
Roman Tyczka

[toc] | [prev] | [next] | [standalone]

#3575

On Thu, 24 Jan 2019 14:40:30 +0100, Borys Pogoreło wrote:

>> Jak spowodować by opisy pozycji menu były równo, w jednej linii w pionie i
>> nie zależały od szerokości ikonek?
> 
> Zamień ikonę na element typu inline-block (o ile już takim nie jest) i
> nadaj mu określoną szerokość. 

Dzięki, tak zrobiłem i jest miodzio.

> Albo wstaw ikonę w tło danego elementu + padding z lewej.

A jak się wstawia w tło? Czy chodzi o CCSowe:

 background-image: url("paper.gif");

Czy to zadziała z ikonami fontowymi typu awesome?

-- 
pozdrawiam
Roman Tyczka

[toc] | [prev] | [next] | [standalone]

#3576

Dnia Thu, 24 Jan 2019 20:42:14 +0100, Roman Tyczka napisał(a):

> Czy to zadziała z ikonami fontowymi typu awesome?

Nie zadziała, musisz z nich zrobić osobny element (lub przynajmniej
pseudoelement). Do sztuczki z tłem potrzebujesz SVG.

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

[toc] | [prev] | [standalone]

Back to top | Article view | pl.comp.lang.javascript

csiph-web