Need Help With Floating Layout! Any coding experts out there?

[DigitalDingo 0]

First: Iâm sorry, but I donât know to which sub forum this topic belongs. Maybe a kind moderator will move this in the future.

And now to my question:
Iâm currently building a new website which can be rather hard if you donât know anything about coding (!).
This is how I want my website to look like:


Now, my question is if itâs possible to make my content box float while the left box (with the buttons) stays on top (where it is now)?
I bet there is a solution, but as I said Iâm no coding expert.

At my other website I used this code to make it float:

<tr>  <td colspan="10"> [tab][/tab] <img src="images/content-top.gif" width="720" height="7" alt=""></td>[tab][/tab]</tr>[tab][/tab]<tr>  <td colspan="10" style="background:url('images/content-loop.gif');background-repeat:repeat-y;" width="685" height="100%">[tab][/tab]<div style="position:relative; left:15px; height:300px;">Here goes the content!</div>  </td>[tab][/tab]</tr>[tab][/tab]<tr>  <td colspan="10"> [tab][/tab] <img src="images/content-bottom.gif" width="720" height="8" alt=""></td>[tab][/tab]</tr>

But this code doesnât help me much now. The left box centres beside the floating content box and makes the layout useless.

Can anyone help me with a code to solve my problem? I would be extremely grateful!

[DigitalDingo 0]

A better word for "float" in this case would probably be "loop".Just to avoid any misunderstandings...

[Hercco 0]

Do you mean that the content box would have a higher height than the menu but the menu would still stay at the top?

[szupie 0]

This is best to be done with CSS. You would create a div for the header part, another div for the left box, and a last div for the content box. In your CSS, make the left box div float left and give the content box div a relative positioning.This isn't very detailed, but I lost my code that I wrote, and its layout is similar to yours. So if you need more help, ask me, and I'll look up more things for you.

[DigitalDingo 0]

Do you mean that the content box would have a higher height than the menu but the menu would still stay at the top?

Yup, that's what I mean. And the content box should expand to the the text in it.

This is best to be done with CSS. You would create a div for the header part, another div for the left box, and a last div for the content box. In your CSS, make the left box div float left and give the content box div a relative positioning.This isn't very detailed, but I lost my code that I wrote, and its layout is similar to yours. So if you need more help, ask me, and I'll look up more things for you.

Thanks, I'll try to find some CSS scripts on some coding page then.

[szupie 0]

Yay, I got my codes back from my old computer. I will show you part of my CSS file, and I added some comments to explain what some declarations mean. I deleted some of the irrelevant parts, like background colors.

/* div specs start */#topmenu {   /* In your case, this would be the Header */  margin: 5px 50px 0 50px;   /* Gives the div some space outside */  padding: 0 5px 5px 5px;   /* This gives some space between the div's border and it's inside. This keeps text inside from starting/ending rigth at the edge of the div */}/* Container of expandable middle part starts */#container {  position: relative;   /* Places div at the next spot available. Also, this makes the div expandable. Absolutely positioned divs do not resize. */  margin: 5px 50px 0 50px;  padding: 0;}#sidemenu {   /* This sidemenu will be where you would put your polls and buttons. It goes inside the container. */  float: left; /* float to the left */  padding: 0;  margin: 0;  height: 100%;   /* This statement makes the div stretch its height to all of the available space in the container, therefore allowing expansion and contraction. */  width: 185px;   /* This keeps the sidemenu at a smaller size than the content. You can use % if you want. */}#content {  position: relative;   /* Places it next to sidemenu. Also, this makes the div expandable. Absolutely positioned divs do not resize. */  height: 100%;  margin-left: 190px;   /* sidemenu width (185) + 5 */}#expander {   /* This part is required if you want something below your contents. If you don't have this, the div below will come up inside the contents div, and they will overlap */  margin: 0;  padding: 0;  height: 0;  clear: both;   /* This statement is used to make nothing go over the div. If something gets in its way, it moves. */}/* Container of expandable middle part ends */#copyright {  position: relative;  margin: 10px 50px;  padding: 0;}/* End of div specs */

Well, that's pretty much it... If you got any questions, ask.

[DigitalDingo 0]

Thank you so much for your help.Now, there is actually a little question. It doesn’t really have anything to do with the CSS script (a friend told me I probably would need PHP).My question is: when you click a button, is it possible to make the page it links to open in the content? I mean without reloading the entire page every time you click a button?I have done it with IFrames in HTML before, but I don't want to spoil a CSS layout with some ugly looking frames. ;)Can anybody help me here?

[Hercco 0]

My question is: when you click a button, is it possible to make the page it links to open in the content? I mean without reloading the entire page every time you click a button?

1064322157[/snapback]

It is possible, but would also mean that you would have to load all the "pages" which you want to be opened without a reload, thus making your index file larger.

 

Anyways, if the content isn't anything heavy that would actually be quite nice to browse.

 

This is how you do it:

 

You make each of the "pages" a separate <div>. You should probably make a CSS class called content (or whatever) and use it for all the divs. The class would contain at least the positioning code, so that each of your "pages" (ie. divs) would appear at the same place.

 

Each of these divs should be given an unique id. Such as "links" or "guestbook".

 

A div could look like this:

 

<div id="guestbook">Guestbook goes here</div>

Then with CSS, you set one div:

 

	display: block;

And all others

	display: none;

Then you need to use javascript to change the "page". The function could look like this:

 

  function change( item )  {  	  	element=document.getElementById(item);  	current.style.display="none";	  	element.style.display="block";  	current = element;  }

Notice that before the function, you should have set a value for "current". This line before the function:

 

	current=document.getElementById("index");

"Index" being there the id of the div which you which to have opened as a default.

 

 

About that function, it simply gets the element by the id given as a parameter to it, sets the currently active page not to be displayed and the new element to be displayed as block. Finally the now activated element is set as "current" for the next time the function is called.

 

 

For the buttons simply user onClick like this:

 

<span onclick="change('guestbook');">Guestbook</span> 

The html element of course can be whatever you want (and image for example). But don't use links (<a></a> tags) since you always have to specify href value for them. You could put # there but it would cause annoying scrolls to the top. I'd recommend usings <span>s or images and using a CSS class for them specifying:

cursor: pointer;

which makes the cursor appear as the hand over the element, thus indicating a link-like behavior.

 

And that's it!

 

 

One problem arises with this kind of design though. It is the same as with using iFrames: people cannot link to exact pages. However you could do somekind of workaround for it, with PHP for example. Offer links to users with the page intended to be displayed specified as GET data. Like this: yousite.com/index.php?page=guestbook . And then with PHP set which div is set as display: block; on the page load.

[DigitalDingo 0]

Hmm... Iâve played a little with these codes, but I just canât figure out where to put them. Itâs especially the JavaScript part I have troubles with. And do you mean, that I should put all these codes â and the all the pages â in the same file?
Maybe you could put your codes together so I can see where to put them in my own file.
Maybe I should also tell you, that the layout I attached to this thread is no longer the one Iâm working with. If it could help you, you can find my site at http://forums.xisto.com/no_longer_exists/ and see the source code.

And thanks for helping me here!

[szupie 0]

Well, you can put your javascript in your html, inside the script tag like this:

<script type="text/javascript">/*<![CDATA[*/print "This is the script..."/*]]>*/</script>

Make sure that is placed in the head.
And for the CSS, you can put them like this:

<style type="text/css">/*<![CDATA[*/thing {  color: #fff;}/*]]>*/</style>

, also in the head area.

And yes, he meant to put all the pages in one file, and use javascript to show and hide them. For example, when people go to your home, they would go to index.htm, and javascript will show only the "home" portion, while hiding all the other portions of the page. When they go to, say, an "about" page, they would not go to a new page, but instead, javascript will hide the "home" portion, and show the "about" portion only. If your pages are really large, it would take a long time to load everything on just the index page. But if all of your pages are really small and you have only a few pages, that idea could be used.

[DigitalDingo 0]

Iâve tried to get this to work â but⌠I have two problems. The first is in this script:

current=document.getElementById("index");  function change( item )  {  	  	element=document.getElementById(item);  	current.style.display="none";	  	element.style.display="block";  	current = element;  }

What should I put instead of âitemâ? Should I write âdivâ or something like that?
Also, I canât really this script to work:

<span onclick="change('guestbook');">Guestbook</span> 

The âbuttonâ shows up as plain text.

Iâve tried looking for reference on different coding sites, but I canât find the answer.
Can you help me?

[ruben1405241511 0]

Well, DigitalDingo doesn't seem to be hosted anymore, but just in case that someone else reads this topic afterwards:

It is a very bad idea to change site content using Javascript, because there are a lot of users with JS turned off or not even integrated, who would not be able to view your site properly. Also the function document.getElementById is not supported by all the old browsers, there are two alternatives:

document.all (old Microsoft Internet Explorers) and document.layers (old Netscape browsers). So do yourself a favor and don't rely on JS for such essential things as showing and hiding content.

If you do, then be sure to do it so, that the site is still viewable for those who don't have the JS support. In this case for example you could do it like this:

<div id="firstpage"><a name="first">...</a></div><div id="secondpage"><a name="second">...</a></div><div id="thirdpage"><a name="third">...</a></div>

and then you can dynamically hide the layers onLoad (be sure to set it up so that you use the DOM-model, the IE-model and the Netscape-model (getElementById, all, layers) to provide maximum compatibility.

Btw. if you're worried that your index file might get to big, but you totally don't want to reload a page (which is stupid I think, but well.. there might be good reasons for this), you can make use of the AJAX-code (JS communicates with the server and gets the new content when it needs it. AJAX tends to get more widely supported, but it's still quite new!

 

 

current=document.getElementById("index");  function change( item )  {  	  	element=document.getElementById(item);  	current.style.display="none";	  	element.style.display="block";  	current = element;  }

What should I put instead of “item”? Should I write “div” or something like that?

 

Oh and if you, DigitalDingo, are still wondering what to put for item, the correct syntax would be to call the function change, the following way:

<a href="java script:change('the_id_of_the_element_you_want_to_show')">Show Second Page, hide old Page</a>

Get it? Remember that's not so great code, if you really intend using something like this, post back and we can work something out.