1

私は痛々しいほどCSS（およびstackoverflow！）が初めてで、ヘッダーのdivを並べて重複させないようにすることができないようです。align="absmiddle" のロゴ画像があるので、h1 テキストがその右側に表示されます。これが私が望む方法です。h1 の下 (まだロゴの右側) に小さなテキストでビジネス連絡先情報を含む別のテキスト行が必要です。連絡先情報を含む div を追加すると、代わりにロゴの後ろに表示されます。オーバーラップを望んでいる人や、さまざまなブラウザーやサイズ変更の問題について、多くの質問と解決策を見てきましたが、私が求めていることを尋ねる簡単なものを見つけることができないようです. あなたの助けに感謝。

html は次のとおりです。

<body>
<div id="outer-container">
<div id="header">
      <div id="main-logo">
        <h1><a href="#"><img src="images/Murray_Logo.gif" alt="Murray logo" width="144" height="144" align="absmiddle" />Company name here</a></h1>
      </div>
    <br clear= "all" />
      <div id= "contactinfo">address</div>
      <div id="main-menu">
        <ul>
          <li class="first-item">
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Services</a>
          </li>
          <li class="last-item">
            <a href="#">Testimonials</a>
          </li>
        </ul>
  </div>
</div>
</body>

そしてCSS：

* {
  padding: 0;
  margin: 0;
}

a {
  color: #2D80D2;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

body {
  font-size: 11.5pt;
  line-height: 1.5em;
  color: #404040;
  background: #FFFFFF url('images/bg1.gif') repeat-x top left;
}

body,input {
  font-family: Georgia, serif;
}

br.clear-all {
  clear: both;
}

h1,h2,h3,h4 {
  letter-spacing: -1px;
}

h1,h2 {
  font-family: Century, serif;
}

h2 {
  font-size: 1.75em;
}

h2,h3,h4 {
  margin-bottom: 0.75em;
   color: #000;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1em;
}

p {
  margin-bottom: 1.25em;
}

ul {
  margin-bottom: 1.25em;
}

ul h4 {
  margin-bottom: 0.3em;
}

#header {
  height: 175px;
  position: relative;
  padding: 20px;
}

#outer-container {
  position: relative;
  width: 1200px; /* was 980px */
  margin: 90px auto 0 auto;
}

#inner-container {
  padding: 0;
  position: relative;
  width: 980px;
  margin: 25px 0 15px 0;
}

#inner-container .features {
  padding-left: 0;
  list-style: none;
}

#inner-container .features li {
  padding: 10px 0 10px 0;
  clear: both;
}

#inner-container ul {
  list-style: none;
}

#inner-container ul li {
  border-top: dashed 1px #B3B3B3;
  padding: 5px 0 5px 0;
}

#inner-container ul li.first-item {
  border-top: 0;
  padding-top: 0;
}

#main-logo {
  height: 145px; /* 6/7/12 DH */
  left: 20px;
  line-height: 107px;
  position: absolute;
  top: 0;
}

#main-logo a {
  text-decoration: none;
  color: #000;
}

#main-logo h1 {
  font-size: 2.2em;
}

#main-logo p {
    font-size:1em;
}

#main-logo img {
    padding: 0 20px 0 0;
}

#main-menu {
  width: 940px;
  border-bottom: solid 1px #1467B9;
  bottom: 0;
  border-top: solid 1px #5AADFF;
  line-height: 53px;
  margin: 0 0 0 0;
  padding: 0 20px 0 20px;
  height: 53px;
  left: 0;
  background: #1E71C3 url('images/bg2.gif') repeat-x top left;
  position: absolute;
}

#main-menu a {
  color: #FFF;
  /*letter-spacing: -1px; /* 6/7/12 DH */
  text-decoration: none;
}

#main-menu ul {
  list-style: none;
}

#main-menu ul li {
  display: inline;
  padding: 0 10px 0 10px;
}

#main-menu ul li.first-item {
  padding-left: 0;
}

#contactinfo {
  font-family:Tahoma, Geneva, sans-serif;
  font-size:10px;;
}

#contactinfo a {
  color: #404040;
}
4

4 に答える 4

1

基本的に、次のような div レイアウトを使用できます。

<div style="float:left;">LOGO</div>
<div style="float:left;">
  <div>COMPANY</div>
  <div>CONTACT</div>
</div>

このように、左側にロゴ div があり、ロゴ div の右側には、会社と連絡先情報用の 2 つの div (上下に 1 つ) があります。

于 2012-06-08T05:17:03.277 に答える
0

この場合、あなたheaderは相対的な位置にあるので、IDcontactinfoをposition :absoluteそのままにして、マージンを使用して配置することをお勧めします。

これを試して：

#contactinfo {
  font-family:Tahoma, Geneva, sans-serif;
  font-size:10px;
  position:absolute;
  left: 187px;
  line-height: 160px;
}
于 2012-06-08T06:10:59.750 に答える
0

キナクタさんの解説付き。マークアップにもエラーがあります。

<div id="outer-container">

は閉じていない要素です。

<br clear= "all" />

clear廃止されました。CSSで使用します。

于 2012-06-08T05:57:11.370 に答える
0

#main-logo を絶対配置したため、オーバーラップが発生します。絶対配置により、ドキュメントの通常のフローから要素が削除されます。つまり、他のコンテンツはその配置を尊重しなくなり、絶対配置されたコンテンツが「オーバーラップ」します。そのロゴを特定の場所に配置したい場合は、相対位置で配置するか、マージンを使用します.

于 2012-06-08T05:23:41.017 に答える