0
ナビゲーションバーに「ニュース」のものがありますが、マーキーを使用してテキストを移動しますが、テキストが長すぎるとナビゲーションバーの内容ではなく内容がプッシュされますしかし、ウェブサイトの主な内容）。また、ナビゲーションバーの最初から開始することができず、むしろ途中から始めることにしましたが、実際のテキストは...マーキーが長すぎるとコンテンツをプッシュ
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>
ナビゲーションバーでどのくらいに依存しますラッパーすべてのコンテンツ
.contentラッパー{上記
@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;
}
の.css背景画像：url（ "/ images/background/content.jpg"）！重要;幅：85％;国境：1px solid＃000; background-image：-webkit-linear-gradient（下図、＃1a1b1f、＃212528）;背景画像：-moz-linear-gradient（下図、＃1a1b1f、＃212528）; background-image：-o-linear-gradient（bottom、＃1a1b1f、＃212528）;背景画像：直線勾配（上、＃1a1b1f、＃212528）。マージン：自動;}
のいずれかに
overflow: hiddenを追加してみてください可能性がありますが、この作業を取得しましたか？ – Sarcoma@Sarcoma unforiatnly not。確かに何が間違っているが、私はウェブサイト上の他のもののためにjqueryを使用していますが、マーキー/動くテキストはうまく動作しません – Martin