因爲做錯了某些事情。 我想將我的標誌放在我的網站上,並將網站的標題放在旁邊。但我的「headerlogo.png」不會與火狐和IE中的「高度」互換,只能在Chrome中工作......不知道爲什麼...... 想要放置一些截圖但未奏效...Firefox + IE,不要在Chrome上運行圖片Html,CSS,
所以網站已經在線。你可以訪問它Click HERE。 所以這裏是我的home.html的代碼我正在研究和測試,並將最終代碼複製到其他頁面,所以不關心它們... 只有關於home.html
這裏是對於home.html的和我的style.css代碼:
body {
background-color: #222;
}
header {
background-color: #000;
color: #FFF;
font-weight: bolder;
}
table {
border-style: none;
}
.headerlogo {
height: 7%;
margin-left: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.headerpic {
padding-left: 9%;
margin-bottom: 2%;
margin-top: 2%;
width: auto;
height: 100%;
}
.navpic {
width: 17%;
float: left;
background-color: #000;
margin-right: 3%;
margin-bottom: 0.2%;
box-shadow: 5px 0px 10px black;
}
.nav {
list-style-type: none;
background-color: #000;
margin-top: -1%;
}
.navpic:hover {
background-color: #111;
}
hr.bottom {
margin-bottom: 2%;
}
div.articletd {
background-color: #111;
color: #FFF;
width: 640px;
height: 400px;
font-family: sans-serif;
float: left;
margin-top: -3px;
padding-left: 2%;
padding-right: 2%;
margin-left: 2%;
}
td.normalarticle {
background-color: #111;
color: #FFF;
font-family: sans-serif;
text-align: left;
vertical-align: top;
padding-left: 2%;
padding-right: 2%;
line-height: 1.6;
height: auto;
width: 49.5%;
}
table.normalarticleeinseitig {
background-color: #111;
color: #FFF;
font-family: sans-serif;
text-align: left;
vertical-align: top;
padding-left: 2%;
padding-right: 2%;
line-height: 1.6;
height: auto;
width: 100%;
;
border: 0 solid #222;
;
}
table.normalarticle {
width: 100%;
line-height: 1.6;
border: 0 solid #222;
;
}
.middlearticle {
width: 1%;
background-color: #222;
}
.kontaktformularrechts {
margin-left: 20%;
}
.buttonformular {
background-color: #111;
color: #FFF;
border-width: medium;
}
h1 {
font-size: 2em;
margin-top: 2%;
text-align: left;
}
p.ptd {
line-height: 1.6;
text-align: left;
padding-left: 2%;
}
.spotifylink {
width: 4%;
height: 4%;
}
a.spotifylink:hover {
background-color: #FFF;
}
.footer {
background-color: #000;
margin-top: 1%;
color: #FFF;
}
.footerp {
margin-left: 5%;
font-family: sans-serif;
}
.footertd {
width: 100%;
}
footer td {
width: 7.5%;
text-align: center;
}
footer img {
margin-top: -20%
}
.recht {
margin-top: 1%;
background-color: #111;
color: #FFF;
font-family: sans-serif;
}
.impressumtable {
width: 37.5%;
margin-left: 3.5%;
}
.impressumtd {
text-align: left;
}
a {
text-decoration: none;
}
a:link {
color: #FFF;
}
a:visited {
color: #FFF;
}
a:active {
color: #FFF;
}
a:hover {
color: #AAA;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/x-icon" href="bilder/favicon.png">
<title>DJ Dre Loo</title>
</head>
<body>
<header>
<table>
<tr>
<td >
<img class="headerlogo" src="bilder/headerlogo.png">
</td>
<td class="headerpic">
<img src="bilder/headertitle.png">
</td>
</tr>
</table>
</header>
<hr>
<nav>
<div>
<ul class="nav">
<li class="navfirst">
<a href="home.html"><img class="navpic" src="bilder/home.png"></a>
</li>
<li>
<a href="biografie.html"><img class="navpic" src="bilder/biografie.png"></a>
</li>
<li>
<a href="djing.html"><img class="navpic" src="bilder/djing.png"></a>
</li>
<li>
<a href="kontakt.html"><img class="navpic" src="bilder/kontakt.png"></a>
</li>
<li>
<a href="td.html"><img class="navpic" src="bilder/td.png"></a>
</li>
</ul>
</div>
<hr class="bottom">
</nav>
<article>
<table class="normalarticleeinseitig">
<tr>
<td>
<div style="height:10px;font-size:10px;"></div>
<div align="center">
<img width="100%" src="bilder/eingebunden/Homepic.png">
</div>
</td>
</tr>
</table>
</article>
<hr height="0px" color="#222">
<footer>
<div class="footer">
<table class="footertd">
<tr>
<td>
<p class="footerp">
<a href="https://www.facebook.com/djdreloo/">Facebook</a>
</p>
</td>
<td>
<p class="footerp">
<a href="mailto:[email protected]">Email</a>
</p>
</td>
<td>
<p class="footerp">
<a href="https://www.instagram.com/dreloo/">Instagram</a>
</p>
</td>
<td>
<p class="footerp">
<a href="https://twitter.com/djdreloo">Twitter</a>
</p>
</td>
<td>
<p class="footerp">
<a href="https://open.spotify.com/user/andreschuele">Spotify</a>
</p>
</td>
<td>
<p class="footerp">
<a href="http://www.mixcrate.com/djdreloo">Mixcrate</a>
</p>
</td>
<td>
<p class="footerp">
<a href="https://www.mixcloud.com/DJ_DRE_LOO/">Mixcloud</a>
</p>
</td>
<td>
<p class="footerp">
<a href="https://www.facebook.com/djdreloo/">Mixify</a>
</p>
</td>
</tr>
<tr>
<td>
<p class="footerp">
<a href="https://www.facebook.com/djdreloo/"><img width="25%" src="bilder/facebooklogo.png"></a>
</p>
</td>
<td>
<p class="footerp">
<a href="mailto:[email protected]"><img width="30%" class="linklogos" src="bilder/maillogo.png"></a>
</p>
</td>
<td>
<p class="footerp">
<a href="https://www.instagram.com/dreloo/"><img width="25%" class="linklogos" src="bilder/instagramlogo.png"></a>
</p>
</td>
<td>
<p class="footerp">
<a href="https://twitter.com/djdreloo"><img width="25%" class="linklogos" src="bilder/twitterlogo.png"></a>
</p>
</td>
<td>
<p class="footerp">
<a href="https://open.spotify.com/user/andreschuele"><img width="25%" class="linklogos" src="bilder/spotifylogo.png"></a>
</p>
</td>
<td>
<p class="footerp">
<a href="http://www.mixcrate.com/djdreloo"><img width="25%" class="linklogos" src="bilder/mixcratelogo.png"></a>
</p>
</td>
<td>
<p class="footerp">
<a href="https://www.mixcloud.com/DJ_DRE_LOO/"><img width="30%" class="linklogos" src="bilder/mixcloudlogo.png"></a>
</p>
</td>
<td>
<p class="footerp">
<a href="https://open.spotify.com/user/andreschuele"><img width="45%" class="linklogos" src="bilder/mixifylogo.jpg"></a>
</p>
</td>
</tr>
</table>
</div>
<div class="recht">
<table class="impressumtable">
<tr>
<td class="impressumtd">
<a href="Impressum.html">Impressum</a>
</td>
<td class="impressumtd">
<a href="Disclaimer.html">Disclaimer</a>
</td>
<td class="impressumtd">
<a href="selber.html">(*)Warum...</a>
</td>
</tr>
</table>
</div>
</footer>
</body>
</html>
也許你可以幫我:)
該網站不包含任何css3元素,所以你不需要跨瀏覽器supprorting標籤。它與您的表代碼 –
與浮動左所有看起來真的令人毛骨悚然......圖片也沒有rezised也在鉻和我的導航欄不內聯... –
但另一方面,我也在使用一個表在頁腳那裏rezising工作正常... –