...

View Full Version : A couple of problems with my site's template



Abunada
07-28-2011, 08:16 AM
Hi Guys

This is my first post in these forums :). I hope I can get help because I am desperate :confused:. I created a template for my site and it consists of a single HTML file, a single CSS file, and several images. I plan to use the template with Joomla. 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, a main content area and a footer area.

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 any of the footer divs 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 of the drop down UL tag's to auto because it breaks the links into two lines 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/.
Any help MASSIVLY appreciated.
Thanks and sorry for the long post

CSS Code


*
{
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: " ";
}


HTML Markup


<!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>
&copy; 2011 <strong>Eratronics</strong>
</p>
</div>
</div>
</div>
</body>
</html>

abduraooft
07-28-2011, 10:54 AM
I can't add top margin to my footer.
Since the elements that come before your footer have floats applied, the browser calculates the top margin with respect to the position of adjacent non floated element. If you set margin-top:350px; or more, then you'll see the change.

The better solution is to set a padding-bottom, say 2em, to #content-wrap

PS: A 2700x750 px sized http://www.eratronics.net/images/logo.png to make a 75x250 sized display? :eek:

abduraooft
07-28-2011, 11:01 AM
The second thing is my drop down menu
http://htmldog.com/articles/suckerfish/dropdowns/ is a good tutorial for making drop down menus. Have a look and add the required nested lists in the HTML to make the third level and let's try to sort out the issues.

Abunada
07-28-2011, 02:47 PM
Thanks a ZILLION man. I really REALLY appreciate it. Everything worked like a charm except for one thing, my secondary menu does not appear right next to its parent for some reason can you please help on that. Have a look on the Tutorials > Electronics Menu item on http://www.eratronics.net/ for an example of how it appears

Thanks, REALLY grateful, great forums!:thumbsup:

The CSS code for the navigation is as follows:



#nav
{
clear: both;
margin: 0;
padding: 0;
list-style: none;
width: auto;
}

#nav ul
{;
list-style: none;
width: 870px;
height: 45px;
margin: 0;
margin-left: 15px;
padding: 0;
background: url(../images/nav.jpg) repeat-x;
ine-height: 1;
}

#nav ul li
{
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;
left: -999em;
margin-left: 0px;
width: auto;
}

#nav ul li:hover ul
{
left: auto;
}

#nav ul li ul li
{
float: none;
}

#nav ul li ul li ul
{
margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul
{
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul
{
left: auto;
}

abduraooft
07-28-2011, 03:49 PM
<li><a href="index.html">Electronics</a></li>
I don't see any nested lists inside the above list items. Or am I missing something?

Abunada
07-28-2011, 03:53 PM
Mabye your browser is caching the page, please try clearing your cache. Thanks man

Abunada
07-30-2011, 11:34 AM
Guys please any help, because I am struggling here :confused:.

OK here is the problem restated, I want to create drop down menu that is 2 levels deep and which is variable width (i.e. the width of list is the width of the largest link in that list). I have successfully done one level with the help of HTML Dog's tutorial which is linked to above. However I tried the second level of links and some problems arose.

First I display the menu flushed to the top of its parent because each link has a known height, however I cant make it pop right next to it, because the elements have variable width. what I am taking about here is the following selector:



#nav ul li ul li ul
{
margin: -45px 0 0 ??em;
}


The question is, because I don't know the width of the parent I cant set the margin here for the sub menu to sit flushed with its parent.

My second problem is that I can't set the second level menu's width to auto even if I style the second ul, li and a tags with


width: auto;

If I put a long word in the secondary menu it will not break, however if I puts a spaces i.e. two or more words It will break to the next line and does not change the width of the list.

My CSS code that is styling the nav is shown in my previous post, and the page is available at http://www.eratronics.net/.

I hope that explains my problem properly, and that I get a reply
Thanks, much appreciated !!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum