January 26th, 2013, 09:14 PM
|
|
Registered User
|
|
Join Date: Jan 2013
Posts: 1
Time spent in forums: 40 m 34 sec
Reputation Power: 0
|
|
|
New Member - Positioning content in footer so it stays in same place?
Hi all,
I have a question regarding placing content in a footer and having it stay centered when the window is resized. Right now i have a main footer Div which spans 100% of the window, and a wrap div inside with a contact us image, a small div with some info about the company, then a small div with 3 socialmedia icons.
My problem is when the window width shrinks it makes the social icons div move under the rest, then eventually the text moves under as well.
My stylesheet is here
PHP Code:
@charset "utf-8";
/* CSS Document */
* {
margin : 0;
padding : 0;
}
img, object, embed, video {
max-width:100%;
display: inline-block;
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
#wrap {
width:100%;
}
* {
margin : 0;
padding : 0;
}
body {
background-color: black;
text-align:center;
color:white;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
#naviWrap {
position:fixed;
clear:both;
top:0;
z-index:200;
width:800px;
left:50%;
margin-left:-400px;
}
#naviWrap img {
max-width:100%;
float:left;
}
#featureDiv {
position:relative;
width:25%;
border:1px solid yellow;
margin: 65% auto ;
margin-bottom: 125px;
}
#featureDiv .img {
width:100%;
max-width:100%;
}
#contentWrap {
width:90%;
margin: 0 auto 0 auto;
}
#contentWrap .bentoBox {
width:77%;
height:30%;
margin: 0px auto 100px auto;
padding:10px;
background-color: #c2c0c1;
}
#contentWrap .bentoBox .bentoInfo {
width:90%;
height:75px;
margin: 10px auto;
}
#contentWrap .bentoBox .bentoInfo .client {
float:left;
width:45%;
text-align:left;
}
#contentWrap .bentoBox .bentoInfo .story {
float:right;
width:45%;
text-align:left;
}
#contentWrap .bentoBox .img {
margin: 0px auto;
width:100%;
max-width:100%;
}
#contentWrap .bentoBox img {
max-width:100%;
}
.bentoBox p {
font-size:12px;
}
#footer {
background-image:url(../img/footerbg1.png);
margin-bottom:125px;
}
#footer #footerWrap {
width:90%;
height:140px;
}
#footer #contactBtn {
margin-left:100px;
margin-top:30px;
}
#footer #footerText {
width:450px;
margin: 15px 15px 0 30px;
height:100px;
color:black;
padding-top:30px;
text-align:justify;
}
#footer #socialIcons {
width:150px;
height:37px;
margin-top:45px;
clear:right;
}
.fltlt {
float:left;
}
.fltrt {
float:right;
}
actual page is here
PHP Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Conch&Media</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<link href="style/boilerplate.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="wrap">
<div id="naviWrap">
<div id="nav">
<img src="img/badge-bulb1.png" alt="badge">
<img src="img/badge-reel1.png" alt="badge">
<img src="img/badge-mobile1.png" alt="badge">
<img src="img/badge-pen1.png" alt="badge">
<img src="img/badge-globe1.png" alt="badge">
<img src="img/badge-book1.png" alt="badge">
</div>
</div>
<div id="featureDiv">
<img src="img/featured.png" alt="Featured Expeditions" class="img">
</div>
<div id="contentWrap">
<div class="bentoBox">
<div class="bentoInfo">
<div class="client">
<h1>Client</h1><p> : Blah</p>
</div>
<div class="story">
<h1>Story</h1><p> : blah</p>
</div>
</div>
<div class="img">
<img src="img/bento1.jpg" alt="bento">
</div>
</div>
<div class="bentoBox">
<div class="bentoInfo">
<div class="client">
<h1>Client</h1><p> : Blah</p>
</div>
<div class="story">
<h1>Story</h1><p> : blah</p>
</div>
</div>
<div class="img">
<img src="img/bento2.jpg" alt="bento">
</div>
</div>
<div class="bentoBox">
<div class="bentoInfo">
<div class="client">
<h1>Client</h1><p> : Blah</p>
</div>
<div class="story">
<h1>Story</h1><p> : blah</p>
</div>
</div>
<div class="img">
<img src="img/bento3.jpg" alt="bento">
</div>
</div>
</div>
<div id="footer">
<div id="footerWrap">
<img src="img/contact.png" alt="contactUs" id="contactBtn" class="fltlt">
<div id="footerText" class="fltlt"> <p>25 MAITLAND STREET (SUITE 1403) • TORONTO ONTARIO CANADA
• </p> </div>
<div id="socialIcons" class="fltlt">
<img src="img/facebook.png" alt="facebook">
<img src="img/twitter.png" alt="twitter">
<img src="img/linkdin.png" alt="linkdin">
</div>
</div>
</div>
</div>
</body>
</html>
When you resize notice the footer at the bottom the content shifts, id like it to stay in the same spot just like on the bottom of this site for example.
Ignore large gap on top haven’t completed full design yet.
Any replies are much appreciated.
I have a link to a live version unfortunetley since I am a new member i cannot post the link.
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
