ウェブページのメインコンテンツをクリック/アクセス可能にするにはどうすればよいですか？

私のウェブサイトは、フロントページのメインコンテンツですが、チャットボックスをクリックしたり使用したりすることができないという単純な事実の外で、完全に機能しています。私がそこに置く他のどんなコンテンツもクリック可能ではないと言ってもいいと思う[youtube video、etc ..]。ここでウェブページのメインコンテンツをクリック/アクセス可能にするにはどうすればよいですか？

は、サイトのHTMLだ、と私は、ページの一番下にあなたのCSSをリンクされます：

<!doctype html> 
    <html> 
    <link href="https://fonts.googleapis.com/css?family=Geo" rel="stylesheet"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sleeperz.us</title> 
    <link rel="stylesheet" type="text/css" href="http://sleeperz.us/css/main.css"> 
    </head> 
    <div align="center"> 
    <div class="contentContainer"> 
    <div style="width": 1000px; word-wrap: break-word; margin: auto; style="color": #000; style="align": center;><a href="http://www.sleeperz.us/index.html"><img src="http://sleeperz.us/imgs/sleeperz-wide.png" width="auto" height="auto"></a> 
    <div align="center"> 
    <ul> 
    <li><a href="http://www.sleeperz.us/index.html">Home</a></li> 
    <li><a href="http://www.sleeperz.us/data.html">DATA</a></li> 
    <li><a href="http://www.sleeperz.us/about.html">About</a></li> 
    <div class="dropdown"> 
    <li class="dropbtn"><li><a href="http://www.sleeperz.us/projects.html">Projects</a></li> 
    <div class="dropdown-content"> 
    <a href="http://www.sleeperz.us/nightcore-creator.html">NIGHTCORE Creator</a> 
    <a href="http://www.sleeperz.us/artwork.html">Artwork</a> 
    <a href="http://blog.sleeperz.us">My Blog</a> 
    </div> 
    </div> 
    </ul> </div> 
    <p align="center" style="text-align: center; font-family: arial; font-color: #efefef; style="width: 960px;"><p font color="#efefef"><font color="#ff0000"> 
    <p align="left"><font color="#E2E2D8"><font face="Yu Gothic"> 
    <script type="text/javascript" src="//www3.smartchatbox.com/shoutbox/start.php?key=831990491"></script> 
    <footer><div class="footer"> 
    <p align="center">&nbsp;</p> 
    <p align="center"><p font size="8px"><p font face="Yu Gothic"><font color="#efefef">2017 www.sleeperz.us (c)</p> 
    <p align="center">&nbsp;</p> 
    </footer></div></p> 
    <link rel="shortcut icon" href="http://sleeperz.us/imgs/favicon.ico"/> 
    </body> 
    </html>

CSSファイル：http://www.sleeperz.us/css/main.css

出典

2017-05-24 Akane

チャットボックスが正常に動作しているようです。アカウントを登録してサインインしてメッセージを送信できます。あなたはどんな特定の問題を抱えていますか？ –

あなたのcssファイルがスローされています。404 –

このマークアップはひどいです。 https://stackoverflow.com/help/how-to-ask – sheriffderek

あなたのHTMLには多くのエラーがありました。いくつかのdivには2つのスタイルタグがあり、bodyタグも欠けていました。

主なものは、あなたのULが100％の高さでしたか？上記の修正と同様にそれを削除すると、以下の結果が得られます。

body { 
 
\t margin: -50px auto; 
 
\t font-family: "Yu Gothic", sans-serif; 
 
\t background-color: #000000; 
 
\t background-image: url(http://sleeperz.us/backgrounds/wallpaper.png); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
\t background-size: cover; 
 
\t text-align: left; 
 
\t font-size:12px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding: 15px; 
 
    overflow: hidden; 
 
\t background-color: transparent; 
 
    position: absolute; 
 
    top: -10px; 
 
    width: 960px; 
 
\t /*height: 100%;*/ 
 
\t font-size:19px; 
 
\t font-family: Geo; 
 
} 
 

 
li { 
 
text-align: center; 
 
color: #e7010b; 
 
background-color: transparent; 
 
} 
 

 
li a { 
 
\t float: left; 
 
    display: block;  
 
\t padding: 20px; 
 
    color: #F2F2F2; 
 
    transition: .5s; 
 
\t text-decoration: none; 
 
\t background-color: transparent; 
 
} 
 

 

 

 
a:visited { 
 
    text-decoration: none; 
 
\t \t background-color: transparent; 
 
} 
 

 
a:hover { 
 
    text-decoration: none; 
 
    color: #e7010b; 
 
\t \t background-color: transparent; 
 
} 
 

 
a:active { 
 
    text-decoration: none; 
 
\t transition: .4s; 
 
} 
 

 
.dropbtn { 
 
    background-color: transparent; 
 
    color: #efefef; 
 
    padding: auto; 
 
    font-size: 12px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
/* The container <div> - needed to position the dropdown content */ 
 
.dropdown { 
 
\t float: left; 
 
    display: relative; 
 
} 
 

 
/* Dropdown Content (Hidden by Default) */ 
 
.dropdown-content { 
 
    display: none; 
 
    position: fixed; 
 
    background-color: #f9f9f9; 
 
    min-width: 260px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
\t top: 65px; 
 
    z-index: 1; 
 
} 
 

 
/* Links inside the dropdown */ 
 
.dropdown-content a { 
 
    color: #000; 
 
    padding: 8px 10px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown-content a:hover { 
 
\t transition: .4s; 
 
\t background-color: #f1f1f1; 
 
\t } 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: transparent; 
 
} 
 

 
.main { 
 
\t align: center; 
 
    padding: auto; 
 
    margin-top: auto; 
 
    height: auto; /* Used in this example to enable scrolling */ 
 
\t text-align: center; 
 
    background-position: center; 
 
} 
 

 
.contentContainer { 
 
     width:1000px; 
 
     height: 1100px auto; 
 
\t background-color: rgba(0, 0, 0, 0.91); 
 
\t background-position: center; 
 
\t min-height: calc(120% - 300px); 
 
\t margin: 0px; 
 
} 
 
    
 
footer { 
 
    bottom: 0px; 
 
    height: 150px; 
 
    left: 0; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
    
 
#background_cycler{padding:0;margin:0;width:100%;position:absolute;top:0;left:0;z-index:-1} 
 
#background_cycler img{position:absolute;left:0;top:0;width:100%;z-index:1} 
 
#background_cycler img.active{z-index:3}

<!doctype html> 
 
    <html> 
 
    <link href="https://fonts.googleapis.com/css?family=Geo" rel="stylesheet"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Sleeperz.us</title> 
 
    </head> 
 
    <div align="center"> 
 
    <div class="contentContainer"> 
 
    <div style="width: 1000px; word-wrap: break-word; margin: auto;color: #000;"><a href="http://www.sleeperz.us/index.html"><img src="http://sleeperz.us/imgs/sleeperz-wide.png" width="auto" height="auto"></a> 
 
    <div align="center"> 
 
    <ul> 
 
    <li><a href="http://www.sleeperz.us/index.html">Home</a></li> 
 
    <li><a href="http://www.sleeperz.us/data.html">DATA</a></li> 
 
    <li><a href="http://www.sleeperz.us/about.html">About</a></li> 
 
    <div class="dropdown"> 
 
    <li class="dropbtn"><li><a href="http://www.sleeperz.us/projects.html">Projects</a></li> 
 
    <div class="dropdown-content"> 
 
    <a href="http://www.sleeperz.us/nightcore-creator.html">NIGHTCORE Creator</a> 
 
    <a href="http://www.sleeperz.us/artwork.html">Artwork</a> 
 
    <a href="http://blog.sleeperz.us">My Blog</a> 
 
    </div> 
 
    </div> 
 
    </ul> </div> 
 
    <p align="center" style="text-align: center; font-family: arial; font-color: #efefef;width: 960px;"><p font color="#efefef"><font color="#ff0000"> 
 
    <p align="left"><font color="#E2E2D8"><font face="Yu Gothic"> 
 
    <script type="text/javascript" src="//www3.smartchatbox.com/shoutbox/start.php?key=831990491"></script> 
 
    <footer><div class="footer"> 
 
    <p align="center">&nbsp;</p> 
 
    <p align="center"><p font size="8px"><p font face="Yu Gothic"><font color="#efefef">2017 www.sleeperz.us (c)</p> 
 
    <p align="center">&nbsp;</p></div> 
 
    </footer></p> 
 
    <link rel="shortcut icon" href="http://sleeperz.us/imgs/favicon.ico"/> 
 
    </body> 
 
    </html>

これはあなたのために働くなら、私に教えてください。

出典

2017-05-24 04:49:16 Syfer

で言及されているボディータグが見つからなかったことにも関係しています。それはすごくうまくいっていて、私は他の回答から助言も受けました。どうもありがとうございました。 – Akane

まずあなたはスタートbodyタグ<body>
が欠落しているされていますと

<div style="width": 1000px; word-wrap: break-word; margin: auto; style="color": #000; style="align": center;>

リクする必要があります電子

<div style="width: 1000px; word-wrap: break-word; margin: auto; color: #000;" align= "center">

とフォントタグがhereを属性を使用する方法についてお読みください。あなたが使っている方法は間違っています。

出典

2017-05-24 04:41:03 Kuru

ウェブページのメインコンテンツをクリック/アクセス可能にするにはどうすればよいですか？

有効なHTMLを書き、ウィンドウ全体を目に見えない要素で覆わないでください。

ウィンドウ全体をカバーする順序付けられていないリストがあります。このマークアップはひどく、完全に書き直す必要があります。

ul { 
    list-style-type: none; 
    margin: 0px; 
    padding: 15px; 
    overflow: hidden; 
    background-color: transparent; 
    position: absolute; 
    top: -10px; 
    width: 960px; 
    height: 100%; 
    font-size: 19px; 
    font-family: Geo; 
}

この特定の問題に加えて、align: centerのようなものはHTML5では無効です。

出典

2017-05-24 04:45:01 sheriffderek

これはおそらく@Kuru – sheriffderek

ウェブページのメインコンテンツをクリック/アクセス可能にするにはどうすればよいですか？

答えて

関連する問題