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

Shilpa K
Shilpa K
12,722 Points
Posted by 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!

Kristen Law
Kristen Law
16,244 Points

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
Shilpa K
Shilpa K
12,722 Points

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

Kristen Law
Kristen Law
16,244 Points
Kristen Law
Kristen Law
16,244 Points

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

Kristen Law
Kristen Law
16,244 Points
Kristen Law
Kristen Law
16,244 Points

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.