Question

这肯定是一个noobish html问题，因为我是这个东西的新手。

无论如何，让我们来看看：

1，检查小提琴：

http://jsfiddle.net/d6767uur/

<!DOCTYPE html>
<html>
<head> 
<link type="text/css" href="frontpage.css" rel="stylesheet">

</head>
<body> 
<div class="navBar"> 



<div class="greyline"> </div>
<a href="smoothies_page.html" style="text-decoration: none"><div class="menu"> smoothies </div>      </a>
<div class="greyline"> </div>
<a href="milkshakes_page.html"style="text-decoration: none"><div class="menu"> milkshakes </div></a>
<div class="greyline"> </div>
<a href="juicyfacts_page.html"style="text-decoration: none"><div class="menu"> juicy facts </div></a>
<div class="greyline"> </div>
<a href="aboutus_page.html"style="text-decoration: none"><div class="menu"> about us </div></a>
<div class="greyline"> </div>
<div class="stuffwithsmall"> &copy; All rights reserved..  </div>
</div>

<div class="frontWrapper"> 
<h1> HELLO </h1>
<div style="margin-left: 750px; margin-top: -435px;"> <img src="frontfruit.jpg"> </div>



</div>


</body>
</html>

CSS：

@font-face { font-family: SourceSansPro-Regular; src: url('SourceSansPro-Regular.otf'); }

body {
margin: 0px; 
padding: 0px;


}

.navBar {
width: 205px;
height: 667px;
background-color: #55AE3A;    //hover = 398a20

}

.greyline {
width: 205px;
height: 1px;
background-color: darkgrey;
}

.menu {
font-family: 'SourceSansPro-Regular';
color: white;

font-size: 25px;
opacity: 0.64;
height: 40px;
text-decoration: none;
}

.menu:hover {
background-color: #398a20;
}


.stuffwithsmall {
color: #75715e;
font-family: helvetica;
margin-top: 320px;
}

问题：为什么标题会在主菜单下方显示，如何更改它，以便它位于菜单右侧？

Answer 1

你的导航栏div下降到目前为止因为.stuffwithsmall class在里面并且有一个巨大的margin-top。您可以通过在navbar div的结束标记之后将其向下移动来解决此问题。

在css中，更改：

.navbar {
    height: auto;
    width: 100%;
}

为什么标题/图片放在下面而不是旁边？

1 个答案: