Marquee schiebt Inhalt, wenn sie zu lang

Question

ich auf meinem Navigationsleiste ein „news“ Ding bekam, es Marquee-Text zu haben, verwendet bewegen, aber wenn der Text zu lang wird, drückt er meinen Inhalt (nicht den Inhalt der Navigationsleiste aber der Hauptinhalt auf der Website). es ist auch nicht in der Lage von Anfang an von der Navigationsleiste starten und entschied sich eher von der Mitte zu beginnen, aber hängt wirklich davon ab, wie lange der Text ...

navigationbar.php

<?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 .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; 
} 

• ein Wrapper über alle Inhalte

  .content-Wrapper { background-image: url ("/ images/background/content.jpg")! wichtig; Breite: 85%; Grenze: 1px fest # 000; background-image: -webkit-linear-gradient (unten, # 1a1b1f, # 212528); background-image: -moz-linear-gradient (unten, # 1a1b1f, # 212528); background-image: -o-linear-gradient (unten, # 1a1b1f, # 212528); background-image: linear-gradient (nach oben, # 1a1b1f, # 212528); margin: auto;}

Answer 1

Verwenden Sie nicht das <marquee> Element, es ist veraltet.

„Diese Funktion ist veraltet. Obwohl es in einigen Browsern immer noch funktioniert, wird von seiner Verwendung abgeraten, da es jederzeit entfernt werden kann. Versuchen Sie vermeiden Sie es.“

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

Aber dein Problem zu beheben, Sie könnten versuchen, das Hinzufügen overflow: hidden entweder .marquee-wrapper oder .marquee-wrapper marquee