Grow your CSS skills. Land your dream job.

Still need help with collapsing pages…

  • # June 23, 2009 at 11:35 am

    I have been working on more and more pages for the site I’ve been doing (knowonder.com/index.php is the home page for it), but I am having to create a defined height for each of my main-content areas for each page, because they are different. Is there a way I can just make it fit automatically what is within it, and expand to what that is without having issues? I tried putting it to 100% and it just shrunk up into nothing, and everything collapsed…

    The code I am having to change the height on each time is my container, which holds the pictures and main content. Does that make sense? I have used relative positioning on the container, so I can have absolute positioning within it, so I’m not sure if that is possibly what is messing things up, but I don’t want to use margins to position things.

    I would REALLY appreciate any help!

    Here is my code of one page, and my main style sheet, just for reference:

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



    Magazine Cover
    Kids Reading

    Subscribe


    check all that apply

         I would like to receive a FREE, physical, in-my-hand, 132 page copy of each         new knowonder!™ issue. I am more than happy to pay the nominal fee of
            $ 0.79 to cover postage each month. I understand that this amount will be         charged up-front to my credit/debit card.
         I would like to receive a FREE digital copy of each new issue in my inbox
             every month.


    Heart
    Mom Gardening

    What others are saying...

    “I can’t wait to get my hands on this magazine! What a great idea!
    I love reading, and I know the importance of having new matieral
    all the time to help my kids stay interested in reading. Thank you,
    Knowonder, for such a great product!”

    – Janice B., NY.

    “Very cool, and also very cute! This looks like a winner. My family
    will be subscribing for a long time to come.”

    – Susan K., MI.

    “As an elementary teacher, I can tell you that new material, every
    day, is one of the biggest keys to helping a child love reading. New
    adventures, new problems, new challenges, new friendships…
    There’s nothing like an exciting story to excite the imaginations of
    our children. I will support Knowonder!”

    – Lucinda M., NB.



    Code:
    * {margin:0px; padding:0px;}

    p {font-family:Arial, Helvetica, sans-serif;}

    ul {font-family:Arial, Helvetica, sans-serif;}

    img {text-decoration:none; border:none;}

    body {background:url(../images/background_03.png); background-repeat:repeat;}

    #container {width: 980px; height:660px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
    #container-contact {width: 980px; height:800px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
    #container-about {width: 980px; height:780px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
    #container-storytime {width: 980px; height:880px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
    #container-crafts {width: 980px; height:590px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
    #container-media {width: 980px; height:700px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
    #container-signup {width: 980px; height:740px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
    #container2 {width: 980px; position:relative; margin:30px auto;}
    #container2 p {margin:0px 50px 5px 50px; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

    #header {padding:5px 0px 0px 0px;}

    #login {float: right; list-style:none; color:#CCC; position:absolute; top:10px; left:840px;}
    #login ul {list-style:none;}
    #login ul li {list-style:none; float:left; padding:0px 5px 0px 5px;}

    #magazine-free {float: left; position:absolute; top:0px; left:390px;}

    #nav {position:absolute; top:100px; left:0px; width:980px; height:25px; background:#E977AF; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
    #nav ul {list-style:none; position:absolute; top:5px; left:195px;}
    #nav ul li {list-style:none; float:left; padding:0px 10px 0px 10px;}
    #nav a {color:#FFF; text-decoration:none}
    #nav a:hover {color:#FFF; text-decoration:none;}
    #nav a:visited {color:#FFF; text-decoration:none}

    #body {background: #D3EDF1; width:875px; height:480px; position: relative; border:#47C3D3 solid 1px;}
    #body-header {position: absolute; top:12px;}

    #body-left {float: left; width:232px; position:absolute; top:125px; left:25px;}

    #body-left2 {float: left; width:253px; position:absolute; top:140px; left:285px; font-family:Arial, Helvetica, sans-serif;}
    #body-left2 p {color:#00AEEF; margin:5px 0px 40px 20px; font-size:13px;}

    #body-right {float: right; width:253px; position:absolute; top:140px; right:35px; font-family:Arial, Helvetica, sans-serif;}
    #body-right p {color:#00AEEF; margin:5px 0px 40px 20px; font-size:13px;}

    #winmoney {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
    #winmoney ul {list-style:none; position:absolute; top:90px; left:60px;}
    #winmoney ul li {list-style:none; float:left; margin:0px 3px; }

    #winmoney a {text-decoration:none; color:#00AEEF;}
    #winmoney a:hover {text-decoration:underline; color:#00AEEF}
    #winmoney a:visited {text-decoration:none; color:#00AEEF;}

    #winmoney2 {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
    #winmoney2 ul {list-style:none; position:absolute; top:210px; left:60px;}
    #winmoney2 ul li {list-style:none; float:left; margin:0px 3px;}

    #winmoney2 a {text-decoration:none; color:#00AEEF;}
    #winmoney2 a:hover {text-decoration:underline; color:#00AEEF}
    #winmoney2 a:visited {text-decoration:none; color:#00AEEF;}

    #winmoney3 {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
    #winmoney3 ul {list-style:none; position:absolute; top:90px; left:60px;}
    #winmoney3 ul li {list-style:none; float:left; margin:0px 3px;}

    #winmoney3 a {text-decoration:none; color:#00AEEF;}
    #winmoney3 a:hover {text-decoration:underline; color:#00AEEF}
    #winmoney3 a:visited {text-decoration:none; color:#00AEEF;}

    #left {width:468px; height:430px; border:#E977AF solid 1px; background:#FFF; position:relative; margin:0px 0px 30px 0px;}
    #left-text {position:absolute; top:120px;}

    #right {width:468px; height:430px; border:#E977AF solid 1px; background:#FFF; position:relative; margin:0px 0px 30px 0px;}

    #right-nav {position:absolute; top:400px; left:175px; list-style:none;}
    #right-nav ul {list-style:none;}
    #right-nav ul li {list-style:none; float:left; margin:0px 10px;}

    #body2 {background:#FFF; width:900px; position:relative;}
    #left-pics {float:left; width:160px; position:absolute; top:160px; left:30px;}
    #right-pics {float:right; width:160px; position:absolute; top:160px; right:-60px;}
    #main-no-pics {float:left; width:512px; position:absolute; top:160px; left:230px; font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#666}
    #main-no-pics a{color:#666; text-decoration:none;}
    #main-no-pics a:hover{text-decoration:underline;}

    #main-about {float:left; width:512px; position:absolute; top:160px; left:230px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666;}
    #main-about2 {margin:10px 0px; position:absolute; top:30px; left:0px;}
    #main-about2 a{text-decoration:none; color:#666}

    #main-no-pics-l {float:left;}
    #main-no-pics-l input{margin:5px auto;}

    /*THIS IS THE CSS FOR THE FORM STUFF OF THE WEBSITE*/

    input.required {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #000;}

    select.required {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #000;}

    td.required {font-family:Arial, Helvetica, sans-serif; font-size:12px; }

    input.optional {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #999;}

    select.optional {width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #666;}

    td.optional {font-family:Arial, Helvetica, sans-serif; font-size:12px; }

    input.submit {border: solid 2px #000;font-family:Arial, Helvetica, sans-serif; font-size:14px;}

    /*THE END OF THE FORM CSS*/

    #art {width:875px; margin:30px auto; padding:0px 0px 20px 0px;}
    #art-pic {float:left; width:244px; position:absolute; top:160px; left:30px;}
    #art-main {float:left; width:545px; position:absolute; top:160px; left:230px;}
    #art-main p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}
    #art-dizzle {float:right; width:39px; margin:45px 6px 30px 0px;}
    #art-dizzle2 {float:right; width:39px; margin:87px 6px 30px 0px;}
    #art-dizzle3 {float:right; width:39px; margin:3px 6px 30px 0px;}

    #art-main2 {float:left; width:545px; position:absolute; top:160px; left:320px;}
    #art-main2 p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}

    #crafts-main {float:left; width:545px; position:absolute; top:140px; left:320px;}
    #crafts-main p {font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}

    #art-dizzle-page-orange{float:right; width:16px; height:40px; position:absolute; top:127px; right:0px; background:url(../images/yellow_slice.png) no-repeat}
    #art-dizzle-page-orange:hover {background:url(../images/orange.png) no-repeat; height:40px; width:45px;}
    #art-dizzle-page-orange a {display:block; width:100%; height:100%;}

    #art-dizzle-page-green {float:right; width:16px; height:40px; position:absolute; top:169px; right:0px; background:url(../images/green_slice.png) no-repeat}
    #art-dizzle-page-green:hover {background:url(../images/green.png) no-repeat; height:40px; width:45px;}
    #art-dizzle-page-green a{display:block; width:100%; height:100%;}

    #art-dizzle-page-pink {float:right; width:16px; height:40px; position:absolute; top:212px; right:0px; background:url(../images/pink_slice.png) no-repeat}
    #art-dizzle-page-pink:hover {background:url(../images/pink.png) no-repeat; height:40px; width:45px;}
    #art-dizzle-page-pink a{display:block; width:100%; height:100%;}

    #art-buttons {position:absolute; top:545px; left:0px;}
    #art-buttons ul {list-style:none;}
    #art-buttons ul li {list-style:none; float:left;}

    #art-buttons2 {position:absolute; top:345px; left:0px;}
    #art-buttons2 ul {list-style:none;}
    #art-buttons2 ul li {list-style:none; float:left;}

    #craft-buttons {position:absolute; top:370px; left:0px;}
    #craft-buttons ul {list-style:none;}
    #craft-buttons ul li {list-style:none; float:left;}

    #list-l {float:left; margin:0px 0px 0px 50px;}
    #list-r {float:right; margin:0px 0px 0px 50px;}

    #art-main2 {float:left; width:545px; position:absolute; top:150px; left:320px;}
    #art-main2 p{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:15px 0px 0px 0px;}
    #art-nav-buttons{position:absolute; top:370px; left:-5px;}
    #art-nav-buttons ul {list-style:none}
    #art-nav-buttons ul li {list-style:none; margin: 10px 0px;}

    /*HERE ARE WHERE THE CLASSES START*/
    .clear {clear:both;}
    .stories {color:#FF9933; font-size:22px;}
    .art {color:#A0CF67; font-size:22px;}
    .crafts {color:#F173AC; font-size:22px;}
    .more {color:#5F4B9F; font-size:22px;}

    /*BOX STUFF*/
    .inside {width: 980px; position:relative; margin:30px auto;}
    .inside .tl { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
    .inside .tr { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
    .inside .bl { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
    .inside .br { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }

    /*INNER BLUE BOX ROUNDED CORNERS*/
    .box2 {width: 875px; position:absolute; top:120px; left:50px; margin:30px auto;}
    .box2 .tl2 { position: absolute; width: 12px; height: 12px; background: url(../images/corners/images/tl.png); top: -1px; left: -1px; }
    .box2 .tr2 { width: 12px; height: 12px; background: url(../images/corners/images/tr.png); position: absolute; top: -1px; right: -1px; }
    .box2 .bl2 { width: 12px; height: 12px; background: url(../images/corners/images/bl.png); position: absolute; bottom: -1px; left: -1px; }
    .box2 .br2 { width: 12px; height: 12px; background: url(../images/corners/images/br.png); position: absolute; bottom: -1px; right: -1px; }

    /*BOTTOM BOX ROUNDED CORNERS*/
    .box3 {width: 468px; position:absolute; top:0px; float:left;}
    .box3 .tl3 { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
    .box3 .tr3 { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
    .box3 .bl3 { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
    .box3 .br3 { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }

    .box4 {width: 468px; position:absolute; top:0px; right:0px; float:right;}
    .box4 .tl4 { position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
    .box4 .tr4 { width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
    .box4 .bl4 { width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
    .box4 .br4 { width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }

    # June 24, 2009 at 2:14 pm

    Anyone have any ideas here? I really need some help please!

    # June 26, 2009 at 10:33 am

    Does ANYONE know how to get this right?

    # June 26, 2009 at 11:12 am

    Slice it into 3 horizontal parts and repeat the centre one on the y axis.

    # June 26, 2009 at 11:47 am

    apostrophe,

    I’m sorry, but I’m not quite clear on what you mean… Are you saying to take the #container div and make it 3 separate divs, each containing their own parts, like the header, body, and then the background between the main body and the two information pieces on the bottom of the site? I am willing to try a bunch of different solutions to fix this…

    # June 26, 2009 at 1:26 pm

    You will have to redo these images as I only had the flattened version to play with which made getting rid of the background difficult. But this should give you the idea.
    html:

    Code:
    THE CONTENT

    and the css:

    Code:
    #container {
    background:transparent url(path/to/bg_container_center.jpg) repeat-y scroll 0 0;
    float:left;
    width:982px;
    }

    #container_top {
    background:transparent url(path/to/bg_container_top.jpg) no-repeat scroll 0 0;
    float:left;
    width:982px;
    }

    #container_bottom {
    background:transparent url(path/to/bg_container_bottom.jpg) no-repeat scroll left bottom;
    float:left;
    width:982px;
    }

    # June 29, 2009 at 6:05 pm

    So let me make sure I’m understanding what you’re saying correctly…

    You are saying to put the div #container_bottom inside the #container_top, which is inside the div #container – correct? The #container_bottom would hold the main content, and then the top would be there and then the #container around it all. Is that what you meant?

    I’m sorry if my brain is just fried, but I can’t understand how that would work – could you please try to explain it a little further?

    # June 29, 2009 at 10:41 pm

    I’ve done it for you and I really don’t see how I can make it any clearer, the code and the images speak for themselves.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".