SitePoint Sponsor |
|
User Tag List
Results 26 to 40 of 40
-
May 23, 2009, 06:23 #26
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
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!)
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 24, 2009, 09:39 #27
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
wait, i gotta do it too!
today
-
May 26, 2009, 05:18 #28
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Answers today Paul?
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 26, 2009, 05:23 #29
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Yes, I'll post the answers later this afternoon. I've just got to finish some work first
-
May 26, 2009, 11:11 #30
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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 6-8, FF 3, Opera 10, Safari 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>
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 6-8, FF 3, Opera 10, Safari 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>
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 6-8, FF <ins>2&</ins>3, Opera 10, Safari 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>
Look out for a new quiz (or 2) on Wednesday which I'm sure will have you all guessing for a while
-
May 26, 2009, 16:14 #31
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
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.Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 26, 2009, 16:29 #32
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Aw wth I'll post it anyway
Code:<!doctype html> <html> <head> <style type="text/css"> html, body{ margin:0; padding:0; width:100%; 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>
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 26, 2009, 18:01 #33
- Join Date
- Aug 2004
- Location
- Hamburg, Germany
- Posts
- 4,248
- Mentioned
- 30 Post(s)
- Tagged
- 0 Thread(s)
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.
-
May 26, 2009, 23:52 #34
Hi Paul,
Shall you explain the code pls? some line only understoodCheers,
Dinesh
-
May 27, 2009, 01:39 #35
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
May 27, 2009, 03:17 #36
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]-->
Cheers,
Dinesh
-
May 27, 2009, 04:13 #37
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I dont understand these lines.Code:html:before{ display:block; height:35%; content:" "; }
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; }
See more about inline-block here.
Code:<!--[if lt IE 8]> <style type="text/css"> body{ position:relative; top:35%; }
Code:#navbar{ float:right; position:relative; top:50%; right:50%; } #navbar li{ float:left; position:relative; top:-50%; right:auto; left:50%; }
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
-
May 27, 2009, 04:34 #38
- Join Date
- May 2007
- Location
- Countryside, Sweden
- Posts
- 3,407
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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]-->
Happy ADD/ADHD with Asperger's
-
May 27, 2009, 06:57 #39
-
May 28, 2009, 01:55 #40
Bookmarks