Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    A couple of problems with my site's template

    Hi Guys

    This is my first post in these forums . 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. 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
    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
    Code:
    <!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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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?
    Last edited by abduraooft; 07-28-2011 at 09:57 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Abunada (07-28-2011)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Abunada (07-28-2011)

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

    The CSS code for the navigation is as follows:

    Code:
    #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;
    }

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Mabye your browser is caching the page, please try clearing your cache. Thanks man

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Guys please any help, because I am struggling here .

    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:

    Code:
    #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

    Code:
     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 !!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •