CSS - Test Your CSS Skills Number 23

**RyanReese** · May 23, 2009, 06:23

Naw I finished the quiz but Paul said he would have to let Erik judge the entry since I sorta used a differnet way to get it vertically centered on tenh screen (it works!)

**YuriKolovsky** · May 24, 2009, 09:39

wait, i gotta do it too!
today

**RyanReese** · May 26, 2009, 05:18

Answers today Paul?

**Paul O'B** · May 26, 2009, 05:23

Yes, I'll post the answers later this afternoon. I've just got to finish some work first

**Paul O'B** · May 26, 2009, 11:11

Solution Time

Thanks to all that took part once again and hope you enjoyed or learned something along the way. If you didn't quite manage to do it then you can learn from the solutions anyway.

Although the quiz looked quite easy on the surface it was a little more complicated in the detail as some of you found out.

Thanks to all those that entered:
Gary Turner, Kohoutec, Ryan, Ajaxdinesh, Yurikolovsky.

This weeks winner will be Yurikolovsky with Gary Running a close second (simply because of the missing percentage height that I mentioned afterwards so it was my fault really). Both are good entries.

Third place goes to Ryan although it didn't quite meet all the criteria.

First here is Erik's original solution for you to peruse.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nested Cenering Test</title>
<meta name="generator" content="PSPad editor, www.pspad.com">

<style type="text/css">
/*** good browsers ***/
*{ margin:0; padding:0}

html{
    position:relative;
    width:100%;
    height:100%;
    background:#ccf;
}
html:before{
    display:block;
    height:35%;
    content:" ";
}
body{
    position:static;
    display:table;
    border:.15em solid red;
    margin:auto;
    width:90%;
    height:30%;
    background:blue;
}
h1,
p{
    position:absolute;
    bottom:65%;
    left:5%;
    padding:10px 0;
    width:90%;
    text-align:justify;
    font-size:100%;
}
p{
    top:65%;
}
#navbar{
    display:table-cell;
    padding-right:.15em;
    vertical-align:middle;
    text-align:center;
    word-spacing:-.5em;
    letter-spacing:-.5em;
}
#navbar li{
    display:inline-block;
    margin:-.15em -.15em -.15em 0;
    border:.15em solid #000;
    list-style:none;
    vertical-align:middle;
    line-height:1;
    word-spacing:0;
    letter-spacing:0;
}
#navbar a{
    float:left;
    padding:.6em;
    background:#33f;
    color:#fff;
    text-decoration:none;
}
#navbar a:hover {
    background: #fff;
    color: #009;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
body{
    position:relative;
    top:35%;
}
h1,
p{
    bottom:100%;
    left:0;
    width:100%;
}
p{
    top:100%;
}
#navbar{
    float:right;
    position:relative;
    top:50%;
    right:50%;
}
#navbar li{
    float:left;
    position:relative;
    top:-50%;
    right:auto;
    left:50%;
}
</style>
<![endif]-->

</head><body>

<h1>Centering a Floated Widthless Navbar. Tested in IE&nbsp;6-8, FF&nbsp;3, Opera&nbsp;10, Safari&nbsp;4.</h1>
<ul id="navbar">
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
    <li><a href="#">Link Four</a></li>
    <li><a href="#">Link Five</a></li>
</ul>
<p>The menu above must be both vertically and horizontally centered in the red bordered blue container. 
This blue navbar-container must have fluid lengths and be vertically and horizontally centered on screeen. 
No change to the html allowed, but all common hackless css are. So also IE conditional comments.</p>

</body></html>

As mentioned in previous quizzes you can't simply use a percentage margin to move the element to the centre because percentage margins are based on the width of the containing block and not the height. Therefore as shown in Erik's demo above you need to be a little more creative.

Yurikolovsky.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YuriKolovsky - CSS Quiz 23 - Nested Cenering Test</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
 
<style type="text/css">
html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background:#ccf;   
}
ul{
    margin:0;
    padding:0;
}
h1,p{
    margin:0;
    padding:10px 0;
    text-align:justify;
    font-size:100%;
}
#navbar{
    padding-right:.15em;
}
#navbar li{
    float:left;
    margin:0 -.15em -.15em 0;
    border:.15em solid #000;
    list-style:none;
}
#navbar a{
    float:left;
    padding:.6em;
    background:#33f;
    color: #fff;
    text-decoration:none;
}
#navbar a:hover {
    background: #fff;
    color: #009;
}
 
 
/*me adding stuff (for modern proper browsers without bugs, opera, firefox, ie8)
mostly absolute positioning all over the place, with weird body and content manipulation - not suitable for real life use without a container div
like this one: <div class="container">all content here</div>*/
body {
    height:33%;
    top:33%;/*safari not able to do this with relative positioning*/
    width:90%;
    position:relative;/*i left this here, because i would like this solution to work in all including safari*/
    margin:0 auto;
    background:red;
}
h1 {
    position:absolute;
    bottom:100%;/*this moves it above the body*/
    left:0;
    border:solid #ccf 1px;/*this removes annoying margin-collapse*/
}
p {
    position:absolute;
    top:100%;/*this moves it below the body*/
    left:0;
}
ul#navbar {
    top:50%;/*half height down*/
    height:100%;
    position:relative;
    display:table;/*this would be ideal, works in all except ie6-7*/
    margin:0 auto;/*this would be ideal, works in all except ie, because display:table not working*/
}
ul#navbar li{
    margin-top:-1.35em;/*half height up*/
    position:relative;
}
 
 
 
/*hackyness galore*/
 
/*safari only hack*/
@media screen and (-webkit-min-device-pixel-ratio:0){
ul#navbar {margin-left: -50%;}/*works until normal size, then goes nuts.*/
 
/*safari fix that also works in all browsers*/
/*for stupid safari, that doesent know how to move top:33% with relative positioning*/
 
body {
    position:absolute;
    margin:0 5%;
}
ul#navbar {
    top:50%;
    height:100%;
    position:absolute;
}
ul#navbar {
   float:right;
   right:50%;
   width:auto;
   text-align:center;
}
ul#navbar li {
   left:50%;
}
/*every browser goes nuts at very small sizes, not the ideal solution, min-width would come in handy if i knew the width of the content*/
</style>
<!--[if lt IE 8]>
<style type="text/css">
/*below mainly for ie (horizontal centering in ie6-7)*/
ul#navbar {
   float:right;
   right:50%;
   width:auto;
   text-align:center;
}
ul#navbar li {
   left:50%;
}
</style>
<![endif]-->
 
</head><body>
 
<h1>Centering a Floated Widthless Navbar. Tested in IE&nbsp;6-8, FF&nbsp;3, Opera&nbsp;10, Safari&nbsp;4.</h1>
<ul id="navbar">
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
    <li><a href="#">Link Four</a></li>
    <li><a href="#">Link Five</a></li>
</ul>
 
<p>The menu above must be both vertically and horizontally centered in the red bordered blue container.
This blue navbar-container must have fluid lengths and be vertically and horizontally centred on screeen.
Changes to the html are not allowed, but all supported css are. So also IE conditional comments.</p>
 
</body></html>

Gary:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />

  <title>Nested Centering Test</title>

  <style type="text/css">
/*<![CDATA[*/

  html {
    display: table;
    height: 100%;
    }

  body {
    display: table-cell;
    vertical-align: middle;
    }

  p, h1 {
    margin-bottom: 0;
    }

  ul {
    background-color: blue;
    border: 2px solid red;
    list-style: none;
    margin: 1em auto 0;
    padding: 20px;
    text-align: center;
    word-spacing: -.3em;
    }

  li {
    border: 1px solid black;
    display: -moz-inline-box;
    display: inline-block;
    margin-left: -1px;
    vertical-align: middle;
    word-spacing: 0;
    }

* html li {
    display: inline;
    }

*+html li {
    display: inline;
    }

  a {
    display: block;
    padding: .6em;
    background-color: blue;
    color: #fff;
    text-decoration: none;
  }

  a:hover {
    background: #fff;
    color: #009;
  }

  /*]]>*/
  </style><!--[if lt IE 8]>
<style type="text/css">
body {
    top: 50%;
    left: 0;
    position: relative;
    zoom: 1;
    }

h1, p, ul {
    position: relative;
    top: -50%;
    }

</style>
<![endif]-->

</head>

<body>
  <h1>Centering a Floated Widthless Navbar. Tested in
  IE&nbsp;6-8, FF&nbsp;<ins>2&amp;</ins>3, Opera&nbsp;10, Safari&nbsp;4.</h1>

  <ul id="navbar">
    <li><a href="#">Link One</a></li>

    <li><a href="#">Link Two
    <br />
    on two lines</a></li>

    <li><a href="#">Link Three running on a bit</a></li>

    <li><a href="#">Link Four</a></li>

    <li><a href="#">Link Five</a></li>

  </ul>

  <p>The menu above must be both vertically and horizontally centred in
  the red bordered blue container. This blue navbar-container must have
  fluid lengths and be vertically and horizontally centred on screen.
  No change to the html allowed, just add the required css are.
  (Conditional comments also allowed for IE).</p>
</body>
</html>

Feel free to post your entries in the thread now (Ryan and others).

Look out for a new quiz (or 2) on Wednesday which I'm sure will have you all guessing for a while

**RyanReese** · May 26, 2009, 16:14

I'll only post it if people want

I did a differnet method of vertical centering on the screen which utilized the <p> and <h1> element setting them each to 25% height and having the <ul> 50% height thus centered.

**RyanReese** · May 26, 2009, 16:29

Aw wth I'll post it anyway

Code:

<!doctype html>
<html>
<head>
<style type="text/css">
html,
body{
    margin:0;
    padding:0;
    width:100&#37;;
    height:100%;
    background:#ccf; 
text-align:center;
}
ul{
    margin:0;
    padding:0;
}
h1,p{
    margin:0;
    padding:0px 0;
	height:25%;
    font-size:100%;
}
#navbar{
    padding-right:.15em; /* padding is to soak up the negaive margin on the last item */
	height:50%;
	background:darkblue;
	vertical-align:middle;
	width:70%;
	display:inline-block;

}
#navbar li{
    margin:0 -.15em 0;
    border:.15em solid #000;
	list-style:none;
	display:inline-block;/* FF3, Opera, Safari */
	vertical-align:middle;
}
#navbar a{
    padding:.6em;
	display:block;
	
    background:#33f;
    color: #fff;
    text-decoration:none;
}
#navbar a:hover {
    background: #fff;
    color: #009;
}
#navbar .extra{height:100%;border:0;}
p{clear:both;}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#navbar,  #navbar li{display:inline;}
</style>
<![endif]-->

</head>
<body>
<h1></h1>
<ul id="navbar">
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
    <li><a href="#">Link Four</a></li>
    <li><a href="#">Link Five</a></li>
    <li class="extra"></li>
</ul>
<p></p>
</body></html>

If you want explanation tell me.

**kohoutek** · May 26, 2009, 18:01

Damn to hell and back! I could kick myself in the behind for not having tried using the html element and creating the pseudo element. I used it for the sticky footer quiz. Why oh why didn't I think of it? Gah, I'm disappointed in myself. I'm going to sulk in the corner for a few hours now.

Great entries, everyone. I'll study the different methods.

**ajaxdinesh** · May 26, 2009, 23:52

Hi Paul,

Shall you explain the code pls? some line only understood

**Paul O'B** · May 27, 2009, 01:39

Originally Posted by ajaxdinesh

Hi Paul,

Shall you explain the code pls? some line only understood

No problem just let me know which part (and which solution) you are having trouble with and I'll explain that in more depth (rather than explain the whole thing as most of t is straight forward).

**ajaxdinesh** · May 27, 2009, 03:17

Originally Posted by Paul O'B

No problem just let me know which part (and which solution) you are having trouble with and I'll explain that in more depth (rather than explain the whole thing as most of t is straight forward).

I dont understand these lines.

Code CSS:

html{
    position:relative;
    width:100%;
    height:100%;
    background:#ccf;
}
html:before{
    display:block;
    height:35%;
    content:" ";
}
body{
    position:static;
    display:table;
    border:.15em solid red;
    margin:auto;
    width:90%;
    height:30%;
    background:blue;
}
#navbar{
    display:table-cell;
    padding-right:.15em;
    vertical-align:middle;
    text-align:center;
    word-spacing:-.5em;
    letter-spacing:-.5em;
}
#navbar li{
    display:inline-block;
    margin:-.15em -.15em -.15em 0;
    border:.15em solid #000;
    list-style:none;
    vertical-align:middle;
    line-height:1;
    word-spacing:0;
    letter-spacing:0;
}
 
<!--[if lt IE 8]>
<style type="text/css">
body{
    position:relative;
    top:35%;
}
h1,
p{
    bottom:100%;
    left:0;
    width:100%;
}
p{
    top:100%;
}
#navbar{
    float:right;
    position:relative;
    top:50%;
    right:50%;
}
#navbar li{
    float:left;
    position:relative;
    top:-50%;
    right:auto;
    left:50%;
}
</style>
<![endif]-->

**Paul O'B** · May 27, 2009, 04:13

I dont understand these lines.

Code:

html:before{

    display:block;

    height:35%;

    content:" ";

}

This places a pseudo element at the top of the page that is 35% high. The :before pseudo class places additional content before any content in the element it is applied to. It doesn't apply it before the element itself.

Erik use this to create the centred element by applying a 35% gap at the top and then using a 30% high element itself which in effect centers the element vertically.

Code:

body{

    position:static;

    display:table;

    border:.15em solid red;

    margin:auto;

    width:90%;

    height:30%;

    background:blue;

}

#navbar{

    display:table-cell;

    padding-right:.15em;

    vertical-align:middle;

    text-align:center;

    word-spacing:-.5em;

    letter-spacing:-.5em;

}

This sets the body to display as a table structure and for the navbar to display as a table-cell which allows vertical-align:middle to work.

Code:

#navbar li{

    display:inline-block;

    margin:-.15em -.15em -.15em 0;

    border:.15em solid #000;

    list-style:none;

    vertical-align:middle;

    line-height:1;

    word-spacing:0;

    letter-spacing:0;

}

Rather than float the list items they are turned into inline blocks which allows the elements to behave like block elements but in an inline context. This means they can be centred nicely by just using text-align:center on the parent.

See more about inline-block here.

Code:

<!--[if lt IE 8]>

<style type="text/css">

body{

    position:relative;

    top:35%;

}

The above code for IE is to mimic the :before element that other browsers are using and shifts the start of the body down the page by 30% using relative positioning.

Code:

#navbar{

    float:right;

    position:relative;

    top:50%;

    right:50%;

}

#navbar li{

    float:left;

    position:relative;

    top:-50%;

    right:auto;

    left:50%;

}

In IE if you shift an outer element down by a percentage using relative or absolute positioning and then move the inner element back up using the same percentage the element ends up being vertically centred and not right back at the start where other browsers would put it.

This example shows it in effect.

The same holds true if you shift and element leftwards and then reverse the inner element with the same percentage and once again the element becomes horizontally aligned.

Hope that explains some of it

**Erik J** · May 27, 2009, 04:34

Very good explained Paul, and example links too.

I did a try explaining by commenting the code. I was late, but posting it anyway.

Code CSS:

tml{
	position:relative; /* sets the length-references for the absolute positioning */
	width:100%;
	height:100%;
	background:#ccf;
}
html:before{ /* only read by good browsers, creates a virtual element before its content */
	display:block;
	height:35%; /* pushes the content (body) down */
	content:" ";
}
body{
	position:static; /* static removes any default relative-reference for the AP children */
	display:table; /* good browsers; render this as a table */
	border:.15em solid red;
	margin:auto; /* auto-center the body in the html */
	width:90%;
	height:30%;
	background:blue;
}
h1,
p{
	position:absolute; /* AP relative the html */
	bottom:65%;
	left:5%;
	padding:10px 0;
	width:90%;
	text-align:justify;
	font-size:100%;
}
p{
	top:65%;
}
#navbar{
	display:table-cell; /* good browsers; render this as a table-cell (that fills the table) */
	padding-right:.15em;
	vertical-align:middle; /* align its content vertically */
	text-align:center; /* align its content horizontally */
	word-spacing:-.5em;
	letter-spacing:-.5em;
}
#navbar li{
	display:inline-block; /* good browsers; 'inline' creats a text-line to sit on, 'block' uses dimensions */
	margin:-.15em -.15em -.15em 0;
	border:.15em solid #000;
	list-style:none;
	vertical-align:middle; /* align this element vertically to match edges of the text-line it has created (default is base-line, adding line-height for descendents) */
	line-height:1;
	word-spacing:0;
	letter-spacing:0;
}
#navbar a{
	float:left;
	padding:.6em;
	background:#33f;
	color: #fff;
	text-decoration:none;
}
#navbar a:hover {
	background: #fff;
	color: #009;
}
 
</style>
 
<!--[if lt IE 8]>
<style type="text/css">
/* these positions are erroneous interpretated in IE6-7 */
body{
	position:relative;
	top:35%;
}
h1,
p{
	bottom:100%;
	left:0;
	width:100%;
}
p{
	top:100%;
}
#navbar{ /* alternative centering for IE6-7 */
	float:right;
	position:relative;
	top:50%;
	right:50%;
}
#navbar li{
	float:left;
	position:relative;
	top:-50%;
	left:50%;
}
</style>
<![endif]-->

**Paul O'B** · May 27, 2009, 06:57

NEW QUIZ POSTED

**ajaxdinesh** · May 28, 2009, 01:55

Originally Posted by Paul O'B

Hope that explains some of it

Hi Paul,

I am very clear about this.

lot of Thanks for your favorable reply.

The SitePoint Forums have moved.

User Tag List

Thread: CSS - Test Your CSS Skills Number 23

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions