PDA

View Full Version : footers


paul-chambers
10-02-2012, 02:29 PM
Hi

I am adding header & footer to a web page, the header displays fine but the footer in live mode seems to be indenting the text causing the links to disaplay on 2 lines?

css:

}
#footer {
position: absolute;
top: 1150px;
background-image: url(Site%20images/headers/footer_background.png);
width: 960px;
bottom: 100px;
font-weight: normal;
color: rgba(255,255,255,1);
text-decoration: none;
font-size: 10px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
left: 5px;
}

Html:

<div id="footer">

<div align="left">

<a href="animals.html" " target="_self">Animal Statues</a>

<a href="decorsmalls.html" target="_self">Decor Small</a>

<a href="fountainsbaths.html" target="_self" >Fountains</a>

<a href="gardenfurniture.html" target="_self" >Garden Furniture</a>

<a href="gazebosarches.html" target="_self" >Gazebos & Arches</a>

<a href="indoorfurniture.html" target="_self">Indoor Furniture</a>

<a href="lampposts.html" target="_self">Lamp posts & Mail</a>

<a href="lightmetalware.html" target="_self" >Light metal ware</a>

<a href="mirrorsandwindows.html" target="_self">Mirrors & Windows</a>

<a href="misc.html" target="_self">Misc Items</a>

<a href="statues.html" target="_self">Statues</a>

<a href="marblestoneterracotta.html" target="_self">Marble & Stone</a>

<a href="urnsandbases.html" target="_self">Urns & Bases</a>
</div>
<p align="left">Yesterday &amp; Today Antique Mall, <strong>17 Wrigley Head Failsworth Manchester M35 9BS</strong> - <strong>0161 681 9988 0161 684 9488</strong> - </p>
</div>

johnMoss
10-02-2012, 03:11 PM
What happens inside Dreamweaver in live mode is not necessarily what you can expect to see once live on the server. Can you put this on a server to test?
One thing we do here a lot is ask for questioners to do that. If your problem still exists after going live, we have a place to go to and look at it like that, which makes things markedly easier to evaluate & correct.

paul-chambers
10-02-2012, 03:24 PM
HI John, Don't have a server as yet as it is still in the process of being set up. I know what you mean with dreamweaver and the different layouts.

With regards to positioning, what would you recommend ie relative, fixed static?

paul-chambers
10-02-2012, 03:26 PM
Forgot to add, the header sits fine in design, the footer on the other hand sits indented about 130 px? I shall mess around to see if i can fix it, in the meantime if you have any ideas then I'd be most grateful.

domedia
10-02-2012, 06:53 PM
With regards to positioning, what would you recommend ie relative, fixed static?

Neither. You should be able to build a full web site without relying too much on the position property.

domedia
10-02-2012, 06:55 PM
And remember the CSS box model. Full width = width+ padding + border.,

paul-chambers
10-04-2012, 12:07 PM
Neither. You should be able to build a full web site without relying too much on the position property.

I have positioned the footer as per my previous css posting, when the 'absolute' tag is removed, the footer is dumped just under the header on the page even though I have stated where it is to sit on the page 1150 pixels from top of page.

I have solved the previous indentation problem and the headers and footers are where I want them (with the 'absolute' tag in the CSS), just wondering why it moves towards the top of the page when the 'absolute' is removed?

domedia
10-04-2012, 01:52 PM
I have positioned the footer as per my previous css posting, when the 'absolute' tag is removed, the footer is dumped just under the header on the page even though I have stated where it is to sit on the page 1150 pixels from top of page.?

That is what position: absolute does. It absolutely positions the element. If you remove 'position: absolute', it is no longer positioned absolute.

If your last element on your page (the footer) is just below the header when you remove the absolute positioning, then you're doing something else wrong somewhere else.

Can you post this online somewhere? It's impossible to say without seeing your code.

johnMoss
10-04-2012, 03:53 PM
Can you post this online somewhere? It's impossible to say without seeing your code.

Seconded... Do you not have a site of your own for example to load this to?
When we can see it, something like this is resolved in minutes. D is right, something somewhere else is very likely the cause of the problem.

paul-chambers
10-04-2012, 04:30 PM
hmmm strange, I have dropbox but it's not my fav peice of software? I can post a page to that?

johnMoss
10-04-2012, 04:36 PM
Yes you can. And here's an alternative to dropbox:
http://jsfiddle.net/

You'll spend a couple minutes learning it but its pretty intuitive, and perfectly organized...

gentleone
10-04-2012, 04:59 PM
hmmm strange, I have dropbox but it's not my fav peice of software? I can post a page to that?
Huh?!? Paul, what you actually saying with this is that you don't like web servers. Well, you better get used to it, because there wouldn't be websites without it. ;)

And with dropbox you just work locally on your PC like you do with your other directories, so what's the problem?

paul-chambers
10-04-2012, 05:12 PM
Huh?!? Paul, what you actually saying with this is that you don't like web servers. Well, you better get used to it, because there wouldn't be websites without it. ;)

And with dropbox you just work locally on your PC like you do with your other directories, so what's the problem?

I didn't say I didn't like web servers and am well aware web sites won't work without them so not sure where you got that peice of info? I only mentioned dropbox.

paul-chambers
10-04-2012, 05:19 PM
John, I will link to here with dropbox so hope it works, Please forgive me if the code is a little messy, I mostly work in design but am getting used to the coding aspect of dreamweaver now so cleaning up some of the reduntant stuff in there as we speak. Maybe I can kill 2 birds with 1 stone so to speak as when I load this in FF it's fine bar the footer moving out of place but also my menu goes from vertical in FF to horizontal in IE when viewed in IE9?


https://dl-web.dropbox.com/get/site/decorsmalls6.html?w=1bf889b9

johnMoss
10-04-2012, 05:27 PM
John, I will link to here with dropbox so hope it works

It don'ts :) try again bro...

paul-chambers
10-04-2012, 05:34 PM
try this John:
https://dl.dropbox.com/u/103611791/decorsmalls6.html

gentleone
10-04-2012, 05:44 PM
Paul, you shouldn't do this with dropbox online. You do it with your dropbox folder on your PC (thus locally) and dropbox will automatically upload & update everything on the dropbox server.

Create a folder named 'test' in your 'public' folder.
Copy everything... pages, image folder, css folder, etc. in there.
When done, do a right mouse click on the webpage in your 'test' folder such as 'index.html' (I don't know how you named it)
In the context menu you go to 'Dropbox' > 'Copy Public Link'
Paste that link here in the thread

johnMoss
10-04-2012, 05:45 PM
For starters you have a syntax error here:
<script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script>

paul-chambers
10-04-2012, 05:53 PM
Paul, you shouldn't do this with dropbox online. You do it with your dropbox folder on your PC (thus locally) and dropbox will automatically upload & update everything on the dropbox server.
Create a folder named 'test' in your 'public' folder.
Copy everything... pages, image folder, css folder, etc. in there.
When done, do a right mouse click on the webpage in your 'test' folder such as 'index.html' (I don't know how you named it)
In the context menu you go to 'Dropbox' > 'Copy Public Link'
Paste that link here in the thread

Thanks, will do the above, I will remove previous link and redo.

johnMoss
10-04-2012, 05:55 PM
What I see rendered is just a total mess, so I can't really see whats going on. This is certainly due to files needed for rendering that you have on your comp but not being accessed by what you have on dropbox.
At least for me, I'm dead in the water with this until you can get it uploaded somewhere..

paul-chambers
10-04-2012, 05:59 PM
John, I will try and load up what Gentleone has suggested with all css etc in there so you can see full page layout

gentleone
10-04-2012, 06:26 PM
I had already a look at the code as well and I see you're still using only position absolute for your layout. Did you start drawing websites again in Design View?

Position absolute is not the right tool to lay out complete pages. Just use the normal flow (which is the default position of div tags; 'static') and if you want to line up divisions (div's) side by side you use floats or display: inline-block. To space them out you use margin and/or padding.

paul-chambers
10-04-2012, 07:36 PM
still trying to dropbox files

paul-chambers
10-04-2012, 07:49 PM
I thimk I will need to upload this to a server

paul-chambers
10-07-2012, 12:52 PM
I think I may have eliminated the whitespace bug in IE by slightly amending the code for my menu as it was going horizontal across the page in IE but vertical in FF where it should be.

I have amended each menu item from this:

<li> <span class="MenuBarActive"><a href="index.html" target="_self">Home page</a></span></li>

to this:

<span class="MenuBarActive"><a href="index.html" target="_self">Home page</a></span><li></li>

This seems to have worked for the IE issue but in DW when I check the properties for the spry menu I am getting <broken item> and that the menu is missing some <a> tags. This is not highlighted from within the code itself as an error?

johnMoss
10-07-2012, 01:45 PM
That the above would even work at all is pot luck. Put your <li> tags back the way they were. I know you're trying to get this thing knocked out but it would behoove you to at least spend an afternoon reading up on HTML. And yes, you need to get this up on a server so we can see it. Did you follow G's advice & get rid of those absolutes?

paul-chambers
10-07-2012, 02:17 PM
I am removing the absolute tags, mostly completed on the main divs of the pages and they are staying put :o) it is only the spry that messes up in IE. I have a server now which I am setting up so should be able to get some pages up there shortly