2013-10-11 140 views
0

這是我的HTMLCSS按鈕鏈接重疊

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Corruption in India</title> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="header"> 
       <h1 id="heading">Corruption in India</h1> 
      </div> 
      <div id="menu"> 
       <ul> 
        <li><a href="http://www.google.com">GOOGLE</a></li> 
       </ul> 
      </div> 
     </div> 
    </body> 
</html> 

我的CSS是

#header { 
    height:%; 
    width:100%; 
} 

#heading { 
    margin-top:20px; 
    margin-left:5%; 
    margin-right:25%; 
} 

#menu { 

} 

#wrapper { 
    height:33%; 
    background:-moz-linear-gradient(bottom,#A6BDF1,#122C67); 
} 

li { 
    list-style-type:none; 
} 

a { 
    text-decoration:none;padding:4px 4px 4px 4px; 
    background-color:#112759; 
} 

但按鈕鏈接重疊了。請給我一個出路。 我給它一個線性漸變,語法大多正確,看起來像一個設計問題。

+0

鍋它的小提琴,請.. – avrahamcool

+0

我只是把這個代碼放到我自己的小提琴和鏈接似乎精細。你可以用你所有的代碼製作你自己的小提琴,這樣我們就可以看到確切的問題了嗎? –

+0

我在JS BIN –

回答

1

像這樣

demo

CSS

#heading { 
margin-top:20px; 
margin-left:5%; 
margin-right:25%; 
} 

#wrapper { 
    height: 33%; 
    background: #a6bdf1; /* Old browsers */ 
background: -moz-linear-gradient(top, #a6bdf1 0%, #122c67 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a6bdf1), color-stop(100%,#122c67)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #a6bdf1 0%,#122c67 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #a6bdf1 0%,#122c67 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #a6bdf1 0%,#122c67 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #a6bdf1 0%,#122c67 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6bdf1', endColorstr='#122c67',GradientType=0); /* IE6-9 */ 

    float:left; 
    overflow:hidden; 
    width:100%; 

} 
#menu { 
} 
#menu > ul{ 
} 
#menu > ul > li { 
    list-style-type: none; 
} 
#menu > ul > li > a { 
    text-decoration: none; 
    padding: 4px 4px 4px 4px; 
    background-color: #112759; 
    color:#ffffff; 
} 
+0

下面出現的哇!這太多的幫助 –

+0

Thnx,Fags.This工作 –