Jump to content
Sign in to follow this  
OtagoHarbour

Bottom Bar Grows Up To Cover Table

Recommended Posts

In the .css file, I specify the following class for the bottom bar.

.bottomBar{	a:hover {color:#FFFF00;}  /* mouse over link */	background-color:#300;	color:#FFFFCC;	font-family:verdana,sans-serif;	font-size:65;	height:auto;	position: relative ;	top:0px;	text-align:left;	width:100%;	bottom:5px;}

The call to the bottom bar in the html file is as follows.

<div class="bottomBar maroon"><span style="font-family: times, serif; color:white"><font face="times, serif" size="3" style="color:orange"><a href="copyright.html" style="color:white">Copyright © Website 2011. All rights reserved.</a>|<a href="privacy.html" style="color:white">Privacy Policy</a>|<a href="tos.html" style="color:white">Terms of Service</a>|<a href="disclaimer.html" style="color:white">Disclaimer</a>|<a href="mailto:Me@yahoo.com" style="color:white">Contact</a></font></span></div> 

For some reason the bottom bar in the html file expands upwards to cover the table just above it. The bottom bar text does not grow with it. How do I change the definition so that the bottom bar is no wider than the text. Many thanks in advance for any help,Peter.

Share this post


Link to post
Share on other sites

A block element is always as wide as the element that contains it (minus margins). That means you don't need the width: 100% declaration. If you want it to only be as wide as the content then display it as "inline-block" in the CSS, set its text-align to "left" and the text-align of its parent to "center." Are you sure you need to give it a relative position? Since you're moving it up five pixels from the bottom, it will cover the element above it by five pixels. You could remove that <font> tag and the <span> tag and put the CSS on the .bottomBar selector.

Share this post


Link to post
Share on other sites

I got rid of

position:relative;

and that removed the solid block of maroon that was covering the table. But I still have unwanted maroon, from the bottom-bar, where the table and table elements boundaries would be whether I set

border="1"

or

border="0"

Thanks,Peter.

Edited by OtagoHarbour

Share this post


Link to post
Share on other sites

Hmm, you seem to have CSS syntax errors as well.Test your CSS code in the validator: http://jigsaw.w3.org/css-validator/#validate_by_input Check the CSS tutorial to make sure you understand CSS syntax. You can't have a selector (a:hover) inside another selector (This is wrong: .bottomBar { a:hover { } } ) With the code you've shown, there's nothing that could be making the bottom bar cover the table unless the "position" and "bottom" properties are still there.

Share this post


Link to post
Share on other sites
Hmm, you seem to have CSS syntax errors as well. Test your CSS code in the validator: http://jigsaw.w3.org...lidate_by_input Check the CSS tutorial to make sure you understand CSS syntax. You can't have a selector (a:hover) inside another selector (This is wrong: .bottomBar { a:hover { } } ) With the code you've shown, there's nothing that could be making the bottom bar cover the table unless the "position" and "bottom" properties are still there.
I put it through Validator and got "Congratulations! No Error Found." But I removed the part that you mentioned and also made sure that bottom and position were removed. I no longer have the bottom bar totally covering the table but its maroon color is still present where the table, and table cell, outlines should be whether I have table outlines or not. The outline coloring does not cover the whole table - just the part that the bottom bar was totally covering it before. Thanks,Peter.

Share this post


Link to post
Share on other sites

What does your current code look like after the changes you made?

Share this post


Link to post
Share on other sites

How about the table you say is being covered? What are the HTML and CSS associated with it? Maybe you can link us to a page with an example of the problem. Also, as I mentioned earlier, you can make the bar be just as wide as the text by setting the "display" property to "inline-block"

Share this post


Link to post
Share on other sites
How about the table you say is being covered? What are the HTML and CSS associated with it? Maybe you can link us to a page with an example of the problem. Also, as I mentioned earlier, you can make the bar be just as wide as the text by setting the "display" property to "inline-block"
The page is at http://www.clusterprism.com/. None of the links work yet as I'm setting up a DMZ. There should be no maroon around the table that contains the image and links. Thanks,Peter. Edited by OtagoHarbour

Share this post


Link to post
Share on other sites

It seems you have a block of PHP that's not being executed. Your file needs a .php extension to run. The unparsed PHP code is causing part of the page to display incorrectly. Actually, there's a lot more wrong in your code that will ruin the page if it's not fixed. Look through the list of errors from the validator and fix them. Your page should work better then. If it doesn't then I'll take another look. At the moment, there's way too much that could be interfering to try to identify the real root of the problem.

Share this post


Link to post
Share on other sites
It seems you have a block of PHP that's not being executed. Your file needs a .php extension to run. The unparsed PHP code is causing part of the page to display incorrectly. Actually, there's a lot more wrong in your code that will ruin the page if it's not fixed. Look through the list of errors from the validator and fix them. Your page should work better then. If it doesn't then I'll take another look. At the moment, there's way too much that could be interfering to try to identify the real root of the problem.
Thank you so much for your help. I fixed the validator problems and also added two tables, gradually adding what I needed to them and now the web page looks exactly as I would like it to look. Thanks again. The issue that I need to deal with now is that my web server is running Apache http://httpd.apache.....3/windows.html but it seems that I would need WAMP (for Windows) in order to use PHP. I have used WampServer http://www.wampserver.com/en/ in the past. My question is how do I get my web server to use WampServer instead of regular Apache? It is currently looking for my index.html file in the Apache directory and deploying it over the web using Apache. I was wondering if you could tell me how I could get it to use WampServer instead. Thanks again,Peter.

Share this post


Link to post
Share on other sites
Thank you so much for your help. I fixed the validator problems and also added two tables, gradually adding what I needed to them and now the web page looks exactly as I would like it to look. Thanks again. The issue that I need to deal with now is that my web server is running Apache http://httpd.apache.....3/windows.html but it seems that I would need WAMP (for Windows) in order to use PHP. I have used WampServer http://www.wampserver.com/en/ in the past. My question is how do I get my web server to use WampServer instead of regular Apache? It is currently looking for my index.html file in the Apache directory and deploying it over the web using Apache. I was wondering if you could tell me how I could get it to use WampServer instead. Thanks again,Peter.
No worries. I sorted this out. I just needed to uninstall the old Apache.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...