Gradient background extends the height of the page

Hi, I'm an extreme novice with dreamweaver - always figure it all out. I need to edit a website that has been set up by someone else and I can't understand why the gradient doesn't extend to the entire height of the page. Initially, it was fine, but when we added more text this problem popped up. I've fiddled with the css but nothing I do is working - I hope that's something basic like I'd like to achieve as soon as possible.

H1 titles are concentrated also in their columns despite css saying 'align left', so this confuses me also - we can get them to be aligned to the left?

The URL is: www.petrohamman.co.za

Thank you!

Ash

Because another person leave for another career, setting up is shocking?

Change your body css as below:

{body

margin: 0;

padding: 0;

do-family: Helvetica, arial, without serif.

color: #E6A9CC;

}

You have no need to 125% on your #background of the css selector so either delete or comment it out using the / * / as shown BELOW to add an overflow: hidden; as also noted below, who will deal with the issue of gradient.

#background

{

Width: 100%;

/ * height:125%;*/

background:-webkit-linear-gradient(#FFFFFF, #F4DCEB). / * For Safari * /.

background:-o-linear-gradient(#FFFFFF, #F4DCEB). / * For Opera 11.1 to 12.0 * /.

background:-moz-linear-gradient(#FFFFFF, #F4DCEB). / * For Firefox 3.6 to 15 * /.

background: linear-gradient(#FFFFFF, #F4DCEB). / * Standard syntax (must be last) * /.

overflow: hidden;

}

Change text-align: center; who is currently stated in the h1 to text-align css selector: left; OR just delete it completely the default alignment is already positioned on the left.

H1

{

margin: 0;

padding: 0;

color: #E6A9CC;

text-align: left;

font-size: 30pt.

}

What is important to remove height: 500px; Since the #content css selector or comment it out as shown below using the *. This is important because any information in the 'content' container does not scroll if the height is more profound than 500px, which it will be. The general rule is that you should never set on any container heights, in special circumstances where you know what will be the height or you want to display an area regulated as a scrolling frame.

#content

{

Width: 100%;

/ * height: 500px; */

}

Tags: Dreamweaver

Similar Questions

  • How can I change the background on the page of navigation windows 7 media player

    My husband changed the background on the navigation Media player to an image page and he can't remember how he did. The fact of background photo playback music.video impossible to read information. I need substantive normal return help please

    A moderator has moved this thread in Forum Windows programs.

    Hi, Margaret.

    Windows 7 - Windows Media Player - change the background Image

    http://www.SevenForums.com/tutorials/11087-Windows-Media-Player-changing-background-image.html

    Change the appearance of Windows Media Player by using skins

    http://Windows.Microsoft.com/en-us/Windows-Vista/change-how-Windows-Media-Player-looks-using-skins

    Skins for Windows Media Player

    http://Windows.Microsoft.com/en-us/Windows/downloads/Windows-Media-Player/skins

    Good luck!

  • Edge cancels the background of the page HTML - is this a bug?

    Hello

    In the most recent preview, I'm running on a fairly serious problem.  I created a very simple example to show what is happening (see below).  In fact, when I insert the edge animation in my html page, that he cancels the background color I assigned to the entire page.  In this case, I have the color of #9966CC.  You can see the color as the load of the animation, but then the background everything becomes white.

    Here is an example of the page:

    http://bvcdesign.com/edgeBGissue.html

    It's just 2 slides with a preloader.

    I would really appreciate help with this.

    Thank you!

    BRITISH COLUMBIA

    Hey BC,.

    Delete this and only this is the file edge.js

    ],

    'body':]

    ['color', 'background-color', 'rgba (0,0,0,0)']

    It should work.

    Sarah

  • LaserJet P1606dn: does not print the background of the page number of manual

    I use the HP Laserjet P1606dn printer.  I am trying to print the user's Guide the HP for a new printer HP Officejet Pro 8620.     The manual is in PDF format.   When you view a page of the manual on the computer screen, the page number appears at the bottom of the screen.  Unfortunately, when printing the printer manual HP Laserjet P1606dn, the page number is not printing.  I tried to use the SHRINK TO FIT to the Laserjet function, but that does not print the page number.

    Any advice on how to print the page number would be welcome.   Aaron

    Thank YOU FOR YOUR QUICK RESPONSE!   PROBLEM HAS BEEN RESOLVED.  I TRIED TO PRINT THE GUIDE THE USER DIRECTLY FROM THE WEB SITE THAT DID PRINT NOT PAGE NUMBER.    I DOWNLOADED THE MANUAL IN THE MEMORY OF THE COMPUTER AND THEN PRINTED THE GUIDE FROM THE DOWNLOADED FILE.   THE PAGE NUMBER DID PRINT WHEN YOU PRINT FROM THE DOWNLOADED FILE.    WHY IT WORKED, I DON'T KNOW, BUT CELA WORKED.

    THANKS AGAIN FOR YOUR KIND INPUT1 BEST, AARON

  • How the background of the page may display in a different color to white on Firefox mobile for android?

    Screen home and all the other countries have bright white origins. I wish that other color options. Thank you

    It is not possible.

  • How can we change the page background?

    It will be useful if in Adobe Reader the color of the background of the page could be modified, where possible (as in other PDF readers). There are people like me who find highlighting, for the eyes, a white background.

    Look at accessibility in Adobe Reader preferences.

  • Why are all the pages become black

    I've been wachting YouTube and suddenly the entire background of the pages went grey black

    You can try the following steps in case of problems with web pages:

    You can reload webpages and ignore the cache to refresh potentially stale or corrupt.

    • Hold down the SHIFT key and click the Reload button
    • Press 'Ctrl + F5' or 'Ctrl + Shift + R' (Windows, Linux)
    • Press 'Command + shift + R' (Mac)

    Clear the cache and delete cookies only from Web sites that cause problems.

    "Clear the Cache":

    • Firefox/tools > Options > advanced > network > content caching Web: 'clear now '.

    'Delete Cookies' sites causing problems:

    • Firefox/tools > Options > privacy > "Use the custom settings for history" > Cookies: "show the Cookies".

    Start Firefox in Safe Mode to check if one of the extensions (Firefox, Tools/menu key > Modules > Extensions) or if hardware acceleration is the cause of the problem.

    • Put yourself in the DEFAULT theme: Firefox, Tools/menu key > Modules > appearance
    • Do NOT click on the reset button on the startup window Mode safe
  • Adobe Edge allows to recreate the page/click-extension, scrolling effect on the linked site of Bioenergy Quiz?

    Hi all

    I don't know how to describe what I'm asking also the term "click/page-extension, scrolling" effect  Although I don't know if it's the correct term.

    I was responsible for creating a quiz game similar to the one below.

    Bio quiz

    The thing that left me open-mouthed is hOE to implement drop down list feature div?  So when the user clicks on the button "Start Quiz", content for "Question 1"appears or is added to the lower part of the content for the bioenergy Quiz title and extends from the page."  The important thing is that the issues are hidden until users click on a response to the previous question, and the question appears or is added at the bottom of the page and extends the page.

    You can provide any help will be greatly appreciated.  Thank you.

    You view the source. You can edit the files and modify the copy and images to create something with this feature. The JavaScript at the bottom, it's what makes work. The css/default.css file is whence the looks

  • Border Panel and gradient background

    Hello

    It's probably very easy so apologies if I missed something obvious.

    What I want to do is get a gradient background for the border of a Panel, then a different gradient for the background.

    I tried to create a SWC from Flash CS3 file. It seemed he would work but when I added content to the Panel he placed the content on the title area of the Panel in the content area.

    So I tried to create a graphical appearance using a box 26 x 26 pixels of padding in the appropriate color ramp, but it only would allow me to set the skin for the background and a border together and this isn't what I want.

    When I watched the video on Adobe TV to do skins graphic I also watched a programmatic skin topic that looked like, it might be useful, but it sounds very complicated and I was wondering if someone could help because I'm quite at this news.

    Also, if there is a simple passerby so please tell me I would be very grateful.

    Thank you

    Chris

    Hi again

    Just found another post on this forum for a slightly different question, but what it boils down to is that it a bug and Adobe will not remedy.

    The solution is to BorderTopPad the Panel to a value that takes the content in the header bar, and it works.

    Wish that they had set even if, as many people seem to have had the same problem and it does not lose much time (2 days in my case) try to solve a problem that doesn't really have a good solution.

    See the site:

    http://dougmccune.com/blog/2008/01/17/followup-about-Flex-Panel-bug/

    Hope that no one else lost too much time on this - if you did sorry and thank you.

    See you soon

    Chris

  • The page height is adjustable so that it extends from the content and either?

    I'm building a site that doesn't have a lot of content. I have a background color of the browser and the substantive pages is white. When I view the site on a large monitor the height of page will extend up to the browser, and I find myself with all that white empty space at the bottom. Is there a way to Muse to set the height of the page so that it extends only where content ends and not further?

    I appreciate your help! Thank you!!!

    Hello

    Can you go to file-> Site properties and disable "Sticky Footer", and then preview the site to see if it is what you want?

    I hope this helps.

    See you soon

    Parikshit

  • The use of JavaScript to extend the height of a DIV at the height of a document or a page.

    Hi all

    How to use JavaScript to dynamically resize a DIV on a page, so that the div extends vertically to the size of the page or document.

    I did experiences throughout the evening with different methods, some do not work yet.

    Thank you all!

    WE

    This question is asked several times a week.

    SAME HEIGHT CSS COLUMNS

    Option 1. Start the project with equal height CSS Layout
         http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-CSS-no-hacks

    Option 2. Use the Faux column method (vertical tiled background image)
         http://forums.Adobe.com/message/2653416#2653416

    Option 3. Use of JavaScript
         http://www.Projectseven.com/Tutorials/CSS/pvii_columns/index.htm

    Each solution has advantages and disadvantages.  Use the one that best meets your needs.

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • Make a DIV 100% of the height of the Page

    Hello.  I'm working on a Web page where I want the sidebar to stretch down.  I tried to use the height: 100% in the css, but it didn't work because it extended only at the height of the items on the side left which are shorter than those on the right side.  After some research, I found that I could use the height of the viewport max with the height property: 100vmax.  It worked, but now the div extends well beyond where it should be and makes the page very long for some reason any.  Is there another way that would work in this situation?  I want the sidebar to stretch to the bottom of the div on the right side of the page.

    You can see the page here: http://www.littlechisel.com/clients/newview/index.php

    Thank you!

    The simplest solution (I've tested this with your code) is the following. Replace your styles css for these elements with mine. In addition, this method works as long as the length of each column does not exceed the values padding and margin such as defined for the two columns (but 20000px would suffice!  ;-)

    {#wrapper}

    background-color: #ffffff;

    border: medium none;

    overflow: hidden; / * cut huge padding * /.

    }

    :

    {#sideNav}

    background-color: #e0d9ce;

    border-right: 5px solid #38358 c;

    box-sizing: border-box;

    float: left;

    margin-bottom:-20000px;

    Width: 25%;

    padding-bottom: 20000px;

    }

    #right {}

    background-color: #ffffff;

    float: left;

    margin-bottom:-20000px;

    padding-bottom: 20000px;

    Width: 75%;

    }

  • How to use CSS to force the page to full height?

    I'm trying to use CSS to force the content on the page to full height when the content is not long enough to do the job. After reading several articles on the Web, I put the html, body and articletest selectors at a height and min-height of 100%. But it does not work. The yellow area Brown/inner light should extend almost to the bottom, the the two final colors div should be at the bottom of the browser window...

    http://www.keithpurtell.com/kthings/Test01.htm

    You must make two changes as follows:

    (1) change your CSS for the body to look like the following:

    Body {background-color: #FFFFEE;}  / * a E4D9C2 * /.
    color: #31260F;
    font: 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    Width: 100%;
    /*height:100%;*/
    height: 100 %}

    (2) change your CSS #main to look like this:

    #main {background-color: #FFFFEE;}
    margin: 0 0 auto;
    Max-width: 1180px;
    min-width: 30em;
    min-height: 100%;
    overflow: hidden;
    position: relative ;}

    This should do the trick.  He made and tested it on my system.  I put the page online if need be!

    Good luck.

  • Page background to adapt to the content of the page.

    Hello!

    I would like to know how it is possible to make the background of page resize based on its contents. Here is an example of what I'm trying to achieve:

    Screen Shot 2016-09-10 at 12.49.25 PM.pngScreen Shot 2016-09-10 at 12.49.58 PM.png

    Thank you! I really appreciate your help.

    (A) open the "rectangle in master" layout page, place a block of text above, start a preview of the browser and minimize the browser window. All work as expected.

    It is best to place the rectangle on the page layout (instead of the master page), because if you resize items that should remain in the bounding box, or if you add items, you must resize the bounding box in page view.

    The dynamic adaptation of the size goes on your finished page or in preview mode.

    (B) another way to reach a height of actual dynamic page:

    Open your setting in page (and not his mistress), open the "Page/Page Properties" menu and uncheck the option "Sticky Footer". In this case, the page height is not determined by the height of the browser window, but by the content of the page. In other words: move or items down will push the bottom of the page down as well (that long these element are not specified as "Footer" elements).

  • Height of the page not automatically adjusts when the drop down menu expanded

    Using Adobe Muse CC 2015 on a Mac, I created a Web page for my company (www.unafilm.de).  I used a horizontal menu in the master page to the layout of the pages of the subsites (news, movies, about, contact, etc.) to visitors. Everything works well except a menu items which is supposed to display an another 25 points / subpages.  They expand nicely, but I can show all because the height of the page does not take into account the length of the drop-down list. So, I can only see subpages on this particular menu point that allows at the height of the page. The page does not extend and I can also not scroll down.  No idea why? Thanks in advance.

    Is nothing, that you can change. It is simply how browsers work. Unless you want to annoy your customers with a browser window resizing script (bad idea), the window is not adapt. 25 menu entries using is perhaps not the best idea at first, anyway.

    Mylenium

Maybe you are looking for