堆栈内存溢出
  简体   繁体   English

h1元素太低

[英]h1 is too low in the element

 原文  2016-03-19 13:37:04  3   2    html/ css

问题描述

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

In the elements above, where my <div class=digitalbay> element is located when compiled, the <h1> element nested in the div is too low in the element when compiled. 在上面的元素中， <div class=digitalbay>元素在编译时所在的位置，嵌套在div中的<h1>元素在编译时在元素中太低。 I was wondering if there is a way to make it higher up the div . 我想知道是否有办法使div更高。 I already tried changing the margin, but it moves the div up along the page and that doesn't help. 我已经尝试过更改页边距，但这会使div沿页面向上移动，这无济于事。

2 个解决方案

解决方案1
 0 已采纳  2016-03-19 13:52:28

Set a margin on the h1 and it will move up. 在h1上设置边距，它将向上移动。 Example: 例： 

h1 {
  margin-top: 0.25em;
}

解决方案2
 0  2016-03-19 13:56:52

Your .header div has a top: 490px . 您的.header div top: 490px 。 That is why it is so low. 这就是为什么它这么低。

On other note, here's a bit of feedback on your CSS and HTML. 另一方面，这是关于CSS和HTML的一些反馈。

  • Never put the <body> tag inside a <div> ... it is always supposed to be right after the <head> tag. 切勿将<body>标记放在<div> ...应该总是在<head>标记之后。 When the browser parses the HTML, it'll auto correct that for you, but you will have bugs if you start expecting your body tag to be where it is now. 当浏览器解析HTML时，它会自动为您更正此错误，但是如果您开始期望body标签在现在的位置，则会出现错误。
  • Don't write your CSS as follow div.className . 不要按照div.className编写CSS。 Instead, simply use the class name without the element: .className . 相反，只需使用不包含元素的类名称： .className 。 This will reduce specificity and make it easier to maintain as it grows. 这将降低特异性，并使其易于维护。 It'll also dramatically reduce your typing. 它还将大大减少您的打字。
  • I don't know what your goal is in the end with this page, but it may be easier to not use position: absolute everywhere. 我不知道本页的最终目标是什么，但不使用position: absolute可能更容易position: absolute在任何地方都使用position: absolute 。 Use position: relative instead. 使用position: relative代替。
  • In HTML, there is a tag called <main> . 在HTML中，有一个名为<main>的标记。 There can only be one per page, and I use it instead of your <div class="bodydiv"> . 每页只能有一个，我用它代替您的<div class="bodydiv"> 。
  • You are using <header> and <footer> and putting a <div> inside of it with a class of header and footer... Remove that and put your class directly on the <header> and <footer> tag. 您正在使用<header>和<footer>并在其中放置一个<div>以及一个header和footer类。将其删除，然后将您的类直接放在<header>和<footer>标记上。
  • Inside your <div class="bodycontent"> , you could use the <section> tag instead of DIVs (if it is semantically correct in your case). 在您的<div class="bodycontent"> ，您可以使用<section>标记代替DIV（如果您的情况在语义上是正确的）。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 替代h1元素？ - alternative to h1 element? H1元素的保证金 - Margin on H1 element H1 元素的宽度 - Width of a H1 element H1 可以在标题元素中吗？ - Can H1 be in a Title element? H1中的HTML H3元素 - HTML H3 element in H1 NavBar h1元素卡在顶部 - NavBar h1 element stuck on top h1元素的有效角色属性值 - Valid role attribute values for h1 element 无法删除H1元素 - Can't remove an h1 element Accesskey 不适用于 chrome 中的 h1 元素 - Accesskey not working for h1 element in chrome 在块元素“ h1”上使用“自动” - Using 'auto' on block element 'h1'
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM