SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 40 of 40
  1. #26
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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!)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  2. #27
    Hibernator YuriKolovsky's Avatar
    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

  3. #28
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Answers today Paul?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Yes, I'll post the answers later this afternoon. I've just got to finish some work first

  5. #30
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 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&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

  6. #31
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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&#37; height and having the <ul> 50% height thus centered.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #32
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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&#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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #33
    Mazel tov! bronze trophy kohoutek's Avatar
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #34
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Shall you explain the code pls? some line only understood
    Cheers,
    Dinesh

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ajaxdinesh View Post
    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).

  11. #36
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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]-->
    Cheers,
    Dinesh

  12. #37
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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

  13. #38
    Design Your Site Team bronze trophy Erik J's Avatar
    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

  14. #39
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)

  15. #40
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Quote Originally Posted by Paul O'B View Post
    Hope that explains some of it
    Hi Paul,

    I am very clear about this.

    lot of Thanks for your favorable reply.
    Cheers,
    Dinesh


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •