i got a "news" thing on my navigation bar, it uses marquee to have moving text but when the text gets too long, it pushes my content (not the content of the navigation bar but the main content on the website). it is also unable to start from the beginning of the navigation bar and rather chose to start from the middle but really depends on how long the text is...
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" | ";
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> <span><i class="fa fa-user"></i></span>
<a href="/signout" class="button">Sign Out <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 </div></a>
</li>
<li>
<a href="/about" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("about")?>>About </div></a>
</li>
<li>
<a href="/contact" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("contact")?>>Contact </div></a>
</li>
<li>
<a href="/forum" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("forum")?>>Forum </div></a>
</li>
<li>
<a href="/upload" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("upload")?>>Upload </div></a>
</li>
<li>
<a href="/server" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("server")?>>Server </div></a>
</li>
<li>
<a href="/clan" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("clan")?>>Clan </div></a>
</li>
<li>
<a href="/misc" class="nav-item"><div <?=echoSelectedClassIfRequestMatches("misc")?>>Misc </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;
}
a wrapper above all content
.content-wrapper { background-image: url("/images/background/content.jpg") !important; width:85%; 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); margin:auto;}
Do not use the <marquee> element, it is deprecated.
“This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.”
https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee
But to fix your problem you could try adding overflow: hidden to either .marquee-wrapper or .marquee-wrapper marquee