1

こんにちは私は自分のウェブサイトに取り組んでいます。ヘッダー セクションの右端に連絡先アイコンを配置する方法を知りたいです。（クリエイティブマインドを読み取るヘッダーのテキストに関連しています。どうすればいいですか？以下は私のコードです。助けてください。ありがとう。

HTML

<body>
   <div class="auto-style1">
   <div id="header">
      Header
      <h1>Creative Mind</h1>
   </div>
   <div id="nav">
      Navigation
      <ul>
         <li><a href="homepage.html">Homepage</a></li>
         <li><a href="tipsandtricks.html">Tips and Tricks</a></li>
         <li><a href="aboutme.html">About me</a></li>
         <li><a href="getintouch.html">Get in Touch</a></li>
      </ul>
   </div>
   <div id="main">Main</div>
   <h3>Contact Information</h3>
   <h3>Phone</h3>
   <p>1-323</p>
   <h3>Email</h3>
   <a href="mailto:jonathan@gmail.com?"><img src=/>gmail</a>
   <h3>Social Networks</h3>
   <a href="https://www.facebook.com/mourning.9"><img src=/></a>
   <div id="footer">
      Footer
      <h3>Creative Mind  Jonathan Mourning</h3>
   </div>
</body>

CSS

@charset "utf-8";
    /* CSS Document */
body {
    background-color: #A6FFFF;
    width: 100%;
}

#header, 
    #main, 
    #footer {
    display: block;
    position: relative;
    float: left;
}

#header,
    #footer {
    height: 15%;
    width: 100%;
}

#header {
    margin-bottom: 2px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#footer {
    margin-top: 2px;
    text-align: right;
    border: 2px;
}

#main {
    position: relative;
    width: 70%;
    height: 100%;
    margin: 0 auto;
    background-color: #FFF;
    float: center;
    text-align: center;
}

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

#nav li {
    display: inline;
}

#nav a {
    display: inline-block;
    padding: 10px;
}
4

3 に答える 3

1

アイコンに一意のクラス名を追加してみてください。

 #header{
    position:relative; //makes relative to browser
    }

    #header .myIcon {
    position:absolute; // makes to position to right corner of header
    right:0px;
    float:right;
    }

フィドル: http://jsfiddle.net/WLR5S/7/

于 2013-10-02T04:40:32.370 に答える
1

float: rightたとえば、使用できます

HTML:

<div id="header">Header
    <a href="/contact" class="contact"><img src="http://lorempixel.com/100/50"></a>
    <h1>Creative Mind</h1>
</div>

CSS:

.contact {
    float: right;
}

JSFiddle

于 2013-10-01T23:51:42.790 に答える
0

position: relative; を使用できます。次に、アイコンを上、左、右、および下のプロパティで配置します。

于 2013-10-02T01:10:36.847 に答える