0
編輯：有人發佈了一個答案但刪除了它。幸運的是我預先抓住了它，並導致了一個修復。將{display：table-cell}添加到（.left）中有訣竅。謝謝陌生人！瀏覽器兼容性 - Chrome和FF中的DIV不同
第一次海報。使用JFDI方法在我的第一個網站上工作。請原諒任何狡猾的或從規範中散佈的東西。我希望很快就能在那裏出現！
我使用Chrome和Espresso的預覽版將此網站編碼爲視覺參考。我接近完成，只注意到其中一個DIV在FireFox中關閉。
我做了一些搜索，看看這是常見的。我嘗試了一些快速修復，但還沒有找到正確的。謝謝你的幫助！
事情我已經嘗試：它不是被它引起了社會導航按鈕。我也嘗試將基於百分比的DIV高度改變爲基於像素的。我試過「重置CSS」（不知道我是否做對了）。我嘗試將整個文檔的頭部和身高設置爲100％。
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>ever's podcasts</title>
</head>
<body>
<div id="header">
<p class="head">
.ever
</p>
</div>
<div class="left">
<p class="navtop">
future house distillery hour
<hr class="faded"/>
<p class="navtop">
desert sunrise sessions
<hr class="faded"/>
<p class="navtop">
tc10
<hr class="faded"/>
<p class="navbottom">
<a href="https://twitter.com/TCannadySF">
<img src="file://localhost/Users/Tim/Desktop/Tims%20Website/Images/twitter-bird-white.svg" class="navimages"></a>
<a href="https://soundcloud.com/ever">
<img src="file://localhost/Users/Tim/Desktop/Tims%20Website/Images/soundcloud_logo_css_by_timpietrusky.jpg" class="navimages"></a>
<a href="http://www.linkedin.com/in/timcannady">
<img src="file://localhost/Users/Tim/Desktop/Tims%20Website/Images/mnml-white-linkedin-icon-26240.png" class="navimages"></a>
<a href="http://wallpoper.com/images/00/37/45/87/eyes-illuminati_00374587.gif">
<img src="file://localhost/Users/Tim/Desktop/Tims%20Website/Images/white-triangle-white-md1.png" class="navimages"></a>
</div>
<div class="right">
<div class="set">
<p>
<iframe width="90%" height="170px" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F111659606&color=ff6600&auto_play=false&show_artwork=true"></iframe>
<br>
<strong>DSS.1 september 20, 2013</strong>
<ol>
<li>Black is The Colour (Cumik's Edit) - Nina Nimone & LuLu Rogue</li>
<li>The Hope (Recondite's Nocturnal Car Ride) - Scuba</li>
<li>A Walk On The Clouds - Fabio Gianelli</li>
<li>When The Sun Goes Down - Alex Flatliner, Hermanez</li>
<li>Panta Rei (Max Cooper Remix) - Agoria</li>
<li>Miami's My Town - Jesse Perez</li>
<li>Slo-Mo Girl (Fur Coat Dark After Hour Mix) - Delete (aka Sergio Munoz)</li>
<li>Cleric - Recondite</li>
<li>Shake it Mama - Jupiter Jazz</li>
<li>Tears of a Clown (Ryan Davis Remix) - Pig&Dan</li>
<li>Spiral Inflections - Max Cooper</li>
<li>Pleasures (Ghosting Season Remix) - Max Cooper, BRAIDS</li>
</ol>
</p>
<p>
<iframe width="90%" height="166px" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F105780607"></iframe>
<br>
<strong>FHDH.2 august 14, 2013 </strong>
<ol>
<li>Arahova - David Kassi</li>
<li>Love This Sound - Bryan Lead</li>
<li>Brotherman - Detroit Swindle</li>
<li>Serenade - Wally Lopez, Audio Junkies</li>
<li>No Equal Sides - Audiojack</li>
<li>I Need You - Leftwing, Kody</li>
<li>Get On Down (Roberto Rodriguez Remix) - Atnarko, Jevne</li>
<li>In Principal - Audiojack</li>
<li>I'm Into This - Homework</li>
</ol>
</p>
<p>
<iframe width="90%" height="166px" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F67018569"></iframe>
<br>
<strong>FHDH.1 n ovember 10, 2012</strong>
<ol>
<li>Golden Bullet (Alvaro Hylander Remix) - Jean Jeak</li>
<li>Yesterday's Future Feat. Amy G (Evrey Ulusoy Perfect Present Remix) - Houseriders</li>
<li>Ol Times (Till Von Stein & Chopstick Remix) - Lihab, Findling</li>
<li>Policrom (Audiojack Remix) - NTFO, Audiojack</li>
<li>Another Boring Love Song (Alvaro Hylander Remix) - Seraphine</li>
<li>Go Down (Anton Pieete Remix) - Hermanez</li>
<li>Nobody Else - NTFO, Karmon</li>
<li>Almost Here Pt 1 - Pezzner</li>
<li>Keep On (Simon Baker's Keepin On Remix) - Marvin Zeyss</li>
</ol>
</p>
</div>
</div>
<div id="footer"></div>
</body>
</html>
CSS
/*header div*/
#header{
font-size: 45px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
color: #FFFFFF;
padding-left: 20px;
border-radius: 10px;
position: fixed;
top: 0px;
left: 0px;
background-color: #FF6600;
width: 96.9%;
height: 10%;
margin: 10px;
display: table;
}
/*for header copy*/
.head{
position: relative;
display: table-cell;
vertical-align: middle;
}
/*right div*/
.right{
border-radius: 10px;
border-top:13px solid #FF8000;
border-bottom:13px solid #FF8000;
background-color: #FF8000;
width: 82%;
height: 79.5%;
float: right;
right: 0;
top: 75px;
position: fixed;
margin: 10px;
margin-top: 18px;
overflow: scroll;
}
/*formats right div's text*/
.set{
font-size:11px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
color: #FFFFFF;
padding-left: 25px;
}
/*left div*/
.left{
border-radius: 10px;
background-color: #FF8000;
width: 13%;
height: 83.5%;
float: left;
left:0px;
top: 75px ;
position: fixed;
margin-left: 10px;
margin-top: 18px;
display: table;
padding: 15px;
overflow: auto;
}
/*for left divs writing at the top*/
.navtop{
font-size: 20px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
color: #FFFFFF;
display: table-cell;
vertical-align: middle;
display: block;
text-align: center;
}
/*to get the left div social images to the bottom*/
.navbottom{
bottom: 13px;
position: fixed;
}
/*to set the left div social image sizes*/
.navimages{
height: 20px;
width: 20px;
}
/*to set header div text size*/
.headimages{
height: 30px;
width: 30px;
}
/*<hr> styling*/
hr.faded{
border: 0;
width:75%;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,255.75), rgba(255,255,255,0));
background-image: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,255.75), rgba(255,255,255,0));
background-image: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,255.75), rgba(255,255,255,0));
background-image: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,255.75), rgba(255,255,255,0));
}
更好地創建一個jsFiddle並提供鏈接 –
你可以回答自己的問題，然後接受你的答案，以關閉問題。 –
感謝您的提醒！事實證明，新用戶在8小時過後才能回答自己的問題。 – TCannadySF