幻灯片位置随着不同尺寸的不同计算机而变化答案

【问题标题】：Slideshow position changes with different computer with different size幻灯片位置随着不同尺寸的不同计算机而变化
【发布时间】：2013-06-20 03:55:44
【问题描述】：

链接：http://danielknightstudiob.com/seniorgallery.html

我正在尝试将幻灯片与标题和导航栏居中，它在我的计算机上运行良好，但一旦我在另一台计算机上检查，它就会开始与导航栏重叠或远离它。简而言之，我遇到了定位问题。

在我有幻灯片的 Css 中，

.slideshow {display: block;
            position: absolute; left:28%; top:15%;
            z-index: 0;}

在 Html 中我有，

dl.image_map {display:block;
              width:1034px;
              height:60px; 
              background:url(http://www.image-maps.com/uploaded_files/3201306121035353_seniornav.jpg); 
              position:absolute; left:20%;  }

【问题讨论】：

基本上，您的完整 html 结构不正确...您应该将幻灯片和菜单包装在相对定位的 div 中...（margin:o auto 将进行水平居中）-另外，不要使用图像作为菜单 - 有大量教程如何创建 html/css 菜单。 bluerobot.com/web/css/center1.html

标签： html css alignment positioning

【解决方案1】：

这就是为什么浏览器测试很重要，对吧？

您可以尝试在 .image_map 和 .slideshow 上更改为 position: relative，然后调整左侧百分比以实现所需的布局。绝对定位会干扰您的设计对不同浏览器做出适当响应的能力。

【讨论】：