使用CSS的样式问题

时间:2013-07-10 22:45:49

标签: html css

http://jsfiddle.net/AmKHx/

大家好,

我将代码链接到顶部。我的主要问题是我的标题,内容和页脚完美设置适用于所有网站。它没有滚动功能或任何东西。每次我尝试将英特尔徽标添加到屏幕上。它做的就是那里。我移动它并调整它然后它适用于一个浏览器而不是另一个...它不断变化。我希望徽标能够与我用CSS制作的标题完美地粘在左边。此外,我希望移动组文本位于徽标旁边的那个高度,但由于某种原因,当我使用它时,它总是会弄乱我的标题内容和页脚。所以,我首先想要标志,然后在它旁边的Mobility Group,并使它非常顺利!

此外,我刚刚学习了html css和php,如果你们在我的代码中看到一些可以更聪明地完成的东西,请告诉我。我需要批评性反馈,这样我才能更好地学习这些新语言,以便在这个编程领域取得成功!

提前感谢您提供的所有意见和建议!!

HTML CODE:

<div id="page">

        <div id="header">

            <h1><img src="http://wireless.fm.intel.com/test/logo2.png">

                <h2>Mobility Group</h2>



        </div>
        <div id="main"></div>

        <div id="footer"></div>

</div>

</body>

CSS代码:

Html, body
{
        Padding:0;
        Margin:0;
        Height:100%;
}
#page
{
        Min-height:100%;
        position:relative;
        height:100%;
}
#header
{
        background-color:#115EA2;
        height:100px;
        width:97.5;
}
#main
{
        width:1300px;
        margin-left:auto;
        margin-right:auto;
        background-color:#F1F2F3;
        min-height:87%;
        height:auto;
        height:87%;
        margin:0 auto -50px;
        vertical-align:bottom;
}
#footer
{
        Position:fixed;
        Width:100%;
        Bottom:0;
        Height:50px;
        background-color: #115EA2;
}
#header h1
{
        position:absolute;
        text-align:left;
        left:0px;
        top:0px;
}
#header h2
{
        text-align:center;
        font-size:44px;
        color:#FFFFFF;
        left:0px;
        top:20px;
        font-weight:bold;
}

2 个答案:

答案 0 :(得分:1)

我仍然不确定我是否明白这个问题,但是你可以做些什么来让它看起来更自然。关闭h1标签,不要让它绝对定位,而是让它向左浮动。同样的事情发生在h2元素上。由于缺少原始图像,我放了另一个,并将其高度固定为60px。

基本上就是这样:

#header h1 {
    text-align:left;
    left:0px;
    top:0px;
    float: left;
} 
#header h1 img {
    height: 60px;
}
#header h2 {
    text-align:center;
    font-size:44px;
    color:#FFFFFF;
    left:0px;
    top:20px;
    font-weight:bold;
    float:left;
}

在此处查看结果:http://jsfiddle.net/AmKHx/1/在每个现代浏览器中看起来都一样。

另外,尽量不要在CSS属性中使用大写字母 - 这是使用小写的标准,甚至某些浏览器也可能不喜欢它。

答案 1 :(得分:0)

你有重置表吗?

将其复制到新的css文件,将其命名为reset.css,然后在加载主css之前将其加载到页面中。

html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}