SitePoint Sponsor

User Tag List

Page 3 of 4 FirstFirst 1234 LastLast
Results 51 to 75 of 94
  1. #51
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't wait until tomorrow. I've been struggling for the last three days on and off and have got some near solutions, but nothing good enough to send you Paul.
    When I get to see the answers, I'll be able to see just what I wasn't doing right.
    It's a great way to learn more about Css.
    Will you publish all the solutions sent in that were right? Hope so.
    Thanks

  2. #52
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    I'll publish most of the entries so that we can see the different methods used.

  3. #53
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,026
    Mentioned
    213 Post(s)
    Tagged
    1 Thread(s)
    Well, don't wait for me... I tried different ways but the "solutions" made me less than happy... Only one of them seemed to work but it didn't center on the screen but in the viewport which is not what has been requested. I am upset now. I even based one of the methods on something that was mentioned about vertical alignment in your blog! and I can't get it

  4. #54
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    Only one of them seemed to work but it didn't center on the screen but in the viewport which is not what has been requested
    Are you sure?

    Quote Originally Posted by Paul O'B View Post
    Must be centred perfectly in viewport (within 1 or 2 pixels at most)

  5. #55
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    No absolute positioning
    Hmm, how about fixed positioning?
    Simon Pieters

  6. #56
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zcorpan View Post
    Hmm, how about fixed positioning?
    That's a loophole that some members have already sneaked an entry in with

  7. #57
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not a loophole. Fixed positioning counts as absolute positioning.

    According to section 9.6.1 of the spec,
    Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.
    Birnam wood is come to Dunsinane

  8. #58
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Tommy
    That's not a loophole. Fixed positioning counts as absolute positioning.
    Yes, I know that and you know that but some of our members didn't know that

    (I still liked their ingenuity though )

  9. #59
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,026
    Mentioned
    213 Post(s)
    Tagged
    1 Thread(s)
    Thank you Stormrider. I just realize that I need to go back to school and learn how to read again

    Ok, I expressed myself in the wrong way. What I mean is that my solution centers the x in the middle of the page, but the page is longer than the screen and I need to scroll down. And I don't think this is what they are asking for.

    I confess that I haven't dedicated too much time.

  10. #60
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    Late entry, but I think I got it... maybe....

  11. #61
    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)
    Quote Originally Posted by molona
    ...
    Ok, I expressed myself in the wrong way. What I mean is that my solution centers the x in the middle of the page, but the page is longer than the screen and I need to scroll down. And I don't think this is what they are asking for.
    Perfectly centered in the screen=viewport is what is required.

    You can remove the scrollbar.
    Happy ADD/ADHD with Asperger's

  12. #62
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    oops i didnt see the no absolute positioning...... drat!

  13. #63
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Bad luck dresden but good effort anyway

    I have an entry form Force Flow (without the middle dividing line) that centres nicely in Opera and Firefox.

  14. #64
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Solution Time

    Ok, as this has quietened down a bit now we'll post the solutions and most of the entries I've received.

    It's been a bit hard to judge so I have put Tommy and YuriKolovsky in first place because their entries were correct and received quite quickly. But special mention to Ro0bear and Centauri also for multiple entries.

    Thanks to all those that entered as all the entries had a different slant on things and were all interesting even if some broke the rules or weren't quite centred.

    The main point of the exercise was to show that you couldn't set an element to 80% height and then use 10% top margins to vertically center it. The reasons are that the percentage values for margins (and padding) are based on the width of the containing block and never the height. This means that another method must be used to center the elements and as most of you have found out and the easiest was to use relative positioning instead.

    This has been an interesting quiz (thanks Erik) and has thrown up a couple of browsers bugs (which have now been filed at Opera and Safari (thanks Simon)).

    It's probably best if I explain the bugs before I post the solutions so that the workarounds make sense.

    Opera Bug
    The bug in Opera is when you move an element with a top relative position using a percentage then the percentage value should be based on the height of the element measured from the content edge of the containing block. However Opera calculates the height of the element and also includes the borders in the measurements.

    Therefore in this quiz with 10px borders our layout will be 10px adrift in Opera using the same code. (When I first tried the quiz I only used 1px borders and didn't notice the difference as it was within my 2px allowance for error). Effectively this rules out using relative positioning for Opera.

    Safari Bug
    Safari has an even worse bug in that it will not relatively move an element (using either top and bottom position) when the parent is a percentage height (even if that height can be resolved by another parents fixed height). This means that Safari needs a completely different method altogether.

    Solutions:

    This is Eriks version that works in Firefox,Opera and Safari:
    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>Untitled</title><meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    html,
    body{
        margin:0;
        padding:0;
        height:100%;
        width:100%;
        overflow:hidden;
    }
    body:before{
        display:block;
        height:15%;
        content:" ";
    }
    div{
        position:relative;
        left:15%;
        margin:-10px 0 0 -10px;
        border:10px solid;
        width:70%;
        height:70%;
    }
    div:before{
        display:block;
        margin-bottom:-10px;
        height:25%;
        content:" ";
    }
    p{
        position:relative;
        left:25%;
        margin:-10px 0 0 -10px;
        border:10px solid;
        width:50%;
        height:50%;
    }
    p:before{
        display:block;
        margin:-5px -92% -5px;
        border-bottom:10px solid black;
        width:284%;
        height:50%;
        content:" ";
    }
    span{
        display:block;
        position:relative;
        top:-.53em;
        width:100%;
        color:red;
        text-align:center;
        font:bold 4em/1 verdana;
    }
    </style></head><body>
    <div>
        <p>
            <span>X</span>
        </p>
    </div>
    </body></html>
    We also had versions that worked in IE6+ and Firefox at the same time which was pretty easy to do.

    I have merged my IE/FF versions with the method needed for safari/opera and the following layout will display in all the following browsers ie6-8, Opera, Firefox and Safari but unfortunately I had to give IE a couple of its own rules in a little hack for the purpose of showing both techniques in one layout.

    My (hacky) Version
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    * {
        margin:0;
        padding:0;
        vertical-align:top;
    }
    html {
        height:100%;
        text-align:center;
        overflow:hidden;
    }
    body {
        height:50%;
        border-bottom:10px solid red;
        position:relative;
        margin-top:-5px;
    }
    div {
        height:180%;
        width:80%;
        position:relative;
        border:10px solid #000;
        margin:-5px 0 -100% -10px;
        float:left;
        left:10%;
        top:10%;
    }
    p {
        top:10%;
        position:relative;
        height:80%;
        width:80%;
        border:10px solid #000;
        margin:-10px auto -100%;
    }
    span {
        position:relative;
        color:red;
        font:bold 3.6em/1.2 verdana;
        top:50%;
        margin-top:-.63em;
        display:block;
        height:100%
    }
    span:before, body:before, div:before {
        height:50%;
        display:block;
        content:" ";
        color:red;
    }
    body:before, div:before {height:10%}
    p>span, body>div, div>p {top:0}
    *+html p span {top:50%}
    *+html p, *+html div {top:10%}
    </style>
    </head>
    <body>
    <div>
        <p> <span>X</span> </p>
    </div>
    </body>
    </html>
    The first correct entries I received were fromTommy and YuriKolovsky as follows.

    Tommy: Opera - only

    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>Tommy - opera</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    html {
        height:100%;
        background-color:#fff;
        font:bold 50px/50px sans-serif
    }
    body {
        height:50%;
        margin:0 10px;
        padding:1px 0 0;
        border-bottom:10px solid #000
    }
    div {
        position:relative;
        top:33.33%;
        width:66.67%;
        height:133.33%;
        margin:-10px auto 0;
        border:10px solid #000
    }
    p {
        position:relative;
        top:25%;
        width:50%;
        height:50%;
        margin:-10px auto 0;
        border:10px solid #000;
        text-align:center
    }
    span {
        display:block;
        position:relative;
        top:50%;
        margin-top:-25px;
        color:#f00
    }
    </style>
    </head>
    <body>
    <div>
        <p> <span>X</span> </p>
    </div>
    </body>
    </html>
    YuriKolovsky - Firefox only
    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: Solution to CSS Quiz #11 in Firefox</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
        position:relative;
    }
    html {
        height:100%;
        text-align: center;
    }
    span {
        font-size:80px;
        font-family:Arial, Helvetica, sans-serif;
        color:red;
    }
    body {
        display:block;
        height:50%;
        border:solid red 1px;
        border-bottom:solid black 4px;
    }
    div {
        border:solid black 4px;
        display:block;
        margin:0 auto 0 auto;
        top: 25%;
        height:150%;
        width:70%;
        overflow:visible;
        margin-top:-2px;
    }
    p {
        border:solid black 4px;
        top:25%;
        height:50%;
        width:70%;
        margin:0 auto 0 auto;
        margin-top:-4px;
    }
    span {
        display:block;
        top: 50%;
        height:60px;
        line-height:90px;
        margin-top: -42px;
    }
    </style>
    </head>
    <body>
    <div>
        <p> <span>X</span> </p>
    </div>
    </body>
    </html>
    YuriKolovsky also gave me three other solutions with minor improvements that worked in different browsers but I wont post them all or I will be here all day

    Continued in Next post:
    Last edited by Paul O'B; Jan 28, 2009 at 07:38.

  15. #65
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Continued from above ....

    Eric Watson: Firefox only
    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>Eric Watson  - Erik's Test</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    html, body {
    height:100&#37;;
    color:red;
    font-size:2.5em;
    line-height:0;
    font-family:Arial;
    }
    div {
    height:50%;
    width:50%;
    position:relative;
    top:25%;
    margin:0 auto;
    border:10px solid #000;
    }
    p {
    height:50%;
    width:50%;
    margin:-10px auto 0;
    border:10px solid #000;
    position:relative;
    top:25%;
    }
    span {
    display:block;
    position:relative;
    top:50%;
    margin:-5px -145% 0;
    border-top:10px solid #000;
    text-align:center;
    }
    </style>
    </head>
    <body>
    
    <div>
    <p><span>X</span></p>
    </div>
    
    </body>
    
    </html>
    Roobear - Firefox and OPera
    (Used the outline property to circumvent the opera bug mentioned above)
    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>ro0bear - firefox and opera</title>
    <style type="text/css">
    * {
        font-size: 1.5em;
        line-height: 0;
        margin: 0;
        padding: 0;
        font-family: sans-serif;
    }
    html {
        background-color: white;
        height: 100%;
    }
    body {
        background-color: black;
        position: relative;
        top: 49%;
        height: 2%;
    }
    div {
        width: 80%;
        height: 4000%;
        position: relative;
        top: -1950%;
        left: 10%;
        outline: black 10px solid;
    }
    p {
        width: 60%;
        height: 60%;
        position: relative;
        top: 20%;
        left: 20%;
        text-align: center;
        outline: black 10px solid;
    }
    span {
        color: red;
        height: 0;
        position: relative;
        top: 52%;
    }
    </style>
    </head>
    <body>
    <div>
        <p> <span>X</span> </p>
    </div>
    </body>
    </html>
    Centauri - Firefox and IE

    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>Untitled</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    html {
        height: 100%;
        overflow: hidden;
    }
    body {
        border-top: 10px solid black;
        position: relative;
        top: 50%;
        height: 80%;
        margin-top: -5px;
        font-size: 3.76em;
        line-height: 1;
    }
    div {
        width: 70%;
        margin: -15px auto 0;
        border: 10px solid black;
        height: 100%;
        position: relative;
        top: -50%;
    }
    p {
        border: 10px solid black;
        width: 50%;
        height: 50%;
        position: relative;
        top: 25%;
        margin: -10px auto 0;
    }
    span {
        color: #FF0000;
        position: relative;
        top: 50%;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: bold;
        margin-top: -0.535em;
        display: block;
        text-align: center;
        line-height: 1em;
    }
    </style>
    </head>
    <body>
    <div>
        <p> <span>X</span> </p>
    </div>
    </body>
    </html>
    Raffles- opera
    (Also used outline but also used display:table to center)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Raffles - opera Untitled Document</title>
    <style>
    * {margin:0; padding:0}
    html {height:100%}
    body {
      height:50%;
      border-bottom:10px solid black;
      top:-10px;
      padding-top:5px;
      position:relative;
    }
    body * {
      outline:10px solid black;
      position:relative;
      margin:0 auto
    }
    div {
      height:160%;
      width:60%;
      top:20%;
      margin-top:3px;
      display:table;
      padding:10%
    }
    p {
      height:40%;
      width:60%;
      display:table-cell;
      vertical-align:middle
    }
    span {
      display:block;
      color:red;
      font:bold 500% sans-serif;
      outline:0;
      text-align:center;
    }
    </style>
    </head>
    <body>
    <div>
        <p> <span>X</span> </p>
    </div>
    </body>
    </html>
    MarkBrown4 - Firefox OPera and Safari but uses a loophole
    (This uses absolute positioning which was ruled out in the instructions as fixed positioning is basically absolutely positionng but with the viewport as the containing block)
    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>Mark Brown - Firefox, Opera and Safari</title>
    <style type="text/css">
    * { margin: 0; padding: 0 }
    html, body {
        height: 100%;
        font-size: 200%;
        color: red;
        text-align: center;
    }
    div {
        height: 50%;
        border-bottom: 5px solid #000;
        margin-top: -2px;
    }
    p {
        border: 5px solid #000;
        position: fixed;
        top: 20%;
        bottom: 20%;
        left: 20%;
        right: 20%;
    }
    span {
        border: 5px solid #000;
        text-indent: -9999px;
        position: fixed;
        top: 40%;
        bottom: 40%;
        left: 40%;
        right: 40%;
    
    }
    body:after {
        content: 'X';
        text-indent: 0;
        display: block;
        vertical-align: middle;
        margin-top: -.62em;
    }
    </style>
    </head>
    <body>
    <div>
      <p> <span>X</span> </p>
    </div>
    </body>
    </html>


    Force Flow - Firefox and OPera
    (Simple version without dividing line - uses display:table to nice effect)
    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>Force Flow - FF/opera - no middle line</title>
    <style type="text/css">
    
    html, body, p {
        padding: 0px;
        margin: 0px;
    }
    html, body, div, p { height: 100%; }
    body, p {
        width: 50%;
        height: 50%;
        display: table;
        margin: 0 auto;
    }
    body {
        position: relative;
        top: 25%;
    }
    div, span {
        display: table-cell;
        vertical-align: middle;
    }
    p {
        overflow: hidden;
        text-align:center;
    }
    div, p {
        border: 10px solid black;
    }
    span {
        font-family: Verdana, Geneva, sans-serif;
        color: red;
        font-size: 3em;
        font-weight: bold;
    }
    
    </style>
    </head>
    <body>
    <div>
    <p><span>X</span></p>
    </div>
    </body>
    </html>

    I had many other entries which I haven't shown as they used similar methods to above so thanks to all. If I haven't posted your favourite submission then feel free to post it yourself.

    Thanks to all for taking part and keep a look out for the next quiz which will follow in a couple of days

  16. #66
    SitePoint Member Tnargeel's Avatar
    Join Date
    Sep 2007
    Location
    West Yorkshire, UK
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great quiz!!

    I was miles off any sort of solution. CSS Positioning is a weak area for me so this was a challenge!

    Looking forward to the next one!

  17. #67
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    this is the real way of learning
    its just sad that so few schools and educational facilities use these techniques, mainly because they don't know much about the subject themselves.

    thanks Paul, Erik for the brain puzzle!
    thanks for the couple of days "relax time", ill just get enough time to finish a job, and then go back to quizzes...

    now i will closely examine the quiz entries.
    it will require quality reading time.

    and a special thanks for your hacky all browsers version!


    edit:
    these quizzes are a "new user magnet"

    congrats on you first post Tnargeel!!!

  18. #68
    SitePoint Member
    Join Date
    Oct 2004
    Location
    NJ
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you point out how the horizontal line through the "X" is created?

  19. #69
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Could you point out how the horizontal line through the "X" is created?
    some people including me, added a border-top or border-bottom to the body.
    and moved the body 50&#37; down.
    and then moved everything else up, in a simple explanation.

    others added the border to the span element.
    i will probably fail at explaining that.

    and some have used pseudo classes (p:before) to add the border to css created elements (im not sure if im using the right words).


    pauls solution summary:
    Code:
    * {
        margin:0;
        padding:0;
    }
    html {
        height:100%;
        overflow:hidden;
    }
    body {
        height:50%;
        border-bottom:10px solid black;
    }

  20. #70
    ? ro0bear's Avatar
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    624
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Larry973 View Post
    Could you point out how the horizontal line through the "X" is created?
    There is more than one way. I think the best way for you to learn about that is to copy and paste one of the code submissions into your own html file and then look at and play around with the code so you can see exactly how it works.

  21. #71
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Larry973 View Post
    Could you point out how the horizontal line through the "X" is created?
    In my solution, I set the body height to 50% of the viewport's and added a bottom border to the body. Then I shifted the body contents down so that half of it overflowed the body.

    There are many ways to do this, as you can see.
    Birnam wood is come to Dunsinane

  22. #72
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,026
    Mentioned
    213 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by erik.j View Post
    Perfectly centered in the screen=viewport is what is required.

    You can remove the scrollbar.
    Ok, It was perfectly centered on the document, but not on the screen

  23. #73
    SitePoint Member
    Join Date
    Oct 2004
    Location
    NJ
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Yuri, Roobear and Tommy.

  24. #74
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,026
    Mentioned
    213 Post(s)
    Tagged
    1 Thread(s)
    I need to tell it to the world... I am need to go back to school and learn reading... either that, or I need some holidays and read more slowly...

    I thought I couldn't use any type of positioning at all!

    So none of my solutions included any positioning... One of them is based on display (table, table-cell, etc) and the other one was based solely on the use of margins and paddings...

    I think that I am going to have a few drinks now. I think I need it. You can't get it worse than this

  25. #75
    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 hate work...when is the new quiz going to be posted?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •