Overiding CSS

**Barnum** · Dec 27, 2008 10:41

I have the following on a page

<style type="text/css">

h1, h3 {font-family: "Times New Roman"; font-size: 46px; color: red;}

a {

float: left;
padding: 20px;
margin: 20px;
text-align: center;
}

img {
border: 2px solid white;
float: center;
padding: 20px;

}

body {
background-color: #2E0854 ;
}

</style>

How do I center text <a href="MyFrance.html"><font color="white">Home</a> at bottom of page without overiding style settings? I have tried the <center> code, the <a align="center"> and nothing seems to work. What am I missing?

**fredda** · Dec 27, 2008 10:46

Add a div or a p tag around your link and give it an id. Then add this to your CSS code:

Code:

#footer { text-align: center; }

I would also get rid of the font tag and use CSS instead.

**Barnum** · Dec 27, 2008 11:19

Tried that...still won't center?

**SoulScratch** · Dec 27, 2008 11:26

Originally Posted by Barnum

Tried that...still won't center?

I'm sorry but we're not psychics who can read your mind to find out how you marked up your page - could you please provide some more code. I hope the page in question is in standards mode, and that you even have an element with an id of footer.

**fredda** · Dec 27, 2008 11:27

It should

. Post your HTML and CSS code please.

**Dan Schulz** · Dec 27, 2008 11:32

There's also no such thing as float: center; so you'll have to remove that. If you want to center the image, set its alignment to text-align: center; or display: block; margin: 0 auto; and give it a width in your stylesheet.

**Barnum** · Dec 27, 2008 11:39

Okay, here is entire page...

HTML Code:

<html>
<head>
<title>Table Experiement for Fays website</title>
	
<style type="text/css">

h1, h3 {font-family: "Times New Roman"; font-size: 46px; color: red;}

a { 
  
  float: left;
  padding: 20px;
  margin: 20px;
  text-align: center;
  }

img {
  border: 4px solid white;
  float: center;
  padding: 20px;
  margin: 10px;
  
   
  }

body {
	background-color:   #2E0854 ;
	} 
	
p { text-align: center;
}
	
</style>	




</head>
<hr color="#BC8F8F">
<body leftmargin="20px" topmargin="20px" marginwidth="20px" marginheight="20px"> 

<h1 align="center"><font color="white">Paris</h1>
<h4 align="center"><font color="red">Click image to view full size</a>
<hr color="#BC8F8F">



<body bgcolor="#2E0854">


<a href="thumbs/IMG_0921thumb.jpg"><img src="images/IMG_0921.jpg"" width="225" height="165" border="0"><center><font color="white">Book Store</center></a>
<a href="thumbs/IMG_0922thumb.jpg"><img src="images/IMG_0922.jpg" width="225" height="165" border="0"><center><font color="white">Big Pannini</center></a>
<a href="thumbs/IMG_0959thumb.jpg"><img src="images/IMG_0959.jpg" width="225" height="165" border="0"><center><font color="white">Luxembourg Gardens</center></a>
<a href="thumbs/IMG_2388thumb.jpg"><img src="images/IMG_2388.jpg" width="225" height="165" border="0"><center><font color="white">Luxembourg Gardens</center></a>
<a href="thumbs/IMG_2966_1thumb.jpg"><img src="images/IMG_2966_1.jpg" width="225" height="165" border="0"><center><font color="white">Paris Delicious</center></a>

<a href="thumbs/IMG_2389thumb.jpg"><img src="images/IMG_2389.jpg" width="225" height="165" border="0"><center><font color="white">Luxembourg Gardens</center></a>
<a href="thumbs/IMG_2370thumb.jpg"><img src="images/IMG_2370.jpg" width="225" height="165" border="0"><center><font color="white">Street Scene</center></a>
<a href="thumbs/IMG_1009thumb.jpg"><img src="images/IMG_1009.jpg" width="225" height="165" border="0"><center><font color="white">Luxembourg Gardens</center></a>
<a href="thumbs/IMG_2401thumb.jpg"><img src="images/IMG_2401.jpg" width="225" height="165" border="0"><center><font color="white">Luxembourg Gardens</center></a>
<a href="thumbs/IMG_2395thumb.jpg"><img src="images/IMG_2395.jpg" width="225" height="165" border="0"><center><font color="white">Luxembourg Gardens</center></a>
<a href="thumbs/IMG_2831thumb.jpg"><img src="images/IMG_2831.jpg" width="225" height="165" border="0"><center><font color="white">Pere Lachaise Cemtery</center></a>
<a href="thumbs/IMG_2929thumb.jpg"><img src="images/IMG_2929.jpg" width="225" height="165" border="0"><center><font color="white">Paris Pizza</center></a>
<a href="thumbs/IMG_3090thumb.jpg"><img src="images/IMG_3090.jpg" width="225" height="165" border="0"><center><font color="white">Tempting</center></a>
<a href="thumbs/IMG_2934_2thumb.jpg"><img src="images/IMG_2934_2.jpg" width="225" height="165" border="0"><center><font color="white">Paris Gelato</center></a>
<a href="thumbs/IMG_0962thumb.jpg"><img src="images/IMG_0962.jpg" width="225" height="165" border="0"><center><font color="white">Luxembourg Gardens</center></a>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<a href="MyFrance.html"><font color='white'>Home</a>




</body>
</html>

Everything works but the final href

**Barnum** · Dec 27, 2008 11:40

Will add that I tried the <p> tag as well as <div>..

**SoulScratch** · Dec 27, 2008 12:04

<div id=footer>text</div> and use the snippet from above.

**AutisticCuckoo** · Dec 27, 2008 12:20

There are so many things wrong with that markup that I don't even know where to begin.

You have two <body> tags. An HTML document can only contain one.
You have a <hr> before the first <body> tag.
The deprecated attributes in your first <body> shouldn't have the 'px' units in them.
You're using a number of <font> tags, but you've left out the corresponding </font> tags.
You have an h1 immediately followed by an h4, without any h2 or h3 elements in between.
You're missing the required alt attribute from all image tags.
You've specified that text in paragraphs should be centred, but you don't have any paragraphs.
The center element type is block-level and can't occur inside an inline-level anchor tag.

And, of course, you seem to be using HTML solely to control the presentation, which is not the purpose of HTML. HTML should mark up the structure and semantics of the document, and you should use CSS to control all presentation.

A good rule of thumb is to always validate your markup with the HTML validator before you start trouble-shooting the presentation.

**AutisticCuckoo** · Dec 27, 2008 12:41

Here's a somewhat more semantic version of that page, with the presentation separated from the content.

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Table Experiement for Fays website</title>
    <style type="text/css">
      h1 {font:46px "Times New Roman",serif; color:#fff; text-align:center}
      a:link, a:visited {color:#fff}
      a img {border:none}
      img {border:4px solid white; padding:20px; margin:10px}
      body {margin:20px; background-color:#2e0854; border-top:2px solid #bc8f8f} 
      p {text-align:center}
      ul {margin:0 0 12em; padding:0}
      li {float:left; margin:20px; padding:20px; list-style-type:none; text-align:center}
      li img {display:block}
      #instructions {color:#f00; border-bottom:2px solid #bc8f8f}
      #home {clear:left}
    </style>	
  </head>
  <body> 
    <h1>Paris</h1>
    <p id="instructions">Click image to view full size</p>
    <ul>
      <li><a href="thumbs/IMG_0921thumb.jpg"><img src="images/IMG_0921.jpg" width="225" height="165" alt="...">Book Store</a></li>
      <li><a href="thumbs/IMG_0922thumb.jpg"><img src="images/IMG_0922.jpg" width="225" height="165" alt="...">Big Pannini</a></li>
      <li><a href="thumbs/IMG_0959thumb.jpg"><img src="images/IMG_0959.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2388thumb.jpg"><img src="images/IMG_2388.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2966_1thumb.jpg"><img src="images/IMG_2966_1.jpg" width="225" height="165" alt="...">Paris Delicious</a></li>
      <li><a href="thumbs/IMG_2389thumb.jpg"><img src="images/IMG_2389.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2370thumb.jpg"><img src="images/IMG_2370.jpg" width="225" height="165" alt="...">Street Scene</a></li>
      <li><a href="thumbs/IMG_1009thumb.jpg"><img src="images/IMG_1009.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2401thumb.jpg"><img src="images/IMG_2401.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2395thumb.jpg"><img src="images/IMG_2395.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2831thumb.jpg"><img src="images/IMG_2831.jpg" width="225" height="165" alt="...">Pere Lachaise Cemetery</a></li>
      <li><a href="thumbs/IMG_2929thumb.jpg"><img src="images/IMG_2929.jpg" width="225" height="165" alt="...">Paris Pizza</a></li>
      <li><a href="thumbs/IMG_3090thumb.jpg"><img src="images/IMG_3090.jpg" width="225" height="165" alt="...">Tempting</a></li>
      <li><a href="thumbs/IMG_2934_2thumb.jpg"><img src="images/IMG_2934_2.jpg" width="225" height="165" alt="...">Paris Gelato</a></li>
      <li><a href="thumbs/IMG_0962thumb.jpg"><img src="images/IMG_0962.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
    </ul>
    <p id="home"><a href="MyFrance.html">Home</a></p>
  </body>
</html>

**Blake Tallos** · Dec 27, 2008 13:12

Im coding this up for you Barnum if you could wait a couple minutes i'll have it done for you semantically correct.

**Blake Tallos** · Dec 27, 2008 13:13

Originally Posted by AutisticCuckoo

Here's a somewhat more semantic version of that page, with the presentation separated from the content.

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Table Experiement for Fays website</title>
    <style type="text/css">
      h1 {font:46px "Times New Roman",serif; color:#fff; text-align:center}
      a:link, a:visited {color:#fff}
      a img {border:none}
      img {border:4px solid white; padding:20px; margin:10px}
      body {margin:20px; background-color:#2e0854; border-top:2px solid #bc8f8f} 
      p {text-align:center}
      ul {margin:0 0 12em; padding:0}
      li {float:left; margin:20px; padding:20px; list-style-type:none; text-align:center}
      li img {display:block}
      #instructions {color:#f00; border-bottom:2px solid #bc8f8f}
      #home {clear:left}
    </style>    
  </head>
  <body> 
    <h1>Paris</h1>
    <p id="instructions">Click image to view full size</p>
    <ul>
      <li><a href="thumbs/IMG_0921thumb.jpg"><img src="images/IMG_0921.jpg" width="225" height="165" alt="...">Book Store</a></li>
      <li><a href="thumbs/IMG_0922thumb.jpg"><img src="images/IMG_0922.jpg" width="225" height="165" alt="...">Big Pannini</a></li>
      <li><a href="thumbs/IMG_0959thumb.jpg"><img src="images/IMG_0959.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2388thumb.jpg"><img src="images/IMG_2388.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2966_1thumb.jpg"><img src="images/IMG_2966_1.jpg" width="225" height="165" alt="...">Paris Delicious</a></li>
      <li><a href="thumbs/IMG_2389thumb.jpg"><img src="images/IMG_2389.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2370thumb.jpg"><img src="images/IMG_2370.jpg" width="225" height="165" alt="...">Street Scene</a></li>
      <li><a href="thumbs/IMG_1009thumb.jpg"><img src="images/IMG_1009.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2401thumb.jpg"><img src="images/IMG_2401.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2395thumb.jpg"><img src="images/IMG_2395.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
      <li><a href="thumbs/IMG_2831thumb.jpg"><img src="images/IMG_2831.jpg" width="225" height="165" alt="...">Pere Lachaise Cemetery</a></li>
      <li><a href="thumbs/IMG_2929thumb.jpg"><img src="images/IMG_2929.jpg" width="225" height="165" alt="...">Paris Pizza</a></li>
      <li><a href="thumbs/IMG_3090thumb.jpg"><img src="images/IMG_3090.jpg" width="225" height="165" alt="...">Tempting</a></li>
      <li><a href="thumbs/IMG_2934_2thumb.jpg"><img src="images/IMG_2934_2.jpg" width="225" height="165" alt="...">Paris Gelato</a></li>
      <li><a href="thumbs/IMG_0962thumb.jpg"><img src="images/IMG_0962.jpg" width="225" height="165" alt="...">Luxembourg Gardens</a></li>
    </ul>
    <p id="home"><a href="MyFrance.html">Home</a></p>
  </body>
</html>

You had to beat me didnt you tommy?

I'll still post my version.

**Blake Tallos** · Dec 27, 2008 13:21

Barnum, whoever your learning from if it's off the internet or a book. The code they are teaching you is "Garbage".
I suggest you'd throw it away. Let's start developing god habits before it's to late and we got a bigger mess on our hands.
Start reading some of the tutorials. How a HTML page is structured. And then when your ready for that start digging into CSS to
learn how to style your content.

http://www.w3.org/Style/Examples/011/firstcss

http://reference.sitepoint.com/html

http://reference.sitepoint.com/css

**JsD2K** · Dec 27, 2008 15:44

The first step you should always take is to validate your html then validate your css

**Barnum** · Dec 27, 2008 18:04

Okay guys thank you all again for your help, critique, etc... I really do appreciate it. I am not in your league, and often want to post questions on this forum, but don't simply because I am so new to all this. Guess this was one I should have kept to myself.

My background in all this? I am 67 years old, and I took a four week class in html at the local community college (two days a week, four hours a day). It was very basic, but wet my appetite to learn more. There were no additional "next step" classes so I am pretty much on my own (along with a couple of books).

I realize CSS is the way to go, and I am trying to learn more, but right now I have other things going on in my life that I cannot singularly dedicate myself to this being an expert in website design. I did manage to put up a website for my wife's photos www.TheInquisitiveEye.com), and while I know it's not real great, it was an accomplishment for me (bad code or not).

At this point I want to work on a site that will simply encompass a lot of photos from our trips to France, and I have no deadlines, nor pre-determined plans. As a result I can take your recommendations and work on them. Likewise, if you know of another forum where folks like me could learn more, without being a bother to you pro's, please let me know.

**Barnum** · Dec 27, 2008 18:06

One more thing please....how do I print out the answers you guys provide? I can't seem to get the whole text printed?

**JsD2K** · Dec 27, 2008 19:40

and often want to post questions on this forum, but don't simply because I am so new to all this. Guess this was one I should have kept to myself.

You should never be afraid to ask questions. Also just go to

File > Print on your browser

**Barnum** · Dec 27, 2008 20:06

Thanks, but when I try to print the information from within the guidelines I only get a portion of the code, not the whole thing?

**JsD2K** · Dec 27, 2008 20:36

Try copying and pasting into a word document?

**AutisticCuckoo** · Dec 28, 2008 08:26

Originally Posted by BlakeAnthony

You had to beat me didnt you tommy?

Well, since I posted my code more than 20 minutes before you announced that you were working on it, I didn't even know we were in a competition.

Originally Posted by Barnum

Okay guys thank you all again for your help, critique, etc... I really do appreciate it. I am not in your league, and often want to post questions on this forum, but don't simply because I am so new to all this. Guess this was one I should have kept to myself.

Absolutely not! We all start from the beginning and then we learn and learn and learn. No one is born an expert (except, possibly, Paul O'B).

Don't hesitate to ask! There are no stupid questions, only stupid answers. It helps if you have thick skin, since many of us tend to refer to spades as spades, but you should never take anything on a forum personally. I hope I didn't offend you; I certainly didn't intend to, and if I did I apologise.

**Barnum** · Dec 29, 2008 19:52

Wanted to try and make changes to your corrected code, but how do I open them up in an editor? Basic things like borders around images....

Thank you so much for your help. The revamped code is helping me become more aware of what is needed to get better.

**AutisticCuckoo** · Dec 30, 2008 04:35

That code should be editable in any text editor; it's just plain ASCII text.

In order to control presentational aspects like borders, you really should get started with CSS. It may look a bit daunting, but most of it is actually quite logical. Using HTML for such things is like banging on nails with a screwdriver: you'll probably get there in the end, but it's far better to use a hammer. The right tool for the right job.

**JsD2K** · Dec 30, 2008 09:56

Don't buy dreamweaver. It is a complete waste of money for someone in your situation. I recommend PSPad or Notepad++. If you dont want them just then regular notepad is installed on your computer you can use that.

**RyanReese** · Dec 30, 2008 10:33

I don't think anyone has that kind of money anymore to waste money on a text editor when NotePad can do the same job just slower.

User Tag List

Thread: Overiding CSS

Thread Tools

Display

Overiding CSS

Bookmarks

Bookmarks

Posting Permissions