Vajíčková mánie Vajíčková mánie
Probíhá výprodej HTML, JavaScript a Bootstrap. Slevy až 80 %
Vyšlehej si extra vědomosti! Až 100% bodů na prémiový obsah zdarma! Více zde
Avatar
pgarsky
Člen
Avatar
pgarsky:28.12.2018 22:01

Zdravím,
jak v CSS udělám, aby text v menu nepřetékal?
Děkuji předem za pomoc.

Editováno 28.12.2018 22:01
Odpovědět 28.12.2018 22:01
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
Odpovídá na pgarsky
Andy Scheuchzer:28.12.2018 22:06

Obávám se, že na to budeme potřebovat kód, který máš teď.

Nahoru Odpovědět  +1 28.12.2018 22:06
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
pgarsky
Člen
Avatar
Odpovídá na Andy Scheuchzer
pgarsky:28.12.2018 22:11

HTML kód:

<nav style="height: 130px; padding-top: 3%; padding-bottom: 150px; white-space: nowrap; text-overflow: ellipsis;">
    <div class="nav-fostrap" style="z-index: 1;">
      <ul style="height: 110px; padding: 20px;">
      <a href="index.php" style="margin-right: 200px; text-decoration: none;"><img class="logo" src="pictures/slunicko.png" /> <span class="main-header">FIT STUDIO</span> <span class="main-header2">- Jméno Příjmení</span></a> <!-- !!! -->
      <li class="<?php echo($content->setActiveMenuTab('activities')); ?>"><a href="?content=activities">Sportovní aktivity</a></li>
      <li class="<?php echo($content->setActiveMenuTab('instructors')); ?>"><a href="?content=instructors">Instruktoři</a></li>
      <?php
      if ($res['gallery'] == 1)
      echo('<li class="' . $content->setActiveMenuTab('gallery') . '"><a href="?content=gallery">Galerie</a></li>');
      ?>
      <li class="<?php echo($content->setActiveMenuTab('schedule')); ?>"><a href="?content=schedule">Rozvrh aktivit</a></li>
      <li class="<?php echo($content->setActiveMenuTab('contact')); ?>"><a href="?content=contact">Kontakt</a></li>
      <?php
      if (isset($_SESSION['id'])) {
            echo('<li><a href="?content=administration">Administrace</a></li>');
      }
      echo('<li class="' . $content->setActiveMenuTab('login') . '"><a href="?content=login">Přihlášení</a></li>');
      ?>
      </ul>
    </div>
</nav>

CSS kód:

.nav-fostrap {
  background: #ef7e40;
  width: 240px;
  height: 100%;
  display: block;
  position: fixed;
  left: -240px;
  top: 0px;
  -webkit-transition: left 0.25s ease;
  -moz-transition: left 0.25s ease;
  -ms-transition: left 0.25s ease;
  -o-transition: left 0.25s ease;
  transition: left 0.25s ease;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

Problém je v tom, že to přetéká jen na menších obrazovkách.

 @media only screen and (max-width:1699px) {

.main-header {
    font-size: 15px;
}
}

Toto to vyřešilo na mém druhém (menším) monitoru. Déle to už ale nefunguje a text přetéká.

Nahoru Odpovědět 28.12.2018 22:11
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
Odpovídá na pgarsky
Andy Scheuchzer:28.12.2018 22:16

Vyzkoušel bych změnit width na 100%.

Nahoru Odpovědět 28.12.2018 22:16
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
pgarsky
Člen
Avatar
Odpovídá na Andy Scheuchzer
pgarsky:28.12.2018 22:22

Omlouvám se, poslal jsem špatnou verzi. Tohle je verze pro obrazovky max-width: 900px
Tady je správná.

.nav-fostrap {
  display: block;
  margin-bottom: 15px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 3px;
}

.nav-fostrap ul {
  text-align: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
  background: #ef7e40;
}

.nav-fostrap li {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  font-size: 14;
  color: #000000;
}

.nav-fostrap .active {
    background: #bf6028;
}

.nav-fostrap li a {
  padding: 15px 20px;
  font-size: 14;
  color: #602400;
  display: inline-block;
  outline: 0;
  font-weight: 400;
  text-decoration: none;
}

Do nav-fostrap jsem zkusil přidat width: 100%;, ale nic se nestalo.

Nahoru Odpovědět 28.12.2018 22:22
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
Odpovídá na pgarsky
Andy Scheuchzer:28.12.2018 23:21

Tak jsem se dostal asi tak k tomuhle. Předpokládám, že jsem se do tvých požadavků úplně netrefil, takže kdyžtak specifikuj co a jak.
css:

/*tohle až tak moc řešit nemusíš, prostě to jenom vypadalo blbě*/
html, body {
  margin: 0;
}

.nav-fostrap {
/*(z-index přesunut sem,) změna: width, height, text-align, background a color*/
  width: 100%;
  z-index: 1;
  height: auto;
  display: block;
  margin-cottom: 15px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 3px;
  text-align: center;
  background: #ef7e40;
  color: #000;
}

.nav-fostrap ul {
/*display, odebráno text-align a background*/
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline;
}
/*celý blok přidán*/
.nav-fostrap > a {
  text-align: left;
  margin-right: 5%;
}

.nav-fostrap li {
/*odebráno text-align, list-style-type, position, color*/
  margin: 0;
  padding: 0;
  display: inline-block;
  font-size: 14;
}

.nav-fostrap li.active, .nav-fostrap li:hover {
    background: #bf6028;
}

.nav-fostrap li a {
  /*odebráno font-size, outline*/
  padding: 15px 20px;
  color: #602400;
  display: inline-block;
  font-weight: 400;
  text-decoration: none;
}

html:

<!-- odebráno height (nahoře), white-space -->
<nav style="padding-top: 3%; padding-bottom: 150px; text-overflow: ellipsis;" class="nav-fostrap">
   <!-- nav a div sloučeno v jedno, odkaz mimo li přesunut ven z ul -->
   <a href="index.php" style="text-decoration: none;">
      <img class="logo" src="pictures/slunicko.png" />
      <span class="main-header">FIT STUDIO</span>
      <span class="main-header2">- Jméno Příjmení</span>
   </a>
   <!-- !!! -->
   <ul style="height: 110px; padding: 20px;">
      <!-- třídy apod. si zase obnov, nechtěl jsem řešit PHP -->
      <li ><a href="?content=activities">Sportovní aktivity</a></li>
      <li class="active" ><a href="?content=instructors">Instruktoři</a></li>
      <li ><a href="?content=gallery">Galerie</a></li>
      <li ><a href="?content=schedule">Rozvrh aktivit</a></li>
      <li ><a href="?content=contact">Kontakt</a></li>
      <li><a href="?content=administration">Administrace</a></li>
      <li ><a href="?content=login">Přihlášení</a></li>
   </ul>
</nav>
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět 28.12.2018 23:21
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
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 6 zpráv z 6.