这是我第一次学习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;}
答案 0 :(得分:1)
您正在关闭HTML代码第8行的<body>
标记。
答案 1 :(得分:0)
确保有足够空间的最简单方法是将样式"clear: left"
放在带有文本的div上,这样可以确保左侧没有浮动。另一种方法是制作导航栏"position: absolute"
,但这需要父级"position: relative"
或绝对本身。
答案 2 :(得分:0)
看起来您希望菜单与图像重叠,以便您可以将#navmenudiv的css更改为
#navmenudiv {position:relative;right:4px; display:inline-block; margin-top:-50px}
这会通过设置display:inline-block
将文字清除到下一行,然后使用margin-top:-50px
创建一个负边距,将菜单拉过图像。
(您需要使用负边距的大小来实现您想要的布局)
答案 3 :(得分:0)
看起来问题(很难说,因为我们没有完整的源代码)只是清除导航(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;
}
希望能解决您遇到的问题。