Discover Habbo's history
Treat yourself with a Secret Santa gift.... of a random Wiki page for you to start exploring Habbo's history!
Happy holidays!
Celebrate with us at Habbox on the hotel, on our Forum and right here!
Join Habbox!
One of us! One of us! Click here to see the roles you could take as part of the Habbox community!


Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Teach moi pls?

  1. #1
    Join Date
    Oct 2005
    Posts
    401
    Tokens
    0

    Default Teach moi pls?

    Can anyone teach me how to code layouts that expand like multiple box's
    like quality coding.

    I offer 6-8hc uk
    maybe more if you help me do a good job
    Please post
    Musicicon is
    currently

  2. #2
    Join Date
    Oct 2005
    Posts
    401
    Tokens
    0

    Default

    *bump*
    Musicicon is
    currently

  3. #3
    Join Date
    Aug 2004
    Location
    UK
    Posts
    11,283
    Tokens
    2,031

    Latest Awards:

    Default

    Basicly you just want divs, for content boxs.

    <div style="width:200px;background-colour:#ff0000;"> <div style="width:200px;background-colour:#ee0000;font-weight:bold;">Title</div>
    keep writeing in here and it will keep expanding...
    bla bla bla
    </div>


    - you may want to check some of the css attributes as i couldnt remember the font weight one for bolding so its probs spelt wrong

  4. #4
    Join Date
    Oct 2005
    Posts
    401
    Tokens
    0

    Default

    Ye, i need someone clever like you to tell me how i can intergrate this into a layout like many layouts are coded like in this section

    Like i can make a all down layout expand
    but if its got like for example


    Banner here

    Menu Main Updates

    When i try pull down the main it mucks up the 2 side ones any help appreciated with rep and furnis
    Musicicon is
    currently

  5. #5
    Join Date
    Jan 2007
    Location
    Ontario, Canada
    Posts
    140
    Tokens
    0

    Default

    I dont know about this code but i tihnk its right, correct m if its not:

    HTML Code:
     <table width="99&#37;" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <th height="27" background="Title.jpg" class="style3">Welcome </th>
                </tr>
                <tr>
                  <td bgcolor="#FFFFFF" class="style2">heres the ax[anding code </td>
                </tr>
              </table>

  6. #6
    Join Date
    May 2006
    Location
    Fatherland
    Posts
    2,414
    Tokens
    0

    Latest Awards:

    Default

    If you want a mentor go to www.hellboundhackers.org
    You can hire mentors on coding i think.

  7. #7
    Join Date
    Oct 2005
    Posts
    401
    Tokens
    0

    Default

    Cheers ill check that site and code out.
    Musicicon is
    currently

  8. #8
    Join Date
    Apr 2005
    Posts
    231
    Tokens
    0

    Default

    Javascript for iframe expanding:

    Code:
    <script type="text/javascript">
                //<![CDATA[
                window.onload = function() {
                    var f = document.getElementById("IframeName");
                    function resize() {
                        var h = "";
                        var w = "";
                        if (f.contentDocument) {
                            h = f.contentDocument.documentElement.offsetHeight + 20 + "px";
                            // can't find anything for Opera and Firefox that works for the width. OffetWidth doesn't work right either.(f.contentDocument.documentElement,"").getPropertyValue("width");
                        } else if (f.contentWindow) {
                            h = f.contentWindow.document.body.scrollHeight + 5 + "px";
                        } else {
                            return;
                        }
                        f.setAttribute("height",h);
                        f.parentNode.setAttribute("height",h);
                    }
                    if (window.addEventListener) {
                        f.onload = resize;
                    } else if (f.attachEvent) {
                        f.attachEvent("onload", resize);
                    } else {
                        return;
                    }
                    resize();
                }
                //]]>
                        </script>
    You way want to edit some of the pixel digits in the coding, as it sets the size of the iframe pre expanding too. Entirely up to you ^.^

    Hope I helped
    Only issue with this is, with image sliced templates your layout goes crazy, so best to stay with tabled layout with this kind of feature

    Just a warning.

    Enjoy x.x
    Rep would be appreciated...
    Hosting / Shoutcast / Domains / Web Design
    VPS / Dedis / Gaming Servers(Coming Soon)

  9. #9
    Join Date
    Oct 2005
    Posts
    401
    Tokens
    0

    Default

    I had that code above, Thinkhabbo used it.
    Ye thats what i need help with i slice and it goes all eurghh bad...
    Still needing help pls
    Musicicon is
    currently

  10. #10
    Join Date
    Aug 2004
    Location
    UK
    Posts
    11,283
    Tokens
    2,031

    Latest Awards:

    Default

    Quote Originally Posted by JĒmie View Post
    If you want a mentor go to www.hellboundhackers.org
    You can hire mentors on coding i think.
    o.0 that just looks like a bit of a script kiddies resource, if they wanna be taken seriously they can at least ether use the terminology correctly or simply not use it at all. People look stupid when they use words they dont understand and then use them wrongly "/ i never get why people dont.

    Anyway, so you want a more complex layout (this would be simpler if fluidty was not an issue, or you just used a table, css2 is still not really ready for more advanced functionalty... or at least not in an easy way, hopefuyly the css3 spec will be a little more useful.

    So going with your exsample.

    You want a banner
    3 colums with menu, main section and updates
    and a footer

    First, you split the page in to this 3 arias

    <div>banner</div>
    <div> main </div>
    <div>footer </div>

    Divs fill a whole line, so they will all go underneath one another

    Then you want to set out the middle section for the 3 colums

    HTML Code:
    <div>banner</div>
    <div> 
    
    
    <div id="updates" style="float:right; width:180px; ">
    <div style="width:200px;background-colour:#ff0000;"> <div style="width:200px;background-colour:#ee0000;font-weight:bold;">updates</div>
    some updates
    </div>
    </div>
    
    
    <div id="menu" style="float:left; width:180px; ">
    <div style="width:200px;background-colour:#ff0000;"> <div style="width:200px;background-colour:#ee0000;font-weight:bold;">menu title</div>
    Menu in here.... bla bla bla
    </div>
    </div>
    
    <div>Main Content all just fits here. Just type away etc</div>
    
    
    </div>
    <div>footer </div>

    As you may have noticed, wiredly enough for alignment reasons, you have to have the right colum first, then the left, and the middle at the end. Its wired but floatings still a little dodgy even like that. Floated layers are no longer noticed by other layers, although text and images will move out of the way automaticly.

    You may want to add clear:all in to the style of the footer, to stop menu or updates getting long and over runing it


    ps. no garentees the above code will actualy work right, im v tired, and didnt check any spellings, attributes or fromating etc in the code. this jist should be correct though

Page 1 of 2 12 LastLast

Posting Permissions

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