Make the height of content 100%

Hello,
Is there a way within iWeb to make the height of the content 100% (rather than stipulating pixel height) so that a background colour fills the page from top to bottom?
Thanks,

Even if you are not using the footer or header for your pages, they are still a part of your pages. You can see the areas delineated on the page with Show Layout turned on.
Unfortunately, the values that are present in the Inspector Page tab are set at some default which is the same from template to template. You can actually change these discrete areas on your page dynamically but the values in the Inspector won't change unless you change them. Again, unfortuately, this discrepancy can lead to rendering problems once the HTML is generated.

Similar Messages

  • Make the height of a tabbed panel content container adjust to the individual tab's content.

    I am designing a site and on one page I am using two tabs to seperate two different kinds of content.  One tab has more content and as such is longer on the page. But I noticed that MUSE uses which ever tab is the longest as the basis for how long the page is. This is fine while on that tab, but on the other tab it makes the page much longer (bunch of dead space) then it needs to be.  Is there a way of getting around this or is this a limitation of muse?
    Take a look at the page here and you will see what I mean. Click on cuff cases and scroll down and you will see what I mean.
    http://pgl0.businesscatalyst.com/accessories---prince-gun-leather.html

    Hi Lukewind,
    This has come up in the forum archive. There is not currently a way to create a tabbed panel with adjustable/variable height content containers. This is not actually a bug in Muse, but it is a feature request. Please create an Idea topic for this feature in the Ideas for Features in Adobe Muse forum (http://forums.adobe.com/community/muse/ideas).
    Here is the content from the archive request:
    Have the depth of tabbed panels adjust to the size of the content.
    The boxes in tabbed panels should be adjustable to the content rather than have all the tabs open in the same size as the biggest text box.

  • How do I make the height of my cells bigger? I am trying to put togther a guest list for my wedding.

    I have worked with excel in the past and it seems easier to manuever through. I am wondering if I should purchase it for MAC? I need to get my guest list done ASAP and I can't figure out how to make the cells bigger. Please help! Thank you!

    Tolf,
    I'll add one method to Wayne's list that you may find helpful in some certain situations. Begin by eliminating all the unnecessary rows and columns by grabbing the Add Rows/Columns grip at the lower right hand corner of the table and dragging it up and left until it stops. All the rows and columns with no content will now be gone.
    Now you have a table with just the minimum necessary rows and columns. Select the table object by clicking on once on the table name in the Sheets Pane or by clicking on the grip in the upper left corner of the table.
    You should now be seeing the 8 sizing handles, little open squares. They are at the 4 corners and in the middle of the 4 sides.
    Grab one of these sizing handles and drag it to change all of the cell sizes at once. If you grab one of the corners you can change the height and width simultaneously. If you just grab a side, you'll just change the spacing of the lines parallel to that side.
    If your level of ASAP precludes you from having time to work with Numbers, you can download the free trial of Office for Mac, or you can download one of the free Office clones, like LibreOffice. They would be more familiar to you in the short run.
    Good luck with your wedding planning.
    Jerry

  • Business Graphics - Bar Chart - How to make the height extendable

    Hi Experts,
    I have created Business Graphics UI element for my WD application which fetches data from R/3. I am displaying
    1) Cost Element in Y-axis and Cost in X-axis.
    2) I have set ChartType = Bar, height = 300, width = 830
    When the no of cost elements is upto 7-8, the graph is getting displayed correctly.
    However when the no of cost elements increases to more than 12, the graph becomes un readable. The system displays lot of texts in Y-axis.
    I want to make sure that if no of cost elements increases, the Y-axis of graph should extend.
    How we can do so?
    Regards,
    Gary

    I could not got any solution of this issue. Finally I convinced the customer to display only top 10 records. Any way higher level managers won't have time to see the graphs of all data.
    One way of resolving the issue is like this - create say 3 Business Graphic UI element. The height of Business Graphic UI element can be set as 300, 600, 900 etc.
    For 10 records use Business Graphic UI element  of height 300.
    For 20 records use Business Graphic UI element  of height 600.
    For 30 records use Business Graphic UI element  of height 900.
    Use the 'Visibility' data type to hide / unhide the Business Graphic UI of different height.

  • How can I make the bleed image content reappear in indesign cs6

    Hi there,
    I created a 3mm bleed in the document setup and made sure the artwork filled the bleed area. Then, suddenly, after playing around with some view settings (and maybe some other things that i cant remember), the bleed image content will not show up in neither indesign nor the exported pdf. When I set the view mode to normal, it just shows the bleed content area as white. I see the bleed lines and see that the images are filling the bleed when selecting the images themselves, but the bleed area is completely white and I can´t send my files to the printer as the content will not show up there either.
    Has anyone experienced this and know a fix? I was thinking that maybe the reset preferences would help, but I´m unsure.
    Grateful for any help
    Lise

    Hi Larry,
    I am in Normal mode and yes, the W shortcut toggle works.

  • How to make the spry Collapsible content to appear/expand from the top of the tab - not bottom?

    I hope this question does not sound confusing.
    When I click the Collapsible tab, I want the content to appear from the top - not the bottom. (See example link: http://www.longhollow.com - click "Time & Location" on the top right and you will see the content appear on the top). Do you know how to do this? I am not jquery expert, I would be appricate if you know how to do this.
    Thanks!
    Christie

    http://try.jquery.com/
    http://learn.jquery.com/
    https://tutsplus.com/course/30-days-to-learn-jquery/
    http://www.w3schools.com/jquery/
    Nancy O.

  • Crystal Report: How to make the fixed height box in all pages.

    Post Author: WTech
    CA Forum: Crystal Reports
    I want to make the height of box fixed size in all pages. The box in outside the detail section. Currently the size of the box changes according to the content of the detail section. Could anyone suggest me how should i achieve it ?  

    Hi srinivasan,
    If you want to keep "Save" and "Stop" common, Why do you want to keep them on Tab control? Is your tab control taking entire space on Front panel? If so, you can have SAVE and STOP on other vi, and you can call this vi (MODAL).
    Gaurav k
    CLD Certified !!!!!
    Do not forget to Mark solution and to give Kudo if problem is solved.

  • I am formatting an ebook and want to convert the doc. to an ePub with the Table of Contents links intact. Is there a way?

    I have formatted an ebook in word and created a doc. I now need to also convert it into an ePub. I have downloaded the latest version of pages and am having difficulties trying to make the Table of Contents links work. The tabs in all the youtube videos out there are not showing up in this version. Please help!!!!

    You might have more luck here.
    Pages for Mac
    What version of pages do you have?

  • Spry Accordion menu - How do you make tabs without content and make panel height fit the content?

    I have an Accordion Menu on my site and I would like to put a tab at the top that links to my homepage when clicked, instead of sliding open to show a content panel. I don't have any extra info to put in the content panel, so it would look kind of redundant to have it there.
    Also, each panel has a different amount of content, but they all default to the same height to fit the largest content. I want them to fit to the content of each panel. The only thing I've read said to set the height of the content panel to 100% in the CSS, but it didn't change anything.
    Thanks!
    Andrea
    http://www.andreamutsch.com

    You make it look so simple but it doesn't seem to be working for me...
    My first thought with getting rid of the tab content was to simply delete it, but when I do that I get a warning that 'The structure of the accordian appears to be damaged'. Then when I preview none of the tabs will open.
    This is what my accordian structure looks like with the tab content code deleted...
    <div id="Accordion1" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">home</div>
            </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">graphic design</div>
            <div class="AccordionPanelContent">
              <p align="center">identity </p>
              <p align="center">print </p>
              <p align="center">packaging</p>
              <p align="center">web </p>
            </div>
          </div>
    <div class="AccordionPanel">
            <div class="AccordionPanelTab">photography</div>
            <div class="AccordionPanelContent">
              <p>traditional</p>
              <p>digital</p>
              <p>retouch</p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">contact</div>
            <div class="AccordionPanelContent">
              <p>email me</p>
              <p>design quote</p>
              <p>purchase photography</p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">resume</div>
            <div class="AccordionPanelContent">download resume (.pdf)</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">design blog</div>
            <div class="AccordionPanelContent">2009</div>
          </div>
    Also, getting rid of the height in the CSS had no effect (I did this before I did the above)
    Below is my current CSS for the Panel Content
    .AccordionPanelContent {
        overflow: auto;
        margin: 0px;
        padding: 0px;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-size: large;
        background-color: #633408;
        font-weight: normal;
        word-spacing: normal;
        text-align: center;
    Also there is a note in the CSS that says this...
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    I'm not sure how accurate that is since I don't have a height in there and it worked (although not how I wanted) but I just thought I would throw it in.

  • How do I make the header, content, and footer transparent in Dreamweaver CS6?

    I try setting background color to transparent but it just turns white instead. I want to be able to just see my background image and color and have all content "floating" on my web page.
    Also on backgrounds, what is the coding for making sure the background is contained within whatever monitor size it is viewed within or will it automatically scale up/down?
    Thanks,
    Jennifer

    I'm just using a basic Dreamweaver page that has some CSS already in the head (haven't done much work on it yet, just trying to get those things transparent first):
    <!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title></title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    body {
        font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        background-image: url(../images/helia_bg.jpg);
        background-position: top;
        background-repeat: no-repeat;
        background-color: #fff0c1;
        margin-bottom: 200px;
        margin: 0;
        padding: 0;
        color: #000;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
        padding-right: 15px;
        padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
        color: #42413C;
        text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
        color: #6E6C64;
        text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: none;
    /* ~~ this fixed width container surrounds the other divs ~~ */
    .container {
        width: 960px;
        background-color: #FFF;
        margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
        background-color: #ADB96E;
    /* ~~ This is the layout information. ~~
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    .content {
        padding: 10px 0;
    /* ~~ The footer ~~ */
    .footer {
        padding: 10px 0;
        background-color: transparent;
        font-size: x-small;
        text-align: center;
    /* ~~ miscellaneous float/clear classes ~~ */
    .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 can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    -->
    </style></head>
    <body>
    <div class="container">
      <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" /></a>
        <!-- end .header --></div>
      <div class="content">
        <h1>Instructions</h1>
        <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
        <h2>Layout</h2>
        <p>Since this is a one-column layout, the .content is not floated. </p>
        <h3>Logo Replacement</h3>
        <p>An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
        <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
        <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
      <!-- end .content --></div>
      <div class="footer">
        <p>© Moving Harmonies - Site Design by <a href="....">JRH Creative</a></p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    </body>
    </html>

  • How do I make a white box in my master page that's intelligent enough to resize on all my other pages depending on the amount of content?

      I have a tiled background image but sometimes the white box only covers half the content and my tiled image is displayed under the other half of the content...  Do I have to manually make the box for each page or is there a way to attach it to both the header and footer so it expands depending on how much content is on each page while retaining my background image in only the border areas?

    Muse doesn't have that specific feature. However, in may cases the desired effect can be achieved by inverting how you think about it.
    Using a 100% with rectangle with a fill image for your header and another for your footer, that leaves the page fill and/or background fill image to grow and shrink to fill he space between your header and footer. If you only want one column of your page design to have this effect, you may be able to achieve that using a vertically repeating background fill image for the page or browser fill (where the fill is a horizontal band the with color only where you want the vertical column to appear.

  • Is it possible to vary the height of a row depending on content - I am using a System.Windows.Forms.DataGrid

    I have traced all calls through Visual Studio code map to the critical methods used for painting the rows of data - but can not override anything because they are not public classes but internal classes (datagridrelationshiprow )or internal abstract classes
    ( DataGridRow ( windows.system.forms )  )
    If I could override methods in these classes - I feel I could then change code to change the height from the defult based on the content.

    I have traced all calls through Visual Studio code map to the critical methods used for painting the rows of data - but can not override anything because they are not public classes but internal classes (datagridrelationshiprow )or internal abstract
    classes ( DataGridRow ( windows.system.forms )  )
    If I could override methods in these classes - I feel I could then change code to change the height from the defult based on the content.
    Hello,
    Yes that is a good idea and it is possible, you could refer to the following thread.
    http://www.codeproject.com/Articles/5521/Advanced-DataGrid-sizing
    It is using c#, but we could convert it to vb.net, that document has shared the detailed methods which we need to deal with to resize the row.
    In addition, since there is a control DataGridView which has more features such as rows property and autosizemode which allows us set row's height, if possible you could consider using that control instead.
    Happy new year!
    Carl
    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.

  • Make Colums height in IE and FF the same

    Is there a Hack to make the columns the same hegiht in FF and IE?
    As the content is differnt on each page I need the colums to even up on each page, escpecially the right hand column.
    Please preview the bottom  right column in both and you will see what I mean
    http://www.curiousconcepts.com/web_design.html
    thanks

    On this page and other pages except the home page
    http://www.curiousconcepts.com/web_design.html
    I have 2 columns left and right.
    On the left colums there are 2 boxes (text box and then the image display) and the right hand column there are 2 boxes (subscribe to newsletter and case study)
    I want the 2 columns (image display and case study) to line up at the bottom flush with FF and IE. I cannot acheive this. If I set a height on either FF or IE on each page this is fine I can do this but there is around a 10px - 15px difference between the colums because of the FF and IE thing.
    Eg if I set the height for FF to be flush bottom to case study box will line up perfectly with the bottom of the image box but in IE this will overhang by around 10-15px.
    I need to find a hack to make these the same across the browser platforms.

  • How to make the finder window expand to full height AND width of my screen, but not "full screen mode".

    The new green button on the finder window makes the screen go into full screen takeover mode - alt clicking this makes it 100% height of the screen.
    How can I make this 100% width and height (just like it used to be in Mavericks)?
    I have 2 x 27" monitors, so the "full screen takeover" mode is not right as I only want the finder window to be on one monitor whilst I work on another.
    Any ideas?! Thank you!

    Was about to post the same question.
    Ever since I upgraded to Yosemite (about a month ago), this odd behavior has irked me.
    Could it be that it only plagues those of us running dual displays? And therefore nobody else cares?

  • What would the code be to make the sidebar even with the main content at the bottom?

    Can anyone tell me what code to use to make the sidebar even with the main content at the bottom.  I am using CSS.  I am guessing the height would be auto, but can't figure out how to do it. Any help would be greatly appreciated.  Thanks.

    Equal height columns are simple with Tables.  But CSS divisions don't behave the same as table columns so you need to use a script or trick the eye with a repeating background Image.
    See image below:
    See working demo
    http://alt-web.com/TEMPLATES/3-col-white-gray.html
    CSS code:
    #container {
    width: 900px;
    margin : 50px auto;
    background: url(../Images/BG/3-col-wht-gry.jpg) repeat top;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

Maybe you are looking for

  • Not able to view mails in inbox

    Hi I use ovi mail and currently i am not able to view mails in any of the folders. I use the same user name as that of my yahoo mail account. Does this has to do anything.

  • Should I be able to boot from external firewire disk?

    Yesterday, to prepare for upgrading to Leopard, I copied across my hard drive contents onto an external Firewire drive, by using drag & drop, folder by folder. I was hoping that this would let me (after a reboot) select the external drive as my Start

  • Field COBL-FKBER. does not exist in the screen SAPLKACB 0002

    HI ALL, I am facing problem when execute a BATCH JOB (sm35) for depreciation run(AFAB). It is giving an error: 349 Field COBL-FKBER. does not exist in the screen SAPLKACB 0002. In the batch job, I noticed that there are 13 transactions have been proc

  • IWeb 09 photo album loses hyperlinks to external pages

    I have an album of images on my site and have hyperlinked the image caption text to open videos on external pages. This always worked fine in iWeb 08, in fact the images themselves on the main album page automatically became hyperlinked, which was co

  • Process Chain Descheduling

    Hi All. Our system is pretty straight forward.  Our loads are controlled by a metachain that in turn kicks off other process chains.  Everything was running fine until all the sudden, some of the subchains stopped executing. They show up red in the m