CSS with three columns- middle fixed, sides adjust?

I am new to CSS. I am trying to produce a webpage that utilizes a 3 column structure. The center column will be a fixed size and will be always centered in the browser, however the left and right columns will need to automatically adjust themselves to appropriate sceen size/resolution. I would like to utilize DW's layout templates to do this as I am new to the CSS process, but I am unsure of which one to use.
Thanks.

I would like to utilize DW's layout templates to do this as I am new to the CSS process, but I am unsure of which one to use.
None of them.    I think they're terribly bloated and hard to understand.
Here's a basic 3-column liquid layout.  View Page Source to see the code.
http://alt-web.com/TEMPLATES/3-col-liq-layout.shtml
If this is your first project with CSS layouts, I think you will have a much easier time if you use a fixed-width centered layout.
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
For more great CSS layouts, you can't go wrong with Project Seven's Page Packs or CSS Layout Magic.
http://www.projectseven.com/products/templates/pagepacks/iq/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
www.alt-web.com/
www.twitter.com/altweb

Similar Messages

  • Photo Gallery combined with three column CSS

    Hi, I am trying to implement your photo gallery into our
    school site and I am having trouble with the layout. I am using a
    three-column layout created with CSS and JS, and then placing the
    photo gallery inside of this. What happens is when you pull up the
    page the three column layout does not position everything correctly
    until you resize the browser window (ever so slightly). Help, have
    been staring at CSS and JS code now for about a month and cannot
    get it to behave, any help would be greatly appreciated. Thanks.
    HSPVA Photo
    Gallery

    "kjuliff" <[email protected]> wrote in message
    news:eqij22$are$[email protected]..
    >I can reproduce your problem, gnd4evr&evr. I have XP
    an IE7 and FF2.
    >It's fine
    > in FF2 but not in IE7.
    >
    > I have a similar problem, and I think it's related. This
    problem
    > really needs
    > addressing!
    >
    > Go to
    http://www.coolabah.com/spry/demos/gallery/
    and look at the
    > bottom of
    > the page (in either IE or FF). You will see a google
    adsense div.
    > Although it
    > is specified in it's div tab as being 15 px in height,
    it takes up
    > much more
    > than that.
    >
    > I HAD wanted to have these google links at the top of my
    gallery, but
    > cannot
    > as I cannot force the div to be only 15px in height.
    >
    > I posted this problem a few weeks ago but no one
    answered.
    Your Google ads are in an iframe. This rule will get you
    started
    iframe {
    height: 2em !important;
    position: absolute;
    top: 650px;
    You can leave the position static if you like, and it will
    move up and
    down with your images - I found that a bit distracting,
    though. If you
    leave it static, use a top-margin to establish space between
    your image
    and the ads.
    The !important notation is required for the height,
    indicating either a
    conflict somewhere in your markup or CSS, or poor Google code
    (not
    uncommon).
    Al Sparber - PVII
    http://www.projectseven.com
    Extending Dreamweaver - Nav Systems | Galleries | Widgets
    Authors: "42nd Street: Mastering the Art of CSS Design"

  • Help with three column layout please

    Hello All
    I have been struggling with a three column layout to incorporate inserted images on the right. Please see http://www.greenpatchwebsites.com/ridgeway/index2.html
    At the moment I have resorted to a background image but I am not happy with the quality and lack of positioning in relation to the text.
    I have looked at lots of sites re faux / three columns etc but I can't make it work. As you will see from the attached css there are lot of divs because of the expanding box and I am getting in a muddle.
    Expert help here would be very gratefully received and I thank you in advance.

    Hi There,
    You can refer to 3 column fixed template (with header and footer) provided by DW itself. For reference how to make a 3 column layout use following code. Just save the whole of this as .html file and preview. Go through the structure and css classes in the head to understand the layout.
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body  {
         font: 100% Verdana, Arial, Helvetica, sans-serif;
         background: #666666;
         margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
         padding: 0;
         text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
         color: #000000;
    .thrColFixHdr #container {
         width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
         background: #FFFFFF;
         margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
         border: 1px solid #000000;
         text-align: left; /* this overrides the text-align: center on the body element. */
    .thrColFixHdr #header {
         background: #DDDDDD;
         padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    .thrColFixHdr #header h1 {
         margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
         padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .thrColFixHdr #sidebar1 {
         float: left; /* since this element is floated, a width must be given */
         width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
         background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
         padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
    .thrColFixHdr #sidebar2 {
         float: right; /* since this element is floated, a width must be given */
         width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
         background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
         padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
    .thrColFixHdr #mainContent {
         margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
         padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    .thrColFixHdr #footer {
         padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
         background:#DDDDDD;
    .thrColFixHdr #footer p {
         margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
         padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
         float: right;
         margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
         float: left;
         margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
         clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    -->
    </style><!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    .thrColFixHdr #sidebar1 { width: 180px; }
    .thrColFixHdr #sidebar2 { width: 190px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
    .thrColFixHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]--></head>
    <body class="thrColFixHdr">
    <div id="container">
      <div id="header">
        <h1>Header</h1>
      <!-- end #header --></div>
      <div id="sidebar1">
      <h3>Sidebar1 Content</h3>
        <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
        <p> </p>
      <!-- end #sidebar1 --></div>
      <div id="sidebar2">
        <h3>Sidebar2 Content</h3>
        <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
        <p> </p>
      <!-- end #sidebar2 --></div>
      <div id="mainContent">
        <h1> Main Content </h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
        <h2> </h2>
        <!-- end #mainContent --></div>
         <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
        <p>Footer</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>
    Don't be overwhelmed as this is simple code only (much like your own page). You can then divide your background image and put one part in the center column (mainContent DIV) and the other in the right sidebar (sidebar2 DIV).
    Hope this helps.
    Regards,
    Vinay

  • How do I build a model calendar page with three columns and two or three lines per day?

    I am trying to build a Page that has three columns with lines in each column that will be numbered according to each month. Then each month I plan to type in the birth dates, anniversaries, special occasions of my family. There will be over 120 entries.Thus far when I take a blank page from Pages and begin to type in the event, it remove the underline I had put in. I imagine I should be able to build one model page and then replicate it as I go from month to month. Thus far I have been unsuccessful. Any help will be sincerely appreciated.
    Ken Melley

    You could use a Table to set up your information in Pages 5.2, unfortunately it has a bug that makes the table moire or less unusable after a few pages.
    Contacts stores all your Address Book information. NJust add all the name, telephone number, address etc and there is an additional field for birthdays, anniversaries etc. Anything else you can put in the notes:
    http://computers.tutsplus.com/tutorials/contacts-101-a-beginners-guide-to-contac ts-on-os-x--mac-51751
    Calendar lets you run separate sets of dates in a desktop calendar, which can include birthdays, anniversaries or any single or recurring events. Any names you use here will be cross referenced to Contacts.
    http://www.macworld.com/article/2057229/get-to-know-os-x-mavericks-calendar.html
    Peter

  • Radio button in three column in a single selection-screen

    Hi,
    I am trying to create radio buttons with three column within a single selection-screen.
    I.e.
    Column 1:
    radio1
    Column2:
    radio2
    radio3
    column3:
    radio4
    radio5
    radio6
    Also I wish to give three names(as headers) to each columns.Is is possible?If yes how?

    Hi,
    write as :
    SELECTION-SCREEN COMMENT /1(50) text-001.
    PARAMETERS: r1 RADIOBUTTON GROUP rad1.
    SELECTION-SCREEN COMMENT /1(30) text-002.
    PARAMETERS: r2 RADIOBUTTON GROUP rad1,
                r3 RADIOBUTTON GROUP rad1.
    SELECTION-SCREEN COMMENT /1(30) text-003.
    PARAMETERS: r4 RADIOBUTTON GROUP rad1,
                             r5 RADIOBUTTON GROUP rad1,
                             r6 RADIOBUTTON GROUP rad1.
    Regards,
    Srini.

  • Help with "clearing" in three column format

    The code is pasted in below of a three column page I have created.  However, the background color in the sidebars does not reach to the footer it follows the content.  I know that I need to "clear" the columns but as a newbie I'm not sure how to do so.  Any help would be appreciated.
    Thanks!
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #CCC;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    .thrColLiqHdr #container {
    width: 80%;  /* this will create a container 80% of the browser width */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    .thrColLiqHdr #header {
    background: #DDDDDD;
    padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    .thrColLiqHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    /* Tips for sidebars:
    1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width.
    2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqHdr #sidebar1 p" rule.
    3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
    .thrColLiqHdr #sidebar1 {
    float: left; /* this element must precede in the source order any element you would like it be positioned next to */
    width: 30%; /* since this element is floated, a width must be given */
    background: #3399FF; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 0; /* top and bottom padding create visual space within this div  */
    .thrColLiqHdr #sidebar2 {
    float: right; /* this element must precede in the source order any element you would like it be positioned next to */
    width: 30%; /* since this element is floated, a width must be given */
    background: #3399FF; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 0; /* top and bottom padding create visual space within this div */
    .thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
    margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
    margin-right: 10px;
    /* Tips for mainContent:
    1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
    2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
    3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
    .thrColLiqHdr #mainContent {
    margin: 0 24% 0 23.5%; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
    .thrColLiqHdr #footer {
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD;
    .thrColLiqHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    /* Miscellaneous classes for reuse */
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
    clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    a:link {
    text-decoration: none;
    color: #000;
    a:visited {
    text-decoration: none;
    color: #000;
    a:hover {
    text-decoration: none;
    a:active {
    text-decoration: none;
    -->
    </style><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .thrColLiqHdr #sidebar2, .thrColLiqHdr #sidebar1 { padding-top: 30px; }
    .thrColLiqHdr #mainContent { zoom: 1; padding-top: 15px; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]--></head>
    <body class="thrColLiqHdr">
    <div id="container">
    <div id="header">
        <h1>Header</h1>
      <!-- end #header --></div>
      <div id="sidebar1">
    <h3>Today's Top Health News</h3>
        <p>Vitmains C and E cleared in melanoma scare. </p>
    <p>Older men often binge drink, too</p>
    <p>Short kids are psychologically OK</p>
    <p>New drug for schizophrenia and bipolar disorder approved</p>
    <p>Mediterrenean Diet plus exercise lowers risk of Alzheimer's Disease</p>
    <p>Not enough sleep may raise the risk of diabetes</p>
      <!-- end #sidebar1 --></div>
      <div id="sidebar2">
        <h3>Podcasts: In-depth, awarding winning Radio Health Journal Reporting</h3>
        <p><img src="../graphics/I-am-safe-now.jpg" width="106" height="80" align="left" />
    <p>Perinatal Hospice: Giving meaning and easing grief when birth to death is measured in hours </p>
    <p>Medical Mystery Shoppers: Fake patient who keep healthcare quality high</p>
    <p>Pediatric Live Transplants: Children can receive a slice from a living adult donor</p>
    <p>The Selling of healthcare reform: Why revved up rhetoric matters more than facts</p>
    <p>Early Alzheimer's diagnosis: The benefits of early treatment</p>
    <p>Dementia drugs: Are medications too common in nursing homes?</p>
    <p>Pregorexia: Anorexia while pregnant-more common than we think</p>
    <p>Mop men: People who clean up after unexpected death</p>
    <p>Gout: The return of the "disease of kings"</p>
    <p>Prevention and healthcare reform: How much money can prevention really save?</p>
      <!-- end #sidebar2 --></div>
      <div id="mainContent">
        <h1> Featured Content </h1>
        <p><a href="http://speakaboutbipolardepression.com/">The economy is leadiny many Americans to feel additional stress.  This is particularly concerning for the more than 8 million Americans with bipolar disorder.</a></p>
        <p>As modern medicine extends life expectancy, prevelance of Alzheimer's Disease in the U.S. is expected to skyrocket from about 5 million to 16 million in 2050.  Understanding risk factors is more important than ever. </p>
        <p>You might thing a blood transfusion ordered by a physician would be safe and effective.  But a new analysis by an international panel sbows most transfusions have little benefit.  In fact, they may be dangerous.</p>
        <h2>Information about our program's guests </h2>
        <p>Developing A Brain Eraser: Dr. Andre Fenton</p>
    <p>Too sexy, Too soon: Kids, the media, and sex: Dr. Diane Levin, author of "So Sexy So Soon: The new sexualized childhood and what parents can do to protect their kids"</p>
    <p>Everything You Always Wanted To Know About...Death: Harold Schechter, author of "The Whole Death Catalog: A Lively Guide To The Bitter End"</p>
    <p>Borderline Personality Disorder: Randi Kreger, cofounder of BPDcentral.com</p>
    <!-- end #mainContent --></div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
        <p>Footer</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>

    Are you posting to the right forum? This is a Designer form where we are working with PDF forms. This looks like HTML!
    Paul

  • CSS Three Column Float issue

    I created this website utilizing the three column fixed width
    CSS template from Dreamweaver. I'm having issues with the center
    column coming after the content in the 3rd column. Thought it was
    an issue with content being too wide but changed that and it's
    still occuring. Of course it's fine in Firefox but IE6 it's a no
    go.
    http://www.clotheshorseconnection.com/
    Any help is greatly appreciated.
    Thanks,
    Cheryl

    Cheryl,
    Are you're using DW CS3? If so, have you tried the new
    Browser
    Compatibility Check feature?
    File > Check Page > Browser Compatibility
    Hope this helps,
    Randy
    > I created this website utilizing the three column fixed
    width CSS template from
    > Dreamweaver. I'm having issues with the center column
    coming after the content
    > in the 3rd column. Thought it was an issue with content
    being too wide but
    > changed that and it's still occuring. Of course it's
    fine in Firefox but IE6
    > it's a no go.
    >
    >
    http://www.clotheshorseconnection.com/
    >
    > Any help is greatly appreciated.
    >
    > Thanks,
    > Cheryl

  • If a footnote spreads across three columns, does it always fill the middle one?

    Not a scripting question per se, but it sure affects the script I'm writing. I'm trying to detect and address collisions between footnotes and other items on a page. I think in the world of documents I inhabit, I'm not going to run into such a long footnote, but the moment you start thinking that way one pops out of the woodwork and smacks you in the face.
    I guess the reason for my question is some sense that maybe there's a kind of column-balancing that goes on with footnotes? No of course not. I think I know the answer to my own question: Yes! But I wonder if there's a circumstance where it's not true.
    Anyone have any instances of a footnote spreading to three columns without filling the second one? For example, could keeps cause a space to appear at the top, enough to allow some story text in there?
    Wait: InDesign hates empty text columns -- is one that only has a partial footnote in it considered empty? In the case where there is only a partial footnote, myTextColumn.footnotes.length returns 0.
    Perhaps I should construct some examples to see what happens.
    Dave

    Well, it didn't take much experimentation to discover that the answer is no. The middle column in a three-column frame has zero or one line of text from the main story along with the text from the long footnote. And this without any keeps at all. It looks really ridiculous when there is just one line there, although in the case I was working with I used the default gap above the notes of zero. Let's try with a gap there ...
    Same thing happens when a gap is called for. You get one or no lines at the top of the second column, depending on the height of the frame.
    Dave

  • Applying table scroll bar for only table rows with table columns fixed.

    hi oa gurus,
    i had implemented table scroll bars using oarawtextbean , there is no problem in vertical and horizontal scroll bar working its working fine. but the requirement is i need to scroll only the table rows with table columns fixed. so , how to achieve the table scroll for only table datas neglecting table headers.
    the code for vertical and horizontal bars scroll is like this,
    OARawTextBean ors = (OARawTextBean)webBean.findChildRecursive("raw1");
    ors.setText(div id=tabledivid style=height:500px;width:100%; overflow:auto>);
    OARawTextBean ore = (OARawTextBean)webBean.findChildRecursive("raw2");
    ore.setText("</div>");
    where raw1 and raw2 are rawtextbean created above and below of the table . but i dont know hoow to apply this only for table rows neglecting table columns , can anybody give any ideas.
    pelase this is very urgent , can u help me in this regards
    thanks
    Edited by: user630121 on Sep 29, 2008 5:17 AM
    Edited by: user630121 on Sep 29, 2008 5:18 AM

    hi,
    I have a similar task to do... Only to apply scrollbar at the table level.
    I tried using the above mentioned but I am facing Null Pointer Exception..
    Please explain about raw1 and raw2
    Rahul

  • Problem with displaying same field in three columns

    Hi
    I am using reports developer 11g and I have created a report which displays only one field (column), which is id_number as output but I have a problem now.
    I would like to display the id_number in three columns on one page to save paper, that is, I want to show the first 20 (1 - 20) id_numbers in one column going down, then display the next 20 id_numbers (21 - 40) on the second column on the same page and the next 20 (41 - 60) on the third column still on the same page. If there are more than 60 id_numbers, they should be printed on the next page again in three columns, and so on until all the id_numbers are displayed. How can I achieve this? Could you please assist me?
    Thanks.

    Andreas, I think I am missing something here. I have done what you have said but still the id_numbers are all being displayed
    in the first column and jumps on to the next page without displaying the id_numbers across the page in columns.
    My data model contains a group with not only the id_number but has other fields which I am not displaying.
    I am only using the other fields just to use them in conditions to select only id_numbers which meet a certain criteria which I then display in the report.
    I have created a repeating frame for that group and changed the orientation property to Down/Across. Within that frame, I have a field for the id_number
    which I want displayed in three columns, running across the page as I have already told you. Please help.
    Thanks.

  • Side Bar Navation with three Quick Links Help Required

    Dear OAF Team
    Can you guide me
    we have to show the single page with side navation with three quick links(Employee Details, Salary details, Transfered Details)
    when ever we click the Employee details link we need to show emplyee details complete with same page
    when ever we click the Salary Details link we need to show Salary Details complete with same page
    when ever we click the Transfered Details link we need to show Transfered Details complete with same page.
    If any body having same code and page files please send me [email protected]
    Thanks
    Venkat Reddy

    Dear Reetesh,
    Am able to get the HTML Tab type But am not able to get the HTML Side Navigator Menu Type
    I developed two search pages
    1 Employee details
    2 Assignment Details
    Both information coming with Two Tabs in Home Page but my client want to show side Navigator Links
    Please find what i created Functions and Menus
    Function Creation Details
    Function Name : XX_EMP_SEARCH
    User Function Name: Employee Details
    Web HTML: OA.jsp?page=/xxtab/oracle/apps/per/selfservice/webui/XXEmployeeDetailsPG
    Function Name : XX_EMP_ASS_SEARCH
    User Function Name: Employee Details
    Web HTML: OA.jsp?page=/xxtab/oracle/apps/per/selfservice/webui/XXEmployeeAssignmentsDetailsPG
    Function Name : XX_EMP_HOME_FUN
    User Function Name: Employee Details Home Page
    Web HTML: OA.jsp?page=/xxtab/oracle/apps/per/selfservice/webui/XXEmployeeDetailsPG&OAHP=XX_EMP_ASS_HOME_MENU&OASF=XX_EMP_HOME_FUN
    Function Name : XX_ASS_HOME_FUN
    User Function Name: Assignment Details Home Page
    Web HTML: OA.jsp?page=/xxtab/oracle/apps/per/selfservice/webui/XXEmployeeAssignmentsDetailsPG&OAHP=XX_EMP_ASS_HOME_MENU&OASF=XX_ASS_HOME_FUN
    Standard Menu Details
    Menu Name : XX_EMP_STANDARD_MENU
    User Menu Name : Employee and Assignment Details Standard Menu
    Discription: Employee and Assignment Details Standard Menu
    Promite Name : Employee Assignment Details
    Submenu : Employee and Assignment Home Page
    Home Page Details
    Menu Name: XX_EMP_ASS_HOME_MENU
    User Menu Name: Employee and Assignment Home Page
    Menu Type : Home Page
    Description: Employee and Assignment Home Page
    1 Promit: Employee Details
    Submenu: Employee Details Menu
    2 Promit: Assignment Details
    Submenu: Assignment Details Home Menu
    HTML Side Navigator Menu Details
    Menu Name : XX_EMP_HOME_MENU
    User Menu Name : Employee Details Menu
    Menu Type : HTML Side Navigator Menu
    1 Promit: Employee Details Home Page
    Function Name: Employee Details Home Page
    Description : Employee Details Home Page
    Menu Name : XX_ASS_HOME_MENU
    User Menu Name : Assignment Details Home Menu
    Menu Type : HTML Side Navigator Menu
    1 Promit: Assignment Details Home Page
    Function Name : Assignment Details Home Page
    Please give me idea how to resolve this issue
    Thanks
    Venkat Reddy
    [email protected]

  • Setting fixed width on columns with the Column Graph Tool

    Hi,
    I'm trying to perfect my charts a little.
    Right now the width of my columns using the Column Graph Tool seem to be dictated by how many columns I got in total. So if I only have two columns both get really wide. But if I have four, they look just nice. Is there any way to set a fixed width on columns with the Column Graph Tool?
    Thanks!

    What am I thinking.
    Select your graph double click the graph tool at the bottom of the dialog, enter the percentage you want the coulmns to be  and the percentage you want that cluster to occupy.
    Duh!

  • HT1212 My phone is still disabled with three attempts of using your advice on this page! After it was finished the following message pop up with the numbers 3194, what do I do next to fix my phone?

    My phone is still disabled with three attempts of using your advice to connect with computer, the following message keeps popping up with numbers 3194.
    What do I do next to disable my phone?

    Read here:
    http://support.apple.com/kb/TS3694#error3194
    "Unable to contact Update Server"

  • Draw arc with three point( start, middle, end)

    hi all,
    i want to draw an arc with start point, middle point and end point, how can i do this?

    Not clear what you want, but will try
    How to calculate - the unit is the pixel it takes practice thats all & a bit of trial and error.
           | intB (pixels from the top)                          
           |
           |
      intA |_____________________________
    (from left)                          |
           |                             |
           |                             |
           |                             |
           |                             |
           |                             |
           |                             |
           |                             |
           |                             |
           |_____________________________| intD (from top)
                                         intC (from left)The pie slice goes from the centre of the undrawn square
    If you only want an arc then you can paint over it again with eg
    g.setColor(Color.white);
    g.fillRect(0, 0, width, height);
    g.setColor(Color.blue);
    g.fillArc(intA, intB, intC, intD, intStartArc, intEndArc);
    g.setColor(Color.white);
    g.fillArc(intA, intB, intC-1, intD-1, intStartArc, intEndArc);
    or something similar

  • Columns merged with other columns?

    how do I achieve the following?
    I want to have a tabular form as following
    The first line of the tabular form will only be 3 columns (eg. col1,col2,col3). those three columns will then be broken down into 9 columns (ed. col1 - no column, col2 will have col4,col5,col6, and col7, col3 wil have col8 to col12.) on the second line.
    Any ideas? I know it is possible to do with html but i'm not sure how to process it in APEX

    What I typically do first is to look at a report template from the current theme and see what CSS classes they are using against the tables, headers and rows. I will copy the entries to a text document so I can easily reference them.
    The you create a new report template from scratch and as a Named Column (row template).
    This type template allows you to specify where each column goes by using a substitution variable for the selected column.
    The query I used in the example was
    select ename, job, sal
    from emp
    For the Row Template 1 field under Row Template section, I put
    <tr><td>#ENAME#</td><td>#JOB#</td><td>#SAL#</td></tr>
    In the Before first and after last row text section I put
    1. in the Before rows field
    <style type="text/css">
    table.outln {border-collapse:collapse;}
    table.outln td {border: solid #000 1px;padding:5px;}
    </style>
    <table cellpadding="0" border="0" cellspacing="0" summary="" class="t9standardalternatingrowcolors outln" border="1">
    <tr><th class="t9header" colspan="2">Name / Job</th><th class="t9header">Salary</th></tr>
    2. In the After Rows field
    </table>
    This type of template is REALLY powerful. The only issues that I have run into in the past is that the order of the columns in your query should be the same as the order in which they are used in your row template. I am not sure if it is still an issue, but I have experience issues in the past that when you later change the query and the order is different then the rows are actually put in by position and not by name. To fix that problem I just drop the report and recreate.
    If you happen to have my book by Oracle Press, HTML DB Handbook, there is a good description of this type of template on pages 211- 215.
    The book is a little old now (almost 2 years). Just happened that they renamed HTML DB to ApEx the month before the book was published. It covers ver 2.0, but still has some good info in it.

Maybe you are looking for