PDA

View Full Version : centering my footer and finding a popup menu


silverglade
01-09-2009, 07:24 PM
hi, im having a problem centering my #footer div with my copyright info in it. also, i was wondering if anyone knows how/where to get/make a popup navigation menu? any help id greatly appreciate. thank you. here is the code for my #footer div in the css.


#footer {
3em auto 0 auto;
width: 400px;
height: 50px;
text-align: center;
color: #999999;
}


here is the full css

@charset "utf-8";
/* CSS Document */

body {
margin: 0; /* clear for browsers */
padding: 0;
background-color: #333333;
}
#container {
background-image: url(gradient.gif);
background-repeat:repeat-x;
margin:0 auto;
width: 100%;
height: 1000px;

}
#centered {

position: relative;
margin: 0 auto; /* centers page*/
width: 795px;
height: 1000px;
background-color: #000000;
}
#header {

background-image: url(geek_header.gif);
background-repeat:no-repeat;
width: 795px;
height: 167px;
}
#geektitle {
margin-top: 30px;
margin-left: 220px;
text-align: center;
width: 300px;
height: 50px;
color: #FF0000;
font-weight: bold;
font-size: xx-large;
}
div.navigation {
width: 795;
height: 58px;


}
div.flash {
width: 795 px;
height: 248px;
}
#navgroup {
width: 795px;
height: 146px;
}
#homecontent {
color: #FFFFFF;
width: auto; /* used auto so text doesnt pop out of div */
padding-top: 0;
padding-bottom: 0;
padding-left: 1em;
padding-right: 1em;

}
a:link {
color: #990000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #996633;
}
a:hover {
text-decoration: none;
color: #99FF33;
}
a:active {
text-decoration: none;
color: #FF0000;
}
p {
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#footer {
3em auto 0 auto;
width: 400px;
height: 50px;
text-align: center;
color: #999999;
}
/************************************************** ***********************/
/* desktop support page */
# desktop_splash {
width: 295px;
height: 800px;
}

and here is my html for the page

<!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>
<link href="geek.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Geek-help home</title>
</head>
<body>
<div id="container">
<div id= "centered">
<div id= "header"> <div id="geektitle"> GEEK HELP</div>
<!-- end geektitle --></div> <!-- end geek header -->
<div id="navigation"><img src="geek_nav.gif" /></div>
<div id="flash"> <object type="application/x-shockwave-flash" data="geek.swf" width="795px" height="248px">
<param name="movie" value="geek.swf">
</object></div> <!-- end flash div -->
<div id="navgroup"> <a href="desktop_support.html"><img src="desktop_support.gif" border="0" /></a><a href="laptop_support.html"><img src="laptop_support.gif" border="0" /></a><a href="network_support.html"><img src="network_support.gif" border="0" /></a></div>
<div id="homecontent">
<p>Plagued by viruses, spyware or worse?</p>
<p> -Need to get your PDA talking to your PC and both of them on the LAN ASAP? </p>
<p>-Want to keep your data safe, secure and backed-up? </p>
<p>-Worried about getting it all done on time and under budget?</p>
<p> Call Geek-Help™ today and worry no more! </p>
<p>Geek-Help™ prides itself on providing a wide variety of computer support services and backing them up with world-class maintenance. Our geeks are knowledgeable, professional and enthusiastic about computers and getting them to work for you.

We offer a variety of maintenance and upkeep plans with 24-hour emergency support so that everything we set up runs as well down the line as it does the first day.

Since this is New York, we know you’ve got lots of companies to choose from. That’s why we’re the company that gets it right the first time. To discover the Geek-Help™ difference, <a href="<A href="mailto:derekpainter1@hotmail.com">contact">mailto:derekpainter1@hotmail.com">contact us today</a>. </p>
</div> <!-- end homecontent -->

<div id="footer"> Web Page Design by Derekvanderven.com &copy; 2009</div>
</div>
<!-- end centered-->
</div>
<!-- end container -->
</body>
</html>


and here is the link to the page im talking about. note the copyright isnt centered. any help greatly appreciated. thank you. derek

http://derekvanderven.com/new_geek_help/home.html

coloeagle
01-09-2009, 09:23 PM
hi, im having a problem centering my #footer div with my copyright info in it. also, .... here is the code for my #footer div in the css.


#footer {
3em auto 0 auto;
width: 400px;
height: 50px;
text-align: center;
color: #999999;
}

Correct the style element for the footer id, you are missing margin: this will solve your centering problem.

#footer {
margin:3em auto 0 auto;
width: 400px;
height: 50px;
text-align: center;
color: #999999;
}
Also you need to remove the space in your #desktop_splash

coloeagle
01-09-2009, 09:25 PM
Can you supply more detail or an example of the menu style you are after.

silverglade
01-09-2009, 09:31 PM
wow coloeagle how could i have missed that !!!! LOL. you have an eagle eye though, catching that space down there. thanks very much for taking the time to inspect my code. also, does anyone know how/where i could make a dropdown menu for the following page i made?

http://derekvanderven.com/new_geek_help/home.html

any help greatly appreciated. thank you for helping. derek

coloeagle
01-09-2009, 10:11 PM
Your welcome, glad to help.

Take a look at dynamic drives menus http://www.dynamicdrive.com/dynamicindex1/

silverglade
01-10-2009, 03:22 PM
cool thank you. the dynamicdrive ones were too hard for me so i found this one popup menu i understand somewhat. but i need some help if anyone can. . it wont work with my navigation image and is text only but its the best i can do at this point. i have a problem though. the "home" button turns white when i hover over it. and the dropdowns stay red when i hover over it. , the dropdown background to be gray, and the "home" button hover to be red. i dont know where to edit the css to make it happen i keep playing around with it. i will keep messing around with it and hopefully understand what each css entry does. but any help appreciated. at least if someone could label the parts of the css for me like "this is the background to your dropdown". here is the css for the dropdown. ( i did comment some of the css to help myself so far- i finally figured out how to resize it. derek)
/*
Title: Vertical CSS menu with a behavior file.
Author: Stefan Vervoort
Blog: http://www.divitodesign.com/blog/
Article: http://www.divitodesign.com/blog/2008/01/vertical-css-menu-with-a-behavior-file/
*/
body {
behavior: url(csshover.htc);
font-size:20px; /*change size of nav and dropdown text*/
font-family:Arial, Helvetica, sans-serif;
}

p a {
color: #000;
text-decoration:underline!important;
}
a{
color:#fff;
text-decoration:none; /* text color */
}
p a:hover{ text-decoration: none!important;
}
ul#nav {
list-style: none;
padding: 0;
margin: 0;
}

ul#nav li a {
display: block;
font-weight: bold; /*background color */
padding: 2px 10px;
background-color: #990000;

}
ul#nav li a:hover{
color:#fff; /* text hover */
background-color: #990000;
}

ul#nav li {
float: left;
position: relative;
width: 200px; /* change width of boxes */
text-align: center;
margin-right:5px;
border:1px solid #ccc;
background-color: #990000;
}
ul#nav li.current a{
background-color: #990000;
}
ul#nav li.current a:hover{
background:#fff;
}
li ul {
display: none;
position: absolute;
width:200px; /* width of dropdown menu */
top: 0;
left: 0;
font-weight: normal;
padding: 1px 0 10px 0;
margin-left:-1px;
}
ul#nav li ul.sub li{
border-width:0 1px 1px 1px!important;
}
ul#nav li ul.sub li a{
font-weight: normal!important;
}
li>ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block;
}



and here is the html for the page

<!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=iso-8859-1" />
<title>Horizontal Drop-Down CSS MENU</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<ul id="nav">
<li class="current"><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Services">Services</a>
<ul class="sub">
<li><a href="#" title="Services > Webdesign">Webdesign</a></li>
<li><a href="#" title="Services > Developement">Development</a></li>
<li><a href="#" title="Services > Illustration">Illustration</a></li>
<li><a href="#" title="Services > Search Engine">Search engine</a></li>
<li><a href="#" title="Services > Wordpress">Wordpress</a></li>
</ul>
</li>
<li><a href="#" title="Blog">Blog</a>
<ul class="sub" >
<li><a href="#" title="Services > Themes">Themes</a></li>
<li><a href="#" title="Services > Plugins">Plugins</a></li>
</ul>
</li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
<p>&nbsp;</p>
</body>
</html>

silverglade
01-10-2009, 04:08 PM
i managed to fix the other problems. the only problem i have now is that i want the dropdown menu background to be gray. any help appreciated. thanks. derek please include a comment next to the change if you can . here is the code i f ound to fix the problem of my flash animation hiding my dropdown menu. the code goes into your object embed tag.


<param name="wmode" value="transparent" />

silverglade
01-10-2009, 04:57 PM
my flash animation is messed up now from the transparent property i added, is there another way to unhide my dropdown menu over it? here is the flash animation here. its messed up now but the menu shows. [edit] i took out the transparent property , and tried z index 1 on the flash div, and tried z index -1 also. neither worked.

http://derekvanderven.com/new_geek_help/home.html

im trying to change it with z index now but its not working.

silverglade
01-10-2009, 07:22 PM
nevermind sorry, , I FIXED IT>>>>>YESS@!!!!!!!! i used the transparency attribute f or the flash object tag. and changed the flash div background to white and all is good. thank you for the help . derek:mrgreen: :mrgreen: :mrgreen: