Question

我试图将代码添加到我网站的正文中，但只要我将任何内容设置为margin-top，即使已经结束，标题也会一直下降。

已经尝试将标题移动到div徽标后面和菜单后面。它的后菜单似乎更好。当我在#barra中有margin-top时，它将整个标题移动到它旁边。已经尝试了我记得的一切。另外，在我关闭标题之前，它似乎没问题，但在我关闭之后，它会搞得一团糟。我怀疑它与菜单有关。希望您能够帮助我。感谢。

Header structure

Fiddle

代码：

HTML

<header id="header" class="fluid ">

  <div id="mail"></div>
  <div id="logo"> </div>

  <!-- Menu -->
  <div id="menu">
    </ul>
  </div>
</header>

<!-- Corpo parte 1 -->
<div id="barra"></div>

CSS

.fluid {
  clear: both;
  margin-left: 0;
  width: 100%;
  float: left;
  display: block;
}

#header {
  margin-top: 0px;
  background-image: url(Imagens/Headercontact.jpg);
  height: 21px;
}

#logo {
  width: 220px;
  height: 210px;
  margin-left: 162px;
  margin-top: 0px;
  background-image: url(Imagens/logo2.png);
  position: fixed;
}

#menu {
  margin-left: 320px;
  margin-top: 190px;
}

#menu li {
  display: block;
  float: left;
  margin-left: 57px;
}

#menu a li {
  text-decoration: none;
  color: black;
  font-size: 18px;
  font-family: Georgia;
  width: 65px;
  height: 29px;
  display: block;
  text-align: center;
}

#barra {
  background-image: url(Imagens/semi.jpg);
  height: 3px;
  margin-top: 15px;
}

Answer 1

如果我误解了你想要解决的问题，请提前道歉，但你试过了吗？

header {
position: absolute;
top: 0;
left: 0;
}

Answer 2

删除float: left规则中的.fluid并设置＆＃34;＃menu＆＃34; margin-top: 0px;它会跳回来...... an update of your fiddle

此外，您的菜单ul元素看起来像这样

<ul>
    <a href="#"><li>Home</li></a>

这是非常错误的，因为它看起来应该是这样的

<ul>
    <li><a href="#">Home</a></li>

所以我建议做一些清理工作，并对元素进行正确编码，因为这些问题会导致非常不可预测的结果。

Answer 3

div在页面中没有正确堆叠，因为一些浮动元素没有被正确固定，导致div相互浮动（在这种情况下，你的标题和一些内部元素）。为了解决这个问题，我从float: left类中删除了.fluid属性，并将浮动的标题元素包含在.clearfix类中，以便它们保持连续。

<强> CSS

＆＃13;

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
    line-height: 0;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
}

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	display: block;
}

#header {
    margin-top: 0px;
    background-image: url(https://i.imgur.com/1ijUhkZ.jpg);
    height: 21px;
    
}

#mailtext {
    margin-left: 450px;
    float: left;
    font-family: "Adobe Devanagari";
    color: #FFFFFF;
    font-weight: bold;
    font-size: 18px;
    
}


#teltext {
    margin-left: 40px;
    font-family: "Adobe Devanagari";
    font-weight: bold;
    font-size: 18px;
    float:left;
    color: #FFFFFF;
    position:absolute
    
    
}

#logo {
    width: 220px;
    height: 210px;
    margin-left: 162px;
    margin-top: 2px;
    background-image: url(https://i.imgur.com/6u97lQ7.png);
    position: fixed;
	
}

#menu {
    margin-left: 320px;
    margin-top: 190px;
}

#menu li{
    display:block;
    float:left;
    margin-left:57px;
}

#menu a li{
    text-decoration:none;
    color: black;
    font-size: 18px;
    font-family: Georgia;
    width: 65px;
    height: 29px;    
    display:block;
    text-align:center;
}

#menu a li:hover{
    background-image: url(https://i.imgur.com/IH2Zg9N.png);
    width: 65px;
    height: 29px;
    display:block;
    color: white;
}

#barra {
    background-image: url(http://i.imgur.com/S7Qt9Mn.jpg);
    margin-top: 190px;
	height:30px;
	
}

＆＃13;

<强> HTML

<!-- Cabeçalho e logo -->
<header id="header" class="fluid">
  <div class="clearfix">
    <div id="mail"></div>
    <span id="mailtext">&nbsp; Email: hotelsolemar@grupofbarata.com</span>

    <div id="tel"></div>
    <span id="teltext">Tel: (+351) 289 580 080</span>
    <div id="logo"> </div>
  </div>

  <!-- Menu -->
  <div id="menu">
    <ul>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>Serviços</li>
      </a>
      <a href="#">
        <li>Galeria</li>
      </a>
      <a href="#">
        <li>Notícias</li>
      </a>
      <a href="#">
        <li>Sobre</li>
      </a>
      <a href="#">
        <li>Contato</li>
      </a>
    </ul>
  </div>
</header>

<!-- Corpo parte 1 -->
<div id="barra"></div>

演示：https://jsfiddle.net/8bbfyds3/4/

当我使用margin-top时，我的网站会降低像素

3 个答案: