Creating a new template in HTML

HTML & CSS
12

To be honest I’m not happy to help you produce something that is completely the wrong approach.:frowning: I gave you a working and much simplified example to work from earlier in the thread and I had hoped that would spur you into the 21st century and use the modern more reliable methods in your approach. :slight_smile:

I do see that you have made some efforts to tidy up so that is good :slight_smile: but there are so many things that are wrong or will go wrong that I fear I may actually frighten you away of overwhelm you by mentioning them all. I will point at many issues below but is not an exhaustive list and not meant to deride your current efforts as we all have to learn our way through this jungle.

The floated approach is really a non starter these days for many reasons and flexbox is more reliable and robust and I have given you an example of that in my first demo.

However let’s ignore that for now and drill down to some problems:

First as a sign of goodwill here are some quick fixes.:slight_smile:

Those three problems can be fixed with the following code:

#RNDBDR2 table {
  width: 100%;
  border-bottom: none;
}
#RNDBDR2 th {
  border-radius: 10px 10px 0 0;
}
#RNDBDR2 tr:last-child td {
  border-bottom: none;
}

In order the fixes above do this:

  1. Tables are shrink to fit so are only as wide as the content pushes them.Therefore the rows will not expand to full available width automatically unless you make the table width:100%.

  2. The background on your th is blocking out the border-radius on the parent so you need a border-radius on the th as well to round the corner and crop the background.

  3. Remove the border bottom from the table and the last row.

As an aside your th element should really be in the thead and not in the tbody to make semantic sense.

No you are not :slight_smile:

You don’t have the viewport meta tag in place so effectively you are designing for desktop only. You don’t have media queries in place for smaller devices so you are designing a one size fits all display that takes no account of the available screen space.

What will happen on mobile devices when you omit the viewport meta tag is that they will take a guess that the page is 980px wide (or thereabouts) and simply scale the page smaller and smaller until it fits into a mobile screen. That results on my old iphone with a screen shrunk so small that I can read absolutely nothing.

This is not how you design for mobile. You cannot simply scale text smaller and smaller until it fits as that means it can’t be used without pinching and zooming everything. This behaviour is a legacy behaviour that was implemented when phones first came out so that people could get something rather than nothing but no one does that these days.

You should be using the viewport meta tag and then using media queries to change the design depending on how much space it needs at smaller screens. (Take a look at my first demo that shows how content can be arranged to be viewed at smaller screens.)

Okay enough said about that lets address some problems that I have mentioned here and in other places.

Take this code for example:

  #COLUMN-A {
        height: 100%;
        margin-bottom: 30px;
        float: left;
        max-width: 38%;
    }

Ok so you want it height 100% and then a margin-bottom of 30px that makes the total area required to be 100% + 30px. That makes little sense. Luckily your height:100% is completely ignored in that context because percentage height can only be based on an unbroken chain of heights all the way back to root (the html element). Therefore height is redundant in that rule.

If indeed the element did manage to have the 100% height then your content would flow out of the bottom of the element because height is a limiting factor and if the screen was say only a few hundred pixels high then any content greater than that will overflow the element and be ignored in the flow.

Suffice to say you will seldom use height:100% unless you know why you are using it. In most cases it is not necessary. If indeed you did want an initial height you would use min-height anyway and let the element grow larger if required.

Let’s now move on the max-width:

    max-width: 38%;

That looks innocuous enough but effectively you have given the element no width to start with as floats are shrink to fit. If the content in that float was perhaps a list and not unbroken lines of text then the width of that element would be the width of its content. If you were to add a background to that column you would see that it’s only when you add content that you get any width. The column will not be wider than the max-width but it will be narrower which is no good if you decide you wanted a background color to it.

Therefore all you need to do is remove max-width and use width instead.

What is that doing? It looks like an old hack for IE6 from 2002. Why are you building in hacks from 20 years ago :slight_smile:

All of these are important concepts and exacerbated by the use of floats. Don’t get me wrong I love floats but these days seldom have need to use them unless its for text wrapping around an image.

It is centred and doing exactly what you tell it! The FIVE FIVE should obviously be a heading tag at appropriate level and the span should be a p element as already mentioned.

Looks the same size to me except it is bold.

Thats because of the scaling algorithm I talked about at the start and your lack of a viewport meta tag. The phone will adjust things as its sees fit to make it squash into its viewport. You have a width that is wider than most smart phones so the chances of it rendering properly are almost nil. Not to mention that phones will scale text when rotated (unless counteracted) and that just adds to the confusion.

None of those problems would be evident in my demo.:slight_smile: (or few of them as it was only a quick mock up).

Lastly I have to once again remind you that html is a semantic language and you must use the right html for the job in hand and use heading tags , p tags , table tags and list tags and so on when they are required. Not everything is a div and spans are used for inline fragments and not as paragraphs.

Your use of classnames is still bewildering and so hard to follow or use. What happens if you change the order then your number nine will be before your number eight and so on. It makes no sense to name things by their order or appearance.

For example you have a class of maroon. What happens if you decide later that red would be better. Are you going to do this.

.maroon{color:red}

That has just doubled the workload and the usefulness is zero. You’d have to change the html so that all maroon classes were now called red instead.

.red{color:red}

However if you had said something more appropriate like:

.highlight {color:red}

There would be no need to change the html as it could be any color you want.

However better-still would be to do this:

.focus-box{color:maroon}

Problem solved. You know what it is and you can style it how you like.

Having suitable classnames makes it so much easier to debug and to manage long term. If you have well structured html and good classnames you make life so much easier.

4 Likes