6-COLUMN STRICT Tableless: Help correcting my CSS, and then give me some design?

semicolon · July 14, 2014, 10:23pm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>6-COLUMN STRICT (TXT-Only, &rarr;No Spacers)</title>

<style type="text/css">
body {margin: 2%; font-size: 16px; line-height: 16px; font-family: LUCIDA CONSOLE, MONOSPACE;}

#COLUMN1 {float: left; width: 34%; padding: 1%;}
#COLUMN2 {float: left; width: 13%; padding: 1%;}
#COLUMN3 {float: left; width: 13%; padding: 1%;}
#COLUMN4 {float: left; width: 13%; padding: 1%;}
#COLUMN5 {float: left; width: 13%; padding: 1%;}
#COLUMN6 {float: left; width: 2%; padding: 1%;}
</style>
</head>

<body>

<div>
<div id="COLUMN1">Mountain Lion</div>
<div id="COLUMN2">Cheetah</div>
<div id="COLUMN3">Jaguar</div>
<div id="COLUMN4">Panther</div>
<div id="COLUMN5">Bobcat</div>
<div id="COLUMN6">X</div>
</div>

</body>
</html>

Okay, this is a Landscape (wide) To-Do List for my own private use. For readability the font is monospace (Lucida Console). The first column needs to occupy 1/3 of the view; the last column for a check off box; and the remaining four I’ll fiddle with as I go along.

I can’t locate my calculator, but the first thing I am concerned with in the code above is that each column be restrained by its relative width: I don’t want the content to spill over into part of the next line. I just grabbed the code from another project, but shouldn’t I register a position: absolute on either the first or the sixth column? I tested this on IE and . . . wtf it works!? My code never works the first time! Surely I didn’t do this correctly? Er . . . please advise as to Absolute?

I’d next like to give the layout a little more design:

The little graphic above has each row in an alternating color — starting with row 1 being a very light yellow (#FFFFDB) and the next row White — and then adding a greyish line to separate each row as an aid when I write on my printed copy on-the-fly. Please, that is just one option. I’d like to hear other criticism/alternatives so fire away.

Thanks guys.

s

ronpat · July 15, 2014, 1:00am

Hi, semicolon.

Give this a try and see if it floats your boat.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>6-COLUMN STRICT (TXT-Only, &rarr;No Spacers)</title>
    <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
body {
    font-size:16px;
    line-height:16px;
    font-family:'LUCIDA CONSOLE', MONOSPACE;
    padding:2%;
    margin:0;
}
body > div {
    border:1px solid #ccc;
    border-top:0;
    overflow:hidden;
}
body > div:first-child {border-top:1px solid #ccc;}
body > div:nth-child(odd) {background-color:#ffffdb;}
#COLUMN1,#COLUMN2,#COLUMN3,#COLUMN4,#COLUMN5,#COLUMN6 {
    float:left;
    padding:.5em 1%;
    border-right:1px dotted #ccc;
}
#COLUMN1 {
    width:33%;
}
#COLUMN2,#COLUMN3,#COLUMN4,#COLUMN5 {width:16%;}
#COLUMN6 {
    width:3%;
    border-right:0;
}
    </style>
</head>
<body>

<div>
    <div id="COLUMN1">Mountain Lion</div>
    <div id="COLUMN2">Cheetah cat</div>
    <div id="COLUMN3">Jaguar</div>
    <div id="COLUMN4">Panther</div>
    <div id="COLUMN5">Bobcat</div>
    <div id="COLUMN6">X</div>
</div>
<div>
    <div id="COLUMN1">Mountain Lion</div>
    <div id="COLUMN2">Cheetah</div>
    <div id="COLUMN3">Jaguar cat</div>
    <div id="COLUMN4">Panther</div>
    <div id="COLUMN5">Bobcat</div>
    <div id="COLUMN6">X</div>
</div>
<div>
    <div id="COLUMN1">Mountain Lion</div>
    <div id="COLUMN2">Cheetah</div>
    <div id="COLUMN3">Jaguar</div>
    <div id="COLUMN4">Panther cat</div>
    <div id="COLUMN5">Bobcat</div>
    <div id="COLUMN6">X</div>
</div>
<div>
    <div id="COLUMN1">Mountain Lion</div>
    <div id="COLUMN2">Cheetah</div>
    <div id="COLUMN3">Jaguar</div>
    <div id="COLUMN4">Panther</div>
    <div id="COLUMN5">Bobcat</div>
    <div id="COLUMN6">X</div>
</div>

</body>
</html>

semicolon · July 15, 2014, 5:43pm

Ronpat, you are a treasure on this forum (Paul too, of course.; actually everybody). The column lines are outstanding and invite customization: a wonderful model for me to begin with. It has that 1980’s spreadsheet/dot matrix printout look.

Well surprise surprise the yellow doesn’t render on IEx (excellent in Firefox and IceDragon). I suppose I could always just use it in Mozilla or Comodo, but there might be times I’ll want it in Explorer for one reason or another. Is there a workaround? Thanks ronpat.

s

ronpat · July 15, 2014, 6:08pm

I’ll assume that IE"x" stands for IE8. IE8 does not recognize :nth-child(odd). The “workaround” is to use older code.

Assign a class to every odd row of data and change :nth-chile(odd) to that classname. It works, but the colors do not maintain the pattern of odd-even alternation as lines of data are added or subtracted from within the list.

change this:


body > div:nth-child(odd) {background-color:#ffffdb;}

to:


body > div.alt {background-color:#ffffdb;}

and add a class to alternating rows:


<div class="alt">

semicolon · July 15, 2014, 6:31pm

So there is no way to render this correctly in IEx? (IE)

Ah well. Forward to Mozilla and Comodo. Thanks rp

s

ronpat · July 15, 2014, 9:19pm

semicolon,

I committed a rather stupid blunder in the code that I posted. I copied and pasted your data example which duplicated all of the IDs. Of course, IDs must be unique. This is the same code except the IDs are changed to classes and this time it’s valid. Sorry for the error.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>6-COLUMN STRICT (TXT-Only, &rarr;No Spacers)</title>
    <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
body {
    font-size:16px;
    line-height:16px;
    font-family:'LUCIDA CONSOLE', MONOSPACE;
    padding:2%;
    margin:0;
}
body > div {
    border:1px solid #ccc;
    border-top:0;
    overflow:hidden;
}
body > div:first-child {border-top:1px solid #ccc;}
body > div:nth-child(odd) {background-color:#ffffdb;}
.COLUMN1,.COLUMN2,.COLUMN3,.COLUMN4,.COLUMN5,.COLUMN6 {
    float:left;
    padding:.5em 1%;
    border-right:1px dotted #ccc;
}
.COLUMN1 {
    width:33%;
}
.COLUMN2,.COLUMN3,.COLUMN4,.COLUMN5 {width:16%;}
.COLUMN6 {
    width:3%;
    border-right:0;
}
    </style>
</head>
<body>

<div>
    <div class="COLUMN1">Mountain Lion</div>
    <div class="COLUMN2">Cheetah cat</div>
    <div class="COLUMN3">Jaguar</div>
    <div class="COLUMN4">Panther</div>
    <div class="COLUMN5">Bobcat</div>
    <div class="COLUMN6">X</div>
</div>
<div>
    <div class="COLUMN1">Mountain Lion</div>
    <div class="COLUMN2">Cheetah</div>
    <div class="COLUMN3">Jaguar cat</div>
    <div class="COLUMN4">Panther</div>
    <div class="COLUMN5">Bobcat</div>
    <div class="COLUMN6">X</div>
</div>
<div>
    <div class="COLUMN1">Mountain Lion</div>
    <div class="COLUMN2">Cheetah</div>
    <div class="COLUMN3">Jaguar</div>
    <div class="COLUMN4">Panther cat</div>
    <div class="COLUMN5">Bobcat</div>
    <div class="COLUMN6">X</div>
</div>
<div>
    <div class="COLUMN1">Mountain Lion</div>
    <div class="COLUMN2">Cheetah</div>
    <div class="COLUMN3">Jaguar</div>
    <div class="COLUMN4">Panther</div>
    <div class="COLUMN5">Bobcat</div>
    <div class="COLUMN6">X</div>
</div>

</body>
</html>

semicolon · July 15, 2014, 9:50pm

Hey ronpat . . . still no joy from IE (yes ver. 8). But hey! as long as I can’t create the list to begin with, I don’t have to do the projects hee hee!

jusssst kidding

PaulOB · July 16, 2014, 3:03pm

Hi,

Hey ronpat . . . still no joy from IE (yes ver. 8).

Ron answered this in his last post where he said just add alternating classes to the rows and use them to style the rows in IE8. If you had a small table you could use the adjacent selector but it’s a bit heavy handed and only works if you know the number of rows. e.g.


.row {background:yellow}
.row + .row  {background:white}
.row + .row  + .row {background:yellow}
.row + .row + .row + .row  {background:white}
.row + .row  + .row + .row + .row {background:yellow}
.row + .row + .row + .row + .row + .row + .row  {background:white}

I have to ask but was all this just an exercise because it seems you are constructing a tabular data table and the table element would be the correct approach for this?

Alternatively if the data is not tabular I would use display:table and display:table-cell instead of floats to make life easier.

Also as a ‘style guide’ don’t use all caps for your classes as that is akin to shouting and looks ugly also

ronpat · July 16, 2014, 6:45pm

semicolon; I’ll bet a clever person like you could write a couple of lines of JavaScript that would satisfy IE8 and probably every other browser on the planet. I can’t imagine that it would be complicated. I would give it a go, but I’m not JS literate. If you have no objection to using JS for IE8, we could move this thread to the JS forum and see if someone can fix you up.

BTW - I fully agree with Paul about the appropriateness of HTML table or CSS display:table properties for this layout. Either would be semantically more correct. I assumed this was an exercise, exactly as Paul expressed, but since you seem to be interested in a wider range of browsers than “personal use” implies, I am more inclined to urge the <table> or CSS display:table route than the floats.

semicolon · July 16, 2014, 11:37pm

Hello Paul, ronpat. I’m here to learn and there are reasons why I would prefer this little project to be accomplished in CSS, and not in Tables. I’ll cruise some of the other forums and see if I can get those rows repeating in IE; but meanwhile . . .

I realized last night that I actually need one more column for this um “exercise” — 7 Columns, not 6 — and I’m pleased I got as far as I did on it! It even validated! The issue I am having with it is the 7th column: I can’t get it to honor its 2% width:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>7-Column Strict (TXT-Only, &rarr;No Spacers)</title>
<style type="text/css">

*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

body {
    font-size:14px;
    line-height:14px;
    font-family:'lucida console', monospace;
    padding:2%;
    margin:0;
    text-align:left;
}

body > div {
    border:1px solid #ccc;
    border-top:0;
    overflow:hidden;
}

body > div:first-child {border-top:1px solid #ccc;}

body > div:nth-child(odd) {background-color:#ffffdb;}

.column1,.column2,.column3,.column4,.column5,.column6,.column7 {
    padding:.5em 1%;
    border-right:1px dotted #ccc;
}

.column1 {
    text-align:right;
    color: #000000;
    width:6%;
    float:left;

}

.column2 {
    width:33%;
    color: #000000;
    float:left;

}

.column3 {
    width:14%;
    float:left;
}

.column4 {
    width:14%;
    float:left;
}

.column5 {
    width:14%;
    float:left;
}

.column6 {
    width:14%;
    float:left;
}

.column7 {
    text-align:left;
    width:2%;
    float:right;
}

</style>
</head>

<body>

<div>
    <div class="column1">col1</div>
    <div class="column2">col2</div>
    <div class="column3">col3</div>
    <div class="column4">col4</div>
    <div class="column5">col5</div>
    <div class="column6">col6</div>
    <div class="column7">o</div>
</div>

<div>
    <div class="column1">col1</div>
    <div class="column2">col2</div>
    <div class="column3">col3</div>
    <div class="column4">col4</div>
    <div class="column5">col5</div>
    <div class="column6">col6</div>
    <div class="column7">o</div>
</div>

<div>
    <div class="column1">col1</div>
    <div class="column2">col2</div>
    <div class="column3">col3</div>
    <div class="column4">col4</div>
    <div class="column5">col5</div>
    <div class="column6">col6</div>
    <div class="column7">o</div>
</div>

<div>
    <div class="column1">col1</div>
    <div class="column2">col2</div>
    <div class="column3">col3</div>
    <div class="column4">col4</div>
    <div class="column5">col5</div>
    <div class="column6">col6</div>
    <div class="column7">o</div>
</div>


</body>
</html>

ronpat · July 16, 2014, 11:49pm

You’ll have to give it a 3% width and subtract 1% from a wider column.

I’m looking at the code now. Will offer a better reply in a few minutes.

semicolon · July 16, 2014, 11:58pm

It works, thank you ronpat.

.COLUMN2 {
    width:35%;
    color: #000000;
    float:left;
}
.COLUMN7 {
    text-align: left;
    width: 3%;
    float:right;
}

ronpat · July 17, 2014, 12:20am

OK, I see you have solved it.

A little supplementary info…

Since these are not table-cells, nor are they emulating table behaviors with CSS, the column widths need to total 100%.
FWIW, there is no reason why column 7 should float to the right instead of left with the others.
The columns also need more than 2% width so they will have room for the text inside their padding… at 2%, they are already full :).

Hope this is helpful or at least confirms what you have already discovered

PS: your code looks much nicer

just for fun


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>7-Column Strict (TXT-Only, &rarr;No Spacers)</title>
<style type="text/css">

*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

body {
    font-size:14px;
    line-height:14px;
    font-family:'lucida console', monospace;
    padding:2%;
    margin:0;
    text-align:left;
}

body > div {
    border:1px solid #ccc;
    border-top:0;
    overflow:hidden;
}

body > div:first-child {border-top:1px solid #ccc;}

body > div:nth-child(odd) {background-color:#ffffdb;}

[class^="column"] {
    float:left;
    border-right:1px dotted #ccc;
    color:#000;
    text-align:left;
    padding:.5em 1%;
}

.column1 {
    text-align:right;
    width:6%;
}

.column2 {
    width:35%;
}

.column3,.column4,.column5,.column6 {
    width:14%;
}

.column7 {
    width:3%;
}

</style>
</head>
<body>

<div>
    <div class="column1">col1</div>
    <div class="column2">col2</div>
    <div class="column3">col3</div>
    <div class="column4">col4</div>
    <div class="column5">col5</div>
    <div class="column6">col6</div>
    <div class="column7">7</div>
</div>

<div>
    <div class="column1">col1</div>
    <div class="column2">col2</div>
    <div class="column3">col3</div>
    <div class="column4">col4</div>
    <div class="column5">col5</div>
    <div class="column6">col6</div>
    <div class="column7">7</div>
</div>

<div>
    <div class="column1">col1</div>
    <div class="column2">col2</div>
    <div class="column3">col3</div>
    <div class="column4">col4</div>
    <div class="column5">col5</div>
    <div class="column6">col6</div>
    <div class="column7">7</div>
</div>

<div>
    <div class="column1">col1</div>
    <div class="column2">col2</div>
    <div class="column3">col3</div>
    <div class="column4">col4</div>
    <div class="column5">col5</div>
    <div class="column6">col6</div>
    <div class="column7">7</div>
</div>

</body>
</html>

semicolon · July 17, 2014, 10:08pm

Hey ronpat . . . now the reason I gave column-7 float:right is because I thought if I just coded a float:left on every column it would, uh, keep on floating. As in wrapping. It’s part of my long-standing paranoia that content will spill past the row I want it contained in, and expand the row vertically.

No? I welcome your thoughts ronpat.

As to criticism of my code style this forum isn’t the first (and will not be the last) to reproach me. I can’t work with what I know is the professional standard for cascading indents (stylesheets) because it is misery for me to try to isolate and troubleshoot problems that arise. Dreamweaver (which I own) can color-guide the code to the uniform industry standard and it is of no help to me. I do not aspire to code professionally. I’m a writer. When I find code samples on the web for the odd php or html project I need from time to time I drop that code into Textpad (my favorite text editor) and — place your seat in the upright position and have your barf bag ready —

Pull every indent to the left margin and correct spaces ()
Seek out every occurance of >< and insert a between the two
Place as close to the left margin as possible the code for which any string/group/function is performing or displaying a characteristic unique to the rest of the document (eg links, mouseover, hilight, color)
Replace any rgb(xxx,xxx,xxx) string with its hex equivalent (#xxxxxx)

Thankfully I can with 4 keystrokes reduce any page of code I need help with to lowercase. Just please remind me. I do apologize to this wonderful forum if my posting style offends anyone.

s

semicolon · July 17, 2014, 10:26pm

Now that is provocative. I jealously guard that symbol because in Textpad it signifies the start of a line.

Okay. I’ll bite. It still doesn’t render in IE, so . . . is this a trick question?

ronpat · July 17, 2014, 11:21pm

You bit

As in Notepad and RegEx, the ^ symbol indicates the start of a line/string. Here it indicates a class whose classname starts with “column”. Using this attribute selector, one can address a group of classes with similar names. It is fair to mention that one could also use two classnames, but hey, this is from CSS2 so it is a well accepted method of reducing the number of classnames in a CSS selector. Like I said… I threw this in “just for fun”.

No, it doesn’t change the IE8 issue. The most practical way to create rows with alternating colors in IE8 is to assign classnames to alternating rows for the background-color to target. I believe that a JS solution would do the trick very easily, so I would suggest that give that a try unless you prefer not to use JS.

In fact, even if you don’t go for it, I’m about to post that question in the JS forum just because I would like to have a JS solution in my ‘toolbox’.

Post #!4 next.

ronpat · July 18, 2014, 12:27am

On your page, each row is a div, a block container, which, by definition, occupies 100% of the width of the available space and the div (the parent container) for each row is assigned {overflow:hidden} so it will contain it’s floating contents properly. The rows cannot become “mixed” together.
There are occasions when floating an object in the opposite direction is useful, but not here. And it wouldn’t prevent your paranoia from being realized, either. {overflow:hidden} on the parent container would do that.

semicolon:

As to criticism of my code style this forum isn’t the first (and will not be the last) to reproach me. I can’t work with what I know is the professional standard for cascading indents (stylesheets) because it is misery for me to try to isolate and troubleshoot problems that arise. Dreamweaver (which I own) can color-guide the code to the uniform industry standard and it is of no help to me. I do not aspire to code professionally. I’m a writer. When I find code samples on the web for the odd php or html project I need from time to time I drop that code into Textpad (my favorite text editor) and — place your seat in the upright position and have your barf bag ready —

Pull every indent to the left margin and correct spaces ()

Seek out every occurance of >< and insert a between the two

Place as close to the left margin as possible the code for which any string/group/function is performing or displaying a characteristic unique to the rest of the document (eg links, mouseover, hilight, color)

Replace any rgb(xxx,xxx,xxx) string with its hex equivalent (#xxxxxx)

Thankfully I can with 4 keystrokes reduce any page of code I need help with to lowercase. Just please remind me. I do apologize to this wonderful forum if my posting style offends anyone.

s

Everyone has a preferred style for reading/writing code that works best for them. In general, indented HTML and listed CSS are easily readable by the vast majority of coders. If you need to seek help, it is helpful, dare I say considerate, to present your code in a fashion that the helper-bees can read most easily. We are donating our time. Anything you can do to make our task easier is greatly appreciated. Speaking for myself, I abhor CSS in which a group of properties for one selector are written on a single line. If it’s a complex page and the CSS spills off the right edge of my editor, I will usually not take the time to indent the code so I can read it. That’s me (an older guy).

I don’t understand about the tags. Maybe that’s a Dreamweaver thing. Inappropriate tags are, well, inappropriate. Maybe the lines in question are paragraphs that should be between tags and maybe the vertical margins of the paragraphs need to be changed to suit your design. Or maybe you are trying to keep floats from having problems. Just guessing. Whatever the issue, there is a logical/rational solution.

About rgb vs HEX equivalents. I do much the same as you only I tend to use 3 character HEX colors as much as I can. The beauty of rgb is rgba which gives the background-color transparency. If transparency is not needed, though, I use #aaa (for example).

It’s difficult to visualize page structure if HTML is all pulled to the left. Thus, I indent. Most people who use machine generated code do not give a hoot about empty space or indents in the HTML. When the code works fine, who cares what the HTML looks like. That’s life.

We’re not fussing… just recommending/suggesting. In the end, you’ll do the things that work best for you. We hope you will take the time to do a few things to accommodate whoever is helping you on those occasions when you need help.

If I missed anything, let me know.

Cheers

semicolon · July 19, 2014, 7:09pm

All hail overflow:hidden

You know it’s funny but I just realized something about my coding style: The styling located in the header is the one time I always block-left indent the CSS definitions. More often than not the code is a short phrase of some sort (eg. font-size:14px) and lines up under its parent to be instantly intelligible even to someone as eccentric as myself. (:

Shh! Don’t let Paul read that!

Indeed. Someone must surely have coded an IE hack for alternating background colors-per-row? This “ruled paper” effect is such a universally-recognized aid to scrutinize long lines of text-per-row (such as spreadsheet data) there must be an IE-friendly code somewhere. Hmmm . . .

semicolon · July 20, 2014, 2:41am

Hey, for anyone following this thread I stumbled on an excellent W3schools link for playing around with alternating-row colors:

http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-28b.html

Mittineague · July 20, 2014, 3:33am

I’m curious why you posted an image of w3schools.com with a link to w3.org
They are completely different and not connected.