Teach moi pls?

[Call]

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<3

[Call]

*bump*

[Mentor]

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

[Call]

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 :)

[Ceoxe]

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


<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>

[Swastika]

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

[Call]

Cheers ill check that site and code out.

[Replicada]

Javascript for iframe expanding:


<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 :P

Just a warning.

Enjoy x.x
Rep would be appreciated...

[Call]

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

[Mentor]

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



<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

[Call]

+ rep :D
I think you should make a whole layout coding tutorial as this is the kind of help i need.

I now need to work out how to code it so if i put in more content vertically it wont stretch lols :)
but this is the kind of stuff i need :D

[Mentor]

why wouldnt you want it to streatch? plus u can easy add a max-hight attribute to stop it, then set the overflow to auto or somthing so u get the scroll bars o.0

[Call]

ye i do want to stretch but i need like how to slice it so it wont go all ghay lol