Need help aligning / centering the navigation bar and table contents (CSS)
My code is:
HTML
<body>
<div class="gridContainer clearfix">
<div id="header">
<!-- Start NavBar -->
<div id="navbar" name="nav-top">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
</div>
<!-- End NavBar/Start Content -->
<div id="content">
<div id="inner">
<!-- Content Header -->
<table id="table_1">
<tbody>
<tr id="tab_head">
<th><h1>About me | Section 1</h1></th>
</tr>
<tr id="para_1">
<td><h3>Hello and Welcome!</h3></td>
</tr>
</tbody>
</table>
<!-- Content Body -->
<table id="table_2">
<tbody>
<tr>
<td><p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BLah Blah Blah Blah Blah Blah Blah.</p></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="my-footer">This is the content for Layout Div Tag "footer"</div>
</div>
<!-- Add JS -->
</body>
CSS
#navbar {
width: 100%;
float: none;
margin: 0 0 3em;
padding: 0 0 0 0;
background-color: #ffffff;
border-bottom: 1px solid #2B9EFF; }
#navbar ul {
list-style: none;
width: 730px; /* 730px width was 800px before, but changed to slide navbar to right */
margin:0 auto;
overflow:hidden; }
#navbar li {
float: left; }
#navbar li a {
width:150px;
display: block;
padding: 10px 15px;
text-decoration: none;
font-weight:normal;
color: #a3a3a3;
border-right: 1px solid #ccc; }
#navbar li:first-child a {
border-left: 1px solid #ccc; }
a:link, a:visited {
background-color: #ffffff;
text-align: center;
text-transform: uppercase;
}
#navbar a:hover, a:active {
background-color: #2B9EFF;
color: #141414;
font-weight:lighter; }
/* Content */
table {
width: 100%;
text-align: center;
}
#para_1 td {
text-align:center;
}
#table_2 {
width:100%;
text-align:justify;
margin
}
#my-footer {
width:100%;
height:80px;
position: fixed;
bottom:0;
left: 0;
clear:both;
background:#2B9EFF;
text-align:center; }
My main concern, if you have not noticed yet, is the fact that my main navigation bar, which should sit on top of everything else, is not focused on the page. What I have had to put up with so far is a well-designed style, and this ultimately leads to what I have now. It seems I can tweak it a bit by setting the width in pixels, but when I try to work with percent, it is reset.
, , - , , (, ..). , , "" () , . , , , ( ), .
.
Adobe CS6 , . /, / . , , .
. , , , , .
, , , , , .
, ?
/, , grid-layout ?
, ?
, !
,
- T.R.G.
+4
2
HTML , , CSS:
CSS
#navbar {
width: 100%;
/* float: none; */
margin-bottom: 3em;
margin-right: auto;
margin-left: auto;
padding: 0;
float:none;
background-color: #ffffff;
border-bottom: 1px solid #2B9EFF; }
#navbar ul {
list-style: none;
width: auto;/* 730px width was 800px before, but changed to slide navbar to right */
margin:0 auto;
padding: 0 20% 0 20%;
overflow:hidden; }
table {
width: 100%;
}
#table1 th, td {
width:auto;
float:none;
text-align:center;
}
#table_2 {
width:50%;
float:none;
margin: 0 auto;
text-align:justify;
}
, , . , , (navbar) (li), , , . , , . , , , , .
, .
, , , . , ().
, ,
.
- T.R.G.
0
:
.clear {
clear: both;
float: none;
}
CSS:
#navbar ul {
list-style: none;
width: 730px;
overflow: hidden;
clear: right;
float: right;
margin: 0;
padding: 0;
}
#navbar {
width: auto;
clear: right;
float: right;
padding: 0 0 0 0;
background-color: #ffffff;
border-bottom: 1px solid #2B9EFF;
}
HTML:
<div id="header">
<!-- Start NavBar -->
<div id="navbar" name="nav-top">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div><div class="clear"></div>
</div>
+1