You are viewing our Forum Archives. To view or take place in current topics click here.
help with my navigation bar html
Posted:

help with my navigation bar htmlPosted:

MasterL
  • New Member
Status: Offline
Joined: Jan 29, 201410Year Member
Posts: 8
Reputation Power: 0
Status: Offline
Joined: Jan 29, 201410Year Member
Posts: 8
Reputation Power: 0
How can I move my navigation bar to the right more?
Here is my code


<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>


<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="movies-all.html">Movies</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</body>
#2. Posted:
Hacz
  • TTG Addict
Status: Offline
Joined: Mar 04, 201014Year Member
Posts: 2,891
Reputation Power: 150
Status: Offline
Joined: Mar 04, 201014Year Member
Posts: 2,891
Reputation Power: 150
Do you mean center it? Or move it all the way to the right? Or just move it to the right a little?

You can adjust the margin-left property in CSS to move it little-by-little
#3. Posted:
var
  • TTG Senior
Status: Offline
Joined: Dec 24, 201211Year Member
Posts: 1,498
Reputation Power: 79
Status: Offline
Joined: Dec 24, 201211Year Member
Posts: 1,498
Reputation Power: 79
Set it's position to property to absolute.
Ex:
postition:absolute;

Once you set the position property, you can access the directional properties. To move it to the right, you'd use a positive life value, or negative right value.
Ex:
left: 25px; (moves it 25px from the left side of the age)
#4. Posted:
iyop45
  • Prospect
Status: Offline
Joined: Apr 15, 201113Year Member
Posts: 614
Reputation Power: 83
Status: Offline
Joined: Apr 15, 201113Year Member
Posts: 614
Reputation Power: 83
Muah wrote Set it's position to property to absolute.
Ex:
postition:absolute;

Once you set the position property, you can access the directional properties. To move it to the right, you'd use a positive life value, or negative right value.
Ex:
left: 25px; (moves it 25px from the left side of the age)

This is really not good advice, absolute positioning for main elements will lead to huge pitfalls in compatibility etc.

OP: If you want to move the list you really should wrap it in a parent div, then you can either add attributes to float it to the right or in your case maybe just adjust its margins, though I know I'm kind of just reiterating HawkTheNerd point.

.parentdiv{
    margin-left:10px;
}
#5. Posted:
alex809
  • New Member
Status: Offline
Joined: Dec 27, 201310Year Member
Posts: 2
Reputation Power: 0
Status: Offline
Joined: Dec 27, 201310Year Member
Posts: 2
Reputation Power: 0
MasterL wrote How can I move my navigation bar to the right more?
Here is my code


<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>


<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="movies-all.html">Movies</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</body>


Is this what you were looking for?

<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float: left;
}
a:link,a:visited
{
display: block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

#navigation {
background-color:#98bf21;
text-align: center;
}
</style>
</head>


<body>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="movies-all.html">Movies</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

</body>


[ Register or Signin to view external links. ]
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.