Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Equal heights problem!

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #25979
    Declan
    Member

    OK, here’s the deal. I got a design I have to use for this page I’m making, my first one actually. When I was converting my Mockup from PSD to (x)HTML and CSS with <div>’s I came over this "equal height – pain in the ass" thing. So I searched the net and asked some guys about it. All I could get out of them was this one article about the subject, and it told me all about this repeat-y 50% 0; thing within the CSS. I don’t know if any here have heard about it, but anyway, I couldn’t figure it. It says in the article that I should put in the "body" element, within the background:

    The problem is, my background in the body element goes repeat-x so I guess that’s way it not worked that way. Later on I was trying it within the <div>’s the whole problem came from. The background’s within these went repeat-y so I figured must do the trick, but no, not even that worked out the way it should. So now I’m stuck, feeling helpless. So please, anybody, help me out here!

    Here is my full code for the HTML and the CSS. Please try to figure this out for me. And show me where to put in the trick or tricks if that should be the case.

    Code:



    MZ Tricks – En norsk fan- og hjelpeside for Online Managerspillet, ManagerZone.com

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor adipiscing facilisis. Donec odio nisi, elementum sed faucibus at, bibendum laoreet lacus. Donec ac dolor massa. Sed mollis, justo id hendrerit congue, turpis lectus vestibulum odio, faucibus dignissim enim libero eu velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum mollis, lectus interdum egestas porttitor, lectus erat commodo neque, aliquet consectetur dui libero non nunc. Vivamus vel lorem in tortor lacinia sodales. Nunc malesuada erat eget elit lobortis auctor vitae et sem. Pellentesque luctus, purus sed iaculis adipiscing, sapien velit dapibus justo, vitae malesuada dui justo a libero. Aliquam nec dui velit, eget sagittis nisi. Vestibulum accumsan nisl nibh, non dictum massa. Ut faucibus faucibus malesuada. Proin dictum neque in lorem euismod suscipit. Praesent blandit, elit a vulputate varius, ligula eros dictum turpis, ut pharetra lacus nunc in leo. Suspendisse ornare rutrum iaculis. Ut tempor congue vulputate. Quisque mollis auctor dapibus. Etiam viverra vulputate consectetur.

    Cras sed sem ante. Cras vehicula tellus et nunc consequat ornare. Quisque ultricies rhoncus euismod. Nulla sit amet tempus odio. Suspendisse non libero non mauris porttitor iaculis. Donec eros turpis, laoreet at adipiscing vitae, mollis nec sem. Nunc vitae felis ultrices tortor interdum iaculis eget eget magna. Cras in lacus ligula. Praesent semper congue sollicitudin. Quisque gravida justo quis leo aliquam eget dapibus ligula hendrerit. Maecenas semper augue eget dui ultrices at sagittis erat consequat. Integer tristique tempor nibh, a viverra dolor blandit id. Vestibulum non nunc nisi, non interdum massa. Nullam eu nulla a est aliquet dapibus a in elit. Pellentesque consectetur rutrum erat, faucibus faucibus ante laoreet at. Phasellus ut purus quis lacus ultricies ultricies nec sed quam. Duis venenatis scelerisque purus, eu tincidunt tellus sollicitudin quis. Sed at posuere sem. Phasellus non mollis lacus.

    Code:
    /*
    AUTHOR: O. Lund
    [email protected]
    */

    /* RESET AND BASIC PAGE SETUP */
    * {
    margin: 0;
    padding: 0;
    }

    html {
    overflow: scroll;
    }

    body {
    font-size: 62.5%;
    font-family: Helvetica, sans-serif;
    background: #ffffff url(images/header-bg.jpg) repeat-x top;
    }

    ul {
    list-style: none inside;
    }

    p {
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 1.2em;
    }

    a {
    outline: none;
    }

    a img {
    border: none;
    }
    /* END RESET */

    /* TOOLBOX */
    .floatleft {
    float: left;
    }

    .floatright {
    float: right;
    }

    .clear {
    clear: both;
    }
    /* END TOOLBOX */

    /* STRUCTURE AND STUFF */
    #page-wrap {
    width: 800px;
    margin: 0 auto;
    }
    #header {
    background: url(images/header.jpg) no-repeat center;
    height: 249px;
    }
    ul#header-nav {
    list-style: none;
    padding-left: 250px;
    }
    ul#header-nav li a {
    display: block;
    font-size: 1.9em;
    float: left;
    color: #ffffff;
    text-decoration: none;
    margin-top: 200px;
    width: 90px;
    font-weight: bold;
    }
    ul#header-nav li a:hover {
    color: #ffed57;
    }
    #sidebar-left {
    background: url(images/sidebar-left-bg.jpg) repeat-y;
    width: 170px;
    float: left;
    }
    #main-content {
    background: url(images/main-content-bg.jpg) repeat-y
    width: 500px;
    float: left;
    }
    #sidebar-right {
    background: url(images/sidebar-right-bg.jpg) repeat-y;
    width: 130px;
    float: left;
    }

    #footer {
    clear: both;
    background: url(images/footer.jpg) no-repeat bottom center;
    min-height: 110px;
    text-align: center;
    }
    #footer-bg {
    background: #1d6184;
    position: bottom;
    margin-bottom: 30px;
    min-height: 80px;
    }
    #footer p {
    font-size: 1.0em;
    color: #ffffff;
    text-transform: uppercase;
    padding: 35px;
    }
    /* END STRUCTURE */

    #63125
    soap
    Participant

    Just give me a link, brother

    #63126
    Declan
    Member
    "soap" wrote:
    Just give me a link, brother

    Very well. Here you go! http://brisingrmz.webs.com/

    Thanks for looking into it! I really appreciate it.

    #63127
    soap
    Participant

    are you trying to achieve this?
    http://www.communitymx.com/abstract.cfm?cid=BAD95

    #63130
    Declan
    Member

    Thanks a lot, I read the article and tried it out with the .html to download and it all worked perfect. But I don’t figure out how to use it for my mark-up… I done just as it says, men it just don’t want to happen. Damn it. Could you try to fix it with my mark-up?

    #63120
    soap
    Participant
    Code:
    /*
    AUTHOR: O. Lund
    [email protected]
    */

    /* RESET AND BASIC PAGE SETUP */
    * {
    margin: 0;
    padding: 0;
    }

    html {
    overflow: scroll;
    height:100%;
    }

    body {
    font-size: 62.5%;
    font-family: Helvetica, sans-serif;
    background: #ffffff url(images/header-bg.jpg) repeat-x top;
    min-height:100%;
    }

    ul {
    list-style: none inside;
    }

    p {
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 1.2em;
    }

    a {
    outline: none;
    }

    a img {
    border: none;
    }
    /* END RESET */

    /* TOOLBOX */
    .floatleft {
    float: left;
    }

    .floatright {
    float: right;
    }

    .clear {
    clear: both;
    }
    /* END TOOLBOX */

    /* STRUCTURE AND STUFF */
    #page-wrap {
    overflow:hidden;
    height:100%;
    width: 800px;
    margin: 0 auto;
    }
    #header {
    background:url(images/header.jpg) no-repeat center;
    height: 249px;
    }
    ul#header-nav {
    list-style: none;
    padding-left: 250px;
    }
    ul#header-nav li a {
    display: block;
    font-size: 1.9em;
    float: left;
    color: #ffffff;
    text-decoration: none;
    margin-top: 200px;
    width: 90px;
    font-weight: bold;
    }
    ul#header-nav li a:hover {
    color: #ffed57;
    }

    #sidebar-left {
    background: url(images/sidebar-left-bg.jpg) repeat-y;
    width: 170px;
    float: left;
    height:100%;
    min-height:100%;
    margin-bottom:-5000px;
    padding-bottom:5000px;
    }
    #main-content {
    background: url(images/main-content-bg.jpg) repeat-y;
    width: 500px;
    float: left;
    height:100%;
    min-height:100%;
    margin-bottom:-5000px;
    padding-bottom:5000px;
    }
    #sidebar-right {
    background: url(images/sidebar-right-bg.jpg) repeat-y;
    width: 130px;
    float: left;
    height:100%;
    min-height:100%;
    margin-bottom:-5000px;
    padding-bottom:5000px;
    }

    #footer {
    clear: both;
    background: url(images/footer.jpg) no-repeat bottom center;
    min-height: 110px;
    text-align: center;
    }
    #footer-bg {
    background: #1d6184;
    position: bottom;
    margin-bottom: 30px;
    min-height: 80px;
    }
    #footer p {
    font-size: 1.0em;
    color: #ffffff;
    text-transform: uppercase;
    padding: 35px;
    }
    /* END STRUCTURE */

    #63217
    Declan
    Member

    Thank you so much! I don’t know what to say. This is a hole new world to me. 8-)

    Again, thanks!

    #63250
    soap
    Participant

    good luck duder, keep on learning.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.