块位置
[英]Block positions
问题描述
我最近刚接触CSS和HTML，但在标题下分配代码块时遇到问题：
我尝试了几种解决方案，但没有成功。 如果您能给我一个提示，我将不胜感激。 谢谢
<! 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 Us</a></li>
<li><a href="#">What's 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;
}
谢谢
4 个解决方案
解决方案1
2 已采纳 2014-11-13 15:09:58
我对您的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 Us</a> </li> <li><a href="#">What's 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>
解决方案2
2 2014-11-13 15:27:33
您需要了解三件事来提高html和css技能：
- 始终遵循自然的堆叠顺序（html中的第一个元素将显示在第二个元素之前...），
- 不要使用
position: absolute除非您知道自己在做什么，如@Billy所说， - 如果不需要支持IE8及以下版本，请使用html5标签。 如果这样做，则使用HTML5 Shiv使它们兼容。
现在，这里是一个有效的代码，它也可以响应（它将调整为浏览器的视口大小）。 我在代码中添加了很多注释，以便您可以轻松理解。
祝您项目顺利！
.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 */ }
<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 Us</a></li> <li><a href="#">What's 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 -->
解决方案3
0 2014-11-13 15:05:13
删除所有绝对位置（并添加缺少的</div>标记以完成.page我假设这是将您所有的内容都包装在其中）。
要使内容居中，请使用以下内容替换.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
}
除非您了解绝对定位以及为什么/如何/何时使用它，否则请不要使用绝对定位
解决方案4
0 2014-11-13 15:13:38
我认为您应该重新排列HTML标记。似乎您没有使用正确的嵌套规则。建议您尝试删除h1标签之外的img标签。您的class =“ page”的div没有结束标记。
边界位置
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.