Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    I only want my container div to be as big as it's contents. Up til now I've had to set height attributes for it but I'm sick of doing this.. what do I need to do to this to achieve this effect?

    Code:
    #container {
        background-color: #d5eaff;
        height: 700px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        top: 0px;
        width: 95%;
    }
    
    #header_left {
        background-image: url(../images/header_left.gif);
        background-repeat: no-repeat;
        left: 0px;
        position: absolute;
        top: 0px;
    }
    
    #header_right {
        background-image: url(../images/header_right.gif);
        background-repeat: no-repeat;
        position: absolute;
        right: 0px;
        top: 0px;
    }
    
    #header {
        background-image: url(../images/header_bg.gif);
        background-repeat: repeat-x;
        height: 100px;
        left: 0px;
        position: absolute;
        top: 0px;
        width: 100%;
    }
    
    #menu {
        left: 5px;
        position: absolute;
        top: 105px;
        width: 130px;
    }
    
    #menu_list {
        background-color: transparent;
        border-right-color: #000;
        color: #333;
        font-family: 'Trebuchet MS', 'Lucida Grande',      Verdana, Lucida, Geneva, Helvetica,       Arial, sans-serif;
        margin-bottom: 1em;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
    
    #menu_list ul {
        border-style: none;
        list-style-style: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    #menu_list li {
        border-bottom-color: #d5eaff;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        font-size: small;
        margin: 0;
    }
    
    #menu_list li a {
        background-color: #2175bc;
        border-left-color: #1958b7;
        border-left-style: solid;
        border-left-width: 10px;
        border-right-color: #508fc4;
        border-right-style: solid;
        border-right-width: 10px;
        color: #fff;
        display: block;
        font-size: small;
        padding-bottom: 5px;
        padding-left: 0.5em;
        padding-right: 5px;
        padding-top: 5px;
        text-decoration: none;
        width: 100%;
    }
    
    html>body #menu_list li a {
        font-size: small;
        width: auto;
    }
    
    #menu_list li a:hover {
        background-color: #2175bc;
        border-left-color: #a80000;
        border-left-style: solid;
        border-left-width: 10px;
        border-right-color: #ff3e3e;
        border-right-style: solid;
        border-right-width: 10px;
        color: #ffffff;
        font-size: small;
    }
    
    #content {
        background-color: transparent;
        height: 300px;
        left: 140px;
        position: absolute;
        right: 5px;
        top: 105px;
    }
    
    #footer {
        background-image: url(../images/footer_bg.gif);
        background-repeat: repeat-x;
        bottom: 0px;
        height: 30px;
        left: 0px;
        position: absolute;
        text-align: center;
        width: 100%;
    }
    
    #footer_left {
        background-image: url(../images/footer_left.gif);
        background-repeat: no-repeat;
        left: 0px;
        position: absolute;
        top: 0px;
    }
    
    #footer_right {
        background-image: url(../images/footer_right.gif);
        background-repeat: no-repeat;
        position: absolute;
        right: 0px;
        top: 0px;
    }
    
    #footer p {
        color: #ffffff;
        font-family: "Trebuchet MS", Arial, "MS Sans Serif";
        font-size: x-small;
    }
    
    .submenuitem {
        font-style: italic;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .selecteditem {
        color: #ff0000;
        font-style: italic;
        font-weight: bold;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    p {
        font-family: "Trebuchet MS", Arial, "MS Sans Serif";
        font-size: small;
        margin-top: 0px;
        text-decoration: none;
    }
    
    #quote {
        border-color: #2175bc;
        border-style: double;
        border-width: 3px;
        float: right;
        margin: 7px;
        padding-bottom: 0px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
        right: 5px;
        top: 105px;
        width: 150px;
    }
    
    #quote p {
        font-family: "Times New Roman", Arial, "MS Sans Serif";
        font-size: large;
        font-style: italic;
        margin-bottom: 0px;
    }
    
    .quoter {
        font-family: "Trebuchet MS", Arial, "MS Sans Serif";
        font-size: x-small;
        text-decoration: none;
    }
    
    h3 {
        font-family: "Trebuchet MS", Arial, "MS Sans Serif";
        font-size: x-small;
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="Styles/global.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div id="container">
            <div id="header">
                <div id="header_left">
                <img src="images/header_left.gif" />
                </div>
                <div id="header_right">
                <img src="images/header_right.gif" />
                </div>
            </div>
            <div id="menu">
            <div id="menu_list">
                    <ul>
                        <li><a href="index.htm"> Home</a></li>
                        <li><a href="about.htm"> About Us</a></li>
                        <li><a href="locations.htm"> Locations</a></li>
                        <li><a href="contact.htm"> Contact</a></li>
                        <li><a href="info.htm"> Info</a></li>
                    </ul>
                </div>
            </div>
            <div id="content">
                <div id="quote">
                    <p>"Cascading style sheets saved our marriage, our home and our lives...We'd never go back!"</p>
                    <h3>- John Cusack</h3>
                </div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
                voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
                non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
                voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
                non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
                voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
                non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            </div>
            <div id="footer">
                <div id="footer_left">
                <img src="images/footer_left.gif" />
                </div>
                <p>
                    2006 Charles Pugh (Glass) ltd. [XHTML] [CSS]
                </p>
                <div id="footer_right">
                <img src="images/footer_right.gif" />
                </div>
            </div>
        </div>
    </body>
    </html>
    No ma'am, we in IT don't have a sense of humor we're aware of.

  2.  

  3. #2
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    give this a try it should work..

    I added some code to the #container, and took out
    the absolute position in the #content also added some code to it

    good luck!!

    Code:
    <style>
    #container {
        background-color: #d5eaff;
    
    /*added height:auto */
        height: auto;
    /*added height:auto */
    
        margin-left: auto;
        margin-right: auto;
        position: relative;
        top: 0px;
        width: 95%;
    }
    
    #header_left {
        background-image: url(../images/header_left.gif);
        background-repeat: no-repeat;
        left: 0px;
        position: absolute;
        top: 0px;
    }
    
    #header_right {
        background-image: url(../images/header_right.gif);
        background-repeat: no-repeat;
        position: absolute;
        right: 0px;
        top: 0px;
    }
    
    #header {
        background-image: url(../images/header_bg.gif);
        background-repeat: repeat-x;
        height: 100px;
        left: 0px;
        position: absolute;
        top: 0px;
        width: 100%;
    }
    
    #menu {
        left: 5px;
        position: absolute;
        top: 105px;
        width: 130px;
    }
    
    #menu_list {
        background-color: transparent;
        border-right-color: #000;
        color: #333;
        font-family: 'Trebuchet MS', 'Lucida Grande',      Verdana, Lucida, Geneva, Helvetica,       Arial, sans-serif;
        margin-bottom: 1em;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
    
    #menu_list ul {
        border-style: none;
        list-style-style: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    #menu_list li {
        border-bottom-color: #d5eaff;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        font-size: small;
        margin: 0;
    }
    
    #menu_list li a {
        background-color: #2175bc;
        border-left-color: #1958b7;
        border-left-style: solid;
        border-left-width: 10px;
        border-right-color: #508fc4;
        border-right-style: solid;
        border-right-width: 10px;
        color: #fff;
        display: block;
        font-size: small;
        padding-bottom: 5px;
        padding-left: 0.5em;
        padding-right: 5px;
        padding-top: 5px;
        text-decoration: none;
        width: 100%;
    }
    
    
    
    #menu_list li a:hover {
        background-color: #2175bc;
        border-left-color: #a80000;
        border-left-style: solid;
        border-left-width: 10px;
        border-right-color: #ff3e3e;
        border-right-style: solid;
        border-right-width: 10px;
        color: #ffffff;
        font-size: small;
    }
    
    #content {
        background-color: transparent;
    /*    
    will break firefox--height: 300px;
    no absolute position -- left: 140px; position: absolute;right: 5px; top: 105px;
    */
    
    /* added */
        margin-left:200px; 
        padding:50px 0px 50px 0px;
        width:800px;
    /* added */
    }
    
    #footer {
        background-image: url(../images/footer_bg.gif);
        background-repeat: repeat-x;
        bottom: 0px;
        height: 30px;
        left: 0px;
        position: absolute;
        text-align: center;
        width: 100%;
    }
    
    #footer_left {
        background-image: url(../images/footer_left.gif);
        background-repeat: no-repeat;
        left: 0px;
        position: absolute;
        top: 0px;
    }
    
    #footer_right {
        background-image: url(../images/footer_right.gif);
        background-repeat: no-repeat;
        position: absolute;
        right: 0px;
        top: 0px;
    }
    
    #footer p {
        color: #ffffff;
        font-family: "Trebuchet MS", Arial, "MS Sans Serif";
        font-size: x-small;
    }
    
    .submenuitem {
        font-style: italic;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .selecteditem {
        color: #ff0000;
        font-style: italic;
        font-weight: bold;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    p {
        font-family: "Trebuchet MS", Arial, "MS Sans Serif";
        font-size: small;
        margin-top: 0px;
        text-decoration: none;
    }
    
    #quote {
        border-color: #2175bc;
        border-style: double;
        border-width: 3px;
        float: right;
        margin: 7px;
        padding-bottom: 0px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
        right: 5px;
        top: 105px;
        width: 150px;
    }
    
    #quote p {
        font-family: "Times New Roman", Arial, "MS Sans Serif";
        font-size: large;
        font-style: italic;
        margin-bottom: 0px;
    }
    
    .quoter {
        font-family: "Trebuchet MS", Arial, "MS Sans Serif";
        font-size: x-small;
        text-decoration: none;
    }
    
    h3 {
        font-family: "Trebuchet MS", Arial, "MS Sans Serif";
        font-size: x-small;
    </style>

  4. #3
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    #content {
    background-color: transparent;
    /*
    will break firefox--height: 300px;
    no absolute position -- left: 140px; position: absolute;right: 5px; top: 105px;
    */

    /* added */
    margin-left:200px;
    padding:50px 0px 50px 0px;
    width:800px;
    /* added */
    }

    Sorry, Don't understand this Bit. It's all over the place.

    The auto hieght bit on the container I get but It just chucks the bottom Footer right to the top... Proper cocks it up.
    No ma'am, we in IT don't have a sense of humor we're aware of.

  5. #4
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    do you have a link to this online.. it would be helpfull..

  6. #5
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    It's not online...

    so no... no link
    No ma'am, we in IT don't have a sense of humor we're aware of.

  7. #6
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    well, alright then.. maybe you could put it online..

    its hard to know what needs to be done to your layout when there are missing graphics..
    like in your footer.. I would be glad to give you a hand.
    good luck..


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com