SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot blackman890's Avatar
    Join Date
    Feb 2005
    Location
    Iceland
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to get content to go 100%

    Hello there.

    I have looked at about dozens of articles and examples but none of them explain the problem I am in.

    Take a look at the following site: http://dyraheimur.is/web/wordpress/?page_id=2

    As you can see, the content is ugly, I need the content to go 100%. Is there anyway to implement something like that?


    Sincerely:
    Jonatan Nilsson

    P.S.
    I know my website doesn't validate and I am working on it

    [EDIT]
    Validates now
    Jonatan Nilsson
    Iceland
    C# Programmer - XML & DirectX (y = hx + c)

  2. #2
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    What do you mean by "go 100%" ??




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  3. #3
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, what do u mean? do u mean make the gradient in the content be on the bottom? if so i'd make that a seperate div and fake it. the text in the content area will then just expand vertically as needed.
    Steve Davis

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    To get the content to fill at least 100% of the window height you need:

    html, body {height : 100%; overflow : visible;}
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Rethink how you do your background images, only one the wrapper can be 100&#37; high , so thats were your main repeated y background image has to go

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Quote Originally Posted by blackman890
    I have looked at about dozens of articles and examples but none of them explain the problem I am in.
    Then you haven't read mine or looked at the FAQ as 100&#37; height has been done to death in these forums

    If you are talking about those shadows then there are 2 ways you could do this.

    You could place your footer outside of the main outer and apply your images to it. Then you simply drag the footer back into view.

    Or you could absolutely place the images at the bottom of the main outer.

    1st method:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Kafari &raquo; About</title>
    <meta name="generator" content="WordPress 2.2.2" />
    <!-- leave this for stats please -->
    <style type="text/css" media="screen">
    /* commented backslash hack \*/ 
    html, body{height:100%;} 
    /* end hack */
    
    body
    {
        margin: 0;
        padding:0;
        /*background: #808080;
        color: #333333;*/
        background: url(http://dyraheimur.is/web/wordpress/images/background.jpg) #2F3D45 repeat;
        height:100%;
    }
    
    h1, h2, p, div, form, ul, li, dl, dt, dd { margin: 0px; padding: 0px; }
    
    a:link { color: #001e5e; text-decoration: none; }
    a:visited { color: #001e5e; text-decoration: none; }
    a:hover { color: #001e5e; text-decoration: underline; }
    a:active { color: #001e5e; text-decoration: none; }
        
    #main
    {
        margin: 0px auto 0px auto;
        width: 800px;
        min-height:100%;
        border-left:solid 2px #000000;
        border-right:solid 2px #000000;
        background: #ffffff url(http://dyraheimur.is/web/wordpress/images/content_shadow.gif) repeat-y 200px 0;
    }
    * html #main{height:100%;}
    
    #header
    {
        height:196px;
        background:#ffffff;
        /*color:#000000;*/
        /*border:solid #000000;
        border-width:0px 0px 2px 0px;*/
    }
    
    #menu
    {
        width: 200px;
        float: left;
        /*border: 1px solid #000000;*/
        /*background: #c0c0c0;*/
        /*color: #333333;*/
        /*height: 400px;*/
        padding-bottom:200px;
        /*background: #ffffff url(http://dyraheimur.is/web/wordpress/images/menu_bottom.gif) bottom left no-repeat;*/
    }
    
    #content
    {
        margin: 0px 0px 0px 200px;
        /*border: 1px solid #000000;*/
        /*background: #ffffff;*/
        /*color: #333333;*/
        padding: 20px 2px 100px 20px;
        position :relative;
    }
    
    #footer{
        width: 800px;
        height: 200px;
        margin:-200px auto 0;
      background:url(http://dyraheimur.is/web/wordpress/images/menu_bottom.gif) bottom left no-repeat;
    
    }
    #footer div
    {
        width: 600px;
        height: 200px;
        margin-left:200px;
        background: url(http://dyraheimur.is/web/wordpress/images/content_bottom.gif) no-repeat left bottom;
    }
    
    a img {    border: none; }
    
    #menu ul { list-style-type:none; }
    #menu ul.top { background: url(http://dyraheimur.is/web/wordpress/images/bubble_top.gif) no-repeat; padding-top:4px;}
    #menu li { margin-left:5px;}
    #menu li.pagenav { background: url(http://dyraheimur.is/web/wordpress/images/menu_bubble.gif) no-repeat; padding:6px 0px 0px 30px; height:30px; margin-left:0px; font: bold 14px arial; color:#ffffff;}
    
    /*  
    CSS-styles for the ANIga gallery Wordpress Plugin from Michael Naab
    http://animalbeach.net
    */
    
    .gallery_clear {
        clear:both;
    }
    
    .gallery_list {
        padding-top:25px;
    }
    
    .gallery_alignright {
        float: right;
    }
    .gallery_alignleft {
        float: left;
    }
    
    .gallery_aligncenter {
        text-align:center;
    }
    
    .gallery_list_p {
        padding-right:10px;
        padding-left:10px;
        width:65%;
    }
    
    .gallery_pic_border {
        border:1px solid #ddd;
    }
    
    .gallery_select {
        font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }
    
    /* this is for a constant viewing position when clicking through pictures */
    .gallery_slds_td {
        height:400px;
        width:400px;
        /*this is for black stripes (just like 16 to 9 in TV) */
        background:black;
    }
    
    .gallery_slds_table {
        height:400px;
        width:400px;
        border:none;
    }
    
    .gallery_thumb_td {
        padding-top: 10px;
        padding-right: 10px;
        padding-left: 10px;
    /*    border:1px solid #ddd;*/
    /*    background-color:#d5d6d7;*/
        font-size:0.9em;
        line-height:0.9em;
    }
    
    /*.gallery_slds_filter {
        filter:progid:DXImageTransform.Microsoft.Fade();
    }*/
    
    .gallery_error {
        border:1px solid #ddd;
        background:#FFFF99;
        color:#000000;
        padding:10px;
        margin:30px;
        text-align:center;
    }
    
    .gallery_meta {
        color: #777;
        padding-top: 5px;
        margin: 30px 0;
        clear: both;
        text-align: center;
    }
    
    .gallery_alt {
        margin: 0;
        padding: 10px;
        background-color: #f8f8f8;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    
    .gallery_pad {
        padding-top: 20px;
    }
    
    .gallery_line_h {
        line-height:20px;
    }
    
    .gallery_high {
        color:#777;
    }
    
    
    
    
    </style>
    </head>
    <body>
    <div id="main">
        <!--<div id="rap">
    <h1 id="header"><a href="http://dyraheimur.is/web/wordpress/">Kafari</a></h1>-->
        <div id="header"> <img src="http://dyraheimur.is/web/wordpress/images/banner.gif" alt="Kafari - kafari@kafari.is - 899-9909"/> </div>
        <!-- end header -->
        <!-- begin sidebar -->
        <div id="menu">
            <ul class="top">
                <li class="pagenav">Valmoguleikar</li>
                <li>
                    <ul>
                        <li class="page_item current_page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=2" title="About">About</a></li>
                        <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=3" title="Prufa">Prufa</a></li>
                        <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=8" title="Myndagaller&#253;">Myndagaller&#253;</a>
                            <ul>
                                <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=11" title="Myndir">Myndir</a>
                                    <ul>
                                        <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=13" title="Bryggjuvi&#240;ger&#240;ir">Bryggjuvi&#240;ger&#240;ir</a></li>
                                        <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=12" title="Skipavi&#240;ger&#240;ir">Skipavi&#240;ger&#240;ir</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- end sidebar -->
        <div id="content">
            <div class="post" id="post-2">
                <h3 class="storytitle"><a href="http://dyraheimur.is/web/wordpress/?page_id=2" rel="bookmark">About</a></h3>
                <div class="storycontent">
                    <p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.</p>
                </div>
                <!--<div class="feedback">
                        </div>-->
            </div>
        </div>
    </div>
    <!-- begin footer -->
    <div id="footer"><div></div></div>
    </body>
    </html>
    2nd method :
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Kafari &raquo; About</title>
    <meta name="generator" content="WordPress 2.2.2" />
    <!-- leave this for stats please -->
    <style type="text/css" media="screen">
    /* commented backslash hack \*/ 
    html, body{height:100%;} 
    /* end hack */
    
    body
    {
        margin: 0;
        padding:0;
        /*background: #808080;
        color: #333333;*/
        background: url(http://dyraheimur.is/web/wordpress/images/background.jpg) #2F3D45 repeat;
        height:100%;
    }
    
    h1, h2, p, div, form, ul, li, dl, dt, dd { margin: 0px; padding: 0px; }
    
    a:link { color: #001e5e; text-decoration: none; }
    a:visited { color: #001e5e; text-decoration: none; }
    a:hover { color: #001e5e; text-decoration: underline; }
    a:active { color: #001e5e; text-decoration: none; }
        
    #main
    {
        margin: 0px auto 0px auto;
        width: 800px;
        min-height:100%;
        border-left:solid 2px #000000;
        border-right:solid 2px #000000;
        position:relative;
        background:#fff url(http://dyraheimur.is/web/wordpress/images/content_shadow.gif) repeat-y 200px 0;
    }
    * html #main{height:100%;}
    
    .base{
      background: #ffffff url(http://dyraheimur.is/web/wordpress/images/menu_bottom.gif) bottom left no-repeat;    
    position:absolute;
    z-index:1;
    bottom:0;
    left:0;
    width:200px;
    height:200px;
    }
    .base span{
        width:600px;
        position:absolute;
        left:200px;
        height:100px;
        bottom:0;
        background: #ffffff url(http://dyraheimur.is/web/wordpress/images/content_bottom.gif) no-repeat;
    
    }
    
    #header
    {
        height:196px;
        background:#ffffff;
        /*color:#000000;*/
        /*border:solid #000000;
        border-width:0px 0px 2px 0px;*/
    position:relative;z-index:2;
    }
    
    #menu
    {
        width: 200px;
        float: left;
        /*border: 1px solid #000000;*/
        /*background: #c0c0c0;*/
        /*color: #333333;*/
        /*height: 400px;*/
        padding-bottom:200px;
        /*background: #ffffff url(http://dyraheimur.is/web/wordpress/images/menu_bottom.gif) bottom left no-repeat;*/
    z-index:2;
    position:relative;
    }
    
    #content
    {
        margin: 0px 0px 0px 200px;
        /*border: 1px solid #000000;*/
        /*background: #ffffff;*/
        /*color: #333333;*/
        padding: 20px;
        position :relative;
        z-index:2;
    }
    
    a img {    border: none; }
    
    #menu ul { list-style-type:none; }
    #menu ul.top { background: url(http://dyraheimur.is/web/wordpress/images/bubble_top.gif) no-repeat; padding-top:4px;}
    #menu li { margin-left:5px;}
    #menu li.pagenav { background: url(http://dyraheimur.is/web/wordpress/images/menu_bubble.gif) no-repeat; padding:6px 0px 0px 30px; height:30px; margin-left:0px; font: bold 14px arial; color:#ffffff;}
    
    /*  
    CSS-styles for the ANIga gallery Wordpress Plugin from Michael Naab
    http://animalbeach.net
    */
    
    .gallery_clear {
        clear:both;
    }
    
    .gallery_list {
        padding-top:25px;
    }
    
    .gallery_alignright {
        float: right;
    }
    .gallery_alignleft {
        float: left;
    }
    
    .gallery_aligncenter {
        text-align:center;
    }
    
    .gallery_list_p {
        padding-right:10px;
        padding-left:10px;
        width:65%;
    }
    
    .gallery_pic_border {
        border:1px solid #ddd;
    }
    
    .gallery_select {
        font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }
    
    /* this is for a constant viewing position when clicking through pictures */
    .gallery_slds_td {
        height:400px;
        width:400px;
        /*this is for black stripes (just like 16 to 9 in TV) */
        background:black;
    }
    
    .gallery_slds_table {
        height:400px;
        width:400px;
        border:none;
    }
    
    .gallery_thumb_td {
        padding-top: 10px;
        padding-right: 10px;
        padding-left: 10px;
    /*    border:1px solid #ddd;*/
    /*    background-color:#d5d6d7;*/
        font-size:0.9em;
        line-height:0.9em;
    }
    
    /*.gallery_slds_filter {
        filter:progid:DXImageTransform.Microsoft.Fade();
    }*/
    
    .gallery_error {
        border:1px solid #ddd;
        background:#FFFF99;
        color:#000000;
        padding:10px;
        margin:30px;
        text-align:center;
    }
    
    .gallery_meta {
        color: #777;
        padding-top: 5px;
        margin: 30px 0;
        clear: both;
        text-align: center;
    }
    
    .gallery_alt {
        margin: 0;
        padding: 10px;
        background-color: #f8f8f8;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    
    .gallery_pad {
        padding-top: 20px;
    }
    
    .gallery_line_h {
        line-height:20px;
    }
    
    .gallery_high {
        color:#777;
    }
    
    
    
    
    
    </style>
    </head>
    <body>
    <div id="main">
        <!--<div id="rap">
    <h1 id="header"><a href="http://dyraheimur.is/web/wordpress/">Kafari</a></h1>-->
        <div id="header"> <img src="http://dyraheimur.is/web/wordpress/images/banner.gif" alt="Kafari - kafari@kafari.is - 899-9909"/> </div>
        <!-- end header -->
        <!-- begin sidebar -->
        <div id="menu">
            <ul class="top">
                <li class="pagenav">Valmoguleikar</li>
                <li>
                    <ul>
                        <li class="page_item current_page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=2" title="About">About</a></li>
                        <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=3" title="Prufa">Prufa</a></li>
                        <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=8" title="Myndagaller&#253;">Myndagaller&#253;</a>
                            <ul>
                                <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=11" title="Myndir">Myndir</a>
                                    <ul>
                                        <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=13" title="Bryggjuvi&#240;ger&#240;ir">Bryggjuvi&#240;ger&#240;ir</a></li>
                                        <li class="page_item"><a href="http://dyraheimur.is/web/wordpress/?page_id=12" title="Skipavi&#240;ger&#240;ir">Skipavi&#240;ger&#240;ir</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- end sidebar -->
        <div id="content">
            <div class="post" id="post-2">
                <h3 class="storytitle"><a href="http://dyraheimur.is/web/wordpress/?page_id=2" rel="bookmark">About</a></h3>
                <div class="storycontent">
                    <p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.</p>
                </div>
                <!--<div class="feedback">
                        </div>-->
            </div>
        </div>
        <div class="base"><span></span></div>
    </div>
    </body>
    </html>
    Read the Faqs on 100% height and putting a footer at the bottom (and also the 3 col sticky thread is relevant to this.)


    Hope it helps

  7. #7
    SitePoint Zealot blackman890's Avatar
    Join Date
    Feb 2005
    Location
    Iceland
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks man, your first method worked

    I think the main problem I was having is how I displayed the background images and therefore chose the wrong elements.

    Thanks again
    Jonatan Nilsson
    Iceland
    C# Programmer - XML & DirectX (y = hx + c)


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
  •