调整浏览器窗口的大小

我在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

调整浏览器窗口的大小

回答

相关问题