-1
중요 편집 : DIV를 읽었습니다. ITS #buttons 아니요 #latest이 아닙니다. 죄송합니다!
나는 #buttons div이고 latest.js은 상충하는 것으로 보입니다. 나는 overflow: auto, overflow: initial 및 overflow: hidden을 사용하여이 문제를 해결하려고 시도했으며, overflow: auto;으로 거의 모든 작업을 수행하고있는 것으로 보입니다. 다른 스크롤바가 추가되어 사이드 바를 지나치게 늘릴 수 있습니다. 사이드 바의 영역에 머무르고 사이드 바의 아래쪽으로 늘어나야 할 경우 스크롤바를 1 "사이드"스크롤바로 스크롤해야합니다. CSS, HTML, 자바 스크립트 및이 도구를 사용하기위한 codepen을 포함 할 예정입니다.사이드 바 자바 스크립트 오버플로 오류
CSS :
html, body {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
body {
background: url(http://www.thegaminghideout.com/pog/VexIMG/bg.png);
background-color: black;
background-size: 100%;
background-repeat: no-repeat;
font-size: 12px;
color: #666666;
}
@font-face {
font-family: 'karmatic_arcaderegular';
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot');
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff2') format('woff2'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff') format('woff'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.ttf') format('truetype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.svg#karmatic_arcaderegular') format('svg');
font-weight: normal;
font-style: normal;
}
p, h1, h2, h3, h4, h5, h6, caption, text, font, li, ul {
color: white;
}
#wrap {
position: relative;
width: 760px;
margin: auto;
overflow: hidden;
}
#header {
height: 60px;
width: auto;
background: #db6d16
url(VexIMG/header.png);
}
#navigation {
width: 760px;
height: 35px;
position: absolute;
border-bottom: 2px solid #000000;
background: red;
padding: 0px;
}
#navigation .padding {
padding: 2px;
}
#navigation .navlinks {
position: absolute;
top: 1px; left: 0px;
}
#navigation .navlinks ul {
margin: 0px;
padding: 0px;
text-align: center;
list-style-type: none;
width: 760px;
height: 35px;
}
#navigation .navlinks li {
position: relative;
top: 5px;
margin: 0px 5px 0px 5px;
list-style-type: none;
display: inline;
}
#navigation .navlinks li a {
color: #000000;
padding: 5px 0px 9px 0px;
text-decoration: none;
font-size: 18px;
font-family: karmatic_arcaderegular;
padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover {
margin: 0px;
color: #ffffff;
background: red;
text-decoration: underline;
}
#buttons {
position: absolute;
right: 0px;
top: 113px;
bottom: 96px;
width: 155px;
overflow: auto;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
font-family: Terminal, Arial, Times New Roman;
background: -webkit-linear-gradient(#700000, #250000);
background: -o-linear-gradient(#700000, #250000);
background: -moz-linear-gradient(#700000, #250000);
background: linear-gradient(#700000, #250000);
}
#latest {
overflow: auto;
border: 1px ridge #FFA500;
width: 297px;
height: 195px;
}
#latest p {
font-family: Times New Roman;
}
#static_video {
float: right;
width: 295px;
height: 200px;
background: -webkit-linear-gradient(#000000, #252525, #000000);
background: -o-linear-gradient(#000000, #252525, #000000);
background: -moz-linear-gradient(#000000, #252525, #000000);
background: linear-gradient(#000000, #252525, #000000);
clear: left;
}
#body {
padding-top: 60px;
width: 600px;
font-family: Arial, Verdana, Terminal;
font-size: 14px;
}
#body a {
color: red;
}
#body a:hover {
color: lime;
}
#body .secret img {
width: 150px;
height: 100px;
border: 2px solid black;
}
#body .game {
padding: 3px 3px 10px 3px;
}
#body .game img {
align: center;
float: left;
width: 175px;
height: 101px;
border: 2px ridge #ff0000;
}
#body .game caption {
padding-left: 1px;
}
#body .space {
padding-top: 10px;
padding-bottom: 10px;
border-top: 4px ridge red;
border-bottom: 4px ridge red;
}
#body .game caption {
margin-top: 2px;
float: right;
font-family: Terminal, Arial, Verdana, San-Serif;
font-size: 12px;
color: #000000;
border-bottom: 2px dashed #e9e9e9;
}
#body .game a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#body .game a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer {
clear: both;
width: 730px;
height: 60px;
font-family: Tahoma, Arial, Terminal, San-Serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
#footer li {
padding: 0px 2px 0px 2px;
float: right;
display: inline;
text-align: left;
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size:; 10px;
}
#footer a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer #footnav {
display: inline;
width: 310px;
float: right;
text-align: left;
position: relative;
bottom: 65px;
}
HTML :
<html>
<head>
<title>Games - TGH</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="favicon.ico">
<!-- This Template is a WiP - Please report any bugs to the administrative team at The Gaming Hideout. Thank you. All rights reserved. -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-55096101-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<?php include_once("analyticstracking.php") ?>
<div id="wrap">
<div id="header">
<h1><img src="VexIMG/header.png" alt="The Gaming Hideout" width="760" height="60"></h1>
</div>
<div id="navigation">
<div class="navlinks">
<div id="output2">
</div>
</div>
<script src="nav.js"></script>
</div>
<div id="buttons">
<center>
<a href="http://www.youtube.com/subscription_center?add_user=JackSepticEye"><img src="http://www.thegaminghideout.com/pog/VexIMG/subscribe.png"></a>
</center>
<br>
</center>
<p>
Subscribe to the Boss, JackSepticEye's Youtube Channel!
</p>
<div id="latest">
<center>
<p id="output1"></p>
<script src="latest.js"></script></center>
</div>
</div>
<div id="body">
<div class="space">
</div>
<!--Tons of games listed which can be viewed on the `codepen` -->
</div>
<div class="space">
</div>
</div>
<div id="footer">
<div id="copyright">
Copyright © The Gaming Hideout<br>
We own no rights on any game on this site unless otherwise noted.<br>
All Rights Reserved.
</div>
<div id="footnav">
<ul>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="gamingreviews.html">The Hideout</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="chat.html">Chat</a></li>
<li><a href="index.html">About</a></li>
</ul>
</div>
</div>
JAVASCRIPT (별도의 파일은 Codepen는 하나 개의 섹션을 허용) :
var out = document.getElementById("output2");
var args = ["index", "application", "forum" ];
function displayMenu() {
var ul = document.createElement('ul');
ul.className = "mainMenu";
args.forEach(function (name, index) {
var li = document.createElement('li'),
an = document.createElement('a');
li.className = "mmenu-item-" + index;
li.setAttribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/pog/style.css";
an.innerHTML = name;
an.setAttribute('href', "http://www.thegaminghideout.com/pog/" + name + ".html");
li.appendChild(an);
ul.appendChild(li);
});
out.appendChild(ul);
}
displayMenu();
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#latestvideo').html(video);
}
}
}
window.onload = function() {
var i;
var document=window.document;
var out = document.getElementById("output1");
var args = ["Sunday, November 2nd, 2014", "We are looking for new staff members! Apply at the applications page for more information!", "There is a new MOTD under construction, so please report any bugs to the staff!"];
function displayArgs() {
"use strict";
for (i = 0; i < args.length; i++) {
out.appendChild(document.createTextNode(args[i]));
out.appendChild(document.createElement("br"));
out.appendChild(document.createElement("br"));
}
}
displayArgs(args);
};
var out = document.getElementById("footnav");
var args = ["index"];
function displayMenu() {
var ul = document.createElement('ul');
ul.className = "mainMenu";
args.forEach(function(name, index) {
var li = document.createElement('li'),
an = document.createElement('a');
li.className = "mmenu-item-" + index;
li.setAttribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/pog/style.css";
an.innerHTML = name;
an.setAttribute('href', "http://www.thegaminghideout.com/pog/" + name + ".html");
li.appendChild(an);
ul.appendChild(li);
});
out.appendChild(ul);
}
displayMenu();