Menu
I'm having trouble positioning my vertical navigation bar to the left of my content Div. Here is what I have and what I want:
The problem, is that it's a fixed position so it's different for monitors that are not a similar size. So I'm guessing I'll need to have relative positioning but I'm not too sure on how to do it.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href= "styles/styling.css" />
</head>
<div class="container">
<ul class="nav">.....(Just nav bar stuff)
<div class="content">
<h1>abcd</h1>
<p>abcd</p>
</div>
CSS
.content {
background-color: #FFFFFF;
width: 650px;
padding: 20px;
margin: auto;
word-wrap: break-word
}
.container {
position: fixed;
top: 151px;
left: 420px;
}
Thanks!
972
asked Dec 15 '14 17:12
To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.
Positioning the nav-bar First of all, let's start by positioning the actual <header> element. We'll also want to give the <header> a background-color so that we can see its position. Let's add some styles! Here' we're positioning the <header> element using position : fixed .
The navbar should always be at the top of the viewport.
Fixed position will help you keep your menu visible when you scroll down. Otherwise, you should not use it.
<div class="container">
<div class="one-third column">
<ul class="yourmenu">xxx</ul>
<div class="filler"></div>
</div>
<div class="two-thirds column">
Your page content here
</div>
</div>
<style>
.container {width:960px;margin:auto;}
.column {float:left;position:relative;}
.one-third {width:320px;}
.two-thirds {width:640px;}
.filler {width:100%;height:10px;}
.yourmenu {position:fixed;top:100px;} /* do not define left, because it will fix the screen and not the column div */
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With