0

enter image description here

This is what I am trying to create on my header. My problem with this is that I need help positioning the elements correctly. I can add the image logo and float:left; and then add for the MOBILITY GROUP. I am not quite sure how to add my nav right in the location it is on the image. Also how to add the greeting on top right corner of the screen? Should I create two new divs for the greeting and the nav bar and give it absolute positioning?

As for the Logo it looks nice where it is from the JSFiddle example, but after the image is placed in the header there is some white space on the top of the header that is created and after adding the MOBILITY GROUP Title more white space is added? Why is that happening? My Title is also not centered along with the logo it is actually pushed closer to the top more?

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;}
4

1 回答 1

0

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

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/

于 2013-07-27T15:14:55.383 回答