CSS Forum

**silverglade** · 08:28 AM

hi, i am confused as to what each cm value represents, whether it is top, bottom, left, or right. or in what order it is. any help greatly appreciated. im trying to center a div with margins auto and 0, but i want a top margin of 20px. thank you. derek

**chrishirst** · 01-09-2009, 08:40 AM

em rather than cm I would hope BTW.

the order is clockwise from the top.

T R B L (TRouBLe)

so a centred element would be margin: 20px auto 0 auto; The last value could be left off as well, so the left would be the same value as the right.

**silverglade** · 10:27 AM

right i forgot to use ems. the footer isnt centering with the following css, im trying to center it with top 20px margin

20px auto 0 auto;
it didnt center with 20px auto 0 auto

i will redo my page with ems. nevermind about the text popping out of my div. i figured it out. yay!

here is the code i used to get the text not to pop out of my div. i used auto width rather than a set pixel width

Code:

#homecontent {
    color: #FFFFFF;
 width: auto;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1em;
  padding-right: 1em;

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

here is the css

all i need help now on is the #footer div isnt centering properly, any more help greatly appreciated. !! thank you. derek

Code:

@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: 795px;
     padding: 2em;
 
}    
 
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 {
    20px auto 0 auto;
 
    width: 400px;
    height: 50px;
    text-align: center;
     color: #999999;
}

and here is the html

edit: the [code] is chopping off my html!!!! i will post it in a reply then.
derek

**silverglade** · 09:09 AM

second try. lol. here is the html. nice. i fixed it by using firefox.

Code:

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

 <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

 
 
 
</head>

<body>
    <div id="container">
    <div  id= "centered"> 
         <div id= "header"> <div class="style3 style3 style1" id="geektitle"> GEEK HELP</div>
         <!-- end geektitle --></div> <!-- end geek header -->
      <div class ="navigation"><img src="geek_nav.gif" /></div>
         <div class ="flash"> <script type="text/javascript">
           AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','794','height','248','src','geek','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','geek' ); //end AC code
             </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=                              "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="794" height="248">
           <param name="movie" value="geek.swf" />
            <param name="quality" value="high" />
            <embed src="geek.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type=            "application/x-shockwave-flash" width="794" height="248"></embed>
          </object>
            </noscript></div> <!-- end flash div -->
             <div id="navgroup"> <img src="desktop_support.gif" /><img src="laptop_support.gif" /><img src="network_support.gif" /></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="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>

**LadynRed** · 01-09-2009, 10:34 AM

I would recommend that you NOT use the <embed> for your Flash. Take a look at the stickies for better ways of putting flash in your page.

**silverglade** · 04:33 PM

thank you ladynred. edit [ awesome thanks ladynred. check out this code compared to that DW garbage i had in there before!!!!derek

Code:

<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 -->

i just have another question. i cant get my div to center at the bottom of my page. the full code is above to my css and html.
any further help id appreciate GREATLY because im stuck.
here is the css for my div that wont center. its a #footer with copyright info. and here is the page im working on below.

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

Code:

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

DUH I FORGOT TO ADD "MARGIN"!!!!! lmao. here is the correct code.

Code:

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

PS I GOT A NEW HOSTING SERVER WOOOOOOOYAAAA!!!!! my pages load much faster thanks to all for giving me that advice.
also, does anyone know how/where i can make a dropdown menu for navigation? the DW dropdown is very bad. thanks. derek