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 allIf 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 - ScottScott:
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 -
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,
RonaldoJus 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
Kevini 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 -
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, BelgiumHi
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 consultantfor 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 HelenHello,
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. -
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,
CarrieIs CurrentPage() available?
Thanks,
Gordon
Maybe you are looking for
-
trying to install windows 7 32bit ultimate on my late 2006 iMac with bootcamp 4.0.4 running on Lion 10.7.5, but it can't complete install, the BSoD appears as soon as it tries to reboot to continue setup, last stage reached " setup preparing computer
-
Issue with Session ID during POST
Hi All, I am using Weblogic server version weblogic 9.2 and facing an issue with the session ID. I have a client side script with numerous GET calls and one POST call that it makes in a single session. Frequently I come across with issue that the ses
-
I can't drag my songs into playlists, or arrange them on a playlist. What's wrong?
-
Sharepoint 2013 - Remove "Recent" from left menu
Hello All - My client has requested that she be able to remove (or hide) the "Recent" menu header from the left menu in Sharepoint 2013. This is for specified site collections/sites/pages, not farm-wide. So far, I've tried to do this via JQuery by ad
-
OIM 11g target recon not performing full recon for OID resource
Hi I noticed that full target recon is not being performed on OID because every time I run the recon only few same records that were recently updated gets reconciled but not all. I tried updating the timestamp attribute to 0 and also tried removing t