Css style

Create a new template in HTML – HTML & CSS – SitePoint Forums

To be honest, I’m not happy to help you produce something that’s completely the wrong approach. I gave you a working and very simplified example to work with earlier in the thread and had hoped that it would inspire you in the 21st century and use the more reliable modern methods in your approach. :slight_smile:

I see that you made efforts to tidy up so that’s good :slight_smile: but there are so many things wrong or wrong that I’m afraid I’ll scare you or overwhelm you by mentioning them all. I will highlight many issues below, but this is not an exhaustive list and I am not aiming to ridicule your current efforts, as we all need to learn our way through this jungle.

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

However, let’s ignore that for now and dig deeper into some issues:

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

These three problems can be solved 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 scaled down to fit and therefore only as wide as the content pushes them.

  2. The background of your th blocks the border ray on the parent, so you need a border ray on the th as well as to round the corner and crop the background.

  3. Delete the bottom border of the table and the last row.

As an aside your th The element must really be in the title and not in the body to make semantic sense.

No you are not :slight_smile:

You don’t have the viewport meta tag in place so you’re only designing for the desktop. You don’t have media queries in place for smaller devices, so you’re designing a one-size-fits-all display that doesn’t take into account available screen real estate.

What will happen on mobile devices when you omit the viewport meta tag is that they will assume the page is 980px wide (or thereabouts) and simply resize the page larger and larger. smaller until it fits in a mobile screen. This translates to my old iphone with a screen so shrunken I can’t read anything at all.

That’s not how you design for mobile. You can’t just scale the text smaller and smaller until it fits, because that means it can’t be used without pinching and zooming everything. This behavior is a legacy behavior that was implemented when phones first came out so people could get something rather than nothing, but nobody does that these days.

You should use the viewport meta tag and then use media queries to modify the design to fit the space it needs on smaller screens. (Take a look at my first demo which shows how content can be organized for viewing on smaller screens.)

Alright, enough said about this helps solve some of the issues I’ve mentioned here and elsewhere.

Take this code for example:

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

Ok, so you want a height of 100% and then a bottom margin of 30px which makes the total area required 100% + 30px. It makes little sense. Fortunately, your height:100% is completely ignored in this context, because the percentage height can only be based on an unbroken chain of heights up to the root (the html element). Therefore, height is redundant in this rule.

If indeed the element managed to be the height of 100%, your content would come out of the bottom of the element because height is a limiting factor and if the screen was only a few hundred pixels high, any content higher than this would overflow the element and be ignored in the stream.

Suffice to say that you will rarely use height:100% unless you know why you are using it. In most cases, this is not necessary. If indeed you wanted an initial height, you would still use min-height and let the element grow as needed.

Now let’s move on to the max-width:

    max-width: 38%;

It seems pretty innocuous, but in fact you didn’t give the element any width to begin with because the floats are shrinking to fit. If the content of this float was perhaps a list and not unbroken lines of text, the width of this element would be the width of its content. If you were to add a background to this column, you’d see that it’s only when you add content that you get a width. The column won’t be wider than the maximum width, but it will be narrower, which isn’t good if you decide you want a background color.

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

What does it do ? This looks like an old hack for IE6 from 2002. Why are you building hacks from 20 years ago :slight_smile:

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

It is centered and does exactly what you tell it to! The FIVE FIVE must obviously be a title tag at the appropriate level and the scope must be an element as already mentioned.

It looks the same size to me except it’s fat.

This is because of the scaling algorithm I mentioned at the beginning and the lack of a viewport meta tag. The phone will adjust things as it sees fit to make it crash into its viewport. You have a wider width than most smart phones, so the chances of it displaying correctly are almost nil. Not to mention that phones will scale text when rotating (unless countered) and that only adds to the confusion.

None of these issues would be evident in my demo.:slight_smile: (or few of them because it was just a quick mockup).

Finally, I must remind you once again that HTML is a semantic language and you should use the right HTML for the job at hand and use header tags, p tags, table tags and list tags, etc., when needed. Not everything is a div and spans are used for inline fragments not as paragraphs.

Your use of class names is always confusing and so hard to follow or use. What happens if you change the order, 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 brown class. What if you decide later that red would be better. Are you going to do this.

.maroon{color:red}

It just doubled the workload and the utility is zero. You should change the html so that all brown classes are 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, the best would be to do this:

.focus-box{color:maroon}

Problem solved. You know what it is and you can style it however you want.

Having proper class names makes debugging and long-term management much easier. If you have well-structured HTML and good class names, you make your life easier.