在圖像上顯示一個列表：文本在圖像的右邊

我有一個img元素，我用作導航欄的背景，然後我會在img元素的頂部顯示導航鏈接。我將在下面的圖片中看到的問題是，包含鏈接的ul會顯示在導航欄&的右側。爲什麼會這樣做&我怎樣才能讓我的鏈接超過img的頂部？在圖像上顯示一個列表：文本在圖像的右邊

這是現在的樣子：看看白書面方式 This is how it looks http://i56.tinypic.com/jhwor7.png

這是它應該如何看 This is how it should look http://img26.imageshack.us/img26/5305/capture2nv.png

我的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" --> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

     <title>Kamalei - Home Page</title> 
     <style type="text/css"> 
     <!-- 
      html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; } 

      body { text-align: center; min-width: 1200px; } 

      #backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; } 

      #heading  { height: 300px; } 
      #main   { margin: 0 auto; } 
      #navBar   { display: inline; height: 700px; width: 200px; z-index: 1; position: relative; } /* I am pretty sure the cause is because I use "inline" but I need it to position the navbar correctly to the left */ 
      #content  { display: inline; height: 700px; width: 800px; padding: 20px; padding-left: 30px; } 

      #navBarImg  { position: relative; z-index: 0; padding-right: -5px; margin-right: -5px; } /* Remove gap between navbar & content divs */ 
      #contentImg  { } 

      #navbar ul li { padding: 0; margin: 0; } 
      #navLinks  { color: white; top: 0; left: 0; position: absolute; } 
     --> 
     </style> 

    </head> 

    <body> 

     <div id="heading"> 
      abc 
     </div> 

     <div id="main"> 
      <div id="navBar"> 
       <!-- Error occurs here: the unordered list is displayed to the right of the nav bar instead 
        of where it should be which is inside the navbar --> 
       <ul> 
        <li id="navLinks">abcdef</li> 
       </ul> 

       <img id="navBarImg" src="images/navBackground.png" alt="" width="200px" height="700px"/> 

      </div> 

      <div id="content"> 
       <img id="contentImg" src="images/contentBackground.png" alt="" width="800px" height="700px"/> 
      </div> 
     </div> 


     <!-- Must keep the background image at the bottom of body --> 
     <img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/> 

     <script type="text/javascript"> 
     <!-- 
      window.onresize = setBackgroundImgWidth; 
     --> 
     </script> 

    </body> 

    </html>

來源

2011-06-06 Mack

你需要使navbar背景成爲div的背景圖像而不是「是html的一部分。這是在文本下方顯示圖像的最簡潔的方式。您可以在CSS中將高度和寬度設置爲div，以確保整個圖像也顯示。

來源

2011-06-06 04:06:08 TH1981

但是如果我想要導航欄背景圖像可調整大小？ – Mack 2011-06-06 04:10:12

據我所知，不可能調整背景圖像的大小，但它可能足以覆蓋所有的元素。 – 2011-06-06 04:16:26

可調整大小是什麼意思？要包含可變數量的內容或實際按比例縮放字體大小的變化或者頁面是否放大？從佈局的外觀來看，如果你談論的是左邊的紫色列，右邊是半透明的，那麼最好不要使用圖片，而應該使用border-radius和RGBa/HSLa for背景顏色。 – Tyssen 2011-06-06 04:19:25

在圖像上顯示一個列表：文本在圖像的右邊

回答

相關問題