G
Guest
Hi there,
I'm trying to use the correct CSS to control a website as much as possible.
I want to create a nav section like below
--------------------------------------
Home Page1 Page 2
--------------------------------------
I create the links as an unordered list <ul> and apply the style
display:inline which makes the list horisontal.
However, when I applyt a border to my <div> section, I also seem to get an
unwanted gap between the top and bottom of my list items and the borders of
their surrounding divs.
I.e. it looks something like this
--------------------------------------
Home Page1 Page 2
--------------------------------------
And I can't seem to loose the gap. Also it does not display the list items
in the Arial font (but does in dreamweaver CS3 preview screen).
Can anyone help? Code is below (note I have experimented around with the CSS
a bit).
***********HTML START****************
<html>
<head>
<link href="styles/test1.css" rel="stylesheet" type="text/css">
</head>
<body class="mainPageDefaults">
<div id="mainContent" class="mainContent" >
<div class="navBarFontMain navBarMain">
<ul id="navMenuList">
<li><a href="index.htm">Home</a> </li>
<li><a href="index.htm">Page 1 </a></li>
<li><a href="index.htm">Page 2</a></li>
</ul>
</div>
</div>
</body>
</html>
***********HTML END****************
********STYLE SHEET START***********
..navBarMain {
border-top-width: 5px;
border-top-color: #3399CC;
border-right-color: #FFFFFF;
border-bottom-color: #0099CC;
border-left-color: #FFFFFF;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-width: 2px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom:0px;
margin-top:0px;
}
..navBarFontMain, .navBarFontMain a:link , .navBarFontMain a:active,
..navBarFontMain a:visited
{
font:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
color:#9f9f92;
text-decoration:none;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom:0px;
margin-top:0px;
}
..navBarFontMain a:hover {
text-decoration:underline;
}
#navMenuList li {
display: inline;
list-style-type: none;
padding-right: 0.8em;
font:Arial, Helvetica, sans-serif;
border-top-width: 0px;
border-bottom-width: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom:0px;
margin-top:0px;
}
..mainContent {
width:880px;
background-color:#FFFFFF;
}
********STYLE SHEET END***********
I'm trying to use the correct CSS to control a website as much as possible.
I want to create a nav section like below
--------------------------------------
Home Page1 Page 2
--------------------------------------
I create the links as an unordered list <ul> and apply the style
display:inline which makes the list horisontal.
However, when I applyt a border to my <div> section, I also seem to get an
unwanted gap between the top and bottom of my list items and the borders of
their surrounding divs.
I.e. it looks something like this
--------------------------------------
Home Page1 Page 2
--------------------------------------
And I can't seem to loose the gap. Also it does not display the list items
in the Arial font (but does in dreamweaver CS3 preview screen).
Can anyone help? Code is below (note I have experimented around with the CSS
a bit).
***********HTML START****************
<html>
<head>
<link href="styles/test1.css" rel="stylesheet" type="text/css">
</head>
<body class="mainPageDefaults">
<div id="mainContent" class="mainContent" >
<div class="navBarFontMain navBarMain">
<ul id="navMenuList">
<li><a href="index.htm">Home</a> </li>
<li><a href="index.htm">Page 1 </a></li>
<li><a href="index.htm">Page 2</a></li>
</ul>
</div>
</div>
</body>
</html>
***********HTML END****************
********STYLE SHEET START***********
..navBarMain {
border-top-width: 5px;
border-top-color: #3399CC;
border-right-color: #FFFFFF;
border-bottom-color: #0099CC;
border-left-color: #FFFFFF;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-width: 2px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom:0px;
margin-top:0px;
}
..navBarFontMain, .navBarFontMain a:link , .navBarFontMain a:active,
..navBarFontMain a:visited
{
font:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
color:#9f9f92;
text-decoration:none;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom:0px;
margin-top:0px;
}
..navBarFontMain a:hover {
text-decoration:underline;
}
#navMenuList li {
display: inline;
list-style-type: none;
padding-right: 0.8em;
font:Arial, Helvetica, sans-serif;
border-top-width: 0px;
border-bottom-width: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom:0px;
margin-top:0px;
}
..mainContent {
width:880px;
background-color:#FFFFFF;
}
********STYLE SHEET END***********