PDA

View Full Version : Footer question



SteveH
Feb 4th, 2010, 01:11 PM
Hello

I have this in my HTML document:

<div id="footer">Copyrightę | Created by mySite | All Rights Reserved</div>

and this in my main.css file:


#container
#logo h1

{

text-indent: -9999px;}

#footer <---------------{

margin-top: 20px;}

.nav
{
float: right;
margin-top: -15px;}

What is this CSS footnote actually doing? I can see no difference when I alter the 20px value - I'm trying to move the copyright footer nearer to the bottom of the page.

Thanks

char
Feb 4th, 2010, 01:28 PM
try

#footer {
width:750px;
height:50px;
clear:both;
}

try this bit set the width and height to what it should be

let me now

SteveH
Feb 4th, 2010, 01:43 PM
Hello Char

Thanks for your post.

There is no difference at all in what I am seeing between


#footer {
width:750px;
height:50px;
clear:both;
}


and this:


#footer {
width:750px;
height:10px;clear:both;
}


- which would imply that something is preventing the change from being viewed. Basically, the page looks exactly like the one I originally had, as if you amendment has resulted in no change.

Steve

char
Feb 4th, 2010, 01:49 PM
can you send an link to your website so we can all see what is going on

SteveH
Feb 4th, 2010, 01:53 PM
Hello Char

Yes, here it is:

http://proofreading4students.com/index.asp

The CSS file main.css is here: httpdocs / _common / css.

Thanks for your help.

Steve

char
Feb 4th, 2010, 05:23 PM
maybe this will do it

<body>

<div id="container">

<div id="#"></div>

<div class="halfmoon">
<ul>
<li><a href="#">Home</a></li>
<li><a href="work.html">Our work</a></li>
<li><a href="rates.html">Rates</a></li>

<li id="contact-form"><a href="#" class="contact">Contact</a></li>
</ul>
</div>

<img src="./images/banner3.jpg" width="500" height="254" alt="banner" title="banner">

<div id="#">

<h3 class="features">features</h3>
<div id="features">

<p class="main">Nobody likes to read scruffy work, essays peppered with spelling mistakes, or poor
grammar. Our task is to ensure that your work, whether a degree-level essay, master's project, or PhD dissertation, is presented in
the best possible light.</p>

</div>

<h3 class="compatibility">browser compatibility</h3>
<div id="compatibility">
<ul>
<li>Firefox 2 (mac / pc)</li>
<li>IE 7</li>
<li>IE 6</li>
<li>Safari (mac)</li>
</ul>
</div>

<h3 class="example">example</h3>

<div id="example">
<ul>
<li>Firefox 2 (mac / pc)</li>
<li>IE 7</li>
<li>IE 6</li>
<li>Safari (mac)</li>
</ul>
</div>

<div id="wrap">

<div id="main" class="clearfix">

</div>
</div>
<div id="footer">Copyrightę proofreading4students.com | Created by graphic9.com | All Rights Reserved</div>
</body>


is that how u wanting it else you will need to make an better css box to get it at the bottom off the page

Excavator
Feb 4th, 2010, 05:26 PM
Good morning SteveH,
There are so many problems there. You really need to spend some time with the validators fixing errors.
You have a bunch of HTML in your main.css, from copy/paste stuff? There is a lot there that does not belong.

For your #footer, height 10px is smaller than the height of the text your putting in it. See box model (http://www.w3.org/TR/CSS2/box.html).
Why are you putting #main .clearfix in with it?
And then what is it all wrapped in #wrap for?
See divitis (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/).

Make your CSS and markup reflect the changes made below.


#footer {
width:750px;
margin: 40px 0 0 0;
clear:both;
background: #000;
}



<li>Firefox 2 (mac / pc)</li>
<li>IE 7</li>
<li>IE 6</li>
<li>Safari (mac)</li>
</ul>
</div>



</div>

<div id="footer">Copyrightę proofreading4students.com | Created by graphic9.com | All Rights Reserved</div></div>

Excavator
Feb 4th, 2010, 05:33 PM
I cleaned your CSS up a bit for you. Not exactly how I like to lay it out but it's valid now -
* { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
body {
background: #fff;
margin:1.5em 0;
color: #797979;
font: 75%/1.5 Verdana, Arial;
}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight:400;}
blockquote:before, blockquote:after, q:before, q:after { content: "";}
blockquote, q { quotes: "" "";}
a img { border: none; }
a { color: #607293; text-decoration: none; }
a:hover { color: #354158;}
#container { width: 500px; margin: auto; padding-top: 30px; padding-bottom: 50px;}
#container #logo { background: url(../img/logo.gif) no-repeat top left; height: 44px; padding-bottom: 5px; border-bottom: 1px solid #797979; margin-bottom: 20px;}
#container #logo h1 { text-indent: -9999px;}
#footer {
width:750px;
margin: 40px 0 0 0;
clear:both;
background: #000;
}
.nav { float: right; margin-top: -15px;}
h2{ font-size: 2.2em; margin: 0; border-bottom: 1px solid #797979; margin-bottom: 5px; color: #354158;}
h3{ font-size: 1.8em; margin-top: 30px; border-bottom: 1px solid #797979; margin-bottom: 10px; color: #607293;}
h4{ font-weight: bold;}
.home .menuItem h3 { font-size: 1.8em; line-height: 1.0em; float: none; position: relative; display: block; border-bottom: none; margin: 0;}
.home .menuItem p {margin-left: 0px; margin-bottom: 0px; position: relative; display: block; border-bottom: none; }
.home .menuItem {display: block; position: relative; padding-bottom: 5px; padding-top: 5px; color: #797979; outline: none; cursor: pointer; height: 40px; border-bottom: 1px solid #797979;}
.home .menuItem:hover { background-color: #f1f1f1;}
.home h2 { color: #354158; margin-bottom: 0px;}
.arrow { font-size: 4em; position: absolute; right: 0px; top: -16px; color: #b9b9b9;}
.home .menuItem:hover .arrow { right: -4px;}
.home h2 { background: url(../img/mootools-plugins.gif) no-repeat top left; width: 500px; height: 40px; text-indent: -9999px;}
h3.example { background: url(../img/heading-example.gif) no-repeat top left; height: 30px; text-indent: -9999px;}
h3.features { background: url(../img/heading-features.gif) no-repeat top left; height: 30px; text-indent: -9999px;}
h3.compatibility { background: url(../img/heading-browser.gif) no-repeat top left; height: 30px; text-indent: -9999px;}
ul { margin-left: 15px;} dt { float: left;}
dd { margin-left: 150px; margin-bottom: 10px;}
#usage p { margin: 10px 0px 5px 0px;}

SteveH
Feb 5th, 2010, 03:27 PM
Hello Excavator

Many thanks for your helpful posts.

I have copied and pasted your revamped css script but, for some reason, it has removed the formatting from my site.

I'm attached the CSS editor on my server. Is it right that I am viewing it in UTF-8 (I never change those buttons).

I may be able to locate the original file, but just thought I would ask.

I think, incidentally, that a centered navy font of 11px would be just great - thanks for the footer!

Steve

Excavator
Feb 5th, 2010, 05:17 PM
I just looked at your site and that is not the cleaned up version I posted above!
I'm not sure how it's happening but whatever your editing with is adding a lot of HTML to your CSS.
You need to do a line by line comparison of your code and the version I posted and remove all the stuff that does not belong. contact.css has the same problem.

SteveH
Feb 5th, 2010, 05:33 PM
Hello Excavator

OK, thanks again for taking a look.

I'll contact the Web hosting service.

Cheers

Steve

Excavator
Feb 5th, 2010, 07:42 PM
Hello Excavator

OK, thanks again for taking a look.

I'll contact the Web hosting service.

Cheers

Steve

I kind of doubt your hosting is messing up the CSS. I would suspect WSYIWYG Editor first.

If you just open your main.css in notepad, remove all the HTML, save and upload to your server ... that should do the trick.


Quoted below is the CSS as it is now. I've started highlighting in red some of the HTML that does not belong (I did not color all those <BR>'s but they do all need to be removed) -
<html>
<head>
<title>Untitled</title>
</head>
<body><P>* { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;} <BR>body {<BR> background: #fff;<BR> margin:1.5em 0; <BR> color: #797979;<BR> font: 75%/1.5 Verdana, Arial;<BR>} <BR>table { border-collapse: separate; border-spacing: 0;} <BR>caption, th, td { text-align: left; font-weight:400;} <BR>blockquote:before, blockquote:after, q:before, q:after { content: "";} <BR>blockquote, q { quotes: "" "";} <BR>a img { border: none; } <BR>a { color: #607293; text-decoration: none; } <BR>a:hover { color: #354158;} <BR>#container { width: 500px; margin: auto; padding-top: 30px; padding-bottom: 50px;} <BR>#container #logo { background: url(../img/logo.gif) no-repeat top left; height: 44px; padding-bottom: 5px; border-bottom: 1px solid #797979; margin-bottom: 20px;} <BR>#container #logo h1 { text-indent: -9999px;} <BR>#footer {<BR> width:750px;<BR> margin: 40px 0 0 0;<BR> clear:both;<BR> background: #000;<BR>}<BR>.nav { float: right; margin-top: -15px;} <BR>h2{ font-size: 2.2em; margin: 0; border-bottom: 1px solid #797979; margin-bottom: 5px; color: #354158;} <BR>h3{ font-size: 1.8em; margin-top: 30px; border-bottom: 1px solid #797979; margin-bottom: 10px; color: #607293;} <BR>h4{ font-weight: bold;} <BR>.home .menuItem h3 { font-size: 1.8em; line-height: 1.0em; float: none; position: relative; display: block; border-bottom: none; margin: 0;} <BR>.home .menuItem p {margin-left: 0px; margin-bottom: 0px; position: relative; display: block; border-bottom: none; } <BR>.home .menuItem {display: block; position: relative; padding-bottom: 5px; padding-top: 5px; color: #797979; outline: none; cursor: pointer; height: 40px; border-bottom: 1px solid #797979;} <BR>.home .menuItem:hover { background-color: #f1f1f1;} <BR>.home h2 { color: #354158; margin-bottom: 0px;} <BR>.arrow { font-size: 4em; position: absolute; right: 0px; top: -16px; color: #b9b9b9;} <BR>.home .menuItem:hover .arrow { right: -4px;} <BR>.home h2 { background: url(../img/mootools-plugins.gif) no-repeat top left; width: 500px; height: 40px; text-indent: -9999px;} <BR>h3.example { background: url(../img/heading-example.gif) no-repeat top left; height: 30px; text-indent: -9999px;} <BR>h3.features { background: url(../img/heading-features.gif) no-repeat top left; height: 30px; text-indent: -9999px;} <BR>h3.compatibility { background: url(../img/heading-browser.gif) no-repeat top left; height: 30px; text-indent: -9999px;} <BR>ul { margin-left: 15px;} dt { float: left;} <BR>dd { margin-left: 150px; margin-bottom: 10px;} <BR>#usage p { margin: 10px 0px 5px 0px;}</P></body>
</html>

SteveH
Feb 7th, 2010, 01:52 PM
Hello Excavator

I've uploaded the CSS script you posted here in a new main.css file. I get an error in the editor (please see attached screenshot).

I've asked the hosting service to have a look at it.

Thanks for your help, too!

Steve

Excavator
Feb 7th, 2010, 05:08 PM
http://proofreading4students.com/index.asp looks good again and the margin-top is working on your #footer.

-There is still HTML code in your contact.css
-Still lots found by the validator that needs to be fixed.

SteveH
Feb 11th, 2010, 03:22 PM
Hello Excavator

Yes, it looks a lot better now - thanks to you.

I'm not sure what contact.css is (or where it is), but it might be part of something older and not in use. I only asked them to take a look at the mail.css file.

Thanks again for all your help.

Steve