Two columns layout using tabs ?

Hi everybody,
I have a layout issue about a template i'd like to make. Here's the thing (i use underscores instead of spaces):
NAME__Blablablablablablablablablablablablablablabl-
________ablablablablablablablabla
________Blablablablablablablablabla
NAME__Blabla...
(as you can see, the left columns can be left empty)
Obviously, and 2 columns layout page is not the good solution.
Basically, it could be a table with two columns (and it seems appropriate), but since the content of a row won't continue on several pages, I had to try with tabs. The issue I got with tabs is that is does like :
NAME__BBlablablablablablablablablablablablablablabl-
ablablablablablablablabla
See what I mean ? It is okay for the first line but not the others. And I have to make paragraph styles of that. Maybe this kind of thing have been discussed here before but I couldn't find a case that fulfilled my requirments (is it at least correct english ? .
Some help would be appreciated ... thanks!

tibo,
if you need a fast change of font style, use the character style. For this, show the styles drawer and click onto the button with the underlined a at the bottom of the drawer. Select the etire entry of the "left column" and adjust the font like you want to have it. Now select the red triangel beside the "None" title in the character style panel of the styles drawer. In the appearing menu you can choose the "Create New Character Style from Selection...".
Do this and click the "OK" button or change the attributes for this character style by clicking the triangle beside the title "Include all character attributes". There you can deselect the attributes you don't want to store with the character style. But with this, Pages has a bug, so you can stay this untouched. It will work like you need it.
After you have stored the character style, every time you have inserted a new entry in your "two column" layout, select the left column entry and choose the character style in the styles drawer you stored for it.

Similar Messages

InDesign CS4: Two column layout question

I'm looking for the best way to handle a two-column layout where:
• Column 1 contains tips, small images/thumbnails/icons, etc
• Column 2 contains the meat of the educational material, and
• Content in column 1 anchors/floats with the appropriate content in column 2.
The goal here is if the content in col 2 moves, the related content in column 1 moves with it.
I've got about 1200 pages of content coming in from somewhat rough TXT.

Pants_Sans wrote:
I'm looking for the best way to handle a two-column layout where:
• Column 1 contains tips, small images/thumbnails/icons, etc
• Column 2 contains the meat of the educational material, and
• Content in column 1 anchors/floats with the appropriate content in column 2.
The goal here is if the content in col 2 moves, the related content in column 1 moves with it.
I've got about 1200 pages of content coming in from somewhat rough TXT.
Scroll down to the hanging side heads topic in this linked page http://www.peachpit.com/articles/article.aspx?p=1324259, for information on how to do this with the normal user interface.
Perhaps a scripter on the forum can offer an automated approach.
For the hard-core developer-mindset folks on the forum, here's an article on how to use the SDK (software development kit) to create a panel for hanging side headings http://blogs.adobe.com/cssdk/2010/08/makesideheads-a-complete-indesign-cs5-panel-2.html
HTH
Regards,
Peter
Peter Gold
KnowHow ProServices

Problem with two-column layout

Hello,
I've done table-based layouts for several years, but I'm
trying to switch to CSS. I still have a lot to learn...
I'm trying to create a web site as a favor for a friend. She
hasn't figured out what she wants yet, so I've just been creating
some pages using canned designs. I created one using "Two-column
left nav" under Dreamweaver's "Page designs (CSS)":
http://www.alcie.org/demo2/
I want a fixed-width left navigation column and a fluid
content column.
I ran into several problems with the original design. The
most notible was that if I changed the browser window width, both
the content and nav columns would resize. I didn't want that, so I
set "navBar" width: 150px. That worked, but if I make the window
too narrow, the content starts to overlap the navigation column in
Firefox 1.5.0.6, and the navigation DIV drops to below the content
in IE 7 rc (I think) 3 and IE6. I tried removing the width
altogether, but that made things worse.
What is wrong with this picture? Is there a cleaner way to
solve my problem?
Thanks.

> Is there a cleaner way to solve my problem?
Yes - dump that layout. It's too quirky. Go here and grab one
http://www.maxdesign.com.au/presentation/page_layouts/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Clean & Sober" <[email protected]>
wrote in message
news:edgvl4$akl$[email protected]..
> Hello,
>
> I've done table-based layouts for several years, but I'm
trying to switch
> to
> CSS. I still have a lot to learn...
>
> I'm trying to create a web site as a favor for a friend.
She hasn't
> figured
> out what she wants yet, so I've just been creating some
pages using canned
> designs. I created one using "Two-column left nav" under
Dreamweaver's
> "Page
> designs (CSS)":
>
>
http://www.alcie.org/demo2/
>
> I want a fixed-width left navigation column and a fluid
content column.
>
> I ran into several problems with the original design.
The most notible
> was
> that if I changed the browser window width, both the
content and nav
> columns
> would resize. I didn't want that, so I set "navBar"
width: 150px. That
> worked, but if I make the window too narrow, the content
starts to overlap
> the
> navigation column in Firefox 1.5.0.6, and the navigation
DIV drops to
> below the
> content in IE 7 rc (I think) 3 and IE6. I tried removing
the width
> altogether,
> but that made things worse.
>
> What is wrong with this picture? Is there a cleaner way
to solve my
> problem?
>
> Thanks.
>

Best way to have an image span two columns in a CSS layout?

My homepage is a typical fixed width three column layout. For the inside, content pages, I basically need the same layout except I need to have an image that spans the left and center columns at the top. Below the image, the left and center columns should continue on. The right column should not change at all m
My first thought is to start with a two column layout where the left column would contain the image. Then, I would divide the left column into two columns that would start below the image, using a top margin or perhaps another appropriate positioning attribute.
But before I create a completely new layout for these pages, I thought I'd check and see if there may be an easier or better way to do this. any ideas?

Thank you, Thank you, Thank you for both responses. But I have to say I went with the AP div solution. In either case, I would have needed a second layout but this way was a much simpler modification to the three column index page. I did try it both ways as I'm still a-learning. I'm finally getting to the point where when I set or change a setting - especially positioning attributes like margins, the outcome is what I expect. I have also experimented enough where I see there is often more than one way to produce the desired result. However, I'm afraid that in many of these cases I can't explain why one method might be better, or preferred over another. Or if in some instances it simply doesn't matter, unless the final issue is arriving at the most efficient and lightest amount of code required to do the job (that's what I call the Holy Grail in programming and scripting).
As an audio engineer as well, I'm reminded of certain discussions on how to achieve the best sound for this or that, and after going round and round about effects, the science of acoustics, which plug in works best and for what, often the only thing ever really settled upon is "just go by what sounds the best to you". I digress.
So using the AP div in this case, what, if anything is the downside? Does it matter that its content as well as the rest of the page will be dynamic? I wouldn't think so. Might there be issues with older browsers or mobile browsers? The former is not a concern, but the latter is. Might I be tempted to use an AP div at another time because it's so easy to implement, but then may not be an appropriate use? I think I can properly evaluate that if and when the time comes.
Am I just over-thinking all this? : )
Thank you again!
Edited to add: I wanted to mark both responses as correct, but it wouldn't let me do it. No offense I hope!

How to make "two column & one column" mixed layout?

When writing a review, I want the main article part to be "two column layout" while the topic and abstract to be "one column layout". How could I do that?
THX

Another possible, less elegant solution working in a Word Processing (text based) template, rather than a Page Layout template, is to insert the "Layout Break" function, which drops down from insert. That allows a new "section" to be set up. Each section can be formated for the number of columns you choose. This allows you to switch back and forth without going to a new page.
If you are familiar with MS Word, this function is similar to the "section break" command in Word.

Is it possible to use tabs to right align text in Muse, as you can in InDesign?

Can I use tabs to right align text in Muse, as you can in InDesign?
I have a beauty treatment followed by a price and I want to right align the price, keeping the treatment on the left of the text box.
Thank you!

For what would typically be a two column tab stop layout, I'd generally use inline text frames and the Wrap panel.
Put the price in it's own text frame. Then cut and paste the text frame BEFORE the item name so it's an inline text frame within the text frame containing the descriptions.Using the Wrap panel set it to float to the right. Then select it and set the right offset so it floats outside the right side of the original text frame.
Start with this.
Cut and paste the text frame at the start of the item paragraph.
Choose the third icon in the Wrap panel to cause the item to float to the right of the text frame.
Turn off the lock for the 4 wrap offset values.
Adjust the right offset to a negative value so the item is outside the text frame to the right (to wherever you want it).
Repeat the same steps above for the other items.
Note that once it's set up this way you can freely edit the descriptions or change the width of the original text frame and the prices will adjust accordingly. This will also result in things lining up in the browser even if the text layout engine of a specific browser line breaks the text differently.
This approach is tedious, but the end result will continue to line up as you make changes in Design view and will line up in every browser/OS/device.
Someday Muse will support tables, which would be the more natural way to achieve this style of layout on the web. Until then, inline items with wrap is usually the best approach for this type of two column layout.

Importing two-column text from Pages

I've produced several successful calendars and books using the iPhoto service in the past couple of years, but one thing has me defeated.
So far, I have used Pages to create text, then style it the way I want, and finally cut and paste it into the book project. It works perfectly. So far, so good.
Now I want to do two-column text pages, instead of a full-width single-column layout, but I can't find a way to do it.
I have tried exporting the two-column set out of Pages as a pdf, then using the Import command in iPhoto, but it is greyed out in the navigation window. No go.
Any ideas?

Do a Print to PDF of the Pages layout and select the Send PDF to iPhoto option. That will create a jpg image of the page which can be added to a full page layout in the Book. Here are a couple of crude examples of that from a Word document: Portrait oriented - Landscape oriented.
Of course my example is single column but with a two column layout in Pages and in the landscape mode it would work just as well.
TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto (iPhoto.Library for iPhoto 5 and earlier) database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.
I've created an Automator workflow application (requires Tiger or later), iPhoto dB File Backup, that will copy the selected Library6.iPhoto file from your iPhoto Library folder to the Pictures folder, replacing any previous version of it. It's compatible with iPhoto 6 and 7 libraries and Tiger and Leopard. iPhoto does not have to be closed to run the application, just idle. You can download it at Toad's Cellar. Be sure to read the Read Me pdf file.
Note: There now an Automator backup application for iPhoto 5 that will work with Tiger or Leopard.
Message was edited by: Old Toad

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

</style></head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
    <h1>Header</h1>
</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>
</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>
</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>
    </div>
     <br class="clearfloat" />
<div id="footer">
    <p>Footer</p>
</div>
</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

Is it possible to display Footnotes in column layout?

I have many small footnotes (one or two words). To prevent wasting space with the footnotes I would like to have the footnotes in a two column layout and the body text in one column.
Is this possible in Framemaker (latest version)?

No, not in any version. It's a hardcoded function of the text frame
itself. You can't even split the frame manually. The footnotes
automatically go to the bottom of the text frame holding the
paragraphs with the footnote.

Placing an object/photo over gutter in two page layout in Pages???

So here's my issue. I'm new to pages and need all the help I can get. I have a two page layout and I'm trying to place a large photo across the gutter so that it will show on both pages. It will let me create the object and place a picture in it but it disappears on the other page. What am I not doing? Thanks for your help!
mrs.rodgers

Welcome to the forums, mrs. rodgers.
Do you mean you have an actual two page layout (with "Facing Pages" selected in the Document Inspector)? If so (and it's not just a two column layout on one page), then there is unfortunately no way to set a picture to span two pages automatically.
Your best bet is to fake the effect by placing two copies of the picture, one on each side of the gutter, with appropriate masks set on each, so that the left page has the left side of the picture, and the right page has the right side. Do note, however, that most printers won't print right to the edge of the page (so-called "borderless" or "full-bleed" printing), and so it may not turn out exactly as you desire.

How to swap column values using variable in sql?

Hi,
I have a table and i want to swap two column values using variable
please help me

Hi,
Let us assume that the DeptNAME and DeptNo columns are of type VARCHAR2. However, DeptNO column is VARCHAR2(10) and DeptNAMe is VARCHAR2(100).
First of all DeptNo column needs to be modified to be 100.
i) ALTER TABLE DEPT MODIFY DEPTNO VARCHAR2(100);
Secondly, you will swap DEPTNAME and DEPTNO values using the SQL as follows:
ii) update dept t1
set deptname = (select deptno from dept2 t2 where t1.deptno = t2.deptno),
deptno = (select deptname from dept2 t2 where t1.deptno = t2.deptno);
Now, finally you want the deptname columns to be VARCHAR2(10)
iii) ALTER TABLE DEPT MODIFY DEPTNAME VARCHAR2(10).
If DEPTNO is a NUMBER column, you cannot alter the datatype unless the table is empty; in that case the whole swapping requirement would be moot.
Trinath Somanchi,
( http://www.myospages.com )

Using Auto Adjustable Fluid Grid Layout Divs to balance two columns

I have a header band, two columns and then a footer band in the layout that I'm working on.I have Div on each side that is set to "Auto" for height so that the two column lengths appear to be the same size when they get to the footer band. That is how I envisioned it, in practice, "Auto" only seems to adjust to the text inside the respective divs.
Something that"hould" be soesy has gotten me banging my head for four days. I thught I had a solution, using "nesting tags" but saw that was not supported.
Any ideas?

http://whatwouldwaltdo.businesscatalyst.com/fl0916.html
Source code:
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/FL916.css" rel="stylesheet" type="text/css">
<link href="/stylesheets/FL.css" rel="stylesheet" type="text/css">
<link href="/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
<script src="/SpryAssets/SpryAccordion.js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="bannertop"><img src="/images/Walt w CMS PIN.fw.png" alt="Walt Disney with Disneyland Cast Members (1966)"></div>
<div id="ticker">This is the content for Layout Div Tag "ticker"</div>
<div id="blocker">
<div id="leftcolumn">This is the content for Layout Div Tag "leftcolumn"
      <div id="Accordion1" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">HOME</div>
          <div class="AccordionPanelContent">
          <img src="/images/graphics/pagetitles/toallwhocome.gif" alt="The opening line of Walt Disney's dedication speech at Disneyland, "To all who come to this happy place, welcome ..."" width="192" align="absmiddle">
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">Pins</div>
          <div class="AccordionPanelContent">
              <p>Ordering</p>
              <p>Presenting a Pin</p>
              <p>Collectors' Corner</p>
              <p>Why a Pin?</p>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">Cast Members</div>
          <div class="AccordionPanelContent">
              <p>Newest</p>
              <p>Nominate Your Own</p>
              <p>Alphabetical</p>
              <p>By Company/Location</p>
            <p>By WWWD Pin</p>
            <p>Cast Members' Reactions</p>
          </div>
        </div>
        <div class="AccordionPanel">
              <div class="AccordionPanelTab">Traditions</div>
            <div class="AccordionPanelContent">
            <p>Guests' Traditions</p>
              <p>Share Your Traditions</p>
            </div>
          </div>
        <div class="AccordionPanel">
              <div class="AccordionPanelTab">Adventures</div>
              <div class="AccordionPanelContent">
            <p>Guests' Adventures</p>
              <p>Share Your Adventures</p></div>
          </div>
        <div class="AccordionPanel">
              <div class="AccordionPanelTab">City Hall</div>
              <div class="AccordionPanelContent">
            <p>Waltisms</p>
            <p>The WWWD Story</p>
              <p>About Us</p>
              <p>That First Trip</p>
              <p>About Us</p>
              <p>Ordering</p>
              <p>About Us</p>
              <p>Ordering</p></div>
          </div>
    </div>
    <div id="social">This is the content for Layout Div Tag "social"</div>
    <div id="printer">This is the content for Layout Div Tag "printer"</div>
    <div id="banner"><img src="/images/graphics/reg sidebargraphic.gif" alt="White Mickey head with a circle of stars on a blue field"></div>
</div>
<div id="copy">This is the content for Layout Div Tag "copy"<br><br><P> <FONT SIZE="-1" COLOR="#CC0000">Copyright © 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002 Founder's
            Legacy Inc. </FONT><BR>
            <FONT SIZE="-1" COLOR="#CC0000">What Would Walt Do and WWWD are trademarks
            of Founder's Legacy, Inc.</FONT></P>
          <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is a member
            of the Disney Store.com Affiliate Network. As such we are authorized
            to display the Disney Store banner on any or all of our webpages.
            Founder's Legacy is also listed with The Disneyland Resort Press &
            Publicity Department, images used are with their permission.</FONT></P>
          <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is not part
            of The Walt Disney Company. The only other relationship between Founder's
            Legacy, Inc. and The Walt Disney Company is various members of the
            Founder's Legacy Inc.'s Board of Directors and/or their family are
            shareholders in The Walt Disney Company.</FONT><FONT SIZE="-1" COLOR="#CC0000"><BR>
            <BR>
            Additional disclosures for the benefit of insomniacs may be enjoyed
            in our <A HREF="/pages/insomniac.shtml">Insomniac's Delight
Page & Privacy Policy</A></FONT> </P></div>
</div>
<div id="mission"><FONT
             COLOR="#000081"><B>Our Mission Statement</B></FONT>
      <BLOCKQUOTE>
    <P><FONT color="#D50000" SIZE="+2"><em>To restore Magical Guest experiences through recognizing outstanding Cast Members.</em></FONT></P>
        </div>
<div id="awards"><table width="100%" border="0" cellpadding="0">
<tr>
    <TD VALIGN="middle" ALIGN="CENTER"><a href="http://LaughingPlace.com"><img src="/Assets/graphics/Affiliations/LPLogoHighest.gif" width="96" height="82" border="1" alt="LaughingPlace.com"></a></TD>
    <TD VALIGN="middle" ALIGN="CENTER"><img src="/Assets/graphics/Affiliations/seek-button01.gif" width="120" height="80"
             border="0"></TD>
    <TD WIDTH="1" VALIGN="middle" ALIGN="CENTER"><a href="http://disney.go.com/investors/index.html"><img src="/Assets/graphics/Affiliations/shareholder.gif" width="106" height="48"
             border="1"></a></TD>
    <TD VALIGN="middle" ALIGN="CENTER"> <img src="/Assets/graphics/Affiliations/safewave.gif" width="78" height="74"
             border="1"></TD>
    <TD VALIGN="middle" ALIGN="CENTER"><a href="http://wdwig.com/"><img src="/Assets/graphics/Affiliations/125x125allearsnet.gif" width="120" height="120" border="0"></a></TD>
</tr>
</table></div>
<div id="bigbottom"><P> <FONT SIZE="-1" COLOR="#CC0000">Copyright © 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002 Founder's
            Legacy Inc. </FONT><BR>
            <FONT SIZE="-1" COLOR="#CC0000">What Would Walt Do and WWWD are trademarks
            of Founder's Legacy, Inc.</FONT></P>
          <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is a member
            of the Disney Store.com Affiliate Network. As such we are authorized
            to display the Disney Store banner on any or all of our webpages.
            Founder's Legacy is also listed with The Disneyland Resort Press &
            Publicity Department, images used are with their permission.</FONT></P>
          <P><FONT COLOR="#000081" SIZE="-1">Founder's Legacy, Inc. is not part
            of The Walt Disney Company. The only other relationship between Founder's
            Legacy, Inc. and The Walt Disney Company is various members of the
            Founder's Legacy Inc.'s Board of Directors and/or their family are
            shareholders in The Walt Disney Company.</FONT><FONT SIZE="-1" COLOR="#CC0000"><BR>
            <BR>
            Additional disclosures for the benefit of insomniacs may be enjoyed
            in our <A HREF="/pages/insomniac.shtml">Insomniac's Delight
Page & Privacy Policy</A></FONT> </P></div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Stylesheet:
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
    max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:        5;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
    Inspiration from "Responsive Web Design" by Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bannertop {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#ticker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#blocker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcolumn {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#copy {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: auto;
    display: block;
#leftnav {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
#social {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 35px;
#printer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#banner {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#mission {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#awards {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bigbottom {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bannertop {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#ticker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#blocker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcolumn {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#copy {
    clear: none;
    float: left;
    width: 55%;
    display: block;
    margin: 0%;
#leftnav {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
#social {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#printer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 35.8974%;
    display: block;
#banner {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#mission {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#awards {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bigbottom {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bannertop {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#ticker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#blocker {
    clear: both;
    float: left;
    margin-left: 0;
    width: 74.5762%;
    display: block;
    border-top-width: thick;
    border-right-width: thick;
    border-bottom-width: thick;
    border-left-width: thick;
    border-top-style: none;
    border-right-style: ridge;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #C10B0F;
    border-right-color: #C10B0F;
    border-bottom-color: #C10B0F;
    border-left-color: #C10B0F;
#leftcolumn {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#copy {
    clear: none;
    float: left;
    margin-left: 1.6949%;
    width: 100%;
    display: block;
#leftnav {
    clear: none;
    float: left;
    margin-left: 1.6949%;
    width: 100%;
    display: block;
#social {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#printer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#banner {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#mission {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#awards {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#bigbottom {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;

Looking for a two-column CSS layout

I am looking for a two-column CSS layout that is centered
with blank space
on the sides, so the layout does not expand across the entire
screen, but
instead uses a portion of it (such as 75%). The left column
would be for
navigation and I haven't decided if I want it to be liquid or
fixed, but the
right column for content would be liquid. There would also be
a heading div
and navigation div across the top and a footer across the
bottom.
While looking for sample sites I keep finding ones that use
three columns,
and I'm worried that if I remove the third column that the
layout will break
at some point, even if I don't see it in my test browsers.
I'm also
discovering that some of the sample pages out there don't
respond well when
I resize the browser window. The columns don't have a minimum
width or they
stack on top of each other at some point.
There are so many different techniques to use when designing
a layout with
CSS, some better than others, that I thought maybe some
people here may
already know what's tried and true and what should be
avoided. Are any
layouts robust enough to allow a third column to be added at
a future date
if needed? I also like the idea of putting the content div
first in the
code, to improve search engine indexing and also to aid those
who may be
using a screen reader, but if that feature makes the coding
much more
complex then I could see why I might avoid it for now.

Sorry Nancy, I didn't see your post for some reason. At least
we agree (o:
Jo
"josie1one" <[email protected]> wrote in message
news:g4tv32$57f$[email protected]..
>I have DW8 and am very happy with this:
>
http://projectseven.com/products/templates/pagepacks/cssmagic/index.htm
>
>
> --
> Jo
>
>
> "Matt" <[email protected]> wrote in message
> news:g4tg96$isq$[email protected]..
>>I am looking for a two-column CSS layout that is
centered with blank space
>>on the sides, so the layout does not expand across
the entire screen, but
>>instead uses a portion of it (such as 75%). The left
column would be for
>>navigation and I haven't decided if I want it to be
liquid or fixed, but
>>the right column for content would be liquid. There
would also be a
>>heading div and navigation div across the top and a
footer across the
>>bottom.
>>
>> While looking for sample sites I keep finding ones
that use three
>> columns, and I'm worried that if I remove the third
column that the
>> layout will break at some point, even if I don't see
it in my test
>> browsers. I'm also discovering that some of the
sample pages out there
>> don't respond well when I resize the browser window.
The columns don't
>> have a minimum width or they stack on top of each
other at some point.
>>
>> There are so many different techniques to use when
designing a layout
>> with CSS, some better than others, that I thought
maybe some people here
>> may already know what's tried and true and what
should be avoided. Are
>> any layouts robust enough to allow a third column to
be added at a future
>> date if needed? I also like the idea of putting the
content div first in
>> the code, to improve search engine indexing and also
to aid those who may
>> be using a screen reader, but if that feature makes
the coding much more
>> complex then I could see why I might avoid it for
now.
>>
>
>

GUI - How do i merge two diffrent layout managers into one tab?

Hello
I want to create a cellphone, and when you click a button it will be displayed in a textfield
the buttons are in a grid layout (4,3) and the textfield is in a border layout (NORTH)
I have the layouts in two seperate tabs, but how do i merge two diffrent layouts in to one tab ?
textfield:
package guitelefon;
import java.awt.*;
import javax.swing.*;
public class BorderPanel extends JPanel
   public BorderPanel()
      setLayout (new BorderLayout());
      setBackground (Color.green);
      JTextField output = new JTextField(5);
      add (output, BorderLayout.NORTH);
}Buttons:
package guitelefon;
import java.awt.*;
import javax.swing.*;
public class GridPanel extends JPanel
    public GridPanel()
      setLayout (new GridLayout (4, 3));
      setBackground (Color.green);
      JButton b1 = new JButton ("1");
      JButton b2 = new JButton ("2");
      JButton b3 = new JButton ("3");
      JButton b4 = new JButton ("4");
      JButton b5 = new JButton ("5");
      JButton b6 = new JButton ("6");
      JButton b7 = new JButton ("7");
      JButton b8 = new JButton ("8");
      JButton b9 = new JButton ("9");
      JButton bs = new JButton ("*");
      JButton b0 = new JButton ("0");
      JButton bf = new JButton ("#");
      add (b1);
      add (b2);
      add (b3);
      add (b4);
      add (b5);
      add (b6);
      add (b7);
      add (b8);
      add (b9);
      add (bs);
      add (b0);
      add (bf);
}driver:
package guitelefon;
// LayoutDemo.java       Java Foundations
// Demonstrates the use of flow, border, grid, and box layouts.
import javax.swing.*;
public class LayoutDemo
     public static void main (String[] args)
      JFrame frame = new JFrame ("Cellhpone");
      frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
      JTabbedPane tp = new JTabbedPane();
      tp.addTab ("Grid", new GridPanel());
      tp.addTab ("Border", new BorderPanel());
      frame.getContentPane().add(tp);
      frame.pack();
      frame.setVisible(true);
}

a simple example with compilable code:
import java.awt.BorderLayout;
import java.awt.GridLayout;
import javax.swing.*;
public class Main {
public static void main(String[] args) {
    JFrame frame = new JFrame("Cellhpone");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    JPanel panel = new JPanel(new BorderLayout());
    panel.add(new FooPanel(), BorderLayout.CENTER);
    panel.add(new BarPanel(), BorderLayout.NORTH);
    frame.getContentPane().add(panel);
    frame.pack();
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
class FooPanel extends JPanel {
private static final String[][] BTN_STRINGS = {
    {"1", "2", "3"},
    {"4", "5", "6"},
    {"7", "8", "9"},
    {"*", "0", "#"}};
public FooPanel() {
    setLayout(new GridLayout(BTN_STRINGS.length, BTN_STRINGS[0].length, 5, 5));
    for (int row = 0; row < BTN_STRINGS.length; row++) {
      for (int col = 0; col < BTN_STRINGS[row].length; col++) {
        JButton btn = new JButton(BTN_STRINGS[row][col]);
        add(btn);
class BarPanel extends JPanel {
private JTextField field = new JTextField();
public BarPanel() {
    setLayout(new BorderLayout());
    add(field, BorderLayout.CENTER);
}Edited by: Encephalopathic on Oct 29, 2009 7:56 AM

How to open a tab inside center part of a 3 column layout

Hi,
I have created a jsf page using 3 column layout
I need a funtionality that when user clicks on any link avaliable in left new tab should be able to open in center part . I have tried some options but as i am new to ADF i am not able to acheive this.
Can any body prlease tell me the steps for the same.
my page structure is as following-
PanelHeader->panelAcordion->showdetailitem->showcommanimagelink

If the tab is already there you can just play with the rendered and disclosed property values from the code for your link.
You might be interested though in adopting the Oracle User Interface Shell
http://www.oracle.com/technology/products/adf/patterns/index.html

Two columns layout using tabs ?

Similar Messages

Maybe you are looking for