我目前是社区的新手,并希望得到一些我为我的朋友创建的HTML网站的帮助。基本上我是创建一个简单的网站,但我有一些问题,文本不会超过页脚。我检查代码并试图弄清楚如何解决这个问题,但我无法这样做。我的问题是:有人可以帮我把文字放在页脚上面吗?请告诉我 !
body {
margin: 0 auto;
min-height: 100%;
background-color: #111;
}
h1 {
color: #fff;
position: relative;
}
h2 {
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
.x {
color: #ef3937;
text-decoration: none;
letter-spacing: 2px;
}
.container {
height: auto;
width: 100%;
}
/*-------------------------------HEADER--------------------------------*/
.headercontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
top:0px;
background-color: #111;
}
.header {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.headerleft {}
.headercenter {
width: 100%;
height: 100%;
color:#f2f2f2;
}
.logo {
max-width: 200px;
margin-top: 20px;
}
.headerright {}
/*-----------------------------END HEADER------------------------------*/
/*------------------------------CONTENT--------------------------------*/
.contentcontainer {
Position: absolute;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
.content {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.contenleft {}
.contentcenter {
text-align: center;
position: relative;
}
.contentright {}
/*-----------------------------END CONTENT-----------------------------*/
/*-------------------------------FOOTER--------------------------------*/
.clearfooter {}
.footercontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
background-color: #111;
bottom: 20;
}
.footer {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.footerleft {}
.footercenter {
text-align: center;
font-size: 8px;
font-weight: normal;
font-family: 'Economica';
font-weight: 100;
letter-spacing: 1px;
}
.footerright {}
/*-----------------------------END FOOTER------------------------------*/
/*------------------------------ALGEMEEN-------------------------------*/
a {text-decoration: none; color: #fff;}
a:hover{text-decoration: underline;}
@font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}
@font-face {
font-family: 'Champagne & Limousines Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}
@font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}
@font-face {
font-family: 'Champagne & Limousines Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
<title>Froluv</title>
<meta name="Froluv." content="PSD to HTML5+CSS3 conversion.">
<meta name="Froluv" content="PSD, HTML5, CSS3">
<meta name="author" content="Vivaco">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" type="text/css" href="StyleCSS.css">
</head>
<body>
<div class="container">
<!-------------------------------------------------------------------------HEADER------------------------------------------------------------------------->
<div class="headercontainer">
<div class="header">
<div class="headerleft">
</div>
<div class="headercenter">
<div class="logocontainer">
<img src="" class="logo"> <!--insert logo here-->
</div>
</div>
<div class="headerright">
</div>
</div>
</div>
<!-----------------------------------------------------------------------END HEADER----------------------------------------------------------------------->
<!-------------------------------------------------------------------------CONTENT----------------------------------------------------------------------->
<div class="contentcontainer">
<div class="content">
<div class="contentleft">
</div>
<div class="contentcenter">
<h1 style="font-family:'Champagne & Limousines';font-weight:normal;font-size:42px">“Wij organiseren events, kom je <u><b><a href="">dansen</a></b></u>?”</h1>
<!--Insert ticket link here-->
</div>
<div class="contentright">
</div>
</div>
</div>
<!-----------------------------------------------------------------------END CONTENT-------------------------------------------------------------------->
<!-----------------------------------------------------------------------FOOTER------------------------------------------------------------------------->
<div class="footercontainer">
<div class="footer">
<div class="footerleft">
</div>
<div class="footercenter">
<h2>
<a href="">FACEBOOK</a> <span class="x">x</span> <a href="">INSTAGRAM</a> <span class="x">x</span> <a href="">SPOTIFY</a> <span class="x">x</span> <a href="">TICKETS</a>
<span class="x">x</span> <span class="x">x</span> <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
</h2>
</div>
<div class="footerright">
</div>
</div>
</div>
<!---------------------------------------------------------------------END FOOTER----------------------------------------------------------------------->
</div>
</body></html>
我会避免使用绝对定位,直到您更好地了解何时何地使用它以及它有助于解决的问题。
通过撤消已应用的绝对定位,内容将按正确的顺序排列。但是,可能需要进一步改进以满足您的需求。
在下面的示例中,我使用flexbox
将页脚推到页面底部。您还会注意到我删除了许多不必要的属性,即width: 100%
用于<div>
(默认情况下会这样做)。
body {
margin: 0;
min-height: 100vh;
background-color: #111;
display: flex;
flex-direction: column;
}
h1 {
color: #fff;
position: relative;
font-family: 'Champagne & Limousines';
font-weight: normal;
font-size: 42px;
}
h2 {
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
.x {
color: #ef3937;
text-decoration: none;
letter-spacing: 2px;
}
.container {}
/*-------------------------------HEADER--------------------------------*/
.headercontainer {}
.header {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.headerleft {}
.headercenter {
color: #f2f2f2;
}
.logo {
max-width: 200px;
margin-top: 20px;
}
.headerright {}
/*-----------------------------END HEADER------------------------------*/
/*------------------------------CONTENT--------------------------------*/
.contentcontainer {
flex-grow: 1;
background-color: #111;
}
.content {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.contenleft {}
.contentcenter {
text-align: center;
}
.contentright {}
/*-----------------------------END CONTENT-----------------------------*/
/*-------------------------------FOOTER--------------------------------*/
.clearfooter {}
.footercontainer {}
.footer {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.footerleft {}
.footercenter {
text-align: center;
font-size: 8px;
font-weight: normal;
font-family: 'Economica';
font-weight: 100;
letter-spacing: 1px;
}
.footerright {}
/*-----------------------------END FOOTER------------------------------*/
/*------------------------------ALGEMEEN-------------------------------*/
a {
text-decoration: none;
color: #fff;
}
a:hover {
text-decoration: underline;
}
@font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}
@font-face {
font-family: 'Champagne & Limousines Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}
@font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}
@font-face {
font-family: 'Champagne & Limousines Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<!-- HEADER -->
<div class="headercontainer">
<div class="header">
<div class="headerleft">
</div>
<div class="headercenter">
<div class="logocontainer">
<img src="" class="logo">
<!-- insert logo here -->
</div>
</div>
<div class="headerright">
</div>
</div>
</div>
<!-- END HEADER -->
<!-- CONTENT -->
<div class="contentcontainer">
<div class="content">
<div class="contentleft">
</div>
<div class="contentcenter">
<h1>“Wij organiseren events, kom je <u><b><a href="">dansen</a></b></u>?”</h1>
<!--Insert ticket link here-->
</div>
<div class="contentright">
</div>
</div>
</div>
<!-- END CONTENT -->
<!-- FOOTER -->
<div class="footercontainer">
<div class="footer">
<div class="footerleft">
</div>
<div class="footercenter">
<h2>
<a href="">FACEBOOK</a> <span class="x">x</span> <a href="">INSTAGRAM</a> <span class="x">x</span> <a href="">SPOTIFY</a> <span class="x">x</span> <a href="">TICKETS</a>
<span class="x">x</span> <span class="x">x</span> <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
</h2>
</div>
<div class="footerright">
</div>
</div>
</div>
<!-- END FOOTER -->
正如几分钟前所建议的那样,只需从.contentcontainer中移除position:absolute,它应该可以正常工作:https://jsfiddle.net/ilkovs/yqdg62fe/3/
.contentcontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
代替 :
.contentcontainer {
Position: absolute;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
您应该了解如何使用position:absolute
,如果您使用absolute
,您将<Div>
从页面流中取出,所以我认为您应该使用relative
定位而不是absolute
。
再说一遍,如果你打算使用absolute
,你需要指定以下四(4)个属性中的一个:top, bottom, left, right
,这四个属性可以帮助你随心所欲地移动页面上的<div>
并且可以帮助你改变你的文本起来。
最后,所有不同类型的职位都使用我提到的相同的四个属性