Okay I give up! (Vertical Alignment w/Strict 4)

HTML & CSS
21

Paul, I’m trying to select your code and either can’t select all of it, or end up with the entire thread (and the top 10 or so lines of your code). I’m on Firefox 32 and have Chris Pederick’s powerful Web Developer Firefox Addon. If you or someone else can point me in the direction of which of the tools I would use to view the code box on its own tab I can proceed to demo it. It would be something like a frame, or a (SNIP)

Well I just learned something that might be helpful to others who hate that code box as muchy as I do: Disable Styles in your browser and the entire thread rolls out for you in plain text. In Firefox it’s VIEW \ PAGE STYLE \ NO STYLE. Grab the code you need, then restore the the styles.
######Alright, I suppose everyone else discovered this years ago but what the hell lol . . .######

22

Well Paul it’s definitely . . . unique!

1000×666 109 KB

23

You just need to click into the code box and then you can copy it as normal by highlighting the text with the mouse in the usual way.

That was the original code to show how to apply classes to each element to change the colour. The latter demo contains the code similar to your requirement. I’ve copied into a codepen to make it easier for you to grab.

Just click ‘edit on codepen’ at the top right and the html and css is available in two windows or you can just fork to your own account and play at leisure.

24

Geez I’m missing half of the posts because they’re hiding behind logical threading! It’s too much of a shock! lol I definitely need to head over to the bar tutorials section and get my arms around this architecture.

25

Okay here’s the concept, and then I’ll upload the code that started this thread in the first place . . .

932×1350 375 KB

26

That’s more or less exactly the same as the demo of mine I have been talking about all along and as shown in the codepen. What is it that you don’t like about the demo or what is it I am missing that you need? Until I can grasp what I am doing wrong in my demo then I can’t help with your problem :smile:

27

Sorry for the delay everyone, I’m juggling this with other commitments and I don’t always reply timely for which I apologize. I haven’t forgotten you Paul, Ronpat! Just need a clear head when I’m posting this. The attachment I’ve uploaded is what this thread is all about. Everything but the 12pt Pica is what I was trying to automate (CSS Style, in other words) so that I could quickly, manually change color values on-the-fly. The 27 lines of code you see colorized & enlarged will be edited by me: They don’t need a style; everything surrounding those 27 lines does. It can or it can’t, but now I hope I’ve clarified my goal with this. :smile:

s

1107×1431 611 KB

28

And yes I’m painfully aware that it isn’t centered. It probably also does not validate but I’m too damn tired to edit it any more! :laughing:

29

Hi Paul, I really apologize for these delays. I have put some serious time into your code, which I thank you for posting. I have reformatted it in a style that I can follow, but please don’t be offended! I’m only doing this because there are elements in your code which are alien to me, and I need to be able to see it rigidly structured in order to emphasize things I don’t understand.

I did notice you used a border-spacing technique for (what was my) 30px margin-top for each cell, but I did want them to be declared as standalone margins since I’m not always going to have a border. Thus . . .

This isn’t showing up no matter where I put it:

margin-top: 30px

This looks alien to me:

.wrap > div > div

And with nothing to distinguish one WRAP from another I have difficulty with everything being a Wrap (or Son of Wrap etc.).

  • wrap {
  • .wrap > div

Well there’s no surprise that my fiddling with your code broke it. :confused: But again, this is a structured page of code until I learn and become comfortable with element declarations etc.

Let me know? I appreciate your help immensely, and have given you and ronpat each a dedicated folder in my Clips Vault. I’m glad I waited to have a quiet space to really study your code Paul. The floor is yours . . .

semicolon

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="charset=UTF-8; text/html" http-equiv="Content-Type">
<title>VERTICAL &amp; HORIZONTAL &#9658;CENTERING (Paul O&rsquo;Brien)</title>

<style type="text/css">

p {line-height: 100%;}

BODY {
     font-size: 16px;
   line-height: 16px;
   margin-left: 5%;
  margin-right: 5%;
    margin-top: 30px;
   font-family: HELVETICA, ARIAL, SANS-SERIF;}

.wrap {
    margin-top: 30px;
       display: TABLE;
         width: 100%;}
                                   /*  border-spacing: 10px;  */

.wrap > div {display: table-row;}

.wrap > div > div {
       display: TABLE-CELL;        /* MOVED */
        height: 200px;             /* MOVED */
    text-align: CENTER;            /* MOVED */
vertical-align: MIDDLE;            /* MOVED */
        border: INSET #D4CFC0;     /* MOVED */
  border-width: 10px;}             /* MOVED */
                                   /*    line-height: AUTO;  */
                                   /*      font-size: 120%;  */
                                   /*    font-weight: BOLD;  */
                                   /*          color: BLACK; */

.class1 {BACKGROUND: #FEFFEF}
.class2 {BACKGROUND: #FFFFD1}
.class3 {BACKGROUND: #FEFFB3}
.class4 {BACKGROUND: #FFFF95}
.class5 {BACKGROUND: #FFFF78}
.class6 {BACKGROUND: #FFFF59}
.class7 {BACKGROUND: #FFFF3B}
.class8 {BACKGROUND: #FFFE1D}
.class9 {BACKGROUND: #FFFF00}

</style>
</head>

<BODY>

<table style="margin-top: 20px; margin-left: 20%; margin-right: 20%;" border="0" cellpadding="4" cellspacing="0"><tbody>
<tr><td style="text-align: right; nowrap: NOWRAP;">HUE FAMILY &#9658;</td><td>YELLOW</td></tr>
<tr><td style="text-align: right; nowrap: NOWRAP;">CENTERING &#9658;</td><td>VERTICAL &amp; HORIZONTAL TEXT CENTERING</td></tr>
<tr><td style="text-align: right; nowrap: NOWRAP;">BORDER STYLE &#9658;</td><td>INSET + #D4CFC0</td></tr>
</tbody>
</table>

<div class="wrap">
<div class="class1"><div>The Background Color for this cell is</div></div>
<div class="class2"><div>The Background Color for this cell is</div></div>
<div class="class3"><div>The Background Color for this cell is</div></div>
<div class="class4"><div>The Background Color for this cell is</div></div>
<div class="class5"><div>The Background Color for this cell is</div></div>
<div class="class6"><div>The Background Color for this cell is</div></div>
<div class="class7"><div>The Background Color for this cell is</div></div>
<div class="class8"><div>The Background Color for this cell is</div></div>
<div class="class9"><div>The Background Color for this cell is</div></div>
</div>

/* margin-top: 30px;
/* #FEFFEF;<br><br>The RGB values for this background color are&nbsp;<br>  */
/* <span style="COLOR: #FFCC33; font-weight: BOLD;">  */
/* RGB (254, 255, 239)</SPAN></DIV></DIV>  */

</body>
</html>
30

A small intrusion…

Be aware that one cannot include those CSS comment marks (and the stuff between them) in the HTML portion of the page. They break things

31

You can’t apply margins to table-cells (even real table-cells) as that would be silly because cells must always stay together and can’t be moved up or down individually.

If you want a separate margin for each box then you will basically need each box as a table structure and then you can add a margin to the table rather than the table-cell.

The child combinator (>) selects elements that are children only and not grandchildren. This means that nested divs are not affected by this rules and is a powerful selector that has been around since the beginning of CSS (although not supported in IE6).

Here is my code re-engineered to avoid the child selector and to show how you can apply separate margins to each box.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap{
	display:table;
	width:80%;
	margin:auto;
}
.box{
	display:table;
	width:100%;
	margin:0 0 20px;
}
.content {
	display:table-cell;
	height:400px;
	font-size:120%;
	line-height:1.4;
	text-align:center;
	vertical-align:middle;
	color:#000;
	border: GROOVE #FFCC33;
	border-width: 10px;
	font-weight:bold;
}
.class1{background:red;margin-bottom:10px}
.class2{background:yellow;margin-bottom:30px}
.class3{background:blue;margin-bottom:50px}
.class4{background:green;margin-bottom:70px}
.class5{background:orange;/* these and the following will use the standard 20px margin from the .box styles*/}
.class6{background:teal}
.class7{background:white}
.class8{background:cyan}
.class9{background:lightblue}
.class10{background:#ccc}

</style>
</head>

<body>
<div class="wrap">
		<div class="box class1"><div class="content">The Background Color for this cell is</div></div>
		<div class="box class2"><div class="content">The Background Color for this cell is</div></div>
		<div class="box class3"><div class="content">The Background Color for this cell is</div></div>
		<div class="box class4"><div class="content">The Background Color for this cell is</div></div>
		<div class="box class5"><div class="content">The Background Color for this cell is</div></div>
		<div class="box class6"><div class="content">The Background Color for this cell is</div></div>
		<div class="box class7"><div class="content">The Background Color for this cell is</div></div>
		<div class="box class8"><div class="content">The Background Color for this cell is</div></div>
		<div class="box class9"><div class="content">The Background Color for this cell is</div></div>
		<div class="box class10"><div class="content">The Background Color for this cell is</div></div>
</div>

</body>
</html>

Sorry if I seem to be ignoring your mark up but I stopped using code like that in 1999 and will never do so again :smile: I never use inline styles (almost never as there are some cases where it can be used) and never mix the case of the css properties (unless its camel-case for classes or ids) but never for css properties or values because it makes the css very messy and difficult to read. Always use lower case.

32

Yes Grasshoppa. But pupa need to crawl before he walk. :bug:

And it is DONE.

Thank you Paul, Ronpat. Yes the parsing is from the planet NÔÔB in the constellation Primitive but it validates dammit!! Give it time and I’m certain I’ll manage to break it yet again! :scream:

semicolon

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="charset=UTF-8; text/html" http-equiv="Content-Type">
<title>VERTICAL &amp; HORIZONTAL &#9658;CENTERING (Paul O&rsquo;Brien)</title>

<style type="text/css">

p {line-height: 100%;}

BODY {
     font-size: 16px;
   line-height: 16px;
   margin-left: 5%;
  margin-right: 5%;
    margin-top: 30px;
   font-family: HELVETICA, ARIAL, SANS-SERIF;}

.CONTAINER {
       display: TABLE;
         width: 80%;
        margin: AUTO;}

.BOX {
    margin-top: 30px;
       display: TABLE;
         width: 100%;}

.WRITEME {
       display: TABLE-CELL;
        height: 200px;
    text-align: CENTER;
vertical-align: MIDDLE;
        border: INSET #D4CFC0;
  border-width: 10px;}

.YELLOW1a {BACKGROUND: #FEFFEF}
.YELLOW2a {BACKGROUND: #FFFFD1}
.YELLOW3a {BACKGROUND: #FEFFB3}
.YELLOW4a {BACKGROUND: #FFFF95}
.YELLOW5a {BACKGROUND: #FFFF78}
.YELLOW6a {BACKGROUND: #FFFF59}
.YELLOW7a {BACKGROUND: #FFFF3B}
.YELLOW8a {BACKGROUND: #FFFE1D}
.YELLOW9a {BACKGROUND: #FFFF00}

</style>
</head>

<body>

<table style="font-size: 20px; line-height: 20px; font-weight: bold; text-align: left; margin-left: auto; margin-right: auto; border: 0px; cellpadding: 4px; cellspacing: 0px;">
<tbody>
<tr><td style="text-align: right; nowrap: NOWRAP;">HUE FAMILY &#9658;</td><td>YELLOW</td></tr>
<tr><td style="text-align: right; nowrap: NOWRAP;">CENTERING &#9658;</td><td>VERTICAL &amp; HORIZONTAL TEXT CENTERING</td></tr>
<tr><td style="text-align: right; nowrap: NOWRAP;">BORDER STYLE &#9658;</td><td>INSET + #D4CFC0</td></tr>
</tbody>
</table>

<div class="CONTAINER">
<div class="BOX YELLOW1a"><div class="WRITEME">The Background Color for this cell is</div></div>
<div class="BOX YELLOW2a"><div class="WRITEME">The Background Color for this cell is</div></div>
<div class="BOX YELLOW3a"><div class="WRITEME">The Background Color for this cell is</div></div>
<div class="BOX YELLOW4a"><div class="WRITEME">The Background Color for this cell is</div></div>
<div class="BOX YELLOW5a"><div class="WRITEME">The Background Color for this cell is</div></div>
<div class="BOX YELLOW6a"><div class="WRITEME">The Background Color for this cell is</div></div>
<div class="BOX YELLOW7a"><div class="WRITEME">The Background Color for this cell is</div></div>
<div class="BOX YELLOW8a"><div class="WRITEME">The Background Color for this cell is</div></div>
<div class="BOX YELLOW9a"><div class="WRITEME">The Background Color for this cell is</div></div>
</div>

</body>
</html>