Embracing the world of CSS as a newbie has been an exciting journey. However, I've encountered a hurdle in my coding process and could use some expert guidance.
In my website layout, I'm aiming to position my logo on the left side of the navigation bar. The main content of the site should be centered with a width of 960px and aligned at the top edge of the browser (0px from the top). To achieve this, I am utilizing the CSS properties display: inline along with li selectors.
I also intend to have the inline navigation sit snugly next to the logo. Additionally, I want to replicate the logo's top 4px border effect when hovering over the navigation links using the CSS a:hover selector. This hover effect should maintain a margin-top: 0px in the browser.
Here is the link to view my current logo/navigation layout:
Below is my CSS CODE:
.topbar {
width: 960px;
height: 87px;
text-align: center;
}
.topbar-inner {
width: 960px;
margin: 0 auto 0 auto;
text-align: center;
}
.logo {
margin-top: 0px;
display: inline;
}
img {
float: left;
border: 0;
padding: 0;
margin: 0;
}
.menu {
display: inline;
margin-top: 0px;
}
.menu > ul > li {
display: inline-block;
position: relative;
border-top: 4px solid #FFF;
margin-right: 0px;
padding-top: 40px;
min-width: 80px;
}
.menu > li {
display: inline-block;
list-style: none;
margin-top: 50px;
}
.menu li a {
color: #000;
display: block;
text-decoration: none;
}
.menu li:hover {
border-top-color: #039;
}
.menu li:hover a {
color: #039;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.content {
height: 500px;
padding: 0px 20px 20px 20px;
text-align: left;
font-size: 12px;
}
.footer {
border-top: 1px solid #DFDFDF;
width: 960px;
margin: 0 auto;
font-size: 11px;
text-align: center;
}
And here is the HTML Code snippet:
<?php
// Including Setup document:
include('_config/setup.php');
?>
<!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><?php echo $page_title; ?></title>
<link rel="stylesheet" type="text/css" href="_css/styles.css">
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="logo"><img src="/vls/_images/mylogo.png" height="87" width="287"/></div>
<!-- logo -->
<div class="menu"><?php include('_template/nav_main.php'); ?></div>
<!-- menu -->
</div>
<!-- topbar-inner -->
</div>
<!-- topbar -->
<div class="bdy_hdr"><?php get_page_name($dbc, $pg); ?></div>
<div class="content"><?php get_page_body($dbc, $pg); ?></div>
<div class="footer"><?php include('_template/footer.php'); ?></div>
</body>
</html>
Thank you for your assistance!