5
come suggerisce il titolo, ho un piè di pagina che voglio spostare con il mio contenuto. Fondamentalmente, ho del testo che quando il browser viene spinto a una larghezza minore il contenuto va sotto il piè di pagina, quando voglio che il piè di pagina si sposti piuttosto con il contenuto. Non farlo rimanere solo in una posizione.Il piè di pagina che si sposta con il contenuto
Ho passato gran parte del mio codice e rimosso il posizionamento che non è necessario, ma se provo a renderlo in basso a 0 su .footerwrap, esso fluttua in qualche posto a caso nella pagina. Spero che voi ragazzi potete aiutare.
Collegherò sia il mio html che il CSS per farti un'idea. Sfortunatamente, il sito non è live ma probabilmente è una soluzione semplice.
<!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;
}
grazie questo sembra aver risolto il problema. Devo riadattare la posizione del mio testo per andare al centro. Ma mi diverto anch'io. Se non è troppo chiedere cosa è la funzione del clearfix? – factordog
non importa del testo, sembra avere circa 10px di spazio sotto il piè di pagina che devo rimuovere. Ma per il resto grazie mille uomo – factordog
Penso di aver risolto il problema con il 10px sotto il piè di pagina. Ho rimosso il margine da.foottxt e imposta padding-top e -bottom di 15px. C'era anche un errore di battitura (vedi commento nel foglio di stile). – mlv