|
Answer» i'm making a html page with a css. everything on the buttons work(hover, visited link, etc.) but i can't seem to get the navigation bar centered. i tried these FUNCTIONS in the css file:
align = "center";
margin:auto;
margine:inherit;
none of them work. here's my entire css code;
Code: [Select]div.navbar
{ font-family: Arial, Helvetica, sans-serif;
white-space: nowrap;
margin: auto;
DISPLAY:inline
align = "center";
margin:auto;
margine:inherit;
}
div.navbar a:visited,
div.navbar a:active,
div.navbar a:link
{ padding: 3px;
color: #300;
border-left: thin #f00 solid;
border-top: thin #f00 solid;
border-bottom:thin #f00 solid;
border-right:thin #f00 solid;
text-decoration: none;
margin: auto;
}
div.navbar a:hover
{ background-color: black;
color: white;
padding: 3px;
border-top: thin #00f solid;
border-bottom:thin #00f solid;
text-decoration: none;
}
a.button
{ font-weight: bold;
text-decoration: none;
background-color: #eb0;
color: blue;
padding: 2px;
border-width: 3px; /* border : 3px outset #eb0 */
border-style: outset;
border-color: #eb0;
}
a.button:active
{ border: inset; }
thanks in advanceand my html file, just incase;
Code: [Select]<?XML version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<title>Navbar Home Page</title>
<link rel="stylesheet" TYPE="text/css" href="css/navbar2.css" />
</head>
<a class="button" href="home.html"> Enter Site </a> <br /> <br />
<body>
<div class="navbar">
<a href="courseinfo.html">Course Information</a>
<a href="schedule.html">Schedule</a>
<a href="index.html">Homework</a>
<a href="sitemap.html">Site Map</a>
</div>
</body>
</html>
"align" won't work in a stylesheet. You NEED to use "text-align: center".Try this - short on time but a quick fix of sorts .... using most of your shown css code ..... with an addition and odd tweaks. Play with some bits to experiment.
Code: [Select]body
{
margin:50px 0px; padding:0px;
text-align:center;
}
div.navbar
{ font-family: Arial, Helvetica, sans-serif;
white-space: nowrap;
display:inline;
text-align: center;
margin:0px auto;
margin:inherit;
width:400px;
}
div.navbar a:visited,
div.navbar a:active,
div.navbar a:link
{ padding: 3px;
color: #300;
border-left: thin #f00 solid;
border-top: thin #f00 solid;
border-bottom:thin #f00 solid;
border-right:thin #f00 solid;
text-decoration: none;
margin: auto;
}
div.navbar a:hover
{ background-color: black;
color: white;
padding: 3px;
border-top: thin #00f solid;
border-bottom:thin #00f solid;
text-decoration: none;
}
a.button
{ font-weight: bold;
text-decoration: none;
background-color: #eb0;
color: blue;
padding: 2px;
border-width: 3px; /* border : 3px outset #eb0 */
border-style: outset;
border-color: #eb0;
}
The your html -
Code: [Select]<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<title>Navbar Home Page</title>
<link rel="stylesheet" type="text/css" href="css/navbar2.css" />
</head>
<a class="button" href="home.html"> Enter Site </a> <br /> <br />
<body>
<ul><div class="navbar">
<a href="courseinfo.html">Course Information</a>
<a href="schedule.html">Schedule</a>
<a href="index.html">Homework</a>
<a href="sitemap.html">Site Map</a> </ul>
</div>
</body>
</html>
|
