Question

这是我第一次学习HTML和CSS（4天前开始）。我正在制作一个测试网站只是为了好玩，并遇到了一个问题。有一个元素阻止一些文本进入我想要的地方。我知道它是导航栏，因为它在我删除它时修复了问题，但我不想删除它。如何解决它？对不起任何错别字，我不是母语为英语的人。注意=这只是一个测试网站。我知道图像是版权所有。 http://s9.postimg.org/8mokg65db/Optimized_Sk_rmavbild_2013_10_29_kl_20_33_10.jpg 代码：HTML：

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Hem - Tupac Shakur Fansida</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
</body>
<div class=wrapper>
!-----------------------------------! NAVIGATION
<div id="navmenudiv">
<ul id=”navmenu”>
<li><a href=index.html>Start</a></li>
<li><a href=about.html>Om</a></li>
<li><a href=”#”>Död</a></li>
<li><a href=”#”>Lever han?</a></li>
<li><a href=”#”>Diskografi</a></li>
</ul>
</div>
!-----------------------------------! NAVIGATION
<p>Den här sidan är till minne för Tupac Shakur, en av de bästa hip-hopparna genom tiderna. Jag vet att det redan finns många sådana sidor, men denna är helt och hållet på svenska och för med mina tankar också.</p>
<p>Tupac föddes den 16:de Juni 1971 i Harlem, New York. Hans mamma, Afeni Shakur, var fattig och medlem i den svarta kriminella gruppen Svarta Pantrarna. När han var 12 år började han på Baltimore School for the Arts.</p>
<p>Tupac är den bäst-säljande artisten genom tiderna och det finns få artister som inte känner till hans stora namn. Han sköts ihjäl av okända gärningmän den 7 september 1996.</p>
</div>
</body>
</html>

CSS：

#navmenudiv {position:relative;bottom:53px;right:4px;}
#navmenudiv ul {padding:0}
#navmenudiv li {display:inline;}
#navmenudiv li a {font-family:Helvetica;font-size:11px;text-decoration:none;
float:left;padding:10px;background-color:#2175bc;color:#fff;}
#navmenudiv ul li a:hover {background-color:#2586d7;margin-top:-2px;
padding-bottom:12px;}

Answer 1

您正在关闭HTML代码第8行的<body>标记。

Answer 2

确保有足够空间的最简单方法是将样式"clear: left"放在带有文本的div上，这样可以确保左侧没有浮动。另一种方法是制作导航栏"position: absolute"，但这需要父级"position: relative"或绝对本身。

Answer 3

看起来您希望菜单与图像重叠，以便您可以将#navmenudiv的css更改为

    #navmenudiv {position:relative;right:4px; display:inline-block; margin-top:-50px}

这会通过设置display:inline-block将文字清除到下一行，然后使用margin-top:-50px创建一个负边距，将菜单拉过图像。

（您需要使用负边距的大小来实现您想要的布局）

Answer 4

看起来问题（很难说，因为我们没有完整的源代码）只是清除导航（enter link description here）下方的那个段落的浮动。

所以这里有一个快速的JSFiddle向您展示我修改后的代码，它将段落文本放在导航下方，并且还会修正一些没有引号的div和链接。

以下是修订后的 HTML：

<div class="wrapper">
    <div id="navmenudiv">
        <ul id="navmenu">
            <li><a href="index.html">Start</a>

            </li>
            <li><a href="about.html">Om</a>

            </li>
            <li><a href="#">Död</a>

            </li>
            <li><a href="#">Lever han?</a>

            </li>
            <li><a href="#">Diskografi</a>

            </li>
        </ul>
    </div>

    <div class="clear"></div>

    <p>Den här sidan är till minne för Tupac Shakur, en av de bästa hip-hopparna genom tiderna. Jag vet att det redan finns många sådana sidor, men denna är helt och hållet på svenska och för med mina tankar också.</p>
    <p>Tupac föddes den 16:de Juni 1971 i Harlem, New York. Hans mamma, Afeni Shakur, var fattig och medlem i den svarta kriminella gruppen Svarta Pantrarna. När han var 12 år började han på Baltimore School for the Arts.</p>
    <p>Tupac är den bäst-säljande artisten genom tiderna och det finns få artister som inte känner till hans stora namn. Han sköts ihjäl av okända gärningmän den 7 september 1996.</p>
    </div<!-- .container -->
</div>

CSS：

/* General */
.clear { clear: both; }

/* Navigation */
 #navmenudiv {
    position:relative;
}
#navmenudiv ul {
    padding:0
}
#navmenudiv li {
    display:inline;
}
#navmenudiv li a {
    font-family:Helvetica;
    font-size:11px;
    text-decoration:none;
    float:left;
    padding:10px;
    background-color:#2175bc;
    color:#fff;
}
#navmenudiv ul li a:hover {
    background-color:#2586d7;
    margin-top:-2px;
    padding-bottom:12px;
}

希望能解决您遇到的问题。

DIV元素空间问题

4 个答案: