0

这是我第一次学习 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”&gt;
<li><a href=index.html>Start</a></li>
<li><a href=about.html>Om</a></li>
<li><a href=”#”&gt;Död</a></li>
<li><a href=”#”&gt;Lever han?</a></li>
<li><a href=”#”&gt;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;}
4

4 回答 4

1

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

于 2013-10-29T23:09:55.593 回答
0

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

于 2013-10-29T22:57:38.123 回答
0

看起来问题（很难说，因为我们没有完整的源代码）只是清除导航下方该段落的浮动（在此处输入链接描述）。

因此，这里有一个快速的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;
}

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

于 2013-10-29T23:09:37.197 回答
0

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

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

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

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

于 2013-10-29T23:02:28.857 回答