EricaL
11-29-2009, 07:27 PM
Hi all,
I'm working on creating a horizontal menu bar using css for my site. I have followed this (http://www.tutorialtastic.co.uk/tutorial/horizontal_css_block_navigation) tutorial to create it, however I have come across a few problems.
1) My menu bar is somewhat off-center and I'm not sure how to fix it.
2) In a smaller resolution, the menu bar does not fit, width-wise, into the bar, and I was wondering how to fix this problem.
Below are my css and html codes.
CSS
body {
background: url('images/bg.gif') #EFEFEF;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
}
#header {
height: 62px;
background: url('images/header.png') repeat-x;
}
#logo {
margin-top: 20px;
margin-left: 20px;
}
#nav {
height: 35px;
background: #BFBBBB;
width: 100%;
font-size: 10pt;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#links {
list-style: none;
margin: 0 auto;
padding: 5;
}
#links li {
float: left;
}
#links li a {
display: block;
background-color: #BFBBBB;
color: #7D7D7D;
text-decoration: none;
width: 150px;
padding: 8px;
}
#links li a:hover {
background-color: #A9A9A9;
color: #FFFFFF;
padding: 7px;
height: 20px;
}
#updates {
position: relative;
background-image: url('images/updates_box.png');
width: 725px;
height: 105px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
#wrap {
position: relative;
margin-top: 30px;
margin-left: 10px;
}
#sidebar {
float: left;
width: 30%;
height: 100%;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
#content {
margin-left: 32%;
width: 60%;
height: 100%;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 50px;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EricaFTW</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="JavaScript1.2" src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></div>
<script language="JavaScript1.2" src="js/style.js" type="text/javascript"></script>
<div id="container">
<div id="header">
<img src="images/logo.png" id="logo" alt="" border="0" />
</div>
<div id="nav">
<ul id="links">
<li><a href="index.php">Home</a>
<li><a href="about.php">About</a>
<li><a href="portfolio.php">Portfolio</a>
<li><a href="writing.php">Writing</a>
<li><a href="contact.php">Contact</a>
</ul>
</div>
<div id="updates">
</div>
<div id="wrap">
<div id="sidebar">sidebar</div>
<div id="content">content</div>
</div>
</div>
</body>
</html>
Click here (http://ericaftw.com/v3) for a live demo.
Thanks in advance,
Erica
I'm working on creating a horizontal menu bar using css for my site. I have followed this (http://www.tutorialtastic.co.uk/tutorial/horizontal_css_block_navigation) tutorial to create it, however I have come across a few problems.
1) My menu bar is somewhat off-center and I'm not sure how to fix it.
2) In a smaller resolution, the menu bar does not fit, width-wise, into the bar, and I was wondering how to fix this problem.
Below are my css and html codes.
CSS
body {
background: url('images/bg.gif') #EFEFEF;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
}
#header {
height: 62px;
background: url('images/header.png') repeat-x;
}
#logo {
margin-top: 20px;
margin-left: 20px;
}
#nav {
height: 35px;
background: #BFBBBB;
width: 100%;
font-size: 10pt;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#links {
list-style: none;
margin: 0 auto;
padding: 5;
}
#links li {
float: left;
}
#links li a {
display: block;
background-color: #BFBBBB;
color: #7D7D7D;
text-decoration: none;
width: 150px;
padding: 8px;
}
#links li a:hover {
background-color: #A9A9A9;
color: #FFFFFF;
padding: 7px;
height: 20px;
}
#updates {
position: relative;
background-image: url('images/updates_box.png');
width: 725px;
height: 105px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
#wrap {
position: relative;
margin-top: 30px;
margin-left: 10px;
}
#sidebar {
float: left;
width: 30%;
height: 100%;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
#content {
margin-left: 32%;
width: 60%;
height: 100%;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 50px;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EricaFTW</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="JavaScript1.2" src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></div>
<script language="JavaScript1.2" src="js/style.js" type="text/javascript"></script>
<div id="container">
<div id="header">
<img src="images/logo.png" id="logo" alt="" border="0" />
</div>
<div id="nav">
<ul id="links">
<li><a href="index.php">Home</a>
<li><a href="about.php">About</a>
<li><a href="portfolio.php">Portfolio</a>
<li><a href="writing.php">Writing</a>
<li><a href="contact.php">Contact</a>
</ul>
</div>
<div id="updates">
</div>
<div id="wrap">
<div id="sidebar">sidebar</div>
<div id="content">content</div>
</div>
</div>
</body>
</html>
Click here (http://ericaftw.com/v3) for a live demo.
Thanks in advance,
Erica