Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Kevin Woods
Kevin Woods
3,583 Points
Posted by 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

Athena Ozanich
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Athena Ozanich
Front End Web Development Techdegree Graduate 29,847 Points
Athena Ozanich
.a{fill-rule:evenodd;}techdegree seal-36
Athena Ozanich
Front End Web Development Techdegree Graduate 29,847 Points

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
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
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>