0

我在 CSS/设计方面非常糟糕，所以我在这里与一些 CSS 作斗争。

该页面在 1920x1080 的全屏浏览器中加载时看起来不错，但是，一旦您在移动设备上最小化或加载该页面，标题内容就会完全失去其位置，但正文很好。

这是有问题的CSS元素：

#header { 
background: url(assets/header_bckg.gif) repeat-x ; height:120px;  
}

#logo { display:inline-block; float:mid-left; padding:50px 0 0 570px; }
#logo { color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:20px; text-transform:uppercase;}


#login { display:inline-block; float:mid-right; padding-left:400px; padding-bottom: 7px; vertical-align:middle;}
#login{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:12px; text-transform:uppercase;}


#avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; }

#avatar_online {
    background: linear-gradient(to bottom, #7BAFD6 5%, #506D92 95%) repeat scroll 0 0 transparent;
    filter: none;
    height: 50px;
    width: 50px;
    padding: 3px;
    background-color: #545454;
    border-radius: 3px 3px 3px 3px; 
    }

#avatar_offline {   
    background: linear-gradient(to bottom, #706C6B 5%, #4E4D4D 95%) repeat scroll 0 0 transparent;
    filter: none;
    height: 50px;
    width: 50px;
    padding: 3px;
    border: 1px solid #545454;
    border-radius: 3px 3px 3px 3px; 
    }
    #avatar_playing {   
        background: linear-gradient(to bottom, #9BC861 5%, #789E4C 95%) repeat scroll 0 0 transparent;
    filter: none;
        height: 50px;
    width: 50px;
    padding: 3px;
    border: 1px solid #545454;
    border-radius: 3px 3px 3px 3px; 
    }

#menu {position: absolute; margin-left:550px; top:88px; color:#fff; text-align:center; margin-top:0px;}
#menu ul{ width:800px; margin:0 auto;list-style:none; padding:0; text-align:left;}
#menu ul li{display:inline}
#menu ul a { float:left; font-weight:bold; font-size:13px; text-decoration:none; color:#fff; padding:8px 10px; width:118px; text-align:center; text-transform:uppercase; background:url(assets/menu_active.gif) no-repeat bottom center; color:#232323; }
#menu ul a:hover { 
    color: #85B0DF;
    cursor: pointer;
    text-decoration: none;
}

一如既往，非常感谢您的帮助。

4

3 回答 3

2

  1. 确保您的 CSS 和 HTML 有效。正如其他人指出的那样，没有float:mid-left. 此外，如果您的 jsfiddle 指示您的 HTML，那么您可能会将浏览器放入quirksmode，因为您的 HTML 结构不正确（您的前三个标签需要包装在一个<head>标签中，所有内容都需要包装在一个<html>标签中，第一行应该是<!DOCTYPE html>）。使用 W3C 的HTML 验证器和CSS 验证器来确保您的代码是正确的。只有这样，您才能开始解决其他问题。

  2. 了解各种 CSS 声明的作用。虽然您的 CSS 可能是有效的，但这并不意味着它是正确的。这：#avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; }一旦浮动部分固定，将在技术上验证。但是，position: absolute并且是互斥的——浮动在绝对或固定float时不起作用。position它还有助于了解元素的定位方式padding和margin影响方式，以及它们之间的差异。最后，vertical-align除非元素是表格单元格或display设置为table-cell（并且与表格相关的显示属性集有其自己的怪癖，否则您不一定只扔display: table-cell在一个元素上并期望它以某种方式工作）。

  3. 了解元素的自然行为方式，以便您可以使用它们，而不是对抗它们。确保您了解块、内联和内联块元素的行为方式，然后使用它们来获得您想要的布局，而不是投入display: inline-block所有内容并希望获得最好的结果。链接之类的东西也是如此（它自然会cursor: pointer悬停，除非你在其他地方禁用了它）。这样做将大大清理您的 CSS，使其更易于维护。它还可以清理您的 HTML，因为您会发现您真正需要或不需要的包装元素。

于 2013-08-07T15:40:03.130 回答
1

即使使用上面包含的屏幕截图，在较小或“移动”宽度下也很难说出预期的结果应该是什么。

看起来您的 HTML 也存在许多问题。小心<font>标签之类的东西（从 HTML4 开始不推荐使用）。

也就是说，修复你的 CSS 中的东西，比如float: mid-right和float: mid-left，它们都是无效的，应该会有所帮助。此外，您可能想研究CSS 定位- 具体来说，您可能希望position: relative在#headerdiv 上使用。

看看这个稍微清理过的示例版本- 添加背景颜色以查看标题结束的位置以及导航占用的空间。

于 2013-08-07T15:37:09.770 回答
0

看起来您有多个问题，但如果不查看您的 HTML 也很难判断。对于初学者，#menu { margin-left:550px; }如果您尝试在左边缘对齐，这将成为问题的一部分。您还应该知道这float:mid-right;不是有效的 CSS。查看http://www.w3schools.com/cssref/pr_class_float.asp了解更多信息float。

在 JSFIDDLE 之后编辑

把你的<div id='header'>内部<div id='main'>和你的#menuCSS更改为：`

#menu { margin: 0px auto; top:88px; color:#fff; text-align:center; width:800px;}
#menu ul{list-style:none; padding:0; text-align:left;}

`

由于您已经在菜单上定义了宽度，您可以使用margin: 0 auto;它根据窗口大小使其居中。这将允许您删除您的margin-left并防止它被推到右侧。

于 2013-08-07T15:17:11.737 回答