标题CSS破

我在CSS /设计非常可怕，所以我在这里挣扎着一些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; 
}

一如往常，帮助是极大的赞赏。

来源

2013-08-07 Mike Bell

在CSS中没有'float：mid-left;' –

请分享您的HTML。你能把整个事情放在一个jsfiddle吗？ – andi

看起来第一个问题是您使用无效的CSS：浮点属性接受的值只有两个：'right'或'left'。此外，发布您的HTML将帮助我们更好地诊断您的问题。 – ctrlaltdel

它看起来像你有多个问题，但很难说没有看到你的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'>内，改变你的#menu CSS是： `

#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-07 15:17:11 mambrowv

感谢您的更新，尝试了这一点，似乎并没有工作。 –

即使使用上面包含的屏幕截图，也难以分辨较小或“移动”宽度的预期结果。

看起来您的HTML也有许多问题。请注意0标签（自HTML4以来已弃用）。

也就是说，修正你的CSS中的东西，如float: mid-right和float: mid-left，这两者都是无效的，应该会有所帮助。此外，您可能需要调查CSS positioning - 具体而言，您可能需要在#header div上使用position: relative。

看看这个slightly cleaned up version of your example - 添加了背景颜色以查看标题的结尾以及导航占用的空间。

来源

2013-08-07 15:37:09 ctrlaltdel

为了澄清，我打算将徽标/菜单/标题内容（头像/登录）全部置于页面正文的中心，而不管视图如何。 –

确保您的CSS和HTML是有效的。正如其他人所指出的那样，float:mid-left没有这样的东西。另外，如果你的jsfiddle指示你的HTML，你可能会抛出浏览器到quirksmode，因为你的HTML结构不正确（你的前三个标签需要包装在<head>标签中，所有东西都需要包装在<html>标签，第一行应该是<!DOCTYPE html>）。使用W3C的HTML validator和CSS validator来确保你的代码是正确的。只有这样你才能开始解决其他问题。
了解各种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是绝对的或固定的时，float不起作用。这也有助于了解padding和margin如何影响元素的位置以及它们如何相互区别。最后，vertical-align完全不起作用，除非元素是表格单元格，或者display设置为table-cell（并且与表格相关的一组显示属性有它自己的怪癖，因此您不一定只需在元素上抛出display: table-cell并期望它以某种方式工作）。
了解元素的自然行为方式，以便您可以将与配合使用，而不是针对它们。确保您知道块，内嵌和内嵌块元素的行为，然后与它们一起获得所需的布局，而不是在所有内容上投掷display: inline-block，并希望获得最佳效果。这同样适用于像链接这样的东西（当然，悬停时自然会有cursor: pointer，除非你在其他地方禁用了它）。这样做将大大地清理你的CSS，使其更容易维护。它也可以清理你的HTML，因为你会发现你确实需要或者不能做什么的包装元素。

来源

2013-08-07 15:40:03 Shauna

回答

相关问题