h1 elemanının derlenmiş benim <code><div class=digitalbay></code> eleman bulunduğu yukarıdaki unsurları olarak

<!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>

yılında çok düşük, div iç içe <h1> eleman eleman çok düşük. div'u yükseltmek için bir yol olup olmadığını merak ediyordum. Zaten marjı değiştirmeyi denedim, ancak div'u sayfa boyunca yukarı taşıyor ve bu da işe yaramıyor.h1 elemanının derlenmiş benim <code><div class=digitalbay></code> eleman bulunduğu yukarıdaki unsurları olarak

kaynak

2016-03-19 TheBigFootsDad

Neden üç farklı yuvalama seviyeniz var: div içinde div içinde div? Sadece bir içerik satırıyla mı? –

sıfırlama css stil sayfası kullanıyor musunuz? değilse, h1 kenar boşluklarını 0'a sıfırlayabilirsiniz –

h1 üzerinde bir kenar boşluğu ayarlayın ve yukarı doğru hareket edecektir. Örnek:

h1 { 
    margin-top: 0.25em; 
}

kaynak

2016-03-19 13:52:28 Jasha

Sizin .header div bir top: 490px sahiptir. Bu yüzden bu kadar düşük.

Diğer notta, burada CSS ve HTML'nizle ilgili biraz geribildirim.

hep <head> etiketinin hemen sonrasında olması gerekiyordu ... Bir <div> içine <body> etiketi koymayın. Tarayıcı HTML'yi ayrıştırdığında, bunu sizin için otomatik olarak düzeltir, ancak vücut etiketinizi şimdi olduğu yerde beklemeye başlarsanız hatalarınız olur.
CSS'nizi aşağıdaki gibi yazmayın div.className. Bunun yerine, sınıf adını eleman olmadan kullanmanız yeterlidir: .className. Bu, özgüllüğü azaltacak ve büyüdükçe bakımını kolaylaştıracaktır. Ayrıca yazmanızı da önemli ölçüde azaltır.
Sonunda hedefinizin ne olduğunu bilmiyorum, ancak her yerde position: absolute'u kullanmanız daha kolay olabilir. Bunun yerine position: relative kullanın.
HTML'de <main> adlı bir etiket var. Her sayfa için yalnızca bir tane olabilir ve onu <div class="bodydiv"> yerine kullanıyorum.
Sen <header> ve <footer> kullanarak ve başlık ve bitişin bir sınıf ile bunun içinde bir <div> koyuyoruz ... o çıkarın ve <header> ve <footer> etiketinde doğrudan sınıfını koydu.
<div class="bodycontent"> içinde, DIV'lerin yerine <section> etiketini kullanabilirsiniz (durumunuzda anlamsal olarak doğruysa).

kaynak

2016-03-19 13:56:52 justinledouxweb

h1 elemanının derlenmiş benim <code><div class=digitalbay></code> eleman bulunduğu yukarıdaki unsurları olarak

cevap

İlgili konular