 Breaking Html page into section, Breaking Html page into section |
  |
| ammours |
 Oct 16 2008, 01:24 PM
Post
#1
|
|
Group: Members Posts: 6 Joined: 16-October 08 Member No.: 6,915  |
Hi Folks,
I am trying to break my html screen into sections so that I can add html code to every section without affecting others. For example, I need to divide my screen into 30% / 70% sections as shown below using <div> tag. The most important part is that I should be able to add text tags in every section relative to those div sections. For example, adding "Hello" in div one and Adding "Section 2" in dev2 would result in the below layout (---. * and | are virtual for illustration). I tried this code but it seems to be adding some break lines.. <HTML> <HEAD> <TITLE>A simple frameset document</TITLE> </HEAD> Testing:<br> <div style="position:relative;width:30% "> <br> Text</div> <div style="position:relative; left:30%; color:red; width=70%"><br> Text</div> </HTML> Please help! ---------------------*----------------------------------------------------------------------- | Hello--------------| Section B |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| ---------------------*----------------------------------------------------------------------- This post has been edited by ammours: Oct 16 2008, 01:28 PM |
  |
 
|
| pandy |
Oct 16 2008, 01:54 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
'position: relative' won't do this. A common approach is to use floats. You can find examples of this and other methods here.
http://css-discuss.incutio.com/?page=TwoColumnLayouts |
|
|
|
| Dr Z |
Oct 16 2008, 02:10 PM
Post
#3
|
|
Advanced Member Group: Members Posts: 221 Joined: 23-August 06 Member No.: 11 |
For another approach, also see this:
CSS based frames |
|
|
|
| ammours |
Oct 16 2008, 02:43 PM
Post
#4
|
|
Group: Members Posts: 6 Joined: 16-October 08 Member No.: 6,915 |
Alright. Thank you.. I will try them and get back to you..
however, it is not only about two sections. I may need to have like 10 sections and all innerhtml should be controlled. Will css float help in that case? Will it help me to change innerhtml of any section and will it be inserted within those div dimensions? |
|
|
|
| pandy |
Oct 16 2008, 03:43 PM
Post
#5
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Depends on what you mean. Can you explain?
|
|
|
|
| ammours |
Oct 16 2008, 04:38 PM
Post
#6
|
|
Group: Members Posts: 6 Joined: 16-October 08 Member No.: 6,915 |
QUOTE(pandy @ Oct 16 2008, 04:43 PM)  Depends on what you mean. Can you explain? Yes. I want to update the innerhtml based on a web service result in a specific section of my html document. That means, I want to get,using Ajax, a servlet result then put it in Section X which was previously defined in the html as sub-division of Section Y. Let's Say I have the following: Section A ----- Section B ----- Section C I want to relatively insert the html code in Section C.. Section A is the parent , Section B and C shares the screen 30% / 70% as shown above. Thanks a lot Pandy! |
|
|
|
| pandy |
Oct 16 2008, 04:53 PM
Post
#7
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I don't see how you get the content/markup there matters. Question is what you want the layout to look like. Two coumns, 10 sections... It's hard to get a picture of what you want.
|
|
|
|
| ammours |
Oct 16 2008, 05:50 PM
Post
#8
|
|
Group: Members Posts: 6 Joined: 16-October 08 Member No.: 6,915 |
QUOTE(pandy @ Oct 16 2008, 05:53 PM) I don't see how you get the content/markup there matters. Question is what you want the layout to look like. Two coumns, 10 sections... It's hard to get a picture of what you want. Probably, I am not explaining my goal in a good way.. Here are some more details... The html code is built dynamically form an xml file. This xml file has sections defined in it and a section has parent and children. Section means a part of the HTML screen. For example, a section can have 30% of the screen width ( of the parent section) and other can have the other 70%. ---------------------*----------------------------------------------------------------------- | Hello--------------| Section B |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| |--------------------| ---------------------*----------------------------------------------------------------------- Now, the question is how to build those sections into the html code so that when I modify their innerhtml to write text information, they will be placed correctly into their position in the section. I gave you some examples: Parent is the container with 100% full screen, Section A has 30% and Section B 70% that would result in: <HTML> <HEAD> <TITLE>A simple frameset document</TITLE> </HEAD> <div id="main"> <div id ="left"> </div> <div id ="right"> </div> </div> </HTML> How can I modify above code so that when I decide to invoke right.innerhtml="ANY HTML CODE" will result in text inserted into the correct Section B which is on the right 70% of the screen width..? I hope that is clearer... Don't forget that I am looking for something dynamic applicable to any Section. Thanks for any person who can help here.!! Thanks This post has been edited by ammours: Oct 16 2008, 06:03 PM |
|
|
|
| pandy |
Oct 17 2008, 07:12 AM
Post
#9
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
So you basically have two columns and then you want to stuff data and markup into them? I don't see why the layouts I linked to wouldn't work.
|
|
|
|
| ammours |
Oct 17 2008, 05:05 PM
Post
#10
|
|
Group: Members Posts: 6 Joined: 16-October 08 Member No.: 6,915 |
QUOTE(pandy @ Oct 17 2008, 08:12 AM) So you basically have two columns and then you want to stuff data and markup into them? I don't see why the layouts I linked to wouldn't work. Thanks. I am using now left float with width and it works.. Other related question... If I use too many css float left with width (around 100 div sections on one html page) , would that affect the performance when the page is loaded into the browser? |
|
|
|
| pandy |
Oct 17 2008, 05:15 PM
Post
#11
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I don't think they would affect performance any more than a hundred table cells would.
 But now I'm confused again. The two columns seem to be off. How are those 100 floats going to be arranged? There are limitations if you intend to just float them freely one after the other so they fill the screen row by row, so to speak. If that's what you want you should be aware that it won't work unless the floats have equal height. |
|
|
|
| ammours |
Oct 17 2008, 05:25 PM
Post
#12
|
|
Group: Members Posts: 6 Joined: 16-October 08 Member No.: 6,915 |
QUOTE(pandy @ Oct 17 2008, 06:15 PM) I don't think they would affect performance any more than a hundred table cells would. But now I'm confused again. The two columns seem to be off. How are those 100 floats going to be arranged? There are limitations if you intend to just float them freely one after the other so they fill the screen row by row, so to speak. If that's what you want you should be aware that it won't work unless the floats have equal height. It is quite complex design .. (Sections in Section and all sections are equal in heights and their total width=100%).. they have equal heights. Thanks for the feedback and have a nice weekend. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 23rd April 2024 - 07:35 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC