search

ashtastic / dsn1675-assignment-1

0 stars 0 forks source link

Images bigger than my screen. #2

Closed ashtastic closed 9 years ago

ashtastic commented 9 years ago

Hey @thomasjbradley,

Thank you for the help with the three problems, the video was perfectly easy. One last problem, I sized all my images to 1200px wide, but for some reason no matter what percentage or margin I put they extended past the margins of all the other things on my website. Any guess why? (I supplied my entire html so you can see what's happening in the browser.) Thank you so much for taking the time to help me with this stuff.

<!DOCTYPE html>
<html lang="en-ca">
<head>
    <meta charset="utf-8">
    <link href="css/main.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Cinzel:700|Open+Sans:300' rel='stylesheet' type='text/css'>
    <title>Museum of Antiquities</title>
</head>
<body>

    <header>
            <img class="logo" src="images/logo.svg" alt="Museum logo.">
            <h1>Museum of Antiquities</h1>
            <a class="button" href="">BUY</a>

            <nav>
                <ol>
                    <li class="seven-wonders"><a href="#seven-wonders">Seven Wonders</a></li>
                    <li><a href="#buy-tickets">Buy Tickets</a></li>
                    <li><a href="#now-playing">Now Playing</a></li>
                    <li><a href="#this-week">This Week</a></li>
                </ol>
            </nav>
    </header>

    <main>

            <div class="banner-1">
                <strong>The Seven Wonders <br> of the Ancient World</strong>
                <p>Remarkable constructions of classical antiquity <br> almost completely lost in time.</p>
            </div>

            <img class="wonders" src="images/wonders.jpg" alt="The Seven Wonders of the Ancient World.">

        <h2 id="seven-wonders">The Seven Wonders</h2>

            <img class="wonders-info" src="images/giza.png" alt="The Great Pyramid of Giza">

            <h3>Great Pyramid of Giza</h3>
                <dl>
                    <dt>Date of construction:</dt> <dd>2584–2561 BC</dd>
                    <dt>Builders:</dt> <dd>Egyptians</dd>
                    <dt>Location:</dt> <dd>Giza Necropolis, Egypt</dd>
                </dl>
                <a class="learn-more" href="">Learn more about Giza</a>

                <img class="wonders-info" src="images/babylon.jpg" alt="The Hanging Gardens of Bablyon">

            <h3>Hanging Gardens of Babylon</h3>
                <dl>
                    <dt>Date of construction:</dt> <dd>Circa 600 BC</dd>
                    <dt>Builders:</dt> <dd>Babylonians</dd>
                    <dt>Location:</dt> <dd>Nineveh, Iraq</dd>
                </dl>
                <a class="learn-more" href="">Learn more about the Hanging Gardens</a>

            <img class="wonders-info" src="images/artemis.jpg" alt="The Temple of Artemis">

            <h3>Temple of Artemis</h3>
                <dl>
                    <dt>Date of construction:</dt> <dd>Circa 550 BC</dd>
                    <dt>Builders:</dt> <dd>Greeks</dd>
                    <dt>Location:</dt> <dd>Selçuk, Turkey</dd>
                </dl>
                <a class="learn-more" href="">Learn more about the Temple</a>

            <img class="wonders-info" src="images/zeus.jpg" alt="The Statue of Zeus at Olympia">

            <h3>Statue of Zeus at Olympia</h3>
                <dl>
                    <dt>Date of construction:</dt> <dd>435 BC</dd>
                    <dt>Builders:</dt> <dd>Greeks</dd>
                    <dt>Location:</dt> <dd>Olympia, Greece</dd>
                </dl>
                <a class="learn-more" href="">Learn more about the Statue</a>

            <img class="wonders-info" src="images/halicarnassus.jpg" alt="The Mausoleum at Halicarnassus">

            <h3>Mausoleum at Halicarnassus</h3>
                <dl>
                    <dt>Date of construction:</dt> <dd>351 BC</dd>
                    <dt>Builders:</dt> <dd>Persians</dd>
                    <dt>Location:</dt> <dd>Bodrum, Turkey</dd>
                </dl>
                <a class="learn-more" href="">Learn more about the Mausoleum</a>

            <img class="wonders-info" src="images/rhodes.jpg" alt="The Colossus of Rhodes">

            <h3>Colossus of Rhodes</h3>
                <dl>
                    <dt>Date of construction:</dt> <dd>292–280 BC</dd>
                    <dt>Builders:</dt> <dd>Greeks</dd>
                    <dt>Location:</dt> <dd>Rhodes, Greece</dd>
                </dl>
                <a class="learn-more" href="">Learn more about Colossus</a>

            <img class="wonders-info" src="images/alexandria.jpg" alt="The Lighthouse of Alexandria">

            <h3>Lighthouse of Alexandria</h3>
                <dl>
                    <dt>Date of construction:</dt> <dd>Circa 280 BC</dd>
                    <dt>Builders:</dt> <dd>Ptolemaic Egyptians</dd>
                    <dt>Location:</dt> <dd>Alexandria, Egypt</dd>
                </dl>
                <a class="learn-more-bottom" href="">Learn more about the Lighthouse</a>

        <div class="buy">
            <h2 id="buy-tickets" class="buy-h2">Buy tickets</h2>
                <p>Come explore the ancient wonders with our amazing teleportation technology that jumps you around the world.</p>

                <a class="left" href="">$15 for adults</a>
                <a class="right" href="">$5 for kids</a>

            <h2 class="buy-h2">Become a member</h2>
                <p>Is one visit not enough? Join our yearly program for unlimited access.</p>

                <a class="left" href="">$99 for adults</a>
                <a class="right" href="">$39 for kids</a>
        </div>

        <h2 id="now-playing" class="playing-now">Now playing on the large screen</h2>

            <div class="banner-2">
                <strong>Atlantis: Why we’re so mysterious</strong>
                <p>From allegory to fiction to mystery</p>
                <a href="">See show times</a>
            </div>

            <img class="atlantis" src="images/atlantis.jpg" alt="Image of Atlantis.">

        <h2 id="this-week" class="week-h2">This week at the museum</h2>

            <h3>Saturday & Sunday</h3>
                <ul class="week">
                    <li>Atlantis city tours</li>
                    <li>Underwater explorer: see outside the bubble</li>
                </ul>

            <h3>Monday</h3>
                <ul class="week">
                    <li>Try this out: have fun building your own ancient wonder</li>
                    <li>Amazing architecture: explore the science of how the pyramids were built</li>
                </ul>

            <h3>Tuesday</h3>
                <ul class="week">
                    <li>Awesome art: witness art in action as a marble sculpture is born</li>
                    <li>Gold rush: learn about the metal and why it was so coveted</li>
                </ul>

            <h3>Wednesday</h3>
                <ul class="week">
                    <li>Try this out: wear clothes that the ancients wore</li>
                    <li>Gardenology: learn to plant and maintain amazing gardens</li>
                </ul>

            <h3>Thursday</h3>
                <ul class="week">
                    <li>Amazing architecture: explore the science of buildings</li>
                    <li>Gardenology: the science behind trees and the environment</li>
                </ul>

            <h3>Friday</h3>
                <ul class="week">
                    <li>Atlantis city tours</li>
                    <li>Awesome art: witness a full mosaic floor under construction</li>
                </ul>

    </main>

    <footer>
        <aside>© Museum of Antiquities</aside>

        <address>hello@antiquities.museum</address>
        <p>1 888 000 1618</p>

        <div class="hours-directions">
            <a href="">Hours</a>
            <a href="">Directions</a>
        </div>

        <p>1618 Plato Blvd.</p>
        <p>Atlantis, Atlantis, Atlantic Ocean</p>

        <ul>
            <li><a href="">Exhibits</a></li>
            <li><a href="">Collections</a></li>
            <li><a href="">Donors & sponsors</a></li>
            <li><a href="">Teacher information</a></li>
            <li><a href="">Birthday rentals</a></li>
        </ul>
    </footer>

</body>
</html>
h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.5em;
    color: #231601;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0;
}

.wonders-info {
    width: 100%;
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 2em;
    clear: both;
}

h3 {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    margin-left: 1em;
    text-transform: uppercase;
    color: #9e6100;
    margin-bottom: 0em;
    margin-top: 0.5em;
}

.learn-more, .learn-more-bottom {
    font-size: 0.7em;
    text-decoration: none;
    color: white;
    margin-left: 1em;
    margin-top: 1em;
    background-color: #413f0c;
    padding: 0.5em;
    opacity: 0.5;
    float: left;
    clear: both;
}

.learn-more-bottom {
    margin-bottom: 3em;
}

.learn-more:hover {
    color: white;
    background-color: #413f0c;
    opacity: 10;
}

dt, dd {
    font-size: 0.8em;
    margin-top: 0;
    display: inline;
}

dt {
    margin-left: 1em;
    color: #413f0c;
    float: left;
    clear: left;
}

dd {
    margin-left: 0.5em;
    float: left;
}

dl{
    margin-top: 0;
    margin-bottom: 0.5em;
}
thomasjbradley commented 9 years ago

I see you have a width: 100% on them, that was my first guess. I think maybe try removing the margins from the <img> tags themselves, and instead add padding to a tag that surrounds them.

p.s. You don't have to put all your code in the comment, I can just click around in your repo to see it.

ashtastic commented 9 years ago

Thank you so so so much Thomas! Fixed the problem right away :)