Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Kevin Woods
Kevin Woods
3,583 Points

Help me keep the heading the same size

I am making a web page to practice and i have a picture logo at the top and a nav bar below it spreading across the screen. Some pages don't have any content on them yet except the header, logo and nav, but others have photos and paragraphs beneath the header. when i change pages to the ones with content the size of the logo and nav changes. how do i keep the header constant. sizes are set in pecentages.

3 Answers

Can you provide code? It would be much easier to assist if you can show us the code. Sometimes the order you place your CSS rules in can have unexpected results. The same goes for nesting HTML code. Also Have you used Chrome Dev Tools to help you identify what area of your code is affecting it?

Kevin Woods
Kevin Woods
3,583 Points

ok well maybe its more the nav that keeps shifting.. css /************* General **************/ img { max-width: 100% }

/************* Header **************/

#logo { display: block; margin: 0 auto ; max-width: 100%; width: 45%; }

.clear:after { content:"" clear: both; display: table; }

/************* Fonts **************/

p { font-family: 'Old Standard TT', serif; font-size: 25px; }

.alice { font-family: 'Alice', serif; }

/************* About page **************/

about {

margin: 0 auto;
padding: 0;
list-style: none;

}

about li {

display: inline-block;
width: 43%;
margin: 2.5%;
vertical-align: top;

}

/************* contact page **************/

.contact-intro { margin: 20px auto; text-align: center; }

.contacts { margin: auto; }

/************* Navigation **************/

nav li { display: inline-block;

}

nav { margin: auto 20px; text-align: center; background-color: #004080; height: 45px; }

nav a, .page { text-decoration: none; width: 100px; padding: 0 70px; color: white; font-size: 30px;

}

/**********************************************/

/************* Colors **************/

.page { color: yellow; }

nav a:hover { color: #773e3c; }

h2 { color: #004080; text-decoration: underline; }

/************* Images **************/

.images { box-shadow: 5px 5px 5px #773e3c; border-radius: 15px; border: 2px solid #004080;

}

Kevin Woods
Kevin Woods
3,583 Points

<!DOCTYPE html> <html> <head> <meta charset= "utf-8"> <title>TENSERhaus</title> <link href="https://fonts.googleapis.com/css?family=Alice|Old+Standard+TT|Peddana|Philosopher" rel="stylesheet"> <link rel= "stylesheet" href="css/main.css"> <link rel= "stylesheet" href= "css/media-querie.css"> </head> <body> <header> <img id= "logo" src= "img/TENSERhaus.png" alt="TENSERhaus logo"> <nav> <ul class= "clear"> <li><a href= "index.html">HOME</a></li> <li><a href= "projects.html">PROJECTS</a></li> <li class= "page">ABOUT</li> <li><a href= "contacts.html">CONTACTS</a></li> </ul> </nav> </header>

    <section>
        <div class= "clear">
            <ul id= "about">
                <li>
                    <img id= "bathroom" class= "images"src= "img/bathroom.jpg" alt= "Fancy Bathroom">
                </li>
                <li>
                    <div id= "about-us" >
                        <h2 class= "alice">About Us</h2>
                        <p>TENSERhaus Construction, LLC
                        </br>a <i>LOCALLY</i> based company in <b>Richmond and Surounding Areas<b></br>
                        was formed in 2004.</p>
                        <p>Our mission is to provide a rewarding customer 
                        experience through the blending of honest customer service, <i>beautiful design</i>, and 
                        scientifically and historically supported building performance.</p>
                    </div>
                </li>

                <li>
                    <div id= "company-profile" class= "clear" >
                        <h2 class= "alice">Company Profile</h2>
                        <p>Residential building and remodeling contractor.  We do much of our own design work 
                        <i>(because we can't stop ourselves)</i> and also work with architects and designers.  Our 
                        projects range from whole houses to garden houses and typically involve bathrooms, kitchens, 
                        additions and garages.</p>
                    </div>
                </li>
                <li>
                    <img id= "kitchen" class= "images" src= "img/kitchen.jpg" alt= "Fancy Kitchen">
                </li>
            </ul>
        </div>
    </section>

    <footer>

    </footer>
</body>

</html>