marquee içeriği çok uzun olduğunda zorluyor

Question

Gezinme çubuğumda "haber" özelliği var, hareketli metin kullanmak için seçim çerçevesi kullanıyor, ancak metin çok uzun olduğunda içeriğimi zorluyor (gezinti çubuğunun içeriği değil ancak web sitesinde ana içerik). o da navigasyon çubuğunun baştan başlamak ve oldukça ortasından başlamak seçti edemiyor ama gerçekten metindir ne kadar bağlıdır ...

<?php 
function echoSelectedClassIfRequestMatches($requestUri) 
{ 
    $current_file_name = basename($_SERVER['REQUEST_URI']); 

    if ($current_file_name == $requestUri) 
     echo 'class="selected"'; 
} 
?> 
<!--START NAVIGATION--> 
<div class="nav-align"> 

    <div class="social-wrapper"> 
     Social Media : 
     <a href="" class="nav-social-icons"><i class="fa fa-facebook-official"></i></a><!--facebook--> 
     <a href="" class="nav-social-icons"><i class="fa fa-twitter-square"></i></a><!--twitter--> 
     <a href="" class="nav-social-icons"><i class="fa fa-youtube-play"></i></a><!--youtube--> 
     <a href="" class="nav-social-icons"><i class="fa fa-google-plus-square"></i></a><!--google+--> 
     <a href="" class="nav-social-icons"><i class="fa fa-instagram"></i></a><!--instagram--> 
     <a href="" class="nav-social-icons"><i class="fa fa-steam-square"></i></a><!--steam--> 
    </div> 

    <nav class="nav-main"> 
     <a href="/"> 
      <img class="logo" src=""></img> 
     </a> 

    <?php 
     if(empty($_SESSION['user'])){ 
      echo'<div class="user-container">'; 
       echo'You are signed in as guest, please'; 
       echo'<a href="/signin" class="button login">Sign In</a>'; 
       echo'or'; 
       echo'<a href="/signup" class="button2 register">Sign Up</a>'; 
      echo'</div>'; 
     }else { 
      echo'<div class="user-container">'; 

      echo"<span><i class='fa fa-wrench'></i></span> <a class='a' href='/settings'> Settings"; 
      echo"</a>"; 
      echo" &nbsp;|&nbsp; "; 

      echo'<a class="a" href="/user/'; 
      echo htmlentities($_SESSION['user']['id'], ENT_QUOTES, 'UTF-8'); 
      echo '">'; 
      echo htmlentities($_SESSION['user']['username'], ENT_QUOTES, 'UTF-8'); 
      echo'</a> &nbsp;<span><i class="fa fa-user"></i></span> 
      <a href="/signout" class="button">Sign Out &nbsp;<i class="fa fa-sign-out"></i></a>'; 
      echo'</div>'; 
     } 
    ?> 
    </nav> 

    <div class="nav-item-container"> 
     <ul> 
      <li> 
       <a href="/" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("")?>>Home &nbsp;</div></a> 
      </li> 
      <li> 
       <a href="/about" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("about")?>>About &nbsp;</div></a> 
      </li> 
      <li> 
       <a href="/contact" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("contact")?>>Contact &nbsp;</div></a> 
      </li> 
      <li> 
       <a href="/forum" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("forum")?>>Forum &nbsp;</div></a> 
      </li> 
      <li> 
       <a href="/upload" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("upload")?>>Upload &nbsp;</div></a> 
      </li> 
      <li> 
       <a href="/server" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("server")?>>Server &nbsp;</div></a> 
      </li> 
      <li> 
       <a href="/clan" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("clan")?>>Clan &nbsp;</div></a> 
      </li> 
      <li> 
       <a href="/misc" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("misc")?>>Misc &nbsp;</div></a> 
      </li> 
      <div class="news-wrapper"> 
       <div class="news-content"> 
        <i class="fa fa-bullhorn"></i> NEWS : 
       </div> 
      </div> 
     </ul> 
     <ul> 
      <li style="overflow:hidden;"> 
       <div class="marquee-wrapper"> 
        <marquee behavior="scroll" direction="left" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();"> 
         <?php 
          $items = Array(
           "<span><i class='fa fa-bullhorn'></i> NEWS:</span> Welcome to the website!", 
           "Welcome <span> <a class='a2' href='/user/'>".htmlentities($row['username'], ENT_QUOTES, 'UTF-8')."</a></span> to the website!", 
           "We currently got <span> ".htmlentities($row['id'], ENT_QUOTES, 'UTF-8')." </span> Unique members :)", 
           //"You can easly visit other members profiles by typing '/user/[id]' just replace [id] by any number.", 
          ); 
          echo $items[array_rand($items)]; 
         ?> 
        </marquee> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 

nav bar

navigationbar.php

css

@charset "utf-8"; 
.nav-align { 
    width:85.1%; 
    padding-top:40px; 
    margin:auto; 
} 


.nav-main{ 
margin:auto; 
background-image: url("/images/background/navigationbar.jpg") !important; 
border: 1px solid #000; 
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
height:80px; 
color:#858d9a; 
z-index:50; 
} 

.nav-main .logo{ 
float:left; 
color:#fff; 
text-decoration: none; 
width:20%; 
padding:5px 20px; 
font-size:1.4em; 
line-height:30px; 
} 

.user-container { 
    float:right !important; 
    height:30px; 
    padding: 20px 20px; 
    font-size:15px; 
} 

.nav-item-container { 
    border-left:1px solid black; 
    border-right:1px solid black; 
    background-color: #1d1d1d; 
    background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: -o-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: linear-gradient(to top, #1a1b1f, #212528); 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
    height:30px; 
} 

.nav-item-container > ul{ 
    float:left; 
    list-style-type:none; 
    overflow:hidden; 
} 

.nav-item-container > ul > li{ 
    float:left; 
} 

.nav-item{ 
    font-size:12px; 
    display:inline-block; 
    padding:5px 10px; 
    height:20px; 
    line-height:20px; 
    color:#7D91A3; 
    text-decoration:none; 
} 

.selected { 
    color:#05c7f7 !important; 
} 

.nav-item:hover { 
    color:#fff; 
    text-shadow: 0 1px 2px #000; 
    -webkit-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7; 
    -moz-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7; 
    box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;  
    background-image: linear-gradient(to top, #096aa1, #26c3f6); 
} 


.nav-content{ 
position:absolute; 
top:184px; 
overflow:hidden; 
background-color:#0d0f11; 
max-height:0; 
} 

.nav-content a{ 
color:#fff; 
text-decoration:none; 
} 

.nav-sub{ 
padding:10px; 
} 

.nav-sub ul{ 
padding:0; 
margin:0; 
list-style-type:none; 
} 

.nav-sub ul li a{ 
display:inline-block; 
padding:3px 0; 
padding-left:10px; 
color:#7D91A3; 
} 

.nav-sub ul li a:hover{ 
    color:#05c7f7; 
} 

.nav-item:focus ~ .nav-content{ 
    max-height:100px; 
    border-left: 1px solid #000; 
    border-right: 1px solid #000; 
    border-bottom: 1px solid #000; 
    background-color: #1d1d1d; 
    background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: -o-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: linear-gradient(to top, #1a1b1f, #212528); 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
    z-index:4000; 
} 

.social-wrapper { 
    border-top:1px solid black; 
    border-left:1px solid black; 
    border-right:1px solid black; 
    background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: -o-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: linear-gradient(to top, #1a1b1f, #212528); 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2); 
    width:20%; 
    min-width:230px; 
    padding-left:10px; 
    padding-right:10px; 
    line-height:30px; 
    height:30px; 
    margin:auto; 
} 

.social-wrapper:hover { 
    color:#05c7f7; 
} 

.nav-social-icons { 
    padding-top:6px !important; 
    line-height:21.5px; 
    font-size:17px; 
    padding:3px; 
    color:#777f8c; 
    float:right; 
} 

.nav-social-icons:hover { 
    color:#fff; 
    -webkit-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7; 
    -moz-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7; 
    box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;  
    background-image: linear-gradient(to top, #096aa1, #26c3f6); 
} 

.news-content { 
    background-color:#05c7f7; 
    color:#05c7f7; 
    padding:3px; 
    width:100%; 
    float:right; 
    font-weight:bold; 
    line-height:25px; 
    background-color: #1d1d1d; 
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2); 
    -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2); 
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2); 
    border: 1px solid #000; 
    background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: -o-linear-gradient(bottom, #1a1b1f, #212528); 
    background-image: linear-gradient(to top, #1a1b1f, #212528); 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
} 

.news-content:before { 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
} 

.marquee-wrapper { 
    line-height:30px !important; 
    float:right; 
} 

.news-wrapper { 
    padding-left:120px !important; 
    float:right; 
    line-height:25px; 
} 

• tüm içeriğin üzerinde bir sargı

  .content-sarıcı { background-image: url ("/ images/background/content.jpg") Önemli; en: 85%; kenarlık: 1px katı # 000; arkaplan-görüntü: -webkit-doğrusal-gradyan (alt, # 1a1b1f, # 212528); arkaplan-görüntü: -moz-doğrusal-gradyan (alt, # 1a1b1f, # 212528); arkaplan-görüntü: -o-doğrusal-gradyan (alt, # 1a1b1f, # 212528); arkaplan-görüntü: doğrusal-gradyan (yukarı, # 1a1b1f, # 212528); margin: auto;}

Answer 1

<marquee> elemanı kullanmayın, bu kullanımdan kaldırılmıştır. "Bu özellik eskidir.

Bazı tarayıcılarda çalışmaya devam etmesine rağmen, herhangi bir zamanda kaldırılabileceğinden kullanımı önerilmez.

https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee

“. Kullanmaktan kaçının Ama sorunu size overflow: hidden eklemeyi deneyebilirsiniz düzeltmek için ya .marquee-wrapper veya