SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 41

Thread: Overiding CSS

  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Overiding CSS

    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?

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Tried that...still won't center?

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barnum View Post
    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.
    Cross browser css bugs

    Dan Schulz you will be missed

  5. #5
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should . Post your HTML and CSS code please.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Will add that I tried the <p> tag as well as <div>..

  9. #9
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div id=footer>text</div> and use the snippet from above.
    Cross browser css bugs

    Dan Schulz you will be missed

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Birnam wood is come to Dunsinane

  12. #12
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  13. #13
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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 - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  14. #14
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  15. #15
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first step you should always take is to validate your html then validate your css


  16. #16
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    One more thing please....how do I print out the answers you guys provide? I can't seem to get the whole text printed?

  18. #18
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  19. #19
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?

  20. #20
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try copying and pasting into a word document?

  21. #21
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    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.

    Quote Originally Posted by Barnum View Post
    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.
    Birnam wood is come to Dunsinane

  22. #22
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  23. #23
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  24. #24
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  25. #25
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •