Jump to content

Bottom Bar Grows Up To Cover Table


OtagoHarbour

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.

Link to comment
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.

Link to comment
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.

Link to comment
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.
Link to comment
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"

Link to comment
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.
Link to comment
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.

Link to comment
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.
Link to comment
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.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...