Dreamweaver layout - page height

I'm designing a Web site for a college course using a Dreamweaver layout - 2 column fixed, left sidebar, header and footer. When you use this layout, what is the height of my Web page? Does the height vary depending on the browser? Thanks in advance for any insight.

Height should remain flexible (unspecified) to accommodate varying amounts of content and increased text sizes.
If required, use the min-height property instead of height.
http://reference.sitepoint.com/css/min-height
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

  • Dreamweaver set page height in CSS

    Hi everyone. What is causing this giant white space under my bottom menu bar?
    I know now I should have used divs and padding, but I've spent all afternoon position every element using relative positioning and don't want to have to redo my entire website!
    Here's the website:
    http://www.jhurleydesign.com/_drivetastic_site/
    Here's my CSS:
    @charset "UTF-8";
    body {
        width: 1018px;
        margin-left: auto;
        margin-right: auto;
    .lgo {
        position: relative;
        top: 0px;
        right: 0px;
        z-index: 20;
    .tbr {
        position: relative;
        top: -49px;
        right: 0px;
        background: url(../_images/best.png) repeat-x;
        height: 45px;
        width: 1018px;
        z-index: 10;
    .tmu {
        position: relative;
        top: -87px;
        right: -350px;
        z-index: 30;
        border: none;
        outline: none;
    .bbr {
        position: relative;
        top: -48px;
        right: 0px;
        background-color: #212121;
        height: 45px;
        width: 1018px;
        z-index: 10;
    .bmu {
    .bmu .mi {
        font-family: Helvetica, Arial;
        font-size: 8px;
        font-weight: 850;
        position: relative;
        top: -80px;
        right: 0px;
        z-index: 30;
        border: none;
        padding-left: 20px;
        text-decoration: none;
        display: inline;
    a.mui:link {color: #FFF;
    text-decoration: none;
    a.mui:visited {color: #FFF;
    text-decoration: none;}
    a.mui:active {color: #8a130d;text-decoration: none;}
    a.mui:hover {color: #8a130d;
    text-decoration: none;}
    .bmu .cr {
        font-family: Helvetica, Arial;
        font-size: 8px;
        font-weight: 850;
        position: relative;
        top: -92px;
        right: -816px;
        z-index: 30;
        border: 0;
        padding-left: 20px;
        text-decoration: underline;
    a.crt:link {
        color: #FFF;
        text-decoration: underline;
    a.crt:visited {color: #FFF;
    text-decoration: underline;}
    a.crt:active {color: #8a130d;text-decoration: underline;}
    a.crt:hover {color: #8a130d;
    text-decoration: underline;}
    .lrn {
        position: relative;
        top: -160px;
        right: -20px;
        z-index: 15;
    .grd {
        position: relative;
        top: -590px;
        right: 0px;
        background-color:#e8e8e8;
        height: 295px;
        width: 1018px;
    .lgrd {
        position: relative;
        top: -590px;
        right: 0px;
        background-color:#fbfbfb;
        height: 443px;
        width: 1018px;
        z-index: -10;
    .stm {
        position: relative;
        top: -1300px;
        right: -535px;
    .container {
        position: relative;
        top: -1226px;
        right: -23px;
        z-index: 10;
    .container .txt {
        font-family: Helvetica, Arial;
        font-size: 14px;
        display: inline;
        width: 215px;
        padding-right: 36px;
        float: left;
        display: inline;
        color: #a5a5a5;
    .container .txt img {
    .container .txt a {
        float: left;
        padding-top: 23px;
    .prms {
        position: relative;
        top: -1120px;
        right: -8px;
        float: left;
        display: inline;
    .tst {
        position: relative;
        top: -1152px;
        right: -44px;
    .prms .txt {
        padding-top: 11px;
        color: #8a130d;
        font-family: Arial, Helvetica;
        width: 459px;
    .prms .ltxt {
        position: relative;
        top: -20px;
        font-family: Arial, Helvetica;
        color: #494949;
        font-size: 12px;
        font-family: Arial, Helvetica;
        height: 36px;
        width: 260px;
        position: relative;
        top: 10px;
        padding-bottom: 138px;
        float:left;
        display: inline;
    .quoteimgs {
        position: relative;
        top: -1444px;
        right: -591px;
        padding-bottom: 0px;
    .prms .ltxt {
    .prms .ltxt p {
        margin-bottom: -px;
    .prms .ltxt p a:link{
        color: #8a130d;
        text-decoration: none;
    .prms .ltxt p a:visited{
        color: #8a130d;
        text-decoration: none;
    .prms .ltxt p a:active{
        color: #8a130d;         text-decoration: underline;}
    .prms .ltxt p a:hover{color: #8a130d;
    text-decoration: underline;}
    .btmub {
    Please someone give me a work around to force the page height? Need to get rid of that white space
    If someone could find out what's causing the page to be bumped down...honestly spent hours and hours looking and deleting parts of my CSS and I can't work it out at all

    If your were to remove all positioning (highly recommended) and just let the normal document flow determine your page height, you would have far fewer problems.  Suggest you start your project with a pre-built CSS Layout that has all the columns and containers you need.  This will save you many hours of needless frustration, too.
    DW Starter Pages (free)
    http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com/

  • Where can I get the sample layout pages that were in the older CS Dreamweaver?

    Where can I get the sample layout pages that were in the older CS Dreamweaver. You normally find them when you press "More" on the start screen and you see it on the "layout" section.
    On the CC version you only get 2 out of the 20 that you used to get. How can I get them back?

    You can refer the threads below
    http://forums.adobe.com/message/5491936#5491936
    http://forums.adobe.com/message/3100218
    http://forums.adobe.com/message/5096504#5096504
    Please visit for more starter layouts  http://helpx.adobe.com/dreamweaver/using/getting-started/templates.html

  • How do I get my Fluid Grid Layout page to resizes from portrait to landscape for iPhones?

    Starting in portrait on my iPhone 4, the fluid grid layout page does not resize when I turn to landscape.  After I refresh / resize to fit the page on landscape and then turn the iPhone to portrait, the page resizes just fine.  Everything seems to be working just fine on the desktop, ignoring IE.  Could it be my media query tags?
    If anyone knows a solution, it would be much appreciated.  Thanks.
    Here is my test page: http://www.bedroomandmore.com/1_b_fluidGrid.html
    Here are my media query tags (the first set of rules does not have the media query tag and becomes the default):
    @media only screen and (max-device-width: 480px) and (orientation : landscape) {
    @media only screen and (min-width: 481px) {
    @media only screen and (min-width: 769px) {
    Here is most of my media query CSS:
    @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%;
    /* Mobile Layout: 480px and below.(smartphone portrait) */
    .gridContainer {
              width: 95.4184%;
              padding-left: 0.5907%;
              padding-right: 0.5907%;
    #header {
              clear: both;
              float: left;
              display: block;
              margin-left: 0%;
              width: 72%;
              max-height: 0%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
              top: auto;
              padding-top: 0.25em;
    #menuHorizontal {
              clear: both;
              float: left;
              width: 118%;
              height:100%;
              margin-left: auto;
              position:relative;
              top:-1em;
              display: block;
    #slides {
              clear: both;
              float: left;
              margin-left: 0.1em;
              width: 119%;
              position: relative;
              top: -1em;
              display: block;
                        /*Slides container: Important: Use position:relative; with top:-1em; together to position div.
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear: both;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting
                                  slide_container is container size
                                  slides_container div set the size of the image inside--adjust to fit image in it so it is not cropped*/
    .slides_container div {
              clear: both;
              width: 69%;
              display: block;
              /* Mobile Layout: 480px. (smartphone landscape)
                                  Inherits styles from Mobile Layout 480px.
                                  Set to clear:none; to allow div to shift up
                                  Or set to clear:both; to take a whole row of the screen*/
    @media only screen and (max-device-width: 480px) and (orientation : landscape) {
    .gridContainer {
              width: 95.4184%;
              padding-left: 0.7907%;
              padding-right: 0.7907%;
    #header {
              clear:both;
              float: left;
              display: block;
              margin-left: auto;
              width:100%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
    #menuHorizontal {
              clear:both;
              float: left;
              width: 110%;
              margin-left:auto;
              display: block;
    #slides {
              clear:both;
              float: left;
              margin-left: 0%;
              width: 68%;
              display: block;
                        /*Slides container: Important:
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear:both;
              float: left;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting*/
    .slides_container div {
              clear:both;
              width:69%;
              display: block;
                        /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.
                                  Set to clear:none; to allow div to shift up
                                  Or set to clear:both; to take a whole row of the screen*/
    @media only screen and (min-width: 481px) {
    .gridContainer {
              width: 95.9456%;
              padding-left: 0.5271%;
              padding-right: 0.5271%;
    #header {
              clear:both;
              float: left;
              display: block;
              margin-left: auto;
              width: 100%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
    #menuHorizontal {
              clear:both;
              float: left;
              margin-left:auto;
              display: block;
    #slides {
              clear:both;
              float: left;
              margin-left: 0%;
              width: 70%;
              display: block;
                        /*Slides container: Important:
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear:both;
              float: left;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting*/
    .slides_container div {
              width: 100%;
              display: block;

    I found the problem.  There is a bug in Safari for iPhone 4.  Use code to fix found at http://stackoverflow.com/a/6379407

  • Layout Content Height limitation

    Greetings,
    I have tried unsuccessfully to increase the layout content height to over 1,000 px, however it seems there is a limitation of approximately 700 px. Does anybody know how to get around this, or am I just missing something?
    Thank you - Scott

    Scott:
    How are you trying to increase the height? Are you using the Inspector/Page/Layout pane?
    Click to view full size
    You should be able to go far beyond 700 using that method. Unless the theme you're using won't let you. Plain themes have no limitation. What theme are you using?
    One method you can try is to create an empty text box and drag it down. That will usually let you increase the page height. Some themes may not appear right if they have a fixed background height and use special files for the background.
    OT

  • Changing page height

    I go to Layout, sometimes it works, other times, it doesn't make the change.  I'm using version 3.04.  Thanks!

    You shoulf be able to adjust the page height in the inspector tab:
    The other thing that can work it is a text box in the body portion of your page just move it down the page to expand.

  • Can an i-frame resize the page height and itself with new content?

    I built a website in Adobe Muse and embedded a blog within an i-frame on the portfolio page of the site here...
    http://dannyhardakervideo.co.uk
    This approach was taken because the client needed the ability to keep  adding videos to the portfolio section of the site themselves  indefinitely and
    i was short on ideas to implement that functionality  with Muse. I've now exported the code as HTML to Dreamweaver to see what I can achieve there.
    Using Dreamweaver, Is it possible for the page height and i-frame height to resize with new  content as more videos are added to it? Is there some script I can  add to the page?
    Is there a better solution?
    PLEASE HELP.

    Ordinarily, Iframe re-size scripts will only work when the parent page (with iframe) and the external page (blog) both reside on the same domain.   However, someone came up with a cross domain solution which requires you to put jQuery scripts on both sites.  NOTE:  I've never tested this.
    https://github.com/davidjbradshaw/iframe-resizer
    IMO, a cleaner solution is to use scripts to parse the blog's RSS feed into the main site.  You can use PHP code from FeedForAll or jQuery's jFeed plugin.
    http://alt-web.blogspot.com/2011/06/adding-blogger-rss-feed-to-html-page.html
    https://github.com/jfhovinne/jFeed
    The main advantage in using a script to parse feeds is you control the appearance -- to match your main site & how many posts are displayed on the page.
    Nancy O.

  • How to remove Layout page when submitting reports in self service?

    Hi, when submitting a report or request thru self service, there are 7 steps or pages to go thru. We would like to hide some of these pages and we learned that this could be done thru the Web HTML Call tab when creating the function for the report (System Administrator->Application->Function). For example if you want to hide the Schedule page, just add &scheduleRegion=Hide in the Web HTML Call. We wanted to hide the Layout page and we added layoutRegion=Hide but it's still not hiding it. The other pages we could hide but for some reason the layout page won't. Anybody knows how to do this? Did we get the correct region name for the Layout page (i.e layoutRegion)?
    Thanks,
    Ronaldo

    Jus convert your report in Page Layout mode and see if your first pafe is getting expand in the second page.
    Now check if there are any cell going into second page.
    - if there are any blank cell which is there after table.
    you have to check formating very carefull.

  • Control the page height and page width of pdf report using pasta_pdf.cfg

    Hi All,
    I've followed the note: 338990.1 (how to print publisher PDF reports via the concurrent manager) in metalink to print a PDF REPORT. Everything work fine except the page height and page width is used as default (8X11). Is there anyway that i can custom page height and page width size such as: legal (8.5X14).
    current set up in pasta_pdf.cfg
    [DEFAULT]
    %% ============== Preprocessing Command ==================== %%
    % Pasta can use a preprocessing command to invoke any executable
    % that supports an input file and an output file (a filter program).
    % You can use redirection. Pasta will invoke the filter program
    % to preprocess the Pasta output before passing it to the printing
    % command. By using the preprocess option, you can generate output
    % formats other than the formats Pasta currently supports. For
    % example, you can generate PCL output.
    % You can use {infile} and {outfile} in this option.
    % {infile} is the output file generated by Pasta. You can use
    % it as input for the preprocessing command. It is a temporary
    % file and will be deleted after being passed to the
    % preprocessing command. {outfile} is the output file generated
    % by the preprocessing command. Pasta names it temporarily and
    % it will be deleted after being passed to the printing command.
    % If you want to keep it, you can name it by using the '-o'
    % command line option. Pasta will copy {outfile} to the file you
    % specify.
    % Preprocess for PDF output
    % This is an example for PDF output to print.
    ; Xpdf
    preprocess=/usr/local/bin/pdftops {infile} {outfile}
    ; Ghost Script
    ; preprocess=pdf2ps {infile} {outfile}
    ; Acrobat
    ; preprocess=acroread -toPostScript -pairs {infile} {outfile}
    %% ============== Printing Command ========================= %%
    % You can specify the printing command and options you want
    % to use to print your report. Pasta will pass the final output
    % to this command. {printername} will be replaced by the
    % actual printer name passed through the command line option
    % (-pn), so in most cases you don't have to change these
    % options.
    % for UNIX platform
    printCommand=lp -c -d{printername}
    % for Windows platform
    ntPrintCommand=print /D:{printername}
    %% ============== Error Log File =========================== %%
    % This tells Pasta to create a log file. The default error
    % output is stderr.
    ;errorlogfile=pasta.log
    NOTE: pasta version 3.0.4
    form server 6.0.8.27.0
    third party tool is pdftops
    Thanks
    Kevin

    i think that can be down from the printing direver/styles/prt files when you added the printer at your apps system check the follwoign for more info.
    ( How to Implement Printing for Oracle Applications: Getting Started )
    Note:269129.1
    (Step By Step Guide to Set Up a Printer in Oracle Applications)
    ( Note:60936.1)
    fadi
    http://oracle-magic.blogspot.com

  • Auto adjustment of page orientation causes printing issues with documents that have a page width greater than its page height.

    Hi,
    Since an upgrade from Word 2003 to Word 2010, we are experiencing printing issues with certain
    documents that have a page width greater than its page height.
    In Word 2003, it was no problem to set the page width greater than the page height while setting the page orientation to "portrait".
    In Word 2010, this seems impossible: despite leaving the page orientation to "portrait", if one changes the page width/height as stated,
    Word 2010 automatically adjusts the orientation to "landscape". Resetting the orientation to "portrait" will flip the page's width/heigth settings.
    This behaviour causes printing problems: the page prints out 90° rotated.
    I do not believe this is a printer driver issue: I tried several different printer drivers, and all give the same (bad) result. Setting the printer driver's page orientation settings (before printing) makes no difference, as
    Word 2010 seems to force the page orientation settings.
    Inserting the documents 90° rotated is not an option, since it causes problems with the printing margins.
    This is very annoying, since we have to print official documents of a municipality (driver's licences).
    Is there a workaround for this issue?
    Regards,
    Laurent Grandgaignage
    Sysadmin Gemeentebestuur Stabroek, Belgium

    Hi
    Thank you for using
    Microsoft Office for IT Professionals Forums.
    From your description, we can follow these steps to test this issue
    Step 1: Repair Office 2010
    1.      
    Click
    Start, and then click Control Panel.
    2.      
    Click
    Programs and Features.
    3.      
    Click the
    Office 2010 program that you want to repair, and then click
    Change.
    4.      
    Click
    Repair, and then click Continue. You might need to restart your computer after the repair is complete.
    Step 2:
    Rename the global template (Normal.dotm)Follow the steps for the operating system that you are using:
    Windows Vista and Windows 7
    a)      
    Exit Word 2010
    b)      
    Click
    Start.
    c)       
    In the
    Start Search box, type the following text, and then press
    ENTER:
    1.      
    %userprofile%\appdata\roaming\microsoft\templates
    d)      
    Right-click
    Normal.dotm, and then click Rename.
    e)      
    Type
    Oldword.old, and then press ENTER.
    Microsoft Windows XP
    a)      
    Exit Word 2010
    b)      
    Click
    Start, and then click Run.
    c)       
    In the
    Open box, type the following text, and then press ENTER:
    %userprofile%\Application Data\Microsoft\Templates
    d)      
    Right-click
    Normal.dotm, and then click Rename.
    e)      
    Type
    Oldword.old, and then press ENTER.
    f)       
    Close Windows Explorer.
    How to troubleshoot print failures in Word 2010, Word 2007, and Word 2003
    http://support.microsoft.com/kb/826845
    Please take your time to try the suggestions and let me know the results at your earliest convenience. If anything is unclear or if there is anything
    I can do for you, please feel free to let me know.
    Hope that helps.
    Sincerely
    William Zhou CHNPlease remember to mark the replies as answers if they help and unmark them if they provide no help.

  • Get jQuery Document Ready to work in a Custom Layout Page

    Hi
    Working with a branding company I have placed my Bootstrap and JQuery files at the bottom of my custom Master page 
    </footer>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js">//<![CDATA[
    //]]>
    </script>
    <script type="text/javascript" src="/Style%20Library/Client/js/bootstrap.min.js">//<![CDATA[
    //]]>
    </script>
    <script type="text/javascript" src="/Style%20Library/Client/js/bootstrap-datepicker.js">//<![CDATA[
    //]]>
    </script>
    All good!  Now if I add a   $(document).ready(function()  below the above definitions  and say have a date picker widget marked up this
    works.  
    I have noticed that in my case I am unable to run document ready function at the custom page layout level- only the one in the custom master file is ever executed -  I have tried moving the above definition files into the header as per the sample in
    Bootstrap2.html but SharePoint simply removes them  during the conversion. Moving the same document ready function out of the master into the layout page doesn't work
     I guess my question is am I am have a unique document ready function at the page layout level as this I would have thought this would be possible -  In my case I need my JQuery functon to perform some runtime branding that is unique per  page
    Daniel
    Freelance consultant

    for a quick and dirty implementation, I coded this up which works.  I will see about the other implementation as suggested by Hugh as I am not entirely happy about loading the document ready as there is a slight delays as the body class is set and the
    page is rendered 
    var bodyCSS ;
    function SetBodyCSS()
    var ctx = new SP.ClientContext();
    var site = ctx.get_site();
    var web = ctx.get_web();
    // construct a json object
    ctx.load(web);
    ctx.executeQueryAsync(function(s, a){
    var siteBodyContainerCSS = {
    "Sales": "Pink",
    "IT": "burgundy"
    // lookup the class to set from the title
    bodyCSS = siteBodyContainerCSS[web.get_title()];
    // only bother to set if not null , undefined or empty
    if (bodyCSS)
    $('#s4-bodyContainer').removeClass("default");
    $('#s4-bodyContainer').addClass(bodyCSS);
    else
    alert( ' no body css class defined for ' + web.get_title()) ;
    // now call this to get the body css class
    //]]>
    </script>
    </a>
    <script type="text/javascript">//<![CDATA[
    $(document).ready(function() {
    ExecuteOrDelayUntilScriptLoaded(function () {
    /* your code here */
    SetBodyCSS();
    }, "sp.js");
    $('#dp6').datepicker();

  • How to edit the "Oracle Three Column Layout" page template?

    Hello all,
    My question is very simple: how can one edit the Oracle Three Column Layout page template? I tried searching the file system for a file called "threeColumnTemplate.jspx" but I cannot seem to find it. Is it hidden into a jar file of some kind? Or at least can anyone tell me the name of the nice component located in the upper right corner that displays the loading activity?
    Thanks.

    Extract oracle-page-templates.jar with winzip & browse to location oracle/templates
    open the file threeColumnTemplate.jspx using jdeveloper.
    after you open it , you can edit the logo , save the changes & create this jar again or save it to the zip which will automatically update the jar.

  • Page height not changing and yes, I've checked for hidden objects

    Hi
    has anyone got any advice? I'm tearing my hair out!
    I cant seem to change all my websites page heights despite checking that there are no hidden items
    best wishes Helen

    Hello,
    Please go in the page in design mode. Select "Show all on Page" and "Unlock all on Page" from Object Menu.
    You may find some unwanted elements near the footer of the page. Deleting them will fix the problem. If it do help then please share the muse file with us so that we can take a look at it.
    Regards
    Vivek

  • Applying custom master page on layout pages

    I am applying my custom master page on application layout pages which I am deploying using visual studio. My issue is; I have to copy my custom master page in the same directory where my layout pages exist otherwise its not working.
    I want to deploy my custom master in the default master page directory and refer it to my layout pages.
    is it possible or I have to copy my custom master page in the layout page directory ????

    Hi Nazish,
    By default your application pages will inherit the masterpage currently applied to the site where your app is hosted, but to specify a custom master on a app page you have to set the "CustomMasterURL" property on your site.
    Next your application page needs to inherit from the "LayoutsPageBase" class and you need to specify your custom masterpage on your application page with "~masterurl/custom.master"
    Regards, Pieter
    MCPD | MCITP
    My Blog
    Please remember to click "Mark As Answer" if a post solves your problem or "Vote As Helpful" if it was useful.

  • Number of Layout Pages

    I'm trying to get two templates to print out while in the production order section -- my attempt at this is to merge the two templates to one document but the "Number of Layout Pages" in the document properties is blank and won't let me add in a second page.  Am I missing a critical configuration setting or something?
    Thanks,
    Carrie

    Is CurrentPage() available?
    Thanks,
    Gordon

Maybe you are looking for