Abunada
07-25-2011, 08:53 PM
Hi Guys
This is my first post in these forums, so I hope I can get help because I am desperate. I created a template for my site and it consists of a single HTML file, a single CSS file, and several images. It was based on a template found online but I completely rewrote everything. It has a simple header with a logo, a horizontal drop down menu, a sidebar, main content and footer areas.
I am no CSS expert, and I have got a few problems that I just can\t get over. Firstly (and I thought that should be simple), I can't add top margin to my footer. I wanted to add that so that I get a little bit of space between the main content area and the footer. If I add it to the footer div simply nothing will happen.
The second thing is my drop down menu, I kind of struggled but I got to work on a single level, but as soon as I add submenus (within the child li tags) it just does not work (even if I add the appropriate styling in the CSS folder). Also for some weird reason I cant set the width to auto because it breaks the links into two lines for some reason and screws up the formatting. When I set the UL tag's width to a fixed width it works perfectly.
Below is both my CSS and HTML, also I have uploaded the files to my domain so that you can see the problems live at http://www.eratronics.net/
Thanks and sorry for the long post
*
{
margin: 0;
padding: 0;
outline: 0
}
body
{
background: #f7f0e3;
font: 11px/1.7em Verdana, Tahoma, Arial, Geneva, sans-serif;
color: #666666;
text-align: center;
margin: 0 0 50px 0;
}
a,
a:visited
{
color: #5A93C9;
background: inherit;
text-decoration: none;
}
a:hover
{
color: #88ac0b;
background: inherit;
text-decoration: underline;
}
h1,
h2,
h3
{
font-family: Tahoma, Sans-serif;
color: #444;
}
h1
{
font-size: 3.1em;
font-weight: normal;
letter-spacing: -1px;
}
h2
{
font-size: 3em;
color: #88ac0b;
}
h3
{
font-size: 1.8em;
font-weight: normal;
}
h1,
h2,
h3,
p
{
padding: 10px;
margin: 0;
}
ul, ol
{
margin: 5px 20px;
padding: 0 20px;
}
ul
{
list-style: none;
}
img
{
background: #fafafa;
border: 1px solid #dcdcdc;
padding: 8px;
}
#wrap
{
position: relative;
background: #fff url(../images/wrap-bg.jpg) repeat-y;
width: 900px;
margin: 50px auto 0 auto;
text-align: left;
}
#content-wrap
{
position: relative;
background: #fff url(../images/content-bg.jpg) repeat-x;
clear: both;
float: left;
width: 870px;
padding: 0;
margin-left: 15px;
display: inline;
border-top: 5px solid #fff;
border-bottom: 1px solid #e5e5e5;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
#header
{
position: relative;
background: #fff url(../images/header-bg.jpg) repeat-x;
width: 870px;
height: 100px;
padding: 0;
margin: 0px auto;
}
#header img.logo-image
{
width: 270px;
height: 75px;
background: none;
border: none;
position: absolute;
top: 21px;
left: 10px;
margin: 0;
padding: 0;
}
#nav
{
clear: both;
margin: 0;
padding: 0;
float: left;
width: auto;
}
#nav ul
{
float: left;
list-style: none;
width: 870px;
height: 45px;
margin: 0;
margin-left: 15px;
padding: 0;
background: url(../images/nav.jpg) repeat-x;
}
#nav ul li
{
position: relative;
float: left;
}
#nav ul li a
{
display: block;
margin: 0;
padding: 0 14px;
border-right: 1px solid #899D00;
border-left: 1px solid #A7D101;
font: bold 14px/45px Verdana, Tahoma, "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
text-decoration: none;
color: #fff;
background: url(../images/nav.jpg) repeat-x;
}
#nav ul li a:hover,
#nav ul li a:active
{
background: url(../images/nav-hover.jpg) repeat-x;
}
#nav ul li#current a
{
background: url(../images/nav-current.jpg) repeat-x;
}
#nav ul li ul
{
position: absolute;
z-index: 500;
display: none;
margin-left: 0px;
width: 300px;
}
#nav ul li:hover ul
{
display: block;
}
#nav ul li ul li
{
float: none;
}
#main
{
float: right;
width: 600px;
padding: 0; margin: 10px 0 0 10px;
padding-right: 10px;
display: inline;
}
#main h2
{
margin-top: 10px;
padding-bottom: 3px;
font: 2.9em/1em Tahoma, Sans-serif;
color: #895F30;
letter-spacing: -1px;
text-transform: none;
}
#main h2 a
{
color: #895F30;
text-decoration: none;
}
#main ul li
{
list-style-image: url(../images/bullet.gif);
}
#sidebar
{
float: left;
width: 230px;
padding: 0; margin: 10px 10px 0 0;
padding-left: 10px;
display: inline;
}
#sidebar h3
{
margin-top: 10px;
margin-left: 5px;
padding: 5px 5px;
font: normal 1.9em Tahoma, Sans-serif;
color: #899B0D;
}
#sidebar ul.sidemenu
{
text-align: left;
margin: 10px 10px 8px 8px; padding: 0;
border-top: 1px solid #EBEBEB;
}
#sidebar ul.sidemenu li
{
list-style: none;
border-bottom: 1px solid #EBEBEB;
padding: 8px 5px;
margin: 0;
}
* html body #sidebar ul.sidemenu li
{
height: 1%;
}
#sidebar ul.sidemenu li a:link,
#sidebar ul.sidemenu li a:visited
{
color: #895F30;
padding-left: 0;
font-weight: bold;
text-decoration: none;
}
#sidebar ul.sidemenu li a span
{
color: #9F9F9F;
font-family: Georgia, 'Times New Roman', Times, Serif;
font-style: normal;
font-weight: normal;
}
#sidebar ul.sidemenu li a:hover
{
color: #000;
text-decoration: none;
}
#sidebar ul.sidemenu ul
{
margin: 0 0 0 5px;
padding: 0;
}
#sidebar ul.sidemenu ul li
{
background: none;
}
#footer-wrap
{
clear: both;
width: 900px;
text-align: left;
border-bottom: 15px solid #fff;
border-top: 1px solid #fff;
}
#footer-wrap a:hover
{
color: #000;
}
#footer-wrap h3
{
color: #976834;
margin: 10px 0 20px 0;
padding: 0 10px;
text-transform: uppercase;
font-weight: normal;
font-size: 1.6em;
padding-top: 20px;
}
#footer-bottom
{
clear: both;
color: #666;
margin: 0 auto;
width: 870px;
text-align: center;
font-size: .95em;
}
#footer-bottom a
{
color: #976834;
text-decoration: none;
}
.float-left
{
float: left;
}
.float-right
{
float: right;
}
.align-left
{
text-align: left;
}
.align-right
{
text-align: right;
}
.fix
{
clear: both;
height: 1px;
margin: -1px 0 0;
overflow: hidden;
}
.clear
{
display:inline-block;
}
.clear:after
{
display: block;
visibility: hidden;
clear: both;
height: 0;
content: " ";
}
<!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>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<title>Eratronics</title>
</head>
<body>
<div id="wrap">
<div id="header">
<img src="images/logo.png" class="logo-image" />
</div>
<div id="nav">
<ul>
<li id="current"><a href="index.html">Home</a></li>
<li><a href="index.html">About</a>
<ul>
<li><a href="index.html">About Me</a></li>
<li><a href="index.html">About Us</a></li>
</ul>
</li>
<li><a href="index.html">Tutorials</a>
<ul>
<li><a href="index.html">Electronics</a></li>
<li><a href="index.html">Microcontrollers</a></li>
<li><a href="index.html">Lab Skills</a></li>
</ul>
</li>
<li><a href="index.html">Projects</a>
<ul>
<li><a href="index.html">Fixed</a></li>
<li><a href="index.html">User Submitted</a></li>
</ul>
</li>
<li><a href="index.html">Forums</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>
<div id="content-wrap">
<div id="main">
<h2>Comming Soon!</h2>
<p align="justify">
Welcome To Eratronics the number one source for electronics, microcontrollers and everything Electrical Engineering.
Fell Free to check out our electronics and microcontroller tutorials. If you are more a hands on person, you might want
to check our projects section which contains complete schematics, microcontroller C code, and PCB layouts. Have a question
why not post it in our forums and get zillions of helpful knowledgable members of the community answer it for you in a
gify. Have FUN!
</p>
</div>
<div id="sidebar">
<h3>Links</h3>
<ul class="sidemenu">
<li><a href="index.html">Home</a></li>
<li><a href="http://www.adafruit.com/">Adafruit</a></li>
<li><a href="http://www.sparkfun.com/">Sparkfun</a></li>
<li><a href="http://www.evilmadscientist.com/">Evil Mad Scientist</a></li>
<li><a href="http://www.makezine.com/">Make</a></li>
</ul>
</div>
</div>
<div id="footer-wrap">
<div id="footer-bottom">
<p>
© 2011 <strong>Eratronics</strong>
</p>
</div>
</div>
</div>
</body>
</html>
This is my first post in these forums, so I hope I can get help because I am desperate. I created a template for my site and it consists of a single HTML file, a single CSS file, and several images. It was based on a template found online but I completely rewrote everything. It has a simple header with a logo, a horizontal drop down menu, a sidebar, main content and footer areas.
I am no CSS expert, and I have got a few problems that I just can\t get over. Firstly (and I thought that should be simple), I can't add top margin to my footer. I wanted to add that so that I get a little bit of space between the main content area and the footer. If I add it to the footer div simply nothing will happen.
The second thing is my drop down menu, I kind of struggled but I got to work on a single level, but as soon as I add submenus (within the child li tags) it just does not work (even if I add the appropriate styling in the CSS folder). Also for some weird reason I cant set the width to auto because it breaks the links into two lines for some reason and screws up the formatting. When I set the UL tag's width to a fixed width it works perfectly.
Below is both my CSS and HTML, also I have uploaded the files to my domain so that you can see the problems live at http://www.eratronics.net/
Thanks and sorry for the long post
*
{
margin: 0;
padding: 0;
outline: 0
}
body
{
background: #f7f0e3;
font: 11px/1.7em Verdana, Tahoma, Arial, Geneva, sans-serif;
color: #666666;
text-align: center;
margin: 0 0 50px 0;
}
a,
a:visited
{
color: #5A93C9;
background: inherit;
text-decoration: none;
}
a:hover
{
color: #88ac0b;
background: inherit;
text-decoration: underline;
}
h1,
h2,
h3
{
font-family: Tahoma, Sans-serif;
color: #444;
}
h1
{
font-size: 3.1em;
font-weight: normal;
letter-spacing: -1px;
}
h2
{
font-size: 3em;
color: #88ac0b;
}
h3
{
font-size: 1.8em;
font-weight: normal;
}
h1,
h2,
h3,
p
{
padding: 10px;
margin: 0;
}
ul, ol
{
margin: 5px 20px;
padding: 0 20px;
}
ul
{
list-style: none;
}
img
{
background: #fafafa;
border: 1px solid #dcdcdc;
padding: 8px;
}
#wrap
{
position: relative;
background: #fff url(../images/wrap-bg.jpg) repeat-y;
width: 900px;
margin: 50px auto 0 auto;
text-align: left;
}
#content-wrap
{
position: relative;
background: #fff url(../images/content-bg.jpg) repeat-x;
clear: both;
float: left;
width: 870px;
padding: 0;
margin-left: 15px;
display: inline;
border-top: 5px solid #fff;
border-bottom: 1px solid #e5e5e5;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
#header
{
position: relative;
background: #fff url(../images/header-bg.jpg) repeat-x;
width: 870px;
height: 100px;
padding: 0;
margin: 0px auto;
}
#header img.logo-image
{
width: 270px;
height: 75px;
background: none;
border: none;
position: absolute;
top: 21px;
left: 10px;
margin: 0;
padding: 0;
}
#nav
{
clear: both;
margin: 0;
padding: 0;
float: left;
width: auto;
}
#nav ul
{
float: left;
list-style: none;
width: 870px;
height: 45px;
margin: 0;
margin-left: 15px;
padding: 0;
background: url(../images/nav.jpg) repeat-x;
}
#nav ul li
{
position: relative;
float: left;
}
#nav ul li a
{
display: block;
margin: 0;
padding: 0 14px;
border-right: 1px solid #899D00;
border-left: 1px solid #A7D101;
font: bold 14px/45px Verdana, Tahoma, "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
text-decoration: none;
color: #fff;
background: url(../images/nav.jpg) repeat-x;
}
#nav ul li a:hover,
#nav ul li a:active
{
background: url(../images/nav-hover.jpg) repeat-x;
}
#nav ul li#current a
{
background: url(../images/nav-current.jpg) repeat-x;
}
#nav ul li ul
{
position: absolute;
z-index: 500;
display: none;
margin-left: 0px;
width: 300px;
}
#nav ul li:hover ul
{
display: block;
}
#nav ul li ul li
{
float: none;
}
#main
{
float: right;
width: 600px;
padding: 0; margin: 10px 0 0 10px;
padding-right: 10px;
display: inline;
}
#main h2
{
margin-top: 10px;
padding-bottom: 3px;
font: 2.9em/1em Tahoma, Sans-serif;
color: #895F30;
letter-spacing: -1px;
text-transform: none;
}
#main h2 a
{
color: #895F30;
text-decoration: none;
}
#main ul li
{
list-style-image: url(../images/bullet.gif);
}
#sidebar
{
float: left;
width: 230px;
padding: 0; margin: 10px 10px 0 0;
padding-left: 10px;
display: inline;
}
#sidebar h3
{
margin-top: 10px;
margin-left: 5px;
padding: 5px 5px;
font: normal 1.9em Tahoma, Sans-serif;
color: #899B0D;
}
#sidebar ul.sidemenu
{
text-align: left;
margin: 10px 10px 8px 8px; padding: 0;
border-top: 1px solid #EBEBEB;
}
#sidebar ul.sidemenu li
{
list-style: none;
border-bottom: 1px solid #EBEBEB;
padding: 8px 5px;
margin: 0;
}
* html body #sidebar ul.sidemenu li
{
height: 1%;
}
#sidebar ul.sidemenu li a:link,
#sidebar ul.sidemenu li a:visited
{
color: #895F30;
padding-left: 0;
font-weight: bold;
text-decoration: none;
}
#sidebar ul.sidemenu li a span
{
color: #9F9F9F;
font-family: Georgia, 'Times New Roman', Times, Serif;
font-style: normal;
font-weight: normal;
}
#sidebar ul.sidemenu li a:hover
{
color: #000;
text-decoration: none;
}
#sidebar ul.sidemenu ul
{
margin: 0 0 0 5px;
padding: 0;
}
#sidebar ul.sidemenu ul li
{
background: none;
}
#footer-wrap
{
clear: both;
width: 900px;
text-align: left;
border-bottom: 15px solid #fff;
border-top: 1px solid #fff;
}
#footer-wrap a:hover
{
color: #000;
}
#footer-wrap h3
{
color: #976834;
margin: 10px 0 20px 0;
padding: 0 10px;
text-transform: uppercase;
font-weight: normal;
font-size: 1.6em;
padding-top: 20px;
}
#footer-bottom
{
clear: both;
color: #666;
margin: 0 auto;
width: 870px;
text-align: center;
font-size: .95em;
}
#footer-bottom a
{
color: #976834;
text-decoration: none;
}
.float-left
{
float: left;
}
.float-right
{
float: right;
}
.align-left
{
text-align: left;
}
.align-right
{
text-align: right;
}
.fix
{
clear: both;
height: 1px;
margin: -1px 0 0;
overflow: hidden;
}
.clear
{
display:inline-block;
}
.clear:after
{
display: block;
visibility: hidden;
clear: both;
height: 0;
content: " ";
}
<!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>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<title>Eratronics</title>
</head>
<body>
<div id="wrap">
<div id="header">
<img src="images/logo.png" class="logo-image" />
</div>
<div id="nav">
<ul>
<li id="current"><a href="index.html">Home</a></li>
<li><a href="index.html">About</a>
<ul>
<li><a href="index.html">About Me</a></li>
<li><a href="index.html">About Us</a></li>
</ul>
</li>
<li><a href="index.html">Tutorials</a>
<ul>
<li><a href="index.html">Electronics</a></li>
<li><a href="index.html">Microcontrollers</a></li>
<li><a href="index.html">Lab Skills</a></li>
</ul>
</li>
<li><a href="index.html">Projects</a>
<ul>
<li><a href="index.html">Fixed</a></li>
<li><a href="index.html">User Submitted</a></li>
</ul>
</li>
<li><a href="index.html">Forums</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>
<div id="content-wrap">
<div id="main">
<h2>Comming Soon!</h2>
<p align="justify">
Welcome To Eratronics the number one source for electronics, microcontrollers and everything Electrical Engineering.
Fell Free to check out our electronics and microcontroller tutorials. If you are more a hands on person, you might want
to check our projects section which contains complete schematics, microcontroller C code, and PCB layouts. Have a question
why not post it in our forums and get zillions of helpful knowledgable members of the community answer it for you in a
gify. Have FUN!
</p>
</div>
<div id="sidebar">
<h3>Links</h3>
<ul class="sidemenu">
<li><a href="index.html">Home</a></li>
<li><a href="http://www.adafruit.com/">Adafruit</a></li>
<li><a href="http://www.sparkfun.com/">Sparkfun</a></li>
<li><a href="http://www.evilmadscientist.com/">Evil Mad Scientist</a></li>
<li><a href="http://www.makezine.com/">Make</a></li>
</ul>
</div>
</div>
<div id="footer-wrap">
<div id="footer-bottom">
<p>
© 2011 <strong>Eratronics</strong>
</p>
</div>
</div>
</div>
</body>
</html>