h1は私の<code><div class=digitalbay></code>要素がコンパイル時にコンパイルされたときに、divの中に入れ子に<code><h1></code>要素が要素で低すぎる位置して要素上記の要素で

<!DOCTYPE html> 
<html> 
<head> 
<style> 
/* main elements */ 
div.body { 
    display: block; 
    background-color: Lavender; 
    border: 0px 20px 0px 20px; 
    max-width: 1100px; 
    margin-top: 10px; 
    margin-right:20px; 
    margin-left: 20px; 
    clear: both; 
    padding: 0px 20px 0px 20px; 
} 
body { 
    display: block; 
    background-color: Lavender; 
    border: 10px; 
    max-width:1100px; 
    margin: 0px 280px 0px 10px; 
    clear:both; 
} 
/*Body Divs*/ 
div.bodycontent{ 
    display:block; 
    position:absolute; 
    top: 10px; 
    width: 1075px; 
    height: 470px; 
    background-color: MediumAquaMarine; 
    margin-right:0; 
    margin-left:0px; 
    bottom:10px; 
} 
div.body1 { 
    display: inline-block; 
    background-color: limegreen; 
    position: absolute; 
    top: 10px; 
    width:480px; 
    height:225px; 
    margin-left:10px; 
    padding: 0 10px 0 10px; 
} 
div.body2 { 
    display: inline-block; 
    background-color: Salmon; 
    position: absolute; 
    top: 10px; 
    width:525px; 
    height:225px; 
    margin-left:520px; 
    padding: 0 10px 0 10px; 
} 
div.body3 { 
    display: inline-block; 
    background-color: FireBrick; 
    position: absolute; 
    top: 250px; 
    width:530px; 
    height:205px; 
    margin-left:10px; 
    padding: 0 10px 0 10px; 
} 
div.body4 { 
    display: inline-block; 
    background-color: SeaGreen; 
    position: absolute; 
    top: 250px; 
    width:475px; 
    height:205px; 
    margin-left:570px; 
    padding: 0 10px 0 10px; 
} 

/*-----------------------------------------------------------------------*/ 

header { 
    background-color: Lavender; 
} 
/*header divs*/ 
div.header { 
    display:block; 
    position:absolute; 
    width: 1075px; 
    height:150px; 
    top:490px; 
    background-color: PaleGoldenRod; 
    margin-right:0; 
    margin-left: 0px; 
} 
div.backinfo { 
    display:inline-block; 
    background-color: lightblue; 
    position: absolute; 
    top:80px; 
    width:455px; 
    padding:10px 10px 10px 10px; 
    height:40px; 
    margin-right:900px; 
    margin-left:10px; 
} 
div.digitalbay { 
    display: inline-block; 
    background-color: coral; 
    position: absolute; 
    width:455px; 
    height:60px; 
    top:20px; 
    margin-top:-10px; 
    margin-right:560px; 
    margin-left:180px; 
    padding: 0 10px 0 10px; 
    } 
div.nav { 
    display: inline-block; 
    position: absolute; 
    background-color: lightblue; 
    top:10px; 
    margin-right:0px; 
    margin-left:665px; 
    padding: 10px 0px 10px 0px; 
    height:110px; 
    width:395px; 
} 
div.contact { 
    display: inline-block; 
    background-color: Chocolate; 
    position: absolute; 
    top: 100px; 
    width:300px; 
    height:45px; 
    margin-right:550px; 
    margin-left:190px; 
    padding: 0 10px 0 10px; 
} 
div.contact2 { 
    display: inline-block; 
    background-color: DeepPink; 
    position: absolute; 
    top: 100px; 
    width:130px; 
    height:45px; 
    margin-right:550px; 
    margin-left:515px; 
    padding: 0 10px 0 10px; 
} 
</style> 
</head> 
<div class="bodydiv"> 
    <header> 
     <div class="header"> 
      <div class="backinfo"> 
      </div> 
      <div class="digitalbay"> 
       <h1>Digital Bay</h1> 
      </div> 
      <div class="nav"> 
      </div> 
    </header> 
    <body> 
     <div class="bodycontent"> 
      <div class="body1"> 
      </div> 
      <div class="body2"> 
      </div> 
      <div class="body3"> 
      </div> 
      <div class="body4"> 
      </div> 
     </div> 
    </body> 
</div> 
<aside> 
    <div class="extrainfo"> 
    </div> 
    <div class="slideshow"> 
    </div> 
</aside> 
<footer> 
    <div class="footer"> 
    </div> 
</footer> 
</html>

、中低すぎます。 divを上に上げる方法があるかどうか疑問に思っていました。私はすでにマージンを変更しようとしましたが、divをページに沿って動かすと助けになりません。h1は私の<code><div class=digitalbay></code>要素がコンパイル時にコンパイルされたときに、divの中に入れ子に<code><h1></code>要素が要素で低すぎる位置して要素上記の要素で

出典

2016-03-19 TheBigFootsDad

なぜ3段階の入れ子がありますか？div内のdiv内div？ 1行のコンテンツだけで？ –

リセットCSSスタイルシートを使用していますか？そうでなければ、h1マージンを0にリセットすることができます –

h1に余白を設定すると、上に移動します。例：

h1 { 
    margin-top: 0.25em; 
}

出典

2016-03-19 13:52:28 Jasha

あなた.header divがtop: 490pxを持っています。そういうわけでそれはとても低いです。

他にも、CSSとHTMLに関するご意見があります。

が<div>内<body>タグを置いてはいけません...常に<head>タグの後に右であると考えられます。ブラウザがHTMLを解析すると、自動的に修正されますが、bodyタグが現在の位置になることを期待するとバグが発生します。
次のようにCSSを記述しないでください。div.className代わりに、単に要素なしのクラス名を使用してください：.className。これにより、特異性が減り、増殖するにつれて維持管理が容易になります。また、入力を大幅に減らすことができます。
私はこのページの最終目標を知りませんが、どこでもposition: absoluteを使用しないほうが簡単かもしれません。代わりにposition: relativeを使用してください。
HTMLには、<main>というタグがあります。ページあたり1つしかない場合があり、<div class="bodydiv">の代わりに使用します。
あなたは<header>と<footer>を使用し、ヘッダーとフッターのクラスでそれの内側に<div>を入れている...それを削除し、<header>と<footer>タグに直接あなたのクラスを置きます。
<div class="bodycontent">の中には、DIVの代わりに<section>タグを使用することができます（あなたの場合は意味的に正しい場合）。

出典

2016-03-19 13:56:52 justinledouxweb

h1は私の<code><div class=digitalbay></code>要素がコンパイル時にコンパイルされたときに、divの中に入れ子に<code><h1></code>要素が要素で低すぎる位置して要素上記の要素で

答えて

関連する問題