CODEWITHSUNDEEP
htmlcss
Anthony726
Anthony726

Reputation: 85

How can I move this navigation bar down without moving the entire container down with it

I'm trying to move the transparent navigation box down to the bottom of the container, but every time I add margin-top to #navigation it moves the entire container downwards with it.

Here's the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About Me</title>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="navigation">
<ul>
<li class="buttons">About</li>
<li class="buttons">Experience</li>
<li class="buttons">Websites</li>
<li class="buttons">School</li>
<li class="buttons">Future</li>
</ul>
</div><!--end of navigation-->
</div><!--end of container-->
</body>
</html>

Here's the CSS

@charset "utf-8";
/* CSS Document */

body {
background: #5D5D5D;
}

#container {
width:1200px;
height:800px;
position:relative;
margin:auto;
background-color:#B5B5B5;
border-radius:200px;
}

#navigation ul li {
list-style-type:none;
display:inline-table;   
}



.buttons {
width:100px;
height:100px;
background: #D1D1D1;
border-radius:200px;
-webkit-border-radius:200px;
line-height:100px;
text-align:center;
margin-right:10px;
box-shadow:0 3px 3px 3px rgba(0,0,0,0.15);
margin-top:7px;
transition:all 0.3s;
-webkit-transition:all 0.3s;
border: 3px solid #D1D1D1;
}

.buttons:hover {
background: #DFDFDF;
cursor:pointer;
border: 3px dotted #515151;
}   

#navigation {   
background: rgba(0,0,0,0.15);
width:700px;
height:120px;
border-radius:50px;
text-align:center;
}

JSFIDDLE link: http://jsfiddle.net/RX94a/

Upvotes: 0

Views: 12063

Answers (3)

Nicki Chen
Nicki Chen

Reputation: 16

Margin-top will affect the overall spacing between the element and the top of the webpage. But with positioning you can position your element to exactly where you want it to be. I'm not sure if this is what you're talking about.

    #navigation{

    position:absolute;
    bottom:20px;
}

Here's the result: jsFiddle

Upvotes: 0

Sergey Harini
Sergey Harini

Reputation: 15

navigation {
    background: rgba(0, 0, 0, 0.15);
    width: 700px;
    border - radius: 50px;
    text - align: center;
    position: absolute;
    bottom: 0;
}

Jsfiddle link: http://jsfiddle.net/RX94a/4/

Upvotes: 0

soarjay
soarjay

Reputation: 651

You can use relative positioning to move the navigation bar down.

#navigation {
/* Navigation has moved down */
position: relative;
top: 680px;

680px comes from the height of the container minus the height of the navigation box.

Here the fiddle.

Upvotes: 1

Related Questions