Question

enter image description here

这就是我想在标题上创建的内容。我的问题是我需要帮助正确定位元素。我可以添加图像标识和浮动：左;然后添加MOBILITY GROUP。我不太确定如何在图像上的位置添加我的导航。另外如何在屏幕的右上角添加问候语？我应该为问候语和导航栏创建两个新的div并给它绝对定位吗？

至于Logo，从JSFiddle示例看它看起来很漂亮，但是在将图像放置在标题中之后，在标题顶部有一些空白区域，并且在添加MOBILITY GROUP标题后更加白色空间被添加？为什么会这样？我的标题也没有与徽标居中，实际上它更接近顶部？

JSFiddle

HTML：

<body>
   <div id="page">

      <div id="header">
              <p>
    <a href=""><img src="http://www.userlogos.org/files/logos/pek/stackoverflow.png" border=0></a>
    <h2><a href="" border=0>Mobility Group</a></h2>

              </p>
     </div>




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




    <div id="footer">
    <h4>WNG Product Development Engineering (US)</h4>
    <a href="">Circuit</a>
    <a href="">Contact Us</a>
     </div>

CSS：

html, body
{
        padding:0;
        margin:0;
        height:100%;
        font-size:1em;
}
#page
{
        height:100%;
        min-width:960px;
}
#header
{
        background-color:#115EA2;
        height:100px;
        width:100%;
}
#header img
{
        float:left;
        display:inline;
}
#header h2
{
        font-size:2.5em;
        color:#fff;
        font-weight:bold;
        font-family: Verdana, Geneva, Arial, sans-serif;
        text-decoration:none;
}
#main
{
        width:1300px;
        background-color:#F1F2F3;
        margin: 0 auto;
        padding: 20px 20px 40px 20px;
        color:#115EA2;
        text-decoration:none;
        min-height:950px;
}
#footer
{
        position:fixed;
        width:100%;
        bottom:0;
        height: 35px;
        background-color:#115EA2;
}
#footer h4
{
        font-weight: bold;
        font-family: Verdana, Geneva, Arial, sans-serif;
        float:left;
        color:#fff;
        margin: 10px 0 0 20px;
}
#footer a
{
        font-weight:bold;
        font-family: Verdana, Geneva, Arial, sans-serif;
        float:right;
        color:#fff;
        margin:10px 20px;
        text-decoration: none;
}
#footer a:active {color:#fff;}
#footer a:hover {color:#fff;}
#footer a:visited {color:#fff;}

Answer 1

我根据你的要求做了一个小提琴。试一试。下面的小提琴链接

<强> HTML

<header>

<div id="logo" class="push-left">

    <img src="http://www.userlogos.org/files/logos/pek/stackoverflow.png" width="120" height="100"/>

</div>

<div class="push-left head-text-fix">Mobility</div>

<div class="push-right" id="welcome-text">Welcome User</div>
<div class="clearfix"></div>
<div class="push-right menufix">

    <nav>

        <ul>

            <li>one</li>

            <li>two</li>

            <li>three</li>

            <li>four</li>

            <li>five</li>

        </ul>

    </nav>

</div>

<强> CSS

header{
width:100%;
height:100px;
background-color:red;
}

.push-left{
 float:left;
}

.menufix{background-color:green;margin-top:-38px;}

ul li{list-style:none;float:left;margin-left:15px}

.head-text-fix{
margin-top:40px;
margin-left:20px;
}

.push-right{
float:right;
}

#welcome-text{
margin-top:10px;
margin-right:15px;
}

.clearfix{clear:both};

#left-group{
width:300px;background-color:green;
}

链接到小提琴：http://jsfiddle.net/F8BZt/

正确创建带导航的标题？

1 个答案: