Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Is this code correct?

    I am trying to get the two clock displays on my index page, to be in bold text.
    Is this the correct way to do this? It doesn't seem to make any difference to me.
    I am in the process of bring the site into XHTML and CSS.
    I know the <h> tags should not be used as below.

    effpeetee

    www.exitfegs.co.uk

    Code:
     Index page
    
    #clockbox0{
        position: absolute;
         font-weight: bold;
          left: 1em;       
         color: white
           }
    
    #clockbox1{
         position: absolute;
          font-weight: bold;
           right: 1em;
          color: white;     
           }
        
    #greet{color:red;
    font-family: Arial, Helvetica, sans-serif;
    }
    
    
    body {
    	background-color: #000000;
    	font-family: Arial, Helvetica, sans-serif;
    	color: white;
    	font-weight: bold;
    }
    #wrap {
    	width: 1000px;
    	margin: auto;
    }
    a img {border: none;}
    #header {position: relative;}
    #header h1 {
    	color: red;
    	text-align: center;
    }
    #content {font-size: 12px;}
    #intro {
    	color: #0FF;
    	width: 200px;
    	float: left;
    }
    
    #main {
    	float: right;
    	width: 745px;
    }
    #main p {
    	clear: both;
    	width: auto; /* reverting the width set in #content p */
    }
    #main a img {border: 2px solid white;}
    #main a:hover img {border-color: orange;}
    
    #imgcaption {
    	text-align: center;
    	color: #0FF;
    }
    .previewlink {}
    .previewimage {
    	width: 700px;
    	float: left;
    }
    Code:
      Style sheet.
    <body>
    <center>
      <div id="wrap">
        <h5><span id="clockbox0"></span><span id="clockbox1"></span></h5><br /></div>
        <h1>
        <span id="greet">
    
         <script type="text/javascript">
    
      greet();
    
    </script>

  • #2
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts
    What's the story on the single <H1>?
    Last edited by ArcticFox; 05-17-2007 at 07:53 AM.
    <div> - putting your mind in a box since 1997

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by ArcticFox View Post
    What's the story on the single <H1>?
    It was supposed to ensure that the opening greeting was in <H1> text.

    I know that it is generally messy, but it works. I am in the process of bringing the code into line.

    effpeetee

    www.exitfegs.co.uk

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Quote Originally Posted by effpeetee View Post
    I am trying to get the two clock displays on my index page, to be in bold text.
    Is this the correct way to do this? It doesn't seem to make any difference to me.
    Hmm, yeah, actually this is correct. The reason why it doesn’t make any difference is because you made the text on your entire page bold already with this one:
    Code:
    body {
    	background-color: #000000;
    	 font-family: Arial, Helvetica, sans-serif;
    	 color: white;
    	font-weight: bold;
    }
    There is a CSS option to make text bolder but this doesn’t work in many browsers or with most fonts. I’d suggest you make your regular text look normal (not bold) and only make certain portions of the text bold for accentuation. That’s the best practice.

    Oh and ArcticFox: If you look at the source code you’ll see that the h1 is being closed later on. He just didn’t post that here.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    You may be wondering why you should not use the h1, h2, h3, h4, h5, h6 purely for the purpose of making bold text. Those elements stand for content headers.

    If you were to write a table of contents for your document, then the headers would represent the sections. Semantically speaking, they should occur in order with a higher number indicating a more deeply nested subsection. Concerning presentation, if a header element’s appearance is unacceptable, you can simply restyle it using CSS; for example, if the default font size was too big, then you could simply change that using a style sheet.

    In short, if the content is not a header, then it should not appear inside of a header element.

    Here’s an example of ordered and nested headers:

    Code:
    <h1>CSS, Level 2 Revision 1 Specification</h1>
      <h2>17 Tables</h2>
        <h3>17.1 Introduction to Tables</h3>
        <h3>17.2 The CSS Table Model</h3>
          <h4>17.2.1 Anonymous Table Objects></h4>
        <h3>17.3 Columns</h3>
        <h3>17.4 Tables in the Visual Formatting Model</h3>
          <h4>17.4.1 Caption Position and Alignment</h4>
        <h3>17.5 Visual Layout of Table Contents</h3>
          <h4>17.5.1 Table Layers and Transparency</h4>
          <h4>17.5.2 Table Width Algorithms: The table-layout Property</h4>
            <h5>17.5.2.1 Fixed Table Layout</h5>
            <h5>17.5.2.2 Automatic Table Layout</h5>
          <h4>17.5.3 Table Height Algorithms</h4>
          <h4>17.5.4 Horizontal Alignment in a Column</h4>
          <h4>17.5.5 Dynamic Row and Column Effects</h4>
    Of course, the above would probably be interspersed with div elements, to separate the sections, and content, such as paragraphs, tables, and images; I ignored all of that for simplicity. Additionally, the section numbers might be considered presentational and can be generated using the counter-reset and counter-increment properties, although they are generally not used due to browser support issues.

    Anyway, to answer your question, if you need to create boldface text, then you would change the font-weight property for a given element. For example:

    Code:
    p { font-weight: bold; } /* bold all paragraphs */
    h1:first-letter { font-weight: bold; } /* bold the first letter of all level one headers */
    div:first-line { font-weight: 900; } /* strongly bold the first line of all div elements */
    If you need to bold a single word or a section not already marked up such that it can easily be selected via a style sheet, then you’ll need to add a div or span element into the source, possibly marked up with a class or ID attribute. If your intent was to place emphasis on the text, then you would use the emphasis (em) or strong emphasis (strong) elements. The latter typically has a default bold style, but the former can be restyled to produce boldface text as well.

    Edit: Your current ID‐based approach seems to be correct, although I wonder why those clocks are marked up as a header.
    Last edited by Arbitrator; 05-17-2007 at 11:41 AM.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New Coder
    Join Date
    Mar 2007
    Location
    England
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Techincally, would he not be better using a CSS id of:

    #wrap #clockbox0

    and

    #wrap #clockbox1

    as both are inside the #wrap div?

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by eskdale View Post
    Techincally, would he not be better using a CSS id of:

    #wrap #clockbox0

    and

    #wrap #clockbox1

    as both are inside the #wrap div?
    Not really. That would be less flexible since, if the name of wrap were changed or clockbox0 or clockbox1 were moved outside of wrap, the selector would stop working. IDs define one, and only one, element per document, so specifying ancestor elements is largely pointless anyway.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you for your detailed help. The bolding of the body was done after a had had no success. I just forgot to remove it.

    effpeetee
    Last edited by effpeetee; 05-17-2007 at 06:15 PM.


  •  

    Posting Permissions

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