CODEWITHSUNDEEP
jqueryhtmlcss
Bart Koppelmans
Bart Koppelmans

Reputation: 195

HTML and CSS with div's

Can anyone help me, I want the div's in the div with the id="container" centered under the settings div.

Here is my code:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>My site</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div class="menu">
            <div class="option">Home</div>
            <div class="option">Media</div>
            <div class="option">link 3</div>
            <div class="option">link 4</div>
            <div class="option">link 5</div>
            <div class="open"></div>
            <div class="option" id="settings">Settings</div>
        </div>
        <div id="container">
                <div id="s-o1">Account</div>
                <div id="s-o2">Privacy</div>
                <div id="s-o3">Logout </div>
        </div>
    </body>
</html>

CSS:

html    {
    background-image: url("carbon_background.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cgoogleover;
}

body,html   {
    height: 100%;
    width: 100%;
    padding: 0;
}

.menu   {
    margin-top: 0px;
    height: 25px;
    background-color: #3B5998;
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0px;
    margin-top: 0px;
    width: 100%;
    display: block;
    top: 0px;
    left: 0px;
    margin-top: -8px;
    margin-left: -8px;
}

.menu .option   {
    float: left;
    width: 15%;
    text-align: center;
    background-color: #3B5998;
    height: 25px;
    border-radius: 0px;
    color: white;
    font-size: 20px;
    text-decoration: none;
    list-style-type: none;
}

.menu .open {
    float: left;
    width: 10%;
    text-align: center;
    background-color: #3B5998;
    height: 25px;
    border-radius: 0px; 
    text-decoration: none;
    list-style-type: none;

}

#s-o1   {
    list-style-type: none;
    color:  white;
    margin-left: 85%;
    background-color: #BBBBFF ;
    opacity: 0;
    width: 15%;
    margin-top: 0px;
    text-align: center;
    font-size: 20px;
    clear: both;
    position: absolute;
    right: 0%;
}

#s-o2   {
    list-style-type: none;
    color:  white;
    margin-left: 85%;
    background-color: #BBBBFF ;
    opacity: 0;
    height: 5px;
    width: 15%;
    margin-top: 0px;
    text-align: center;
    font-size: 20px;
    position: absolute;
    right: 0%;
}

 #s-o3  {
    list-style-type: none;
    color:  white;
    margin-left: 85%;
    background-color: #BBBBFF ;
    opacity: 0;
    height: 5px;
    width: 15%;
    margin-top: 0px;
    text-align: center;
    font-size: 20px;
    position: absolute;
    right: 0%;
}

Jquery:

$(document).ready(function()    {

    $(".menu .option").mouseenter(function()    {
        $(this).css("background-color", "#7894CC", "fast");
    });
    $(".menu .option").mouseleave(function()    {
        $(this).css("background-color", "#3B5998", "fast");
    });

    $("#settings").click(function   ()  {
        $("#s-o1, #s-o2, #s-o3").animate({opacity: 1});
    });
    $("#s-o1, #s-o2, #s-o3").mouseleave(function    ()  {
        $("#s-o1, #s-o2, #s-o3").animate({opacity: 0});
    });
});

I want the container with the div's to show up when I click the settings div.

Edit: I'm sorry, I wasn't clear enough. It was meant to center under the "settings"-div. So it should be right under it.

Upvotes: 1

Views: 171

Answers (2)

Gangadhar
Gangadhar

Reputation: 1749

 <style>
        .menu   {
    margin-top: 0px;
    height: 25px;
    background-color: #3B5998;
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0px;
    margin-top: 0px;
    width: 100%;
    display: block;
    top: 0px;
    left: 0px;
    margin-top: -8px;
    margin-left: -8px;
}

.menu .option   {
    float: left;
    width: 15%;
    text-align: center;
    background-color: #3B5998;
    height: 25px;
    border-radius: 0px;
    color: white;
    font-size: 20px;
    text-decoration: none;
    list-style-type: none;
}

.menu .open {
    float: left;
    width: 10%;
    text-align: center;
    background-color: #3B5998;
    height: 25px;
    border-radius: 0px; 
    text-decoration: none;
    list-style-type: none;

}

#container div {
 list-style-type: none;
color:  white;
width:50%;
background-color: #BBBBFF ;
margin:0 auto;
}
    </style>

in the page

<div class="menu">
            <div class="option">Home</div>
            <div class="option">Media</div>
            <div class="option">link 3</div>
            <div class="option">link 4</div>
            <div class="option">link 5</div>
            <div class="open"></div>
            <div class="option" id="settings">
            <div>Settings</div> 
            <div id="container">
                <div id="s-o1">Account</div>
                <div id="s-o2">Privacy</div>
                <div id="s-o3">Logout </div>
        </div></div>
        </div>

Upvotes: 1

user1752532
user1752532

Reputation: 

#container div{
    display:block;
    height:auto;
    list-style-type: none;
    color:  white;
    margin-left: 85%;
    background-color: #BBBBFF ;
    opacity: 0;
    height: 5px;
    width: 15%;
    margin-top: 0px;
    text-align: center;
    font-size: 20px;
    right: 0%;
}

Whats up with the #s-o1, #s-o2, #s-o3? They all have the same style. I removed them all in the code above and just added the #container div.

Upvotes: 0

Related Questions