Matt Jameson
Reputation: 217
CSS Positioning with divs
could someone tell me why sport is stuck to the top, where as military and
entertainment are down where they should be?
Basically, i'm trying to position all three subjects in the same place
The reason for the display:None is because JQuery is working to display accordingly
#topBar {
position: relative;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
margin: 0 auto;
text-align: center;
background-color: #000000;
color: #ffffff;
text-align: left;
}
#topBar span {
position: absolute;
bottom: 0;
}
#topBar a {
color: #ffffff;
text-decoration: none;
}
#Sport {
position: absolute;
display: none;
top: 500px;
}
#Entertainment {
position: absolute;
display: none;
top: 500px;
}
#Military {
position: absolute;
display: none;
top: 500px;
}
HTML:
<!DOCTYPE html>
<head> <meta charset="utf-8" />
<title>Matthew Jameson | Virtual Reality</title>
<link rel="stylesheet" href="VR3.css" type="text/css" />
<script src="jquery.js"></script>
</head>
<html lang="en" >
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title></title>
</head>
<body>
<header>
</header>
<Div id = "topBar">
<span>
<a id='slink' class='trigger' href='#Sports'>Sports</a>
<a id='elink' class='trigger' href='#Entertainment'>Entertainment</a >
<a id='mlink' class='trigger' href='#Military'>Military</a>
<span>
</div>
<Div id = "main">
</div>
<div id='Sports' class='slink triggered'>
<iframe width="280" height="158" src="http://www.youtube.com/embed/RPPJ5JHwO4A?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="280" height="158" src="http://www.youtube.com/embed/oMLarxR-q08?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<Div id = "Entertainment" class='elink triggered'>
<iframe width="280" height="158" src="http://www.youtube.com/embed/7vcGqha6xJ0?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="280" height="158" src="http://www.youtube.com/embed/La-WRhYeMCw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<Div id = "Military" class='mlink triggered'>
<iframe width="280" height="158" src="http://www.youtube.com/embed/6p7FM-mBsNk?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="280" height="158" src="http://www.youtube.com/embed/g1afRyN5_MQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<script>
$('.trigger').on('click',function(){
$('.triggered').slideUp(500);
var x = $(this).attr('id');
$('.' + x ).slideDown(500);
});
</script>
</body>
</html>
Upvotes: 1
Views: 108
