Question

我最近刚接触CSS和HTML，在标题下分配我的块时遇到问题：

enter image description here

我尝试了几种解决方案，但我没有成功。如果你能给我一个提示，我将不胜感激。感谢

<!  DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title goes here</title>
  <meta name="description" content="Description of your site goes here">
  <meta name="keywords" content="keyword1, keyword2, keyword3">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="page">
    <div class="header" >
    <h1>  
        <img src="images/img1.jpg" width="250" height="190" float="right" />  
        <p> SOME TEXT HERE </p>
    </h1>
    </div>
    <div class="topmenu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">About&nbsp;Us</a></li>
            <li><a href="#">What's&nbsp;New</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Links</a></li>
        </ul>
    </div>
</body>
</html>

我的CSS代码：

body {
    font-family: sans-serif,Arial;
    font-size: 12px;
    color: #000000;
    margin: 0px;
    background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
    padding: 0px;
    margin: 0px;
    color: black;
}
a {
    color: #072FCF;
    text-decoration: underline;
}
a:hover {
    color: #072FCF;
    text-decoration: none;
}
.main-out {
    background-image: url(../images/trans.png);
    background-position: center top;
    width: 100%;
    float: left;
}
.main {
    width: 1000px;
    margin: 0px auto;
}
.page {
    width: 1000px;
    float: left;
    padding: 42px 0px 0px 0px;
    position: center;
}   
.header {
    position:absolute; 
    top:42px; 
    margin-left:-500px; 
    left:50%;
    width: 1000px;
    height: 200px;
    background-color: white;
    border-style: solid solid none solid;
    border-width: thick;    
}
.header h1{
    display: inline;
    text-align: left;
    font-family: cursive;
    font-size: 45px;
    color: black;

}
.header img {
    display: block;
    float: left;
}
.header p {
    line-height: 190px; /* Here is the trick... line-height = image height */
}
.topmenu {
    position:absolute;
    background-color: black;
    width: 1000px;
    height: 37px;
    border: 1px solid #000000;
}
.topmenu ul {
    width: 100%;
    height: 37px;
    list-style-type: none;
}
.topmenu ul li {
    height: 37px;
    float: left;
    padding-right: 24px;
    padding-left: 24px;
}
.topmenu ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 37px;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    height: 37px;
    float: left;
    padding-right: 21px;
    padding-left: 21px;
}
.topmenu ul li a:hover {
    background-image: url(../images/menu-hov.jpg);
    background-repeat: repeat-x;
    background-position: left top;
}

由于

Answer 1

我对你的html / css进行了一些更改：

body {
    font-family: sans-serif, Arial;
    font-size: 12px;
    color: #000000;
    margin: 0px;
    background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
    padding: 0px;
    margin: 0px;
    color: black;
}
a {
    color: #072FCF;
    text-decoration: underline;
}
a:hover {
    color: #072FCF;
    text-decoration: none;
}
.main-out {
    background-image: url(../images/trans.png);
    background-position: center top;
    width: 100%;
    float: left;
}
.main {
    width: 1000px;
    margin: 0px auto;
}
.page {
    width: 1000px;
    margin: 0 auto;
}
.header {
    position: relative;
    width: 1000px;
    height: 200px;
    background-color: white;
    border-style: solid solid none solid;
    border-width: thick;
}
.header h1 {
    display: inline;
    text-align: left;
    font-family: cursive;
    font-size: 45px;
    color: black;
}
.header img {
    display: block;
    float: left;
}
.header p {
    line-height: 190px;
    /* Here is the trick... line-height = image height */
}
.topmenu {
    position:relative;
    background-color: black;
    width: 1000px;
    height: 37px;
    border: 1px solid #000000;
    padding-right: 8px;
}
.topmenu ul {
    width: 100%;
    height: 37px;
    list-style-type: none;
}
.topmenu ul li {
    height: 37px;
    float: left;
    padding-right: 24px;
    padding-left: 24px;
}
.topmenu ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 37px;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    height: 37px;
    float: left;
    padding-right: 21px;
    padding-left: 21px;
}
.topmenu ul li a:hover {
    background-image: url(../images/menu-hov.jpg);
    background-repeat: repeat-x;
    background-position: left top;
}

<body>
    <div class="page">
                <div class="topmenu">
            <ul>
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="#">About&nbsp;Us</a>
                </li>
                <li><a href="#">What's&nbsp;New</a>
                </li>
                <li><a href="#">Services</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
                <li><a href="#">Resources</a>
                </li>
                <li><a href="#">Links</a>
                </li>
            </ul>
        </div>
        <div class="header">
             <h1>  
        <img src="images/img1.jpg" width="250" height="190" float="right" />  
        <p> SOME TEXT HERE </p>
    </h1>

        </div>
</body>

Answer 2

你需要了解三件事来改善你的html＆amp; css技能：

始终遵循自然堆叠顺序（html中的第一个元素会在第二个元素之前显示...），
不要使用position: absolute 除非你知道你在做什么，@比利说，
如果您不需要支持IE8及以下版本，请使用html5代码。如果您这样做，那么使用HTML5 Shiv使它们兼容。

现在，这是一个有效的代码，它也会响应（它将调整大小到您的浏览器的视口大小）。我在代码中添加了很多注释，以便您可以轻松理解。

祝你的项目好运！

＆＃13;

.page {
  width: 100%; /* Makes the page responsive */
  max-width: 1000px; /* all the content inside this div will be 1000 px width */
  margin: 0 auto; /* To center your page div in the page */
}
.topmenu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.topmenu ul li a {
  display: block;
  float: left;
  width: 14.2857142%; /* 100 / 7 (number of menu items) */
  background-color: #000;
  font: bold 12px Arial, Helvetica, sans-serif;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  text-align: center;
}
.topmenu ul li a:hover {
  /* As a general rule, never use images for hovers */
  background-color: #fff;
  color: #000;
}
.topmenu:after { /* This is a clearfix to clear your floated elements */
  content: "";
  display: table;
  clear: both;
}
header img {
  display: inline-block;
  width: 250px;
  height: 190px;
}
header h1 {
  display: inline;
  text-align: left;
  font-family: cursive;
  font-size: 25px;
  color: black;
  vertical-align: top; /* if you want the text to start at the top of the picture. Otherwise try middle or bottom */
}

＆＃13;

<div class="page">
  <!-- always start with the first element on your page: here it's your navigation -->
  <nav class="topmenu"> <!-- use html5 tags. If you need to support IE8 or below you can use HTML5 Shiv -->
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="#">About&nbsp;Us</a></li>
      <li><a href="#">What's&nbsp;New</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Links</a></li>
    </ul>
  </nav>
  <header> <!-- same, use html5 tags -->
    <!-- As a general rule, css is for styling not html so don't put any width, height or style in img tag -->
    <img src="http://placehold.it/250x190" alt="your picture description"/> <!-- always use alt text in images for accessibility purposes -->
    <h1>SOME TEXT HERE</h1>
  </header>
</div> <!-- don't forget this div that closes your .page -->

＆＃13;

Answer 3

删除所有绝对定位（并添加缺少的</div>标记以完成.page div - 我假设这包含了所有内容。）

要使您的内容居中，请将.page CSS规则替换为：

.page{
  width: 1000px; // I would reccommend using 960px instead as it is more standard
  margin: 0 auto;
  //add your padding in if you need it
}

在理解之前不要使用绝对定位，以及为什么/如何/何时应该使用绝对定位

Answer 4

我认为您应该重新排列HTML标记。看起来您似乎没有使用正确的嵌套规则。我建议您尝试删除h1标记之外的img标记。您的div与class =＆＃34 ;页面＆＃34;没有结束标记。

阻止位置

4 个答案: