Jump to content

<section> appears below <nav>?


JustRob
 Share

Recommended Posts

Hello,

 

For this website I have both a horizontal and a vertical navigation bar. The horizontal navigation bar is at the top of the website, under the header. Then the vertical navigation bar goes below that, to the left. Both are defined by <nav> elements.

 

So I want my content area below that horizontal navigation bar and to the right of the vertical one. I defined my content area with a <section> element. Problem is, it appears below the vertical menu, leaving just a gaping hope to the right. I don't know why it's doing that.

 

What I have so far:

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link href="stylesheet/stylesheet.css" rel="stylesheet">
      
<title> Gaming World // Home </title>
</head>
<body>

<div id="container">
<header></header>

<nav id="topbar">
  <a href="http://gamingw.net/games/">Games</a>
  <a href="http://gamingw.net/mini/">Daily News</a>
  <a href="http://gamingw.net/dev/">Dev Logs</a>
  <a href="http://gamingw.net/mailbag/">Mailbag</a>
</nav>
    
<nav id="leftbar">
  <p>Gaming World</p>
    <a href="index.html">Home</a>
    <a href="http://gamingw.net/feedback/" target="_top">Feedback</a>
    <a href="http://www.gamingw.net/forums/">Forums</a>
    <a href="http://gamingw.net/search/">Search</a>
    <a href="http://www.whahay-irc.net/">IRC Chat</a>
  
  <p>Developers</p>
    <a href="http://gamingw.net/resource/">Resources</a>
    <a href="http://gamingw.net/tutorials/">Tutorials</a>
    <a href="articles/index.php">Articles</a>
    <a href="http://gamingw.net/music/">Music</a>
    <a href="http://gamingw.net/utilities/">Utilities</a>
    <a href="http://gamingw.net/developers/">Developer Directory</a>
  
  <p>Articles</p>
    <a href="http://gamingw.net/mini/">Daily News</a>
    <a href="http://gamingw.net/news/">News</a>				
    <a href="http://gamingw.net/features/">Features</a>
    <a href="http://gamingw.net/reviews/">Reviews</a>
    <a href="http://gamingw.net/previews/">Previews</a>
    <a href="http://gamingw.net/interviews/">Interviews</a>
    <a href="http://gamingw.net/mailbag/">Mail bag</a>
  
  <p>Games</p>
    <a href="http://gamingw.net/games/">Game Index</a>
    <a href="http://gamingw.net/games/action/">Action</a>
    <a href="http://gamingw.net/games/adventure/">Adventure</a>
    <a href="http://gamingw.net/games/arcade/">Arcade/Classic</a>
    <a href="http://gamingw.net/games/puzzle/">Puzzle</a>
    <a href="http://gamingw.net/games/platformer/">Platformer</a>
    <a href="http://gamingw.net/games/rpg/">RPG</a>
    <a href="http://gamingw.net/games/strategy/">Strategy</a>
    <a href="http://gamingw.net/games/all">All Games</a>
  
  <p>Makers</p>
    <a href="http://gamingw.net/makers/ags">Adventure Game</a>
    <a href="http://gamingw.net/makers/klik">Clickteam</a>
    <a href="http://gamingw.net/makers/gamemaker">Game Maker</a>
    <a href="http://gamingw.net/makers/ika">ika</a>
    <a href="http://gamingw.net/makers/sphere">Sphere</a>
    <a href="http://gamingw.net/makers/toolkit">RPG Toolkit</a>
    <a href="http://gamingw.net/makers/rm2k">RPGMaker 2000</a>
    <a href="http://gamingw.net/makers/rm2k3">RPGMaker 2003</a>
    <a href="http://gamingw.net/makers/verge">Verge</a>
  
  <p>Community</p>
    <a href="http://gamingw.net/staff/">Staff</a>
    <a href="http://gamingw.net/contact/">Contact</a>
    <a href="http://gamingw.net/register/">Register</a>
</nav>

<section id="content">
<h1 id="MasterHead">Today on Gaming World</h1>

Content goes here

</section>
</div>

	<footer>
	<a href="http://gamingw.net/register/">Join Gaming World</a>  
	<a href="http://gamingw.net/stats/">Website Statistics</a>  
	<a href="http://gamingw.net/about/">About Gaming World</a>  
	<a href="http://bart.gamingw.net/">Backend</a>  
	<a href="http://gamingw.net/contact/">Contact us</a> <br>

	Gaming World © 2004 - Coding and Design by <a href="http://bart.gamingw.net/">Bartek 
    Gniado</a> - Read our <a href="http://gamingw.net/privacy.htm">Privacy Statement</a> 
    and <a href="http://gamingw.net/terms.htm">Terms of Service</a>		
	</footer>

</body>
</html>

Relevant CSS

body {	
	background-color: #04599F;
	font-size: 10px;
	font-family: Verdana,Arial, Helvetica, Sans-serif;
	margin: 0px;
}

header {
	display: block;
	height: 95px;
	background: url(../images/gwlogo_spring.gif) no-repeat top left;
	background-color: #556B99;
}

nav#topbar { 
	height: 20px; 
	border-width: 1px medium; 
	border-style: solid none; 
	border-color: #404a68;
	text-align: left; 
}

nav#topbar a:link, nav#topbar a:visited, nav#topbar a:hover { 
	float: left; 
	padding-left: 17px; 
	margin: 0px; 
	background: none repeat scroll 0% 0% transparent; 
	font-weight: bold; 
	font-size: 10px; 
	line-height: 20px; 
	text-decoration: none; 
	white-space: nowrap; 
	z-index: 1000; 
	color: #FFF;
}

nav#leftbar {
	width: 130px;
}

nav#leftbar p {
	text-align:left;
	font-size:11px;
	font-weight:bold;
	color:#FFFFFF;
	padding:3px;
	background-color: #404A68;
}

nav#leftbar a {
	text-align: center;
	display: block;
	width: 124px;
	font-weight: normal;
	padding: 1px;
	border-left: 2px solid #404A68;
	border-right: 2px solid #404A68;
	border-bottom: 1px solid #404A68;
	background-color: #556B99;
	color: #cff;
	text-decoration: none;
}
	
nav#leftbar a:hover {
	font-weight: normal;
	border-left: 2px solid #404A68;
	border-right: 2px solid #404A68;
	background-color: #5F76A5;
	color: #fff;
	text-decoration: none;
}

#container {
	position: relative;
	margin: 0px;
	padding: 0px;
	max-width: 1024px;
	background-color: #556B99;
}

#content {
	min-width: 300px;
	padding: 5px;
	font-size: 100%;
	text-align: left;
	background-color: #eee;
	vertical-align: top;
}

#MasterHead {

	padding: 3px;
	font-weight: bold;
	border-width:1px;
	border-style:solid;
	border-color:#6272A0;
	background-color:#6272A0;
	font-size:13px;
	margin-bottom: 2px;
	color:#fff;
	margin: 0px;
}

footer {
		padding-top: 6px;
		padding-bottom: 10px;
		font-size: 10px;
		background-color: #404A68;
		text-align: center;
		color: #fff;
}

footer a:link, footer a:visited { color: #fff; }

The result:

 

CsiBy3k.png

Edited by JustRob
Link to comment
Share on other sites

Hello,

 

Thank you, that worked. However, now I have the same problem, but with a different element. I want to have sidebar to the right of my content area, with a login form and a basic news feed. Instead of appearing to the right, it once again appears below everything else. I tried floating it left and floating it right, but neither of them did what I want.

 

This is my HTML now:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link href="stylesheet/stylesheet.css" rel="stylesheet">
<link href="rightbar.css" rel="stylesheet">

<meta name="description" content="Graphical Resources, Articles, Tutorials, Sections dedicated to Game Makers - Learn how to create games!">
<meta name="keywords" content="Gaming, World, RPG, Maker, 2000, RM2K, RPGM2K,Character, Sets,Animations,Tile,Chipset,Battle,Background,Sprite,maps,Games,game,maker,resources,liverpg,live,rpg,panorama,parallex,review,previews,creation,article,links,art,music,klik,play,click,create,games,factory,multimedia,fusion,vitalize">
      
<title> Gaming World // Home </title>
</head>
<body>

<div id="container">
<header></header>

<nav id="topbar">
  <a href="http://gamingw.net/games/">Games</a>
  <a href="http://gamingw.net/mini/">Daily News</a>
  <a href="http://gamingw.net/dev/">Dev Logs</a>
  <a href="http://gamingw.net/mailbag/">Mailbag</a>
</nav>
    
<nav id="leftbar">
  <p>Gaming World</p>
    <a href="index.html">Home</a>
    <a href="http://gamingw.net/feedback/" target="_top">Feedback</a>
    <a href="http://www.gamingw.net/forums/">Forums</a>
    <a href="http://gamingw.net/search/">Search</a>
    <a href="http://www.whahay-irc.net/">IRC Chat</a>
  
  <p>Developers</p>
    <a href="http://gamingw.net/resource/">Resources</a>
    <a href="http://gamingw.net/tutorials/">Tutorials</a>
    <a href="articles/index.php">Articles</a>
    <a href="http://gamingw.net/music/">Music</a>
    <a href="http://gamingw.net/utilities/">Utilities</a>
    <a href="http://gamingw.net/developers/">Developer Directory</a>
  
  <p>Articles</p>
    <a href="http://gamingw.net/mini/">Daily News</a>
    <a href="http://gamingw.net/news/">News</a>				
    <a href="http://gamingw.net/features/">Features</a>
    <a href="http://gamingw.net/reviews/">Reviews</a>
    <a href="http://gamingw.net/previews/">Previews</a>
    <a href="http://gamingw.net/interviews/">Interviews</a>
    <a href="http://gamingw.net/mailbag/">Mail bag</a>
  
  <p>Games</p>
    <a href="http://gamingw.net/games/">Game Index</a>
    <a href="http://gamingw.net/games/action/">Action</a>
    <a href="http://gamingw.net/games/adventure/">Adventure</a>
    <a href="http://gamingw.net/games/arcade/">Arcade/Classic</a>
    <a href="http://gamingw.net/games/puzzle/">Puzzle</a>
    <a href="http://gamingw.net/games/platformer/">Platformer</a>
    <a href="http://gamingw.net/games/rpg/">RPG</a>
    <a href="http://gamingw.net/games/strategy/">Strategy</a>
    <a href="http://gamingw.net/games/all">All Games</a>
  
  <p>Makers</p>
    <a href="http://gamingw.net/makers/ags">Adventure Game</a>
    <a href="http://gamingw.net/makers/klik">Clickteam</a>
    <a href="http://gamingw.net/makers/gamemaker">Game Maker</a>
    <a href="http://gamingw.net/makers/ika">ika</a>
    <a href="http://gamingw.net/makers/sphere">Sphere</a>
    <a href="http://gamingw.net/makers/toolkit">RPG Toolkit</a>
    <a href="http://gamingw.net/makers/rm2k">RPGMaker 2000</a>
    <a href="http://gamingw.net/makers/rm2k3">RPGMaker 2003</a>
    <a href="http://gamingw.net/makers/verge">Verge</a>
  
  <p>Community</p>
    <a href="http://gamingw.net/staff/">Staff</a>
    <a href="http://gamingw.net/contact/">Contact</a>
    <a href="http://gamingw.net/register/">Register</a>
</nav>

<section id="content">
<h1 id="MasterHead">Today on Gaming World</h1>

Content goes here

</section>

<aside id="rightbar">

  <p id="rightbarhead">Login</p>
  <form action="http://gamingw.net/members/" method="post" name="LOGIN" 
  onsubmit="return ValidateForm()">
  <input name="act" value="Login" type="hidden">
  <p id="login">Username</p>
  <input value="" maxlength="64" name="username" type="text"><br>
  <p id="login">Password<p>
  <input name="password" type="password"><br>
  <input name="submit" value="Log in" type="submit">
  </form>

</aside>

	<footer>
	<a href="http://gamingw.net/register/">Join Gaming World</a>  
	<a href="http://gamingw.net/stats/">Website Statistics</a>  
	<a href="http://gamingw.net/about/">About Gaming World</a>  
	<a href="http://bart.gamingw.net/">Backend</a>  
	<a href="http://gamingw.net/contact/">Contact us</a> <br>

	Gaming World © 2004 - Coding and Design by <a href="http://bart.gamingw.net/">Bartek 
    Gniado</a> - Read our <a href="http://gamingw.net/privacy.htm">Privacy Statement</a> 
    and <a href="http://gamingw.net/terms.htm">Terms of Service</a>		
	</footer>
</div>
</body>
</html>

And the CSS:

nav#leftbar {
	float: left;
	width: 130px;
}

nav#leftbar p {
	text-align:left;
	font-size:11px;
	font-weight:bold;
	color:#FFFFFF;
	padding:3px;
	background-color: #404A68;
}

nav#leftbar a {
	text-align: center;
	display: block;
	width: 124px;
	font-weight: normal;
	padding: 1px;
	border-left: 2px solid #404A68;
	border-right: 2px solid #404A68;
	border-bottom: 1px solid #404A68;
	background-color: #556B99;
	color: #cff;
	text-decoration: none;
}
	
nav#leftbar a:hover {
	font-weight: normal;
	border-left: 2px solid #404A68;
	border-right: 2px solid #404A68;
	background-color: #5F76A5;
	color: #fff;
	text-decoration: none;
}

aside#rightbar {
	width: 180px;
}

#rightbarhead {
	text-align: left;
	font-size: 11px;
	font-weight :bold;
	color: #FFFFFF;
	padding: 3px;
	background-color: #404A68;
}

#login {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	padding: 3px;
}

#container {
	position: relative;
	margin: 0px;
	padding: 0px;
	max-width: 1024px;
	background-color: #556B99;
}

#content {
	margin-left: 130px;
	width: 716px;
	height: 700px;
	padding: 5px;
	font-size: 100%;
	text-align: left;
	background-color: #eee;
	vertical-align: top;
}

So this is what it looks like now:

 

LSiNLGT.png

 

 

And this is what I want it to look like (as far as the sidebar to the right is concerned):

 

Cy6InWQ.png

 

 

Positioning stuff with CSS still really puzzles me. I can never seem to figure out how to get my elements where I want them.

Edited by JustRob
Link to comment
Share on other sites

Alright, thanks for clearing that up. I think I have it working now, but if I resize my window, the sidebar on the right moves with the window. Is there any way to make it stay where it is? I tried position absolute, but then it jumps back to the left even though I have float: right.

Link to comment
Share on other sites

Oh, wait. I get what you mean. So I changed the max-width property of the container div to width, and I removed the position property altogether. Now it still works. But it looks like the same result to me. But if it's bad to use position: absolute, I'll go with this.

Edited by JustRob
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...