Diskuze: Přetékání textu
Člen
Odpovídá na pgarsky
Neaktivní uživatel:28.12.2018 22:06
Neaktivní uživatel:28.12.2018 22:06
Obávám se, že na to budeme potřebovat kód, který máš teď.
Odpovídá na Neaktivní uživatel
pgarsky:28.12.2018 22:11
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á.
Odpovídá na Neaktivní uživatel
pgarsky:28.12.2018 22:22
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.
Odpovídá na pgarsky
Neaktivní uživatel:28.12.2018 23:21
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č
+20 Zkušeností
+2,50 Kč
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.