我遇到了麻煩與CSS干擾與我不想要的元素

這是我的網站。 http://www.gtaresources.net/我遇到了麻煩與CSS干擾與我不想要的元素

CSS使錨元素具有某些css屬性，我只是想讓它像導航欄一樣。只是登錄按鈕，當我添加一個菜單。但現在你可以看到右上角圖像背後的綠色。它不應該落後於每個錨點，我只是想爲某些錨點，我不能或不知道如何做內聯的CSS只有菜單與a：visited和a：懸停和東西。什麼是解決方案？我只需要使某些CSS僅適用於某些元素或元素。

我記錄了干擾的CSS開始和結束的位置。

這裏我源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
<head> 
<title>GTA Resources</title> 
<style type="text/css"> 
html 
{ 
background-color: #003300; 
padding-right: 11%; 
padding-left: 11%; 
} 
body 
{ 
background-color: black; 
} 
#p 
{ 
color: white; 
} 
#para 
{ 
color: white; 
padding-right: 2%; 
padding-left: 2%; 
} 
a 
{ 
color: #003300; 
} 
.logo 
{ 
padding-top: 4px; 
padding-left: 4px; 
} 

ul {     <!-- Css that is interferring begins --> 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
} 

li { 
float: left; 
} 

a:link, a:visited { 
display: block; 
width: 120px; 
font-weight: bold; 
color: #FFFFFF; 
background-color: #98bf21; 
text-align: center; 
padding: 4px; 
text-decoration: none; 
text-transform: uppercase; 


a:hover, a:active { 
background-color: #7A991A; 
}       <!-- Css that is interferring ends --> 
</style> 
<script type = "text/javascript"> 

function validate() { 
var un = document.myform.username.value; 
var pw = document.myform.pword.value; 
var valid = false; 

var unArray = ["admin"]; 
var pwArray = ["password"]; 

for (var i=0; i <unArray.length; i++) { 
if ((un == unArray[i]) && (pw == pwArray[i])) { 
valid = true; 
break; 
} 
} 

if (valid) { 
alert ("Logged In."); 
window.location = "/victoria/logged_in.html"; 
return false; 
} 

} 

</script> 
</head> 
<body> 

<ul background="/victoria/cutiepie2.jpg" hidden> 
<li><a href="/scripts/call.php" id="blue">Call</a></li> 
<li><a href="/scripts/text.html" id="blue">Text</a></li> 
<li><a href="/menu/home.html" id="blue">Home</a></li> 
<li><a href="/menu/news.html" id="blue">News</a></li> 
<li><a href="/menu/media.html" id="blue">Media</a></li> 
<li><a href="/menu/downloads.html" id="blue">Downloads</a></li> 
<li><a href="/menu/forum.html" id="blue">Forum</a></li> 
</ul> 

<a href="/index.html"><img src="/victoria/logo.jpg" width="250" height="75" class="logo"></a> 

<ul style="list-style-type: none;margin: 0;padding: 0;overflow: hidden;position: absolute;top: 4px;right: 4px;"> 
<li style="float: left;"><a style="display: block;width: 120px;font-weight: bold;color: #FFFFFF;background-color: black;text-align: center;padding: 4px;text-  decoration: none;text-transform: uppercase;" href="/victoria/logged_in.html">Log in</a></li> 
</ul> 

<form name = "myform" style="position: absolute; top: 0;right: 0;" hidden> 

<p id="p">Username: <input type="text" name="username"> 

Password: <input type="password" name="pword"> 

<input type="button" value="log in" onclick= "validate()"></p> 

</form> 

<center><h1 style="color: #003300;">GTA Resources</h1></center> 

<center><img src="http://i1-news.softpedia-static.com/images/news2/Call-of-Duty-Ghosts-Publisher-Wants-to-Break-GTA-5-Sales-Record-Soon-392209-2.jpg" 

width="1000" height="500"></center> 

<br><br> 

<p id="para"> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Welcome to Gta Resources. This is a site all about gta, the cheats, mods, and videos of within it. From hiliarous videos to 
videos of how to make, convert, and import mods into gta. This site has everything. Right now it focuses on Gta 5 but in the future it will have topics on all 
the other Gta's too. This site will have media on the Mods for example, details in a description, videos on and how to do them, and download links, unless 
there is no link. Then I will try my best to give information on it, and where you might be able to get it. There will be a forum soon for discussing topics 
on anything Gta related. And just have a good time. Enjoi!!:) 
</p> 

<center><a href="/victoria/click_here_for_help.html">Click here for help</a></center> 

<p id="p" style="text-align: right;">GTA Resources(c) 2014</p> 

</body> 
<!--MTD(c) 2014--> 
</html>

來源

2014-07-14 Shane Martin

是您的網站降權呢？它沒有加載。你能否在你的問題中提供實際的代碼？ – Tim

是的，我嘗試過，但它是要求我格式化，所以我做了，但它是reanging我的文本，並使生病添加它。 –

乾淨的方法來完成，這將是使用CSS類。在你的HTML中，添加一個類到應該有綠色背景的CSS元素。

HTML：

<a href="#" class="green-on-hover">my link</a>

CSS：

a.green-on-hover:hover { 
    background-color : green; 
}

注意：類名，就像一個變量名可以是任何東西，甚至 '連字符' 被允許在類名。我給了'綠色懸停'，你可以任意調用它。發現這個非常簡單的教程，以幫助你與類： http://www.tizag.com/cssT/class.php

希望有所幫助。如果您有任何問題，請告訴我。

一個建議：嘗試提出您的問題，下次更通用。

來源

2014-07-14 08:23:02

是的，我是新來這個網站謝謝。我認爲這將是類。我只是不知道如何放置a：hover和a：visited雖然。像那樣的事情，我在哪裏放？我不把它放在綠色懸停下的父母身上，對吧？ –

只需將class =「green-on-hover」添加到您需要綠色背景的每個a-link中，如我在答案中所示。然後，在CSS中更改所有干涉a：hover和a：visited到a.green-on-hover：hover和a.green-on-hover：visited。 –

Omg Rakesh Gopal。謝謝。我沒有注意到你說過「a.green-on-hover：hover」。我沒有完全閱讀。這正是我需要的。我認爲這將是一個班級或身份證...但這就是我想說的，但我甚至不知道我需要什麼。我不知道你可以申請一個類到a：hover的東西，我不知道它叫什麼。它叫什麼？但你回答了我的問題。感謝其他幫助過的人。我應該知道的。 -.- –

你用綠色背景錨，你把它放在圖像裏面，你會看到你的結果。

試試這個

html: 
<a href="/index.html"> 
    <img width="250" height="75" class="logo" src="/victoria/logo.jpg"> 
    <span></span> 
</a>

CSS：

a,a:link, a:visited { 
    color: #ffffff; 
    position:relative; 
    display: block; 
    font-weight: bold; 
    padding: 4px; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    width: 120px; 
} 
a span{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    background-color:#98bf21; 
    z-index:2; 
    left:0; 
    top:0; 
} 
a img{ 
position:relative; 
z-index:0; 
}

來源

2014-07-14 08:29:19 user3818576

哦，好吧，謝謝。我會試試看。看上去不錯。 –

不客氣。 – user3818576

我遇到了麻煩與CSS干擾與我不想要的元素

回答

相關問題