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

semicolon · October 12, 2014, 11:56pm

Let it never be said that I didn’t try dozens of ways to do this before once again crawling on all fours to Sitepoint (and this was supposed to be such an easy little project aaaahahaha!!)

The Little Monster that is my most recent project is a Strict page with 9 levels of Luminescence on the color Yellow, set as a background with their corresponding Hex values for reference. I’m deliberately omitting padding and line-height because I’d like to see how close I can get without them.

The background intensities (and associated Hex values) are virtually the only elements that distinguish the layout of one cell from another.

There is a 10th cell (Inline, the first cell) that represents the closest I’ve come to getting the effect I want, and represents a preview of the kind of bloatware I’ll end up with if I have to repeat what you see in the first cell 9 times. Thank you all for your help.

semitalented

<!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=UTF-8">
<title>VERTICAL CENTERING</title>

<style type="text/css">
#VERT-n-HORZ {
      height: 600px;
       align: CENTER;
  text-align: CENTER;
     display: BLOCK;
       width: 60%;
border-style: 3px DASHED #666666;
}
.VERT-n-HORZ {
      height: 600px;
       align: CENTER;
  text-align: CENTER;
     display: BLOCK;
       width: 60%;
border-style: 3px DASHED #666666;
}
</style>
</head>

<body style="font-size: 24px; font-family: HELVETICA, SANS-SERIF;">

<!-- ============ INLINE ============ -->
<DIV STYLE="background-color: #FEFFEF; 
border-style: 8px GROOVE #B38F24;
display: TABLE-CELL; 
vertical-align: MIDDLE;
height: 600px; 
width: 60%; 
align: CENTER;
text-align: center;">
<b>#FEFFEF;</b><br>
<br>
The RGB values for this background color are <br>
<font color="#FFCC33">
<b>rgb (254, 255, 239)</b></font></DIV>

<!-- ============ ID ================ -->
<DIV ID="VERT-n-HORZ">

<DIV STYLE="background-color: #FEFFEF;">
#FEFFEF;</DIV>
<DIV STYLE="background-color: #FFFFD1;">
#FFFFD1;</DIV>
<DIV STYLE="background-color: #FEFFB3;">
#FEFFB3;</DIV>
<DIV STYLE="background-color: #FFFF95;">
#FFFF95;</DIV>
<DIV STYLE="background-color: #FFFF78;">
#FFFF78;</DIV>
<DIV STYLE="background-color: #FFFF59;">
#FFFF59;</DIV>
<DIV STYLE="background-color: #FFFF3B;">
#FFFF3B;</DIV>
<DIV STYLE="background-color: #FFFE1D;">
#FFFE1D;</DIV>
<DIV STYLE="background-color: #FFFF00;">
#FFFF00;</DIV>
</DIV>

<!-- ============ CLASS ============= -->
<DIV CLASS=".VERT-n-HORZ" STYLE="background-color: #FEFFEF;">
#FEFFEF;</DIV>
<DIV CLASS=".VERT-n-HORZ" STYLE="background-color: #FFFFD1;">
#FFFFD1;</DIV>
<DIV CLASS=".VERT-n-HORZ" STYLE="background-color: #FEFFB3;">
#FEFFB3;</DIV>
<DIV CLASS=".VERT-n-HORZ" STYLE="background-color: #FFFF95;">
#FFFF95;</DIV>
<DIV CLASS=".VERT-n-HORZ" STYLE="background-color: #FFFF78;">
#FFFF78;</DIV>
<DIV CLASS=".VERT-n-HORZ" STYLE="background-color: #FFFF59;">
#FFFF59;</DIV>
<DIV CLASS=".VERT-n-HORZ" STYLE="background-color: #FFFF3B;">
#FFFF3B;</DIV>
<DIV CLASS=".VERT-n-HORZ" STYLE="background-color: #FFFE1D;">
#FFFE1D;</DIV>
<DIV CLASS=".VERT-n-HORZ" STYLE="background-color: #FFFF00;">
#FFFF00;</DIV>

</BODY>
</HTML>

ralphm · October 13, 2014, 12:28am

Sorry, but I can’t figure out what the question is!

semicolon · October 13, 2014, 12:31am

I’m trying to get as much of the code as can work to be templated, either in a class or ID.

Trying to avoid inline since so much of it is identical.

ralphm · October 13, 2014, 12:45am

Why not just use a class for each different color? You can have multiple classes on an element. E.g.

<div class="class1 class2">

semicolon · October 13, 2014, 3:54pm

Hi Ralph. Sorry I’m so verbose. What you’ve suggested is exactly the opposite of what I’m trying to code.

Let’s say I have 9 blocks with virtually identical features: their fonts, their margins, their shape, their layout, and their dimensions are exactly the same. The only 2 differences are:

1. their background color, and
2. the respective Hex & RGB values I label each box with

If the only features that are different are these 2, then is there a way I can CSS Style everything else as a template?

VERT-n-HORZ Container . . .

style
{
#VERT-n-HORZ
(all identical features here)
}
/style

so that each cell is now slimmed down to

9 LINES OF CODE

           <!-- DIV ID VERT-n-HORZ CONTAINER -->
<DIV ID="VERT-n-HORZ">

<!-- DIV BACKGROUND-COLOR-CELLS 1-9 w/HEX & RGB LABELS STARTS HERE -->
<DIV STYLE="background-color: #FEFFEF;">#FEFFEF;</DIV>
<DIV STYLE="background-color: #FFFFD1;">#FFFFD1;</DIV>
<DIV STYLE="background-color: #FEFFB3;">#FEFFB3;</DIV>
<DIV STYLE="background-color: #FFFF95;">#FFFF95;</DIV>
<DIV STYLE="background-color: #FFFF78;">#FFFF78;</DIV>
<DIV STYLE="background-color: #FFFF59;">#FFFF59;</DIV>
<DIV STYLE="background-color: #FFFF3B;">#FFFF3B;</DIV>
<DIV STYLE="background-color: #FFFE1D;">#FFFE1D;</DIV>
<DIV STYLE="background-color: #FFFF00;">#FFFF00;</DIV>

           <!-- CLOSING ID VERT-n-HORZ CONTAINER -->
</DIV>

and saved as a Template I can quickly modify for other color groups.

semi

ronpat · October 13, 2014, 4:12pm

I’m having a little problem with the question, too.

semicolon, can you please post an image or a working example that demonstrates how this code might be used in real life? Sorry for being dense, but I can’t quite get my head around it.

PaulOB · October 13, 2014, 4:52pm

Perhaps we can start with something logical like this and then you can explain what you need that is different.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap div {
	width:50px;
	height:50px;
	font-size:40px;
	line-height:50px;
	text-align:center;
	color:#000;
	border:1px solid #000;
	float:left;
	margin:5px;
	font-weight:bold;
}
.class1{background:red}
.class2{background:yellow}
.class3{background:blue}
.class4{background:green}
.class5{background:orange}
.class6{background:teal}
.class7{background:white}
.class8{background:cyan}
.class9{background:lightblue}
.class10{background:#ccc}

</style>
</head>

<body>
<div class="wrap">
		<div class="class1">1</div>
		<div class="class2">2</div>
		<div class="class3">3</div>
		<div class="class4">4</div>
		<div class="class5">5</div>
		<div class="class6">6</div>
		<div class="class7">7</div>
		<div class="class8">8</div>
		<div class="class9">9</div>
		<div class="class10">10</div>
</div>
</body>
</html>

What is it that you need that the above code won’t do?

semicolon · October 13, 2014, 10:01pm

Jesus I hate Markdown. :((

See these 9 lines of plain text the way I intended for you to see them? Of course you don’t. And now I’ll have to create and attach a screenshot. Welcome to Markdown.

Removed
Removed
Removed
Removed
Removed
Removed
Removed
Removed
Removed

These 9 lines are going to be rewritten every time I create a new template. I don’t need a style on these 9 lines, I need a style on everything else surrounding them. I’m sorry I can’t seem to explain this.

I managed to get as close visually to what I want here. The DIVs are not stretching to the 10%/10% container constraints in their parent DIVs; but for some inexplicable reason I actually got a few of these to center vertically. That leaves 2 challenges:

Getting each block to expand to their full 80% (after their 10%/10% parent constraints)
Creating a style for all but the Hex/RGB numbers which I’d like to see reduced to the 9 lines above.

I won’t ask the forum to help me code the style template that each block shares (#2) because I can’t explain it any other way. But #1 should be doable. Have some fun with this, and thank you all again.

semi

<!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=UTF-8">
<title>VERTICAL &amp; HORIZONTAL TEXT CENTERING</title>
<style type="text/css">
</style>
</head>

<BODY STYLE="font-size: 20px; font-family: HELVETICA, SANS-SERIF;">

<DIV ALIGN="CENTER" STYLE="margin-top: 30px; margin-left: 10%; margin-right: 10%;">
<DIV STYLE="display: table-cell;
vertical-align: middle;
width: AUTO;
height: 400px;
text-align: center;
background-color: #FEFFEF;
border: GROOVE #FFCC33;
border-width: 10px;">
The Background Color for this cell is<br>
#FEFFEF;
<br>
<br>
The RGB values for this background color are<br>
<FONT COLOR="#FFCC33">
<b>RGB (254, 255, 239)</b>
</FONT>
</DIV>
</DIV>


<DIV ALIGN="CENTER" STYLE="margin-top: 30px; margin-left: 10%; margin-right: 10%;">
<DIV STYLE="display: table-cell;
vertical-align: middle;
width: AUTO;
height: 400px;
text-align: center;
background-color: #FFFFD1;
border: GROOVE #FFCC33;
border-width: 10px;
text-align: center;">
The Background Color for this cell is<br>
#FFFFD1;
<br>
<br>
The RGB values for this background color are<br>
<FONT COLOR="#FFCC33">
<b>RGB (etc, etc, etc)</b>
</FONT>
</DIV>
</DIV>


</BODY>
</HTML>

PaulOB · October 14, 2014, 11:54am

It still seems to me that we have all already answered your question.

In my last example each div is styled via the parent so there are only one set of style rules and then you can just add a rule to each change the colour of each div as appropriate. There are no other considerations necessary.

The position of the elements is pretty easy but you will need an extra nested div if you want full vertical and horizontal centering.

Here’s another demo and please state this time what is wrong with this demo rather than creating another example as your examples are a little ambiguous as you are using deprecated properties even though you said this was a ‘strict’ layout. When you use table-cell it is a shrink to fit element and its size is usually controlled by the table-cell parent which should be display:table. Display:table is also shrink to fit so you would need to give it a width. If you want a margin of 10% at the sides then an 80% width with auto margins will achieve that,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap{
	display:table;
	width:80%;
	margin:auto;
	border-spacing:10px;
}
.wrap > div{display:table-row;}
.wrap > div > div {
	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}
.class2{background:yellow}
.class3{background:blue}
.class4{background:green}
.class5{background:orange}
.class6{background:teal}
.class7{background:white}
.class8{background:cyan}
.class9{background:lightblue}
.class10{background:#ccc}
</style>
</head>

<body>
<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 class="class10"><div>The Background Color for this cell is</div></div>
</div>
</body>
</html>

Hope its of some use anyway

ronpat · October 14, 2014, 4:22pm

semicolon,

As I said above, I’m having a hard time visualizing how your code might be used on a web page… how it is supposed to look and in what context.

Can you maybe post a PhotoShop mockup showing a true-to-life example of the page in a browser window?

ralphm · October 14, 2014, 11:29pm

As an aside, you can preserve formatting by wrapping HTML <pre> </pre> tags around your content. E.g.

this
    is
        a
           [color=red]simple[/color]
                example

semicolon · October 15, 2014, 3:29pm

No Ralph. It does NOT work.

####And quite frankly, if Sitepoint doesn’t offer any other alternative than a formatting scheme conceived and designed for 3" cellphone windows I’m out of here. I don’t have time to create little screenshots every time I need to explain what I’m trying to do. Markdown is an insult to my intelligence, and at some point I’ll just stop coming here.####

Paul, ronpat, . . . I’ll do 2 screenshots: one for the code, and one for the output.

ronpat · October 15, 2014, 3:39pm

I am experiencing a failure of imagination. I have requested a make-believe screen shot showing how this code would be interpreted in a web browser with content in front of it. What a user might see on a web page, in other words. If this is not reasonable, I don’t need anything else.

HAWK · October 15, 2014, 6:06pm

Whoa man! We’re here to offer free advice and support, and there are a number of people doing that in this thread. If you don’t want to be here, that’s cool… but please show some respect for the people that are offering up their time for you.

semicolon · October 15, 2014, 7:58pm

Alright, this views correctly in Firefox. It’s replete with align errors but I don’t have time to fool with it anymore. I’ve stated my opinion of Markdown and don’t need to repeat it.

<!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=UTF-8">
<title>BACKGROUND COLORS &#9658;VERTICAL &amp; HORIZONTAL TEXT CENTERING</title>
<style type="text/css">
</style>
</head>

<BODY STYLE="font-size: 20px; font-family: HELVETICA, SANS-SERIF;">

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

<DIV align="CENTER" style="margin-top: 30px; margin-left: 10%; margin-right: 10%; width: AUTO;
background-color: #FEFFEF; border: INSET #D4CFC0; border-width: 10px;">

<DIV style="height: 200px; display: table-cell; vertical-align: middle;">
The Background Color for this cell is<br>
#FEFFEF;<br><br>

The RGB values for this background color are<br>
<FONT COLOR="#FFCC33">
<b>RGB (254, 255, 239)</b></FONT>
</DIV>
</DIV>

<DIV align="CENTER" style="margin-top: 30px; margin-left: 10%; margin-right: 10%; width: AUTO;
background-color: #FFFFD1; border: INSET #D4CFC0; border-width: 10px;">

<DIV style="height: 200px; display: table-cell; vertical-align: middle;">
The Background Color for this cell is<br>
#FFFFD1;
<br><br>

The RGB values for this background color are<br>
<FONT COLOR="#FFCC33">
<b>RGB (etc, etc, etc)</b></FONT>
</DIV>
</DIV>

<DIV align="CENTER" style="margin-top: 30px; margin-left: 10%; margin-right: 10%; width: AUTO;
background-color: #FEFFB3; border: INSET #D4CFC0; border-width: 10px;">

<DIV style="height: 200px; display: table-cell; vertical-align: middle;">
The Background Color for this cell is<br>
#FEFFB3;
<br><br>

The RGB values for this background color are<br>
<FONT COLOR="#FFCC33">
<b>RGB (etc, etc, etc)</b></FONT>
</DIV>
</DIV>

<DIV align="CENTER" style="margin-top: 30px; margin-left: 10%; margin-right: 10%; width: AUTO;
background-color: #FFFF95; border: INSET #D4CFC0; border-width: 10px;">

<DIV style="height: 200px; display: table-cell; vertical-align: middle;">
The Background Color for this cell is<br>
#FFFF95;
<br><br>

The RGB values for this background color are<br>
<FONT COLOR="#FFCC33">
<b>RGB (etc, etc, etc)</b></FONT>
</DIV>
</DIV>

<DIV align="CENTER" style="margin-top: 30px; margin-left: 10%; margin-right: 10%; width: AUTO;
background-color: #FFFF78; border: INSET #D4CFC0; border-width: 10px;">

<DIV style="height: 200px; display: table-cell; vertical-align: middle;">
The Background Color for this cell is<br>
#FFFF78;
<br><br>

The RGB values for this background color are<br>
<FONT COLOR="#FFCC33">
<b>RGB (etc, etc, etc)</b></FONT>
</DIV>
</DIV>

<DIV align="CENTER" style="margin-top: 30px; margin-left: 10%; margin-right: 10%; width: AUTO;
background-color: #FFFF59; border: INSET #D4CFC0; border-width: 10px;">

<DIV style="height: 200px; display: table-cell; vertical-align: middle;">
The Background Color for this cell is<br>
#FFFF59;
<br><br>

The RGB values for this background color are<br>
<FONT COLOR="#FFCC33">
<b>RGB (etc, etc, etc)</b></FONT>
</DIV>
</DIV>

<DIV align="CENTER" style="margin-top: 30px; margin-left: 10%; margin-right: 10%; width: AUTO;
background-color: #FFFF3B; border: INSET #D4CFC0; border-width: 10px;">

<DIV style="height: 200px; display: table-cell; vertical-align: middle;">
The Background Color for this cell is<br>
#FFFF3B;
<br><br>

The RGB values for this background color are<br>
<FONT COLOR="#FFCC33">
<b>RGB (etc, etc, etc)</b></FONT>
</DIV>
</DIV>

<DIV align="CENTER" style="margin-top: 30px; margin-left: 10%; margin-right: 10%; width: AUTO;
background-color: #FFFE1D; border: INSET #D4CFC0; border-width: 10px;">

<DIV style="height: 200px; display: table-cell; vertical-align: middle;">
The Background Color for this cell is<br>
#FFFE1D;
<br><br>

The RGB values for this background color are<br>
<FONT COLOR="#FFCC33">
<b>RGB (etc, etc, etc)</b></FONT>
</DIV>
</DIV>

<DIV align="CENTER" style="margin-top: 30px; margin-left: 10%; margin-right: 10%; width: AUTO;
background-color: #FFFF00; border: INSET #D4CFC0; border-width: 10px;">

<DIV style="height: 200px; display: table-cell; vertical-align: middle;">
The Background Color for this cell is<br>
#FFFF00;
<br><br>

The RGB values for this background color are<br>
<FONT COLOR="#FFCC33">
<b>RGB (etc, etc, etc)</b></FONT>
</DIV>
</DIV>


</BODY>
</HTML>

felgall · October 15, 2014, 8:35pm

Since you are using HTML 3.2 for the page you should replace this doctype with the HTML 3.2 one.

If you were using HTML 4 then the table would not be there at all and all of the alignments would be done from the CSS.

ralphm · October 15, 2014, 11:37pm

That doesn’t give much to go on.

Stepping away from the forum environment for a moment, Markdown is a great system for marking up plain text without having to insert code tags into your text. But I find it really nice to use in the forum environment, too. I find it really great that we can use Markdown here but also use HTML tags as well where we need them. It’s the best of both worlds.

Anyhow, we’ve had fun working out how to format some things of late, so I’d love to have a go at what you were trying to do, if only just for fun. But we’d have to know what you were trying to do.

PaulOB · October 16, 2014, 8:14am

That seems to be exactly (more or less) what I have given you in my previous demo above (apart from using your colours which is a minor alteration).

Can you explain what is wrong with it so I can offer alternatives?

semicolon · October 16, 2014, 9:28pm

Ralph, I sincerely apologize to you and the board for my little rant yesterday. I previewed Ralph’s code in MarkdownPad and apparently didn’t enclose the code correctly because (both tags, code & pre) rendered as output. I still don’t like it but I’ll put a lid on it and go with the flow.

I’ve got a client coming so as soon as I’m done with that I’m going to graphically render the equivalent of what this thread is about. I can’t seem to express it in a way that makes sense to you all but a simple graphic should do the trick.

Paul I’m going to demo your code right after I get the graphic upload done but I’ll thank you in advance for posting it and I’m genuinely curious.

ronpat · October 16, 2014, 9:46pm

Don’t make it too simple. Go for realistic… something that a client would see in his browser.