Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 80% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu
birthday
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
Reaktivní uživatel:28.12.2018 22:06

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

Nahoru Odpovědět
28.12.2018 22:06
Kdo je připraven, toho zaskočí něco jiného
Avatar
pgarsky
Člen
Avatar
Odpovídá na Reaktivní uživatel
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...
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na pgarsky
Reaktivní uživatel:28.12.2018 22:16

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

Nahoru Odpovědět
28.12.2018 22:16
Kdo je připraven, toho zaskočí něco jiného
Avatar
pgarsky
Člen
Avatar
Odpovídá na Reaktivní uživatel
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
Reaktivní uživatel: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
Kdo je připraven, toho zaskočí něco jiného
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.