2013-08-23 67 views
0

請查看以下圖片:Dreamweaver設計和實時視圖顯示不同的東西?

http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png(設計視圖) http://gyazo.com/a1e09aacc855c013d349017d0487402d.png(直播&瀏覽器視圖)

正如你可以在已置於頁面看上去很好,而且設計視圖一切看也是正是我想要的!但是當我在網絡瀏覽器中進行實時查看或預覽時,它會以不同方式顯示,其中一些內容與我的導航有重疊。我真的不知道該怎麼辦?我將在下面顯示我的代碼:

HTML:

<nav> 
     <ul> 
      <li> <a href="index.html">Home</a></li> 
      <li> <a href="news.html">News</a></li> 
      <li> <a href="events.html">Events</a></li> 
      <li> <a href="galleries.html">Galleries</a></li> 
      <li> <a href="videos.html">Video </a></li> 
      <li> <a href="history.html">History</a></li> 
      <li> <a href="contact.html"> Contact</a></li> 

     </ul>  
     </nav>  



    <div id="contactheader"> 
     <p>Get in touch with FIFAScene: </p> 
    </div>  


    <p>&nbsp;</p> 

    <div id="contactcontent">  
     <p>If you have any feedback regarding our website, or wish to comment on anything FIFA eSport related, then please contact us via:</p> 
    </div> 

    <p>&nbsp;</p> 
    <p>&nbsp;</p> 

    <ul> 
      <div id="contacthotmail"> 
       <li>[email protected]<img src="images/icons/outlook.png" width="112" height="95"></li> 
      </div> 

      <div id="contactsm"> 
       <li><a href="http://www.twitter.com/FIFAScene">www.twitter.com/FIFAScene<img src="images/icons/twitter.png" width="94" height="78"></a> 
       <a href="http://www.facebook.com/FIFAScene">www.facebook.com/FIFAScene<img src="images/icons/facebook.png" width="67" height="63"></a></li> 
      </div> 
    </ul> 

CSS:

nav { 
float:left; 
position:relative; 
} 

nav ul li { 
display:block; 
margin:20%; 
padding:30%; 
list-style-type: none; 
font-family:Segoe UI Light; 
font-size:30px; 
text-align: center; 
} 

#contactheader { 
text-align:center; 
color:#0099FF; 
font-family:Segoe UI Light, sans-serif; 
font-size:20px; 
} 

#contactcontent { 
text-align:center; 
color:#0099FF; 
font-family:Segoe UI Light, sans-serif; 
font-size:18px; 
} 

#contacthotmail { 
text-align:center; 
color:#0099FF; 
font-family:Segoe UI Light, sans-serif; 
font-size:18px; 
} 

#contactsm { 
text-align:center; 
    color:#0099FF; 
font-family:Segoe UI Light, sans-serif; 
font-size:18px; 
margin-top:40px; 

} 

很抱歉,如果我所提供的信息太多,我是比較新的設計網站和編程!

謝謝。

+0

不要依賴或使用Dreamweaver的設計視圖feauture。渲染事物很糟糕。在本地測試並在瀏覽器中檢查元素以查看它在做什麼。 –

+0

對不起,我不打算聽起來有什麼意思,但「設計視圖」不是瀏覽器,不應該使用。這是排名不知道如何編碼的業餘愛好者。使用真實的瀏覽器和瀏覽器的調試器。 –

回答

0

如果你想使用Dreamweaver,你應該拋棄設計視圖,並養成在瀏覽器中預覽所有內容並用瀏覽器Web檢查器進行故障排除的習慣。

如果你真的想看到你的CSS和定位的實時預覽,你可以在Web檢查器中做一些。如果你有機會訪問Mac,你應該考慮在macrabbit上查看Espresso http://macrabbit.com/espresso/

另外,要小心Dreamweaver正在製作的非破壞性空間返回(<p>&nbsp;</p>)標籤,請刪除em並使用css代替。

0

可能您的DW版本沒有將某些HTML5元素看作塊類型元素。作爲讓步的方案,你可以在你的CSS行添加到導航元素:

display: block; 

從而embettering的設計視圖的「預後」鍵入。

編輯開始於: 我自己我使用Design-View來輸入內容。對於某些UTF字符,它可能很方便,例如雙引號。編寫(非)有序列表時,我使用它很多。有時候我用它來輸入內容,而沒有啓用視覺輔助或css。我的建議是將其用作工具,但同時打開瀏覽器並加載文檔。 Adobe提供了幾個教程,提供了在設計視圖中幾乎可以一致預覽頁面的策略,但這差不多。即時取景提供了更好的標準。

由於評論,我嘗試了DW5.5中的代碼。我想看看我能夠保持導航和主標籤的多少,並將它們作爲花車使用。 爲了在設計視圖和實時視圖(在Windows上按ALT + 11)的預覽具有一定的一致性,可以清除浮動的包裝(請參閱Louis Lazaris文章的鏈接)似乎有所幫助。

我嘗試了聯繫人徽標的金字塔布局作爲浮動,但我無法正確地將以下兩個鏈接居中,沒有太多的忙碌。爲了讓這些中心,我做了這些顯示爲內嵌塊。

此外,導航列表項上的填充有點異乎尋常,兩邊都有50%。

html, 
 
body { 
 
    width: 100%; 
 
} 
 
body { 
 
    font: 18px/1.25 "Segoe UI Light"; 
 
    color: #0099FF; 
 
} 
 

 
html, body, 
 
h1, h2, h3, p, ul, li, 
 
div, 
 
nav, main, 
 
a, img, 
 
a img { 
 
    margin: 0; 
 
    border: none; 
 
    padding: 0; 
 
} 
 

 
h1 { 
 
    font-size: 2.618em; 
 
    text-align: center; 
 
    padding: 1em 0; 
 
    margin-left: 20%; 
 
    margin-right: 5%; 
 
} 
 

 
a { 
 
    color: #0099FF; 
 
    text-decoration: none; 
 
} 
 
.wrap { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
nav, main { 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 20%; 
 
} 
 

 
main { 
 
    width: 75%; 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
} 
 

 

 
nav ul { 
 
} 
 

 
nav ul li { 
 
    font-size: 1.666em; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    line-height: 2.25; 
 
} 
 

 

 
.contactheader { 
 
    font-size: 1.666em; 
 
} 
 

 
.contactcontent { 
 
    font-size: 1em; 
 
} 
 

 

 
.contactsms { 
 
    display: inline-block; 
 
    margin: auto; 
 
} 
 

 
.contactsms ul { 
 
} 
 

 
.contactsms ul li { 
 
    display: inline-block; 
 
    padding: 1em 1em; 
 
    margin: 0 auto; 
 
} 
 
.contactsms ul li img { 
 
    white-space: nowrap; 
 
    vertical-align: text-bottom; 
 
} 
 

 
.whiteSpace { 
 
    height: 2em; 
 
}
<div class="wrap"> 
 
    <h1>Contact Us</h1> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Home</a></li><!-- 
 
    --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Design</a></li><!-- 
 
    --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">View</a></li><!-- 
 
    --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Mess</a></li><!-- 
 
    --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Video </a></li><!-- 
 
    --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">History</a></li><!-- 
 
    --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
    <main> 
 
    <div class="contactheader"><p>Get in touch with DreamWeaver:</p></div><!-- contactheader --> 
 
    <div class="whiteSpace"></div><!-- whiteSpace --> 
 
    <div class="contactcontent"> 
 
     <p>If you're interested in how the design view could be of help in your <em>'workflow'</em>, its abilities and disabilities, look out for AdobeTV tutorials like:</p> 
 
    </div><!-- contactcontent --> 
 
    <div class="whiteSpace"></div><!-- whiteSpace --> 
 
    <div class="whiteSpace"></div><!-- whiteSpace --> 
 
    <ul> 
 
     <li class="contacthotmail"><a href="https://video.search.yahoo.com/video/play;_ylt=A2KLqIN1TcNWCF8A2qQsnIlQ;_ylu=X3oDMTBzMmQ2MHUwBHNlYwNzcgRzbGsDdmlkBHZ0aWQDBGdwb3MDMTc-?p=Taming+the+Web+Greg+Rewis+Youtube&vid=5e43e36d0d668c3a7c2e36670d98d1e2&turl=http%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOVP.V42f1ecfd29e64dec6b34ac147dacb021%26pid%3D15.1%26h%3D168%26w%3D300%26c%3D7%26rs%3D1&rurl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DvabpQhJD3FA&tit=HTML5+%26+CSS3+with+Dreamweaver+CS5+-+Part+1&c=16&h=168&w=300&l=572&sigr=11bcfkama&sigt=11a5a8ev8&sigi=1310fh8ok&age=1275343369&fr2=p%3As%2Cv%3Av&fr=yhs-mozilla-002&hsimp=yhs-002&hspart=mozilla&tt=b">Taming the Web, Greg Rewis<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Adobe_Systems_logo_and_wordmark.svg/200px-Adobe_Systems_logo_and_wordmark.svg.png" width="112" height="95"></a></li><!-- 
 
    --><li class="whiteSpace"></li><!-- 
 
    --><li class="whiteSpace"></li><!-- 
 
    --><li class="contactsms"> 
 
     <ul> 
 
      <li><a href="http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements">StackOverflow: center floats?<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/200px-Stack_Overflow_logo.svg.png" width="94" height="78"></a></li><!-- 
 
     --><li><a href="https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/">clearing-floats/louis-lazaris<img src="https://upload.wikimedia.org/wikipedia/en/c/c0/Smashing_Magazine_logo.png" width="67" height="63"></a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </main> 
 
</div>