Simple learning excercise - 2 blocks of text with css (no table)

Oh dear me - how could I not detect that typo :frowning: Thanks Ron. Now I have manually checked the nested tables of index.php and i have fixed a number of errors . My validation tool is different from yours as it does not list all that number of errors. I wonder what is the count now!


.intro {
    overflow:hidden;    /* because contents are floated */
    padding-top:20px;    /* space between intro boxes and "Malta Nature Tours" text */
    padding-left:40px;   /* space to the left of the intro boxes */
	 padding-right:20px;    
}

.introtxt_l,
.introtxt_r {
    background-color:#ddd;
    float:left;
    margin-bottom:25px;
    width:48.5%;
}

.introtxt_r {
    margin-left:1.5%;    /* The total width of the contents of div.intro must not exceed 100%;  {width:49%} + {width:49%} + {margin-left:2%} = 100%. */
}

.introtxt_l p,
.introtxt_r p {
    color:#000;
    font-size:1em;
    line-height:1.5;
    margin:.5em 1em;
}

.introtxt_l p span,
.introtxt_r p span {
    font-size:1.5em;
    text-transform:uppercase;
}


.maintxt  {
    background-color:#bedcce;
    float:left;
	 margin: 0 6% 15px 4%; /* top right bottom left*/
    width:90%;
	 padding: 15px;
	 border:double;
	 font-size:12pt;
}

.maintxt p {
	font-size:10pt;
	border:0;
	margin:0;
	width:97%;
}

Hope this kind of mini tutorial helps someone else.
The example discussed here is found on this webpage

Hi, Steve,

In the interest of learning exciting new things, I would like to ask you to take another look at the code for .maintxt.

You show this:


.maintxt  {
    background-color:#bedcce;
    float:left;
    margin: 0 6% 15px 4%; /* top right bottom left */
    width:90%;
    padding: 15px;
    border:double;
    font-size:12pt;
}

I recommend this:


.maintxt  {
    width:90%;
    border:3px double #000;
    background-color:#bedcce;
    font-size:12pt;
    padding: 15px;
    margin: 0 6% 15px 4%; /* top right bottom left */
}

The most important thing to notice about my recommedation is that the box is NOT floated. Floating .maintxt serves no purpose. In fact, it disrupts the flow of the page and requires another element.

I urge you to copy and paste my code over yours. If the space between .maintxt and the List of Provided Tours and Services becomes too large (which it probaby will), then you should delete lines 171 through 177 entirely:


<center>
<h3>
</b></h3>
</center>

</p>
       <p>&nbsp;</p></td>

The preceeding HTML is disfunctional and should be deleted.

We can talk about restoring the space between .maintxt and the List of Provided… using proper code techniques.

The number of validation errors on this page is down from 135 to 103. Way to go!

What browser(s) do you use?

I have the trio (FF,IE,GC), but mainly work on FireFox.

The useless html cannot be found, so I must have deleted it during my last correction

The space between maintext and table of provided tours is fine.

105 errors?! What type of errors are these?

OK, good. We’re on a roll! The error count is now down to 95 !!!

Moving right along… let’s take a look at the top of the page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd"> <head>

<title> Malta Nature Tours - Quality Holiday excursion and walking guided tours in Maltese Nature [Home Page] </title>
		 <head>

Notice that you have TWO open head tags <head>, but NO open <html> tag.
Notice also that the second <head> tag is BELOW the <title> tag.

Let’s fix those errors by doing this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Malta Nature Tours - Quality Holiday excursion and walking guided tours in Maltese Nature [Home Page]</title>

More to follow…

Wanna clear another 20 errors on the index.php page quickly?

Go to lines 166 through 185.

The <param> tag does not require a close </param> tag.

Delete the </param> tag from the ends of those lines and you will clear 20 validation errors.

Quick and easy :slight_smile:

More to follow…

I’ve done these. The <param> thing was again a copy and paste applet from the net, while the <head> was a careless mistake when I have converted the html to php to have some simple common variables of code or text blocks shared by many webpages, so as when the text string is editted, all pages are automatically updated.

I wonder if we could validate-improve another much much more important page related to my Msc!

OK. The error count should be down to less than 75, instead it increased from 95 to 113.

What other much more important page would you like to focus on instead?

I have placed the closing tag back. I have a presentation for my course, and will catch the train next Wed. Thanks for all the help Ron. I will post the new page in a new forum next Wed. This page is going to be seen by a hundred of ppl in my presentation, and better not to mess with it for the moment.

Hi Ronpat, I am back to the coding desk.

Here is the link to the page I mentioned before (on a new forum thread)

Hope you are available to help