調整瀏覽器窗口的大小

我在HTML和CSS中構建了一個網站，每當我調整瀏覽器窗口的大小（較小）時，它就會與網站的組件（如導航欄）混雜在一起。導航欄是使用<img src=鏈接到目標的一系列圖像。任何想法如何解決這個惱人的事情？調整瀏覽器窗口的大小

導航欄的代碼如下：

<br /> 
<div id="nav"> 
    <a href="/"><img src="Home.png" /></a> </a> 
<a href="/blog"><img src="=blog.png" /></a> </a> 
<a href="register.php"><img src="adopt.png" /></a> </a> 
<a href="user.php"><img src="useradmin.png" /></a> </a> 
<!-- <a href="login.php"><img src="\logout.png" /></a> </a> --> 
<a href ="places.php"><img src="map.png"/></a> </a> 
    <a href ="login.php?logout"><img src="logout.png"/></a> </a> 
<!--- <a href ="login.php"><img src="q.png"/></a> </a> --> 
</div>

感謝。

來源

2010-07-29 George

如果不仔細查看代碼，是否可以發佈它或者至少是相關的部分，就很難確切地知道你的問題是什麼？此外，您是否可以進一步解釋「......與網站組件混淆」的含義。究竟發生了什麼？ – jordanstephens 2010-07-29 19:18:52

已添加代碼。導航按鈕不在原位。當您調整瀏覽器窗口的大小時，它們會移動。 – George 2010-07-29 19:22:09

很多事情可能是這裏的原因......圖像標籤是什麼？一個div？那是什麼風格定義？快速的bandaid：把導航欄放在一張桌子裏，全部放在一排，所以它不包裹。 – Fosco 2010-07-29 19:22:13

你應該給你的菜單容器（#nav）在樣式表的寬度，像這樣：

#nav { 
width: 500px; 
}

這樣，你的菜單將不會縮小指定大小的下方，佈局（在這種情況下的菜單）不會中斷。

如果這樣說，您應該在您的鏈接中使用文本，並使用一些image replacement technique將鏈接顯示爲圖像/圖形。

您的代碼中也有語法錯誤;你關閉所有錨元素兩次。

來源

2010-07-29 19:31:23

謝謝！有用！ :) – George 2010-07-29 19:36:39

-1

<br /> 
<div id="nav"> 
<table border=0 cellpadding=0 cellspacing=0> 
<tr><td> 
    <a href="/"><img src="Home.png" /></a> 
</td><td> 
    <a href="/blog"><img src="blog.png" /></a> 
</td><td> 
    <a href="register.php"><img src="adopt.png" /></a> 
</td><td> 
    <a href="user.php"><img src="useradmin.png" /></a> 
</td><td> 
    <a href="places.php"><img src="map.png"/></a> 
</td><td> 
    <a href="login.php?logout"><img src="logout.png"/></a> 
</td></tr> 
</table> 
</div>

來源

2010-07-29 19:24:03 Fosco

-1，表格不應該用於佈局。 – 2010-07-29 19:27:17

說你..沒有規則。 – Fosco 2010-07-29 19:31:55

沒有*規則*，但我不喜歡可怕的做法，反對網絡的發展。使用表格進行佈局完全忽略了（X）HTML背後的最基本概念。該規範還規定*表格不應該純粹用作佈局文檔內容的手段[*] *，因此排序是一項規則。 – 2010-07-29 19:42:46

在您的容器（或導航）上設置min-width。

來源

2010-07-29 19:29:03 Marwelln

在您的#nav容器上設置一個等於所有導航按鈕寬度的寬度。例如：

#nav { 
    padding: 0; 
    margin: 0; 
    width: 150px; 
} 

#nav a img { 
    width: 25px; /* 6 buttons at 25px = 150px total */ 
    border: 0; 
}

來源

2010-07-29 19:30:07 Pat

調整瀏覽器窗口的大小

回答

相關問題