Auto Resize Header and Content Within?

I want a header that is always 20% the height of the webpage, so that when I resize, the porportions always stay this same. This isn't so hard to figure out. However, I also want the content within the header (buttons, etc.) to resize. Can anybody help? Here's my code.
<!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 {
          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;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 100%;
          background-color: #191919;
          background-image: url(../Images/repeat.jpg);
          background-repeat: repeat;
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
.oneColElsCtrHdr #container {
          width: 100%; /* the auto margins (in conjunction with a width) center the page */
          border: 0px none #000000;
          text-align: center; /* this overrides the text-align: center on the body element. */
          margin-top: 0;
          margin-right: auto;
          margin-bottom: 0;
          margin-left: auto;
          background-color: #FFFFFF;
          background-image: url(../Images/repeat.jpg);
          background-repeat: repeat;
          color: #FFC;
.oneColElsCtrHdr #header {
          width: 100%;
          padding-top: 0;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-left: 0px;
          background-color: #DDDDDD;
          background-image: url(../Images/headerwlogo2.jpg);
.oneColElsCtrHdr #header h1 {
          margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
          background-attachment: scroll;
          background-image: url(../Images/headerwlogo2.jpg);
          background-repeat: no-repeat;
          padding-top: 0px;
          padding-right: 0;
          padding-bottom: 0px;
          padding-left: 0;
          height: 140px;
          width: 100%;
.oneColElsCtrHdr #mainimage {
          background-color: #FFFFFF;
          width: 100%;
          margin: 0px;
          padding: 0px;
.oneColElsCtrHdr #yellowbar {
          background-color: #FFFFFF;
          width: 100%;
          background-image: url(../Images/seperatebar.jpg);
          background-repeat: repeat-x;
          height: 15px;
.oneColElsCtrHdr # {
          background-color: #FFFFFF;
          width: 100%;
.oneColElsCtrHdr #mainContent {
          background-color: #FFFFFF;
          background-image: url(../Images/repeat.jpg);
          background-repeat: repeat;
          padding-top: 0;
          padding-right: 22px;
          padding-bottom: 0;
          padding-left: 22px;
.oneColElsCtrHdr #footer {
          padding: 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
          background:#DDDDDD;
.oneColElsCtrHdr #footer p {
          margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
          background-image: url(../Images/footer.jpg);
          background-repeat: repeat-x;
          height: 140px;
          width: 100%;
          padding-top: 0px;
          padding-right: 0;
          padding-bottom: 0px;
          padding-left: 0;
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtrHdr">
<div id="container">
  <div id="header">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">About the Project</a>
        <ul>
          <li><a href="#">Project Overview</a></li>
          <li><a href="#">The Collaborators</a></li>
</ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Earthwork Sites</a>
        <ul>
          <li><a href="#">About the Sites</a></li>
          <li><a href="#">Media Gallery</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Interactive Badges</a>
        <ul>
          <li><a href="#">Badge Overview</a>          </li>
          <li><a href="#">Lifelong Learning</a></li>
</ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>
        <ul>
          <li><a href="#">Blog</a></li>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="mainimaget">
    <img src="../Images/mainillustrationbig.jpg" width="100%" height="auto" />
  <!-- end #mainContent --></div>
  <div id="yellowbar">
     </h1>
  <!-- end #mainContent --></div>
  <div id="mainContent">
    <h1> WELCOME TO EARTHWORKS</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. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <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.</p>
    <p> </p>
  <!-- end #mainContent --></div>
  <div id="footer">
    <p> </p>
  <!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

I want a header that is always 20% the height of the webpage,
Web Page height is ALWAYS determined by content; not explicit values.  If I increase/decrease text size in my browser, it will change the height of your page.  So page is height is an unknown variable.
I also want the content within the header (buttons, etc.) to resize.
Why do you think you need this?  Your browser's Zoom feature is fully capable of re-scaling images and text on screen.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Similar Messages

  • AjaxControlToolkit AccordianPane - Header and Content

    I am using the AjaxControlToolkit and during a postback I need to view the inner HTML of the header and content properties within each accordian pane.  So far, all attempts to do this have failed.  Is this doable?
    thanks
    Scott Bland

    Hi Scott,
    In my opinion, this thread is related to ASP.NET forum. So please post thread on that forum for more effective response. Thank you for understanding. Please refer to the following link.
    http://forums.asp.net/.
    Regards,
    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click
    HERE to participate the survey.

  • Gap between header and content in IE

    Hello All
    I subscribed to a post with this basic same question but I
    never got a notification if it got answered or not
    I all of a sudden have a gap between the header and content
    on this site
    http://www.michaelsondesign.com/guestVision/
    - I am not sure why , it started when I added to the menu on the
    left
    Any ideas?
    Thanks
    Rob

    Add this to your CSS
    img {vertical-align:top;}
    You cannot lose until you give up !!!
    "BOC_RUSH" <[email protected]> wrote in
    message
    news:fsn546$nrm$[email protected]..
    > Hello All
    >
    > I subscribed to a post with this basic same question but
    I never got a
    > notification if it got answered or not
    >
    > I all of a sudden have a gap between the header and
    content on this site
    >
    http://www.michaelsondesign.com/guestVision/
    - I am not sure why , it
    > started
    > when I added to the menu on the left
    >
    > Any ideas?
    >
    > Thanks
    >
    > Rob
    >
    >

  • Dynamic flv player with auto resize based on content

    Hi,
    I would like to build a .flv player which can accommodate 7
    different video sizes.
    This will probably be made using php and xml to dynamically
    control content.
    What I would like to know is if and how it is possible to
    have a holder.swf (just looks for variables to display the flv)
    that can automatically resize based on the flv dimensions. I dont
    want any kind of browserscreen resolution resizing of content, just
    an swf that will change its size from say 320x240 to 450x253
    depending on the dynamically loaded flv.

    The same thing has been reported for the T410. You can see how to fix it here:
    http://forums.lenovo.com/t5/T400-T500-and-newer-T-series/T410-unstable-screen-brightness/m-p/212492#...
    It appears to occur anytime you are on battery and the intel graphics power plan is set to anything other than 'maximum performance.' It's pretty subtle, but really annoying when it happens.

  • Resize frame and contents at the same time

    Is there a keyboard shortcut that can be used to resize the frame and the contents of the frame at the same time? Command + Option + < > works but only resizes the frame or the contents, not both at once.

    Ah yes: google a bit.
    This has been discussed a few dozen times and there are scripts around (eg. by Sandee Cohen) to fill the gap.

  • JTable resize header (and change mouse in between headings)

    Hi,
    I notice that i have the ability to resize my headings in the JTable but is there a way to get the mouse pointer to indicate something similar to what Excel does when you put your mouse over the divide (between two heading cells)?

    Here's my simple test program:
    import java.awt.*;
    import javax.swing.*;
    import javax.swing.table.*;
    public class TableTest2 extends JFrame
         public TableTest2()
              JTable table = new JTable(3, 3);
              table.setPreferredScrollableViewportSize(table.getPreferredSize());
              JScrollPane scrollPane = new JScrollPane( table );
              getContentPane().add( scrollPane );
         public static void main(String[] args)
              TableTest2 frame = new TableTest2();
              frame.setDefaultCloseOperation( EXIT_ON_CLOSE );
              frame.pack();
              frame.setLocationRelativeTo( null );
              frame.setVisible(true);
    }

  • Resize frame and content proportionately

    Hello
    When i try to use Selection tool+Shift+Command–drag in mac or Selection tool+Shift+Ctrl–drag in PC
    to resize an image  or some text proportionately it doesn't seem to work like in illustrator, indesign... it does resize but not proportionately.
    Is it possible to have the same shortcuts like this one in Adobe Muse? it will make it easier to place images and change size after.
    Thank you.

    Hi Maria
    It works just the opposite of what you are familiar with. Proportional scaling is built in, just drag a corner without holding any keyboard buttons down. To scale disproportionately you use the keyboard keys
    hope that helps,
    Michael Riordan
    Owner/Adobe Certified Instructor
    Digital DesignLab
    www.learnadobesoftware.com

  • SOAP Header and Body

    Hi All
    I am having a small requirement where my normal java program has to invoke a SOAP client and that will communicate the SOAP server by sending two xml files.
    first xml contains the attributes/properties of the content and
    second xml contains the the actaul content.
    here i have to send the attributes in the SOAP header and content as the SOAP body.
    How can i achive this. I am very new to SOAP protocal.
    please suggest me some links/documents and some guide lines to make this a success.

    Hi All
    I am having a small requirement where my normal java program has to invoke a SOAP client and that will communicate the SOAP server by sending two xml files.
    first xml contains the attributes/properties of the content and
    second xml contains the the actaul content.
    here i have to send the attributes in the SOAP header and content as the SOAP body.
    How can i achive this. I am very new to SOAP protocal.
    please suggest me some links/documents and some guide lines to make this a success.

  • TableView auto resize columns based on header text width or cell content

    Is there a method on the tableview or tablecolumn to automatically resize based on the content of the hearder or data?
    If not what approach can used used with JavaFX to calculate the string width based on the current font?

    The table column size is inconsistent, I set the columns in the table view and the items in the initialize method. I execute a service and task from a button action that loads data into the list, if I don't reset the columns in the table view in the succeed method then each column is the same width regardless of the content in the cells. If I do reset the table columns in the succeed method then the columns are resized based on content.
    I don't think it should be a requirement to reset the columns just to get the column widths to set based on the content in the cells. Is there a method on the table column or view that will resize the cells based on the cell content? I would prefer the largest value; column header content or the longest cell content for a column.

  • Header and Footer Resize Issues

    When I create a Header and Footer look in adobe edge I go to resize the width of the page and the header images and texts resize fine but the images and text in the Footer area do not resize and they end up moving all around the screen.

    Hi Siclaria,
    Can you let us know if negative margins are in effect for the footer elements? (Do you -ve value in the margin field?)
    If something has a negative margin, as you resize your canvas, the element will move to the right instead of the left. In your case, it looks like some elements have negative margin values and some are fine.
    An easy solution is to "Edit -> Add Parent" around those elements. For example: Select "Industries", "Education", "Healthcare", etc. and do an Edit -> Add Parent.
    This makes the "set of elements" move to the left (because they are contained within a parent) and will be closer to the behavior you expect.
    Cheers,
    Anirudh

  • White space between header and main content

    Hello all! I have a 25-27px white space between my header and
    main content. I read through fixes in the forum and took out any
    height that would effect this gap. I still can't get rid of this
    white space. Your help is greatly appreciated! Here's the Code:
    <!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>
    </script>
    <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;
    .oneColElsCtrHdr #container {
    width: 46em; /* this width will create a container that will
    fit in an 800px browser window if text is left at browser default
    font sizes */
    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. */
    .oneColElsCtrHdr #header {
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 0px;
    background-color: #FFFFFF;
    .oneColElsCtrHdr #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: 0px 0; /* using padding instead of margin will
    allow you to keep the element away from the edges of the div */
    .oneColElsCtrHdr #mainContent {
    background: #FFFFFF;
    padding-top: 0;
    padding-right: 0px;
    padding-left: 0px;
    .oneColElsCtrHdr #footer {
    padding: 0 10px; /* this padding matches the left alignment
    of the elements in the divs that appear above it. */
    background:#DDDDDD;
    .oneColElsCtrHdr #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: 0px 0; /* padding on this element will create
    space, just as the the margin would have, without the margin
    collapse issue */
    .style4 { font-family: "Fiolex Girls", "Arial Narrow";
    color: #FF0000;
    font-size: xx-large;
    font-style: italic;
    .style6 {color: #FF0000}
    .style7 { color: #000000;
    font-size: x-small;
    .style9 {color: #FF0000; font-family: Arial, Helvetica,
    sans-serif; }
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js"
    type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css"
    rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    #apDiv1 {
    position:static;
    width:525px;
    height:250px;
    z-index:1;
    float: left;
    border-bottom-color: #000000;
    border-bottom-style: solid;
    border-top-width: thin;
    border-bottom-width: thin;
    border-color: #000000;
    #apDiv3 {
    position:static;
    width:500px;
    height:0px;
    z-index:1;
    left: 465px;
    top: 410px;
    float: right;
    .style14 {
    font-size: medium;
    font-style: italic;
    font-weight: normal;
    .style15 {font-size: small}
    -->
    </style>
    <link href="p7hscroller/s7/p7HSM07.css" rel="stylesheet"
    type="text/css" media="all" />
    <script type="text/javascript"
    src="p7hscroller/p7hsmscripts.js"></script>
    <style type="text/css">
    <!--
    #apDiv7 {
    position:static;
    width:737px;
    height:0px;
    z-index:2;
    bottom: 0px;
    border-bottom-style: solid;
    border-bottom-width: thin;
    .style16 {font-size: x-small}
    -->
    </style>
    <!-- Do not remove the line below!!! It is required for
    the XML Flash Slideshow v3. -->
    <script type="text/javascript"
    src="slideshow.js"></script>
    </head>
    <body class="oneColElsCtrHdr">
    <div id="container">
    <div id="header">
    <pre><span
    class="style4">US-AsianMates</span><span
    class="style6">.com</span> <strong><span
    class="style9">JOIN FOR FREE <span
    class="style7">OR</span> MEMBER LOG
    IN</span></strong>
    </pre>
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li>
    <div align="center"><a href="#"
    class="style16">HOME</a> </div>
    </li>
    <li>
    <div align="center"><a href="#"
    class="style16">ABOUT US</a></div>
    </li>
    <li>
    <div align="center"><a href="#"
    class="style16">WHY JOIN US?</a> </div>
    </li>
    <li>
    <div align="center"><a href="#"
    class="style16">VISA SUPPORT</a></div>
    </li>
    <li>
    <div align="center" class="style16"><a
    href="#">EVENTS</a></div>
    </li>
    </ul>
    <pre><!-- end #header -->
    </pre>
    </div>
    <div id="mainContent">
    <div id="apDiv1"><img
    src="Images/Outdoor_Bride1.jpg" alt="Bride" name="Bride"
    width="525" id="Bride" /></div>
    <p> </p>
    <p><br>
    </p>
    <pre> 
    </pre>
    <table width="200" border="1" align="left">
    <tr>
    <td><img src="Romantic_Kiss.jpg" alt="VISA"
    name="VISASUPPORT" width="200" id="VISASUPPORT" /></td>
    </tr>
    <tr>
    <td><img src="Surfing_At_Home.jpg" alt="JOIN"
    name="WHYJOIN" width="200" id="WHYJOIN" /></td>
    </tr>
    </table>
    <pre></pre>
    <div id="apDiv3">
    <div align="center">
    <div align="left">
    <pre class="style14"> <strong>LIVING
    PROOF</strong>
    <span class="style15">&quot;12 YEARS AGO I WENT TO
    THE PHILIPPINES IN HOPES
    OF FINDING MY FUTURE WIFE. 11 YEARS LATER,
    I AM HAPPILY MARRIED! WE ALSO HAVE AN ENERGETIC
    5 YEAR OLD SON! DREAM IT, LIVE IT! IT CAN
    HAPPEN TO YOU ON US-ASIANMATES.COM
    CHRIS&quot;</span></pre>
    </div>
    </div>
    </div>
    <pre> </span>
    </pre></pre>
    <p><!-- end #mainContent -->
    <br>
    <pre>
    </pre>
    <div id="apDiv7"></div>
    <div align="center">
    <pre><!-- Begin XML Flash Slideshow v3 -->
    <script type="text/javascript">
    // <![CDATA[
    XMLFlashSlideshow_v3({swf:'slideshow.swf',w:'580',h:'140',redirect:'',usePreloader:'true', xml:'slideshow_data0.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml% 20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%3Cstyles%3 E%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=% 2270%22%20iconWidth=%2250%22%3E%3C/Preloader%3E%3CPreloaderLabel%20font=%22Verdana%22%20si ze=%2210%22%20color=%22#666666%22%20bold=%22false%22%3E%3C/PreloaderLabel%3E%3CBackground% 20backgroundColor=%22#FFFFFF%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20b evelStrength=%2270%22%20borderWidth=%222%22%20borderColor=%22#000000%22%3E%3C/Background%3 E%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%2 0alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22%3E%3C/LoaderA nimation%3E%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement= %22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22%3E%3C/DataLoader%3 E%3C/styles%3E%3Clocalization%3E%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading% 20Data...%22%3E%3C/text%3E%3C/localization%3E%3Cfonts%3E%3Cfont%20id=%22loader_text%22%20n ame=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22fals e%22%20selectable=%22false%22%20align=%22left%22%3E%3C/font%3E%3C/fonts%3E%3C/slideshow%3E '});
    // ]]>
    </script>
    <!-- End XML Flash Slideshow v3 -->
    </pre>
    </div>
    <pre> 
    </pre>
    <pre> </pre><!-- -->
    <pre> </pre>
    </div>
    <div id="footer">
    <p>Footer</p>
    <!-- end #footer --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
    {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
    imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    "phillychris" <[email protected]> wrote in
    message
    news:[email protected]...
    > Yep, it was the 1 pre tag creating the gap. So why is
    this page a
    > disaster, Tim?
    Just because something is created in DW CS3 doesn't mean it's
    not a
    disaster, any more than using DeWalt power tools guarantees
    that my
    carpentry won't be a complete mess. The software is not a
    replacement for
    skills. It is a tool; your workflow and understanding of HTML
    and CSS is
    what allows you to use DW effectively.
    So why did I call this page a disaster? When I see all that
    extra markup,
    spans, and inline tags, I shudder. It's way too hard to
    troubleshoot. You're
    not doing nearly enough with descendant selectors; instead,
    most of your
    code is inline, despite a huge CSS file.
    Just one example: individual li tags with div align="center"
    inside of them.
    Way overkill. If you're centering all the li text in a given
    list, control
    it with CSS and kill all that extra markup.
    E.g.
    .MenuBarHorizontal li { text-align:center; }
    In fact, if all there is in that .MenuBarHorizontal is the
    list, you don't
    even need to specify the list in the CSS. Just do:
    .MenuBarHorizontal { text-align:center; }
    Now you don't need div tags inside your li at all.
    And if all of those a tags in that menu are going to be
    .style16 class,
    don't specify it on each link. In fact, don't even have a
    .style 16 class.
    Heck, since it's just specifying font size, you don't need to
    target the a
    tag at all. Just add font-size:x-small; to the
    .MenuBarHorizontal ruleset I
    gave you above.
    The above are just examples from a quick glance at your code.
    On the whole,
    your markup and approach to styles are largely wasting the
    power and point
    of CSS.
    In addition, several styles spanned onto one line of text...
    a sure sign
    that either you are using far too many styles to make design
    sense, or else
    you've got styles that overlap each other.
    Here's my advice: Until you get a better handle on CSS, don't
    style things
    as you go. Forget styles altogether at the start. Create a
    very clean HTML
    markup and put ID and class selectors on things you know will
    need them.
    Preferably, place the HTML elements in the order you would
    want your page
    read if styling did not even exist, nesting elements where
    necessary.
    After you have created all the HTML structure, then go back
    and style the
    elements via CSS only. You will end up with less page weight
    and far cleaner
    code to decipher, not simply in terms of length but in terms
    of conflicts
    and redundancies.
    If you're really insistent on styling things as you go, at
    least do this:
    don't create a new style every time you want to accomplish
    something. Create
    CSS rules for IDed containers and container classes. Then as
    you go along
    and are about to create a style, ask yourself where you are
    and what all
    this new rule needs to apply to. Specify the rule there,
    under the selector
    you've already created. Then you won't have .style1 -
    .style16 like you do
    now, and you won't have all that inline mess of code to sort
    through.
    Finally - as you create your CSS, discipline yourself to
    avoid style spans.
    They are necessary on the odd occasion, but very rarely.
    Think semantically
    (i.e. purpose of the style point you're making at a given
    time).
    For example, if you're tempted to create a span in order to
    put something in
    bold red, ask yourself: "Why?" Generally, it means you want
    to place special
    emphasis or strength on that. Well, in that case you don't
    need a span. You
    need to be using the proper tag, such as <em>
    (emphasis) or <strong>. Then
    you can style that tag in CSS. That way, what you have in
    your page actually
    makes sense apart from the style, and as a bonus you can
    apply or edit your
    style easily.
    Tim G.
    http://www.pactumweb.com
    http://www.shortordersite.com
    Be smart:
    http://www.pactumweb.com/client/tips.php

  • Auto-Creation of chapter links within the content directory

    Hello,
    I have a Microsoft Word document with various chapters and a content directory at the beginning. After creating an Adobe PDF file with the Acriobat 9.0 Pro Office PlugIn I want to link the various chapters within the content directory with their chapters below in the document.
    Is this only possible manually with the link tool or is there an automated way to do this?
    Thanks for your help,
    Devid

    In fact it was originally a StarOffice Text document with a content directory, which was saved as word file.
    What do you mean with "heading and related styles" within Word? Do I have to recreate the content directory in Word?
    In the Acrobat help there is an option, which is "Convert cross-references and table of contents to links": But this option is only available in Wird 2002 and 2003, but not in 2007. Maybe in WOrd 2007 it will be converted automatically.

  • How to place content between header and tabs?????

    i have header part which has to be constant through out the portal but below that i have 3 links
    like I AM employee,employer,broker..
    which has to be shown only in home page above tabs..
    how can i achieve this..
    how to place content between header and tabs..:(kindly help..

    Hi Samiran
    Try these approaches and see if that works.
    1. In the Header Section, you header footer shell and add a Header Portlet. This Header Portlet associated JSP file will have all static content in the top section. In the bottom section, add these 3 links say to right hand corner. Show these links only based on some request property like isHome. Now for the main book having Home and other page associate a BackingFile. Within this backing file in the lifecycle methods like preRender or handlePostBack, get instance of BookManager and all the pages and see which page is Active. For that active page check its page definition label which will be always unique. IF the page def label is like home_page_def (this is page def label you give for home page), then set the key value in the request property like isHome=true. By only doubt is after Book backingfile is triggered, the header has to be reloaded, because only then it can pick up the request attributes.
    2. Create a brand new portlet like HomePageLinks portlet. Make its Title Property Not Visible, and other user interface properties like NoBorder, NoTheme etc. The associated JSP will have the 3 links you mentioned right aligned. You can use css styles to make it right etc. Now drop this portlet in the Header Shell area. You already have HeaderPortlet in the top, below that you will have this HomePageLinks portlet. Now associate a backing file for this Portlet to show, only if the Books current active page is Home page by comparing the def label etc as mentioned above.
    In both scenarios, only concern is when we click on different Pages, the entire portal has to be rendered right from the Top Header. Only then the backing file will set the key, and the HomePageLinks portlet can show or hide accordingly.
    Try firing an Event when the Home page is clicked. This listener for this Event can be the HomePageLinks Portlet. I guess Event mechanism should work irrespective of where the portlet is placed. In the event listner, see if you can show/hide this portlet.
    The only challenge is Header section needs to reloaded everytime you click on a Tab.
    Start putting some backing files and System.out.printlns to see if the Header section gets reloaded on click on any Tabs.
    These are just my thoughts over the top of my head. Other forum users can have better alternatives or a different version of above approaches.
    Thanks
    Ravi Jegga

  • JTabbedPane, switch of auto resizing of the tab header possible?

    Hi,
    Is it possible to prevent the tab header from auto resizing?
    In this code the tab "Page 1" fills the whole row at start up, but I would like to prevent it from taking more space than needed.
    import java.awt.*;
    import javax.swing.*;
    class TabbedPaneExample
            extends     JFrame
        private        JTabbedPane tabbedPane;
        private        JPanel        panel1;
        private        JPanel        panel2;
        private        JPanel        panel3;
        public TabbedPaneExample()
            // NOTE: to reduce the amount of code in this example, it uses
            // panels with a NULL layout.  This is NOT suitable for
            // production code since it may not display correctly for
            // a look-and-feel.
            setTitle( "Tabbed Pane Application" );
            setSize( 140, 200 );
            setBackground( Color.gray );
            JPanel topPanel = new JPanel();
            topPanel.setLayout( new BorderLayout() );
            getContentPane().add( topPanel );
            // Create the tab pages
            createPage1();
            createPage2();
            createPage3();
            // Create a tabbed pane
            tabbedPane = new JTabbedPane();
            tabbedPane.addTab( "Page 1", panel1 );
            tabbedPane.addTab( "Page 2", panel2 );
            tabbedPane.addTab( "Page 3", panel3 );
            topPanel.add( tabbedPane, BorderLayout.CENTER );
        public void createPage1()
            panel1 = new JPanel();
            panel1.setLayout( null );
        public void createPage2()
            panel2 = new JPanel();
            panel2.setLayout( new BorderLayout() );
        public void createPage3()
            panel3 = new JPanel();
            panel3.setLayout( new GridLayout( 3, 2 ) );
        // Main method to get things started
        public static void main( String[] args )
            // Create an instance of the test application
            TabbedPaneExample mainFrame    = new TabbedPaneExample();
            mainFrame.setVisible( true );
    }Edited by: user6102378 on 2010-okt-07 06:51

    Unfortunately, the answer seems to be "no" - looks like the exact behaviour is even different across different LAFs. Nothing short of re-writing the layout code in the xxTabbedPaneUI will help.
    Just curious: how comes that we have so many tabbedPane related questions recently?
    Cheers
    Jeanette

  • Content Conversion: One row with one header and multiple item structures. Possible?

    Dear all,
    I have a input that looks like this:
    HeaderKeySomeHeaderInformationItemKeySomeItemInformationItemKeySomeItemInformation...
    Here's the actual input
    TEHGMESS0026000000288S0001TEI2____026200006112410400000000           18010000000000                                                      00126000000000126000120600000000002000000000                                    000WESTMONOBERTBE2014052309422408120003 000000000000000000000000000000JTEI2____026200006112410400000000           19010000000000                                                      00126000000000126000120600000000002000000000                                    000WESTMONOBERTBE2014052309422408120003 000000000000000000000000000000J
    HeaderKey = TEHGMESS
    ItemKey = TEI2____
    Is it possible to process this via MessageTransformBean (my actual scenario is JMS to IDoc)? I already tried but I only succeeded when having new lines in my input to separate between Header and (multiple) Items.
    So when the input and my configuration looks like below it works, but when I only have a single row input it doesn't work, even when specifying xml.recordHeader.endSeparator = '0' / xml.recordItem.endSeparator = '0'. I even tried xml.endSeparator = '0' but no luck.
    Input that works
    TEHGMESS0026000000288S0001
    TEI2____026200006112410400000000           18010000000000                                                      00126000000000126000120600000000002000000000                                    000WESTMONOBERTBE2014052309422408120003 000000000000000000000000000000J
    TEI2____026200006112410400000000           19010000000000                                                      00126000000000126000120600000000002000000000                                    000WESTMONOBERTBE2014052309422408120003 000000000000000000000000000000J
    Matching configuration that works for input which structures are delimited by new line.
    Paramentername
    Parametervalue
    Transform.Class
    com.sap.aii.messaging.adapter.Conversion
    Transform.ContentType
    text/xml;charset=utf-8
    xml.conversionType
    StructPlain2XML
    xml.documentName
    MT_TEI2Split
    xml.documentNamespace
    http://hansgrohe.com/pi/MQ/TEI2/10
    xml.keyFieldName
    SATZARTKey
    xml.keyFieldType
    CaseSensitiveString
    xml.processFieldNames
    fromConfiguration
    xml.recordHeader.fieldFixedLengths
    8,4,9,1,4
    xml.recordHeader.fieldNames
    SATZARTKey,SATZLENHG,NUTZLEN,MESSAE,MESSNR
    xml.recordHeader.keyFieldValue
    TEHGMESS
    xml.recordItem.fieldFixedLengths
    8,4,2,10,8,19,3,3,2,10,6,2,10,6,2,10,6,6,6,6,6,11,9,2,10,6,2,10,6,3,4,3,7,14,8,1,31
    xml.recordItem.fieldNames
    SATZARTKey,SATZLEN,BUCHART,TRNR,ANDGNR,MITEM,TEIVARI,BSTSTATU,REFTYP,ORNO,POS,REFTYP1,ORNO1,POS1,CHATYP,CHARGE,CHAPOS,ABBVONL,ABBNACH,ZUBVONL,ZUBNACH,I2MENG,I2BUNR,REFTYPN,ORNON,POSN,REFTYP1N,ORNO1N,POS1N,BSTSTATN,ABUSERAB,ABUSERFN,ABUSERNA,I2TIME,I2LIDNR,I2FMCODE,FILLER
    xml.recordItem.keyFieldValue
    TEI2____
    xml.recordsetName
    records
    xml.recordsetStructure
    recordHeader,1,recordItem,*
    Any clues on this? Is it even possible to have multiple structures in one row? Many thanks in advance
    Jens

    SAP came back to me with this answer:
    First, I would like to point the documentation for Message Transform
    Bean (MTB) in 7.4:
    http://help.sap.com/saphelp_nw74/helpdata/en/57/0b2c4142aef623e10000000a155106/content.htm?frameset=/en/57/0b2c4142aef623e10000000a155106/frameset.htm&current_toc=/en/45/0ea2de423c2d6be10000000a11466f/plain.htm&node_id=18
    As it is written at the beginning of this document, MTB is used to
    call classes written for the Plain Adapter Engine. So you may find
    additional documentation about the parameters for convertion in the
    documentation of the Plain Adapter Engine
    (http://help.sap.com/saphelp_nw74/helpdata/en/0d/00453c91f37151e10000000a11402f/content.htm?frameset=/en/1b/d5ef3b1ad56d4fe10000000a114084/frameset.htm&current_toc=/en/75/246b3de666930fe10000000a114084/plain.htm&node_id=11).There it is written that the structures by default are
    arranged line-by-line. The endSeparator just adds additional character
    string as a separator after the last column in a row.
    I hope that this answers your question. MTB expects the data to be
    structured line by line.
    You may add a custom module, which transforms the message in the
    expected format.
    If you have a look at the second link there's even a more precise wording that multiple structures within one line are not supported:
    xml.NameA.endSeparator
    Even if no specification is made here, a line break must follow since substructures are always expected as a line of the document.
    Bottom line is that it's not supported by now and verfied by me with PI 7.4 SP5
    Many thanks to Ambrish, Amit and Hareesh for the valuable input. Will probably try to work things out for now following Ambrish's / Hareesh's suggestion as this seems easier to implement. Amit's proposal with a dedicated module however would probably be the more polished solution.
    Cheers
    Jens

Maybe you are looking for

  • Want to search a word in a column multiple times ????

    Hello All, Want to search a word in column and after that word want to read the values till i encounter blank cell, uptill this i could get the code but then in same column again i have to search for same word and again start reading.  In short if i

  • Count the number of lines in  each file in a directory

    Hello, I would like to count the number of lines for each file in my directory and subdirectories. I wonder how can I count the lines of the specified files? Here is the program which is listed the files in the specified directory:                   

  • Min-Max Planning Generating Purchase Requisitions

    We have been using min-max planning for a while and scheduling the min-max planning report (planning level: organization) to run every evening to generate a purchase requisition. Of late we have some items that are showing a reorder quantity but not

  • How to create new user for OBIEE presentation service

    Hello Guys I now only have 2 users on my OBIEE, demo1, demo2.. Now I'd like to create a new user call A and make this new user able to log on to OBIEE presenation service.. So I went to the RPD admin tool and created new user there and gave password.

  • How has access.log file configured in WebLogic server 10.0?

    1.) I am using BEA Weblogic 10.0 and my access.log is not getting updated. 2.) I also need any information as to how this Webblogic server forms chunks (ex....access00011.log,access00012.log) because i have a software called AWStats which merges all