NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
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: Přetékání textu

Aktivity
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
Neaktivní uživatel
Člen
Avatar
Odpovídá na pgarsky
Neaktivní 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
Neaktivní uživatelský účet
Avatar
pgarsky
Člen
Avatar
Odpovídá na Neaktivní 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...
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na pgarsky
Neaktivní uživatel:28.12.2018 22:16

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

Nahoru Odpovědět
28.12.2018 22:16
Neaktivní uživatelský účet
Avatar
pgarsky
Člen
Avatar
Odpovídá na Neaktivní 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
Neaktivní uživatel
Člen
Avatar
Odpovídá na pgarsky
Neaktivní 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í
+2,50 Kč
Řešení problému
Nahoru Odpovědět
28.12.2018 23:21
Neaktivní uživatelský účet
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.