5
làm tiêu đề đề xuất tôi có chân trang mà tôi muốn di chuyển với nội dung của mình. Về cơ bản, tôi có một số văn bản mà khi trình duyệt được đẩy đến một chiều rộng nhỏ hơn nội dung đi theo chân trang, khi tôi muốn chân trang thay vì di chuyển xuống với nội dung. Làm cho nó không chỉ ở trong một vị trí.Chân trang di chuyển với nội dung
Tôi đã trải qua hầu hết mã của tôi và vị trí bị xóa không cần thiết, nhưng nếu tôi cố gắng đặt nó ở dưới 0 trên .footerwrap, nó sẽ xuất hiện một cách ngẫu nhiên trong trang. Hy vọng các bạn có thể giúp.
Tôi sẽ liên kết cả html và CSS của mình để bạn có thể có ý tưởng. Rất tiếc, trang web không hoạt động nhưng có thể là giải pháp đơn giản.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="headerwrap">
<div class="social">
<a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>
<a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>
<a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>
</div><!--close social!-->
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div><!--close logo-->
</div><!--close header!-->
<div class="menu">
<ul class="menutxt">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">PORTFOLIO</a></li>
<li><a href="manga.html">CONTACT</a></li>
</ul>
</div><!--close menu!-->
</div><!--close headerwrap!-->
<!--===================================================Fader===================================================!-->
<div class="fadewrapper">
<div class="fader">
<img class="bottom" src="images/dsas.png"/>
<img class="top" src="images/dsa.png"/>
</div>
</div>
<!--===================================================Content===================================================!-->
<div class="contentwrap">
<div class="textwrap">
<div class="contentspace">
</div><!--close contentspace!-->
<div class="content">
<p>Specializations</p>
<p>With various skills in branding, multi-media
and advertising I am able to provide fresh and inspiring solutions
for the task given to me. Using various programs such as:</p>
</div><!--close content!-->
<div class="divider">
<img src="images/divide.png"/>
</div><!--close divider!-->
<div class="content2">
<p>Why me?</p>
<p>The work I create is reflecting something
fresh and exciting in order to meet the clients
needs. About pushing for new and innovative ideas
and pushing for an end result of brand and product growth</p>
</div><!--close content2!-->
<div class="contentspace">
</div><!--close contentspace!-->
</div><!--close textwrap!-->
</div><!--close contentwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div><!--close footerwrap!-->
</div><!--close wrapper!-->
</body>
</html>
@charset "utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
background:#171717;
margin:0;
font-family: 'Roboto', sans-serif;
color:#CCC;
}
a{
color:#000;
transition:300ms;
}
a:hover {
color:#000;
}
a:link {
text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper{
margin: 0 auto;
width:100%;
height:auto;
}
/*---------------------------- Header ----------------------------*/
.headerwrap{
position:relative;
background:#171717;
-moz-box-shadow: 0px 10px 20px 0px #333 ;
-webkit-box-shadow: 0px 10px 20px 0px #333 ;
box-shadow: 0px 10px 20px 0px #000;
z-index:200;
}
.header{
position:relative;
right:120px;
min-height:180px;
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.logo{
position: absolute;
min-width:60px;
top:4%;
}
.logo img{
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.social{
position: absolute;
width:100%;
min-width:20px;
top:15px;
right:1%;
z-index:500;
}
.social img{
float:right;
width:35px;
display: block;
padding:0 0 0px 15px;
}
img.move {
bottom:0px;
transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.4, 1.4, 1.4);
}
/*---------------------------- Menu ----------------------------*/
.menu{
position:absolute;
width:100%;
top:200px;
z-index:401;
}
ul {
margin: 0 auto;
padding:0 0 5px 0;
list-style-type: none;
}
li{
display: inline;
list-style:none;
padding:1%;
transition: all 300ms;
}
li a{
color:#CCC;
transition:300ms;
}
li a:hover {
color:#900;
}
.menutxt{
text-align: center;
font-family: 'Raleway', sans-serif;
font-size:1.8vw;
font-weight:400;
z-index:300;
}
/*---------------------------- Image Fader ----------------------------*/
.fader {
width:100%;
z-index:1;
}
.fader img {
position:absolute;
width:100%;
height:500px;
max-height:1000px;
min-height:200px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
@keyframes faderFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
.fader img.top {
animation-name: faderFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;*/
}
/*---------------------------- Content ----------------------------*/
.contentwrap{
position:relative;
top:500px;
width:100%;
z-index:500;
background:#171717;
height:290px;
min-height:212px;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
.textwrap{
position:relative;
width:100%;
top:40px;
height:190px;
}
.content,
.divider,
.content2 {
text-align:center;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.divider{
height:200px;
width: 24%;
display:inline-block;
float: left;
margin: 0 1% 1% 0;
}
.divider img{
display: block;
margin-left: auto;
margin-right: auto;
}
.content,
.content2 {
height:200px;
width: 15%;
display:inline-block;
float: left;
margin: 0 1% 1% 0;
}
.contentspace{
width: 20%;
display:inline-block;
float: left;
margin: 0 1% 1% 0;
}
/*---------------------------- Footer ----------------------------*/
.footerwrap{
position:relative;
top:460px;
width:100%;
z-index:501;
clear:both;
}
.foottxt{
width:100%;
height:26px;
text-align: center;
background:#333;
font-family: 'Roboto', sans-serif;
padding-top:15px;
font-size:0.5vw;
color:#FFFFFF;
font-weight:200;
}
nhờ điều này dường như đã giải quyết được vấn đề. Tôi phải điều chỉnh vị trí của văn bản để đi vào giữa. Nhưng bệnh tật chơi đùa với bản thân mình. Nếu nó không quá nhiều để hỏi chức năng của clearfix là gì? – factordog
không bao giờ về văn bản, dường như có khoảng 10px không gian bên dưới chân trang mà tôi cần xóa. Nhưng nếu không cảm ơn bạn rất nhiều người đàn ông – factordog
Tôi nghĩ rằng tôi đã khắc phục vấn đề của bạn với 10px bên dưới chân trang. Tôi đã xóa lợi nhuận từ.foottxt và thiết lập một padding-top và -bottom là 15px. Ngoài ra còn có một lỗi đánh máy (xem bình luận trong bảng định kiểu). – mlv