10 Replies - 1261 Views - Last Post: 07 November 2013 - 11:05 AM

#1 colonelv   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 02-February 12

how do i create this floating footer? the width of this background

Posted 07 November 2013 - 09:57 AM

#divFooterPageInfo {
	position:relative;
	width:auto;	
	text-align:center;
	font-size:10px;
	width: 1262px;
    height: 340px;
    background-image: url(footerbg.jpg);
    background-size: 100% 100%;


the image below is my desired footer, see how it suspends below the container and is the width of the background

What i am getting is just an empty space but cannot see my footer

This post has been edited by Dormilich: 07 November 2013 - 10:05 AM

Is This A Good Question/Topic? 0
  • +

Replies To: how do i create this floating footer? the width of this background

#2 colonelv   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 02-February 12

Re: how do i create this floating footer? the width of this background

Posted 07 November 2013 - 10:02 AM

#divFooterPageInfo {
position:relative;
width:auto;
text-align:center;
font-size:10px;
width: 1262px;
height: 340px;
background-image: url(footerbg.jpg);
background-size: 100% 100%;

the image below is my desired footer, see how it suspends below the container and is the width of the background

What i am getting is just an empty space but cannot see my footer

any guidance just to get it showing would be appreciated :)

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#3 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15885
  • View blog
  • Posts: 63,577
  • Joined: 12-June 08

Re: how do i create this floating footer? the width of this background

Posted 07 November 2013 - 10:03 AM

Seriously.. stop create duplicate topics.. Merging.
Was This Post Helpful? 0
  • +
  • -

#4 colonelv   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 02-February 12

Re: how do i create this floating footer? the width of this background

Posted 07 November 2013 - 10:09 AM

sorry i had file size issues when uploading the image

can anyone help?

:(
Was This Post Helpful? 0
  • +
  • -

#5 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15885
  • View blog
  • Posts: 63,577
  • Joined: 12-June 08

Re: how do i create this floating footer? the width of this background

Posted 07 November 2013 - 10:12 AM

There is no need to be bumping you thread.. folks will help if there is enough information for them to help, or have the time.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is online

  • palpable absurdity
  • member icon

Reputation: 6916
  • View blog
  • Posts: 28,598
  • Joined: 12-December 12

Re: how do i create this floating footer? the width of this background

Posted 07 November 2013 - 10:24 AM

So.. it's not displaying at all? It has simply disappeared?

Please explain, but you'll need to post some more css and some html.
Was This Post Helpful? 0
  • +
  • -

#7 colonelv   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 02-February 12

Re: how do i create this floating footer? the width of this background

Posted 07 November 2013 - 10:43 AM

i have now managed to get the footer to display, but need to centre it


/****** header search and info *****/
#divHeadInfoContainer {
position:relative;
width:100%;
height:50px;

}
#divHeaderInfo {
position:relative;
width:40%;
height:auto;
display: inline;
float:left;
color:#FFFFFF;
}

#divHeaderSearch2 {
position:relative;
width:60%;
margin:auto;
text-align: right;
display: inline;
float:left;
}
/******* end ***********/

#divMenuSpace {
position:relative;
padding:15px;
height:auto;
background-color:#003300;
text-color:#fffff6;

}
#HeaderMessage {
position:relative;
color:#FFFFF6;



line-height:20px;
}
#divBodyContainer {
position:relative;
width:100%;
height:auto;
margin:0px;
background-color:#fffff6;
text-align: left;
}
#divBodyMid{
position:relative;
width:100%;
margin:auto;
color:fffff6;

-moz-box-shadow:3px 4px 19px 0px rgba(119, 119, 119, 0.95);
-webkit-box-shadow:3px 4px 19px 0px rgba(119, 119, 119, 0.95);
box-shadow:3px 4px 19px 0px rgba(119, 119, 119, 0.95);
}
#divBodyCol0 {
position:relative;
width:40%;
height:auto;
padding:20px 20px 20px 20px;

}
#divBodyCol1 {
position:relative;
width:40%;
height:auto;
padding: 20px 20px 20px 20px;
line-height: 170%;
text-align: justify;
display: inline;
float:left;
}
#divBodyCol2 {
position:relative;
width:50%;
margin:auto;
padding:20px 20px 20px 20px;
text-align: left;
display: inline;
float:right;
}
#divFooter {
clear:both;
height:auto;
padding: 45px;
background-size: 100% 100%;
}
width:100%;
position:fixed;
height:100%;
margin:0 auto;
color:fffff6;


/*****************************

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#8 colonelv   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 02-February 12

Re: how do i create this floating footer? the width of this background

Posted 07 November 2013 - 10:53 AM

HTML
    <div id="divFooter"><img src="images/footerbg.jpg" alt="footer picture" class="active" />
      <div id="divFooterPageInfo">
        <br>Copyright 2013 - All Rights Reserved - www.pinewood.co.uk<br />
        Designed by 09008105<br />
      </div>




thanks
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw   User is online

  • palpable absurdity
  • member icon

Reputation: 6916
  • View blog
  • Posts: 28,598
  • Joined: 12-December 12

Re: how do i create this floating footer? the width of this background

Posted 07 November 2013 - 10:58 AM

The last section of your css is invalid as it is not contained within curly brackets following a selector.

Your html is also missing a closing div-tag, although perhaps you just omitted to paste it.
Was This Post Helpful? 0
  • +
  • -

#10 colonelv   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 02-February 12

Re: how do i create this floating footer? the width of this background

Posted 07 November 2013 - 11:02 AM

sorry yes with the css, i copied and pasted it out of the curly brackets and was just experimenting with pasting a line at a time back into the bracket to see if anything changed.

the html i just merely didnt paste the last 3 closing div tags on the thread

still baffled, i imagine its just a simple open close situation :/

thanks
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw   User is online

  • palpable absurdity
  • member icon

Reputation: 6916
  • View blog
  • Posts: 28,598
  • Joined: 12-December 12

Re: how do i create this floating footer? the width of this background

Posted 07 November 2013 - 11:05 AM

There are links in my signature for validating html and css.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1