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

Shilpa K
Shilpa K
12,722 Points

Fix the divs to the background image?

I'm trying to fix the eight circular divs onto different locations on the background image of a world map. But when I resize the browser, it's either the image or the divs that are not staying in place. Could someone help me with this?

Code is below:

HTML:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>Shilpa's World</title>

    </head>

    <body>

        <div id="home" class="home">
            <div id="dallas" class="box, dallas"></div>
            <div id="hongkong" class="box"> </div>
            <div id="capetown" class="box"></div>
            <div id="seoul" class="box"></div>
            <div id="mumbai" class="box"></div>
            <div id="northampton" class="box"></div>
            <div id="sanfrancisco" class="box"></div>
            <div id="newyork" class="box"></div>
        </div>

    </body>

        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="interactive.js" type="text/javascript" charset="utf-8"></script>
</html>

And CSS below:

/*****************
MAIN
******************/
body {
    background: url('worldmap.jpg');
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;


}

#home {


}

/* Button Design */

.box {
    width: 15px;
    height: 15px;
    background-color: #FE2E64;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    border-radius: 100%;


}


/*****************
HOME BUTTONS (Placement only)
******************/

.home {
    position: fixed;
    width: 720px;
} 

#dallas {
    margin-left: 22.5%;
    margin-top: 7%;

}

#hongkong {
    margin-left: 81.2%;
    margin-top: 1.5%;

}

#capetown {
    margin-left: 55%;
    margin-top: 15%;

}

#seoul {
    margin-left: 85%;
    margin-top: -22.5%;

}

#mumbai {
    margin-left: 69.5%;
    margin-top: 4.5%;
}

}

#northampton {
    margin-left: 29%;
    margin-top: -8.5%;


}

#sanfrancisco{
    margin-left: 15%;
    margin-top: 0%%;

}

#newyork {
    margin-left: 28%;
    margin-top: -2%;
}

/*****************
HOVER 
******************/

#dallas:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}

#hongkong:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}


#capetown:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}

#seoul:hover{
    background-color: #F5A9BC;
    cursor: pointer;
}

#mumbai:hover{
    background-color: #F5A9BC;
    cursor: pointer;
}

#northampton:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}

#sanfrancisco:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}

#newyork:hover {
    background-color: #F5A9BC;
    cursor: pointer;
}

Thanks in advance!

Hi Shilpa! See this for formatting your code: https://teamtreehouse.com/forum/posting-code-to-the-forum

(You'll probably want to create a code block using three back ticks before and after to make it easier to view)

4 Answers

Shilpa K
Shilpa K
12,722 Points

Thanks for letting me know, Kristen! I've formatted my code.

What do you want it to do? Do you want the image and divs to resize when you make the browser smaller? Or do you want it to stay fixed and have the user scroll? Please clarify so I can point you in the right direction.

Also, did you mean to put dallas as a class here? You didn't define it in the CSS code, but if you did want it as a class (or just for future reference), you'd want to remove the comma and just put a space between the classes you define.

<div id="dallas" class="box, dallas"></div>
Shilpa K
Shilpa K
12,722 Points

I want the divs to stay on the same spot on the image of the map when the browser is re-sized. The issue I am having right now is that when I re-size the browser, the divs are no longer in the right spot on the map where I initially had set them to be.

Putting dallas as a class was a mistake, please ignore that.

If you are looking to have your image resize and have the circles still stay on the exact same spot on the image, that is rather difficult to do. However, if you don't need the image to resize when the browser is resized, you can just insert an image and use position: absolute to determine where the circles go.