Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Zarovnávání

Aktivity
Avatar
oggymotslp
Člen
Avatar
oggymotslp:1.4.2016 17:11

Ahoj,

chtěl bych se zeptat, jak mám udělat to, aby když mám menu nalevo a chci tam něco přidat doprava, nějaký text, tak to prostě nejde a dává se to pod to...

CSS:

@import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 220px;
  font-family: Raleway, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
#cssmenu > ul > li.active > ul {
  display: block;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background: #3ab4a6;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
  color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu ul ul li a {
  padding: 14px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  color: #ddd;
  background: #49505a;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul ul li a {
  padding-left: 32px;
}
#cssmenu ul ul li a:hover {
  color: #fff;
}
#cssmenu ul ul > li.has-sub > a:after {
  top: 16px;
  right: 26px;
  background: #ddd;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 20px;
  background: #ddd;
}

HTML Menu:

<div id="cssmenu" class="align-left">
  <ul>
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Hlavní</a></li>
     <li><a href="#"><i class="fa fa-fw fa-user"></i> Profil</a></li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bomb"></i> Akce</a>
        <ul>
           <li><a href="#">Mise</a></li>
           <li><a href="#">Pochůzka</a></li>
           <li><a href="#">Útok na zločince</a></li>
        </ul>
     </li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-shopping-basket"></i> Obchody</a>
        <ul>
           <li><a href="#">Policejní oblékárna</a></li>
           <li><a href="#">Zbrojař Jim</a></li>
           <li><a href="#">Vychytávky pana Owena</a></li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-group"></i> Oddělení</a></li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bar-chart-o"></i> Statistiky</a>
        <ul>
           <li><a href="#">Nejlepší policista</a></li>
           <li><a href="#">Nejlepší hráč</a></li>
           <li><a href="#">Nejlepší oddělení</a></li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-star"></i> Speciály</a></li>
     <li><a href="#"><i class="fa fa-fw fa-cogs"></i> Nastavení účtu</a></li>
     <li><a href="#"><i class="fa fa-fw fa-external-link"></i> Odhlásit</a></li>
  </ul>
</div>

A pak k tomu mám java script, ale ten si nemyslím, že by měl být důležitý.

Předem děkuji za odpovědi :)

Odpovědět
1.4.2016 17:11
Proč to dělat jednoduše, když to jde i složitě :D
Avatar
Tomáš123
Člen
Avatar
Odpovídá na oggymotslp
Tomáš123:1.4.2016 17:18

Ak chceš, iba zarovnať text, použi napríklad <span> a nastav mu text-align: right. Bloky okolo seba zalamujú riadok, takže bez obtekania alebo poziciovania (vlastnosti position a margin) nejde prvky dostať vedľa seba.

Nahoru Odpovědět
1.4.2016 17:18
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
oggymotslp
Člen
Avatar
Odpovídá na Tomáš123
oggymotslp:1.4.2016 17:20

vlastnosti position a margin

Jak bych toho mohl dosáhnout ? Nějaký krátký příklad, prosím. Já jsem na toto zarovnávání úplně levej.

Ale jinak díky :)

Nahoru Odpovědět
1.4.2016 17:20
Proč to dělat jednoduše, když to jde i složitě :D
Avatar
Tomáš123
Člen
Avatar
Odpovídá na oggymotslp
Tomáš123:1.4.2016 17:41

Takto to nechceš. Pri dlhšom slove sa to bude prekrývať. Bol to súhrn možností, ale najvhodnejší bude ten doprava zarovnaný span (alebo iný riadkový prvok – pokojne aj odkaz s iným cieľom adresy).

Ak to už musia byť bloky, tak použiť obtekanie: http://jecas.cz/float a nezabudni za obtekaným prvkom clearovať:

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
1.4.2016 17:41
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.