...

View Full Version : Is this code correct?



effpeetee
05-17-2007, 08:43 AM
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


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;
}




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>

ArcticFox
05-17-2007, 08:50 AM
What's the story on the single <H1>?

effpeetee
05-17-2007, 09:03 AM
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

VIPStephan
05-17-2007, 12:31 PM
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:


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.

Arbitrator
05-17-2007, 12:38 PM
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:


<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:


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.

Your current ID‐based approach seems to be correct, although I wonder why those clocks are marked up as a header.

eskdale
05-17-2007, 02:02 PM
Techincally, would he not be better using a CSS id of:

#wrap #clockbox0

and

#wrap #clockbox1

as both are inside the #wrap div?

Arbitrator
05-17-2007, 03:05 PM
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.

effpeetee
05-17-2007, 04:45 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum