anyone good with html and css?

eastybeasty · 11-01-09, 08:07 PM

hi everyone

someone told me that theres some good programmers and IT savvy people that frequent the forums so thought id post here and see if anyone can help me

basically im trying to get myself a portfolio together (finished a web design course in the summer)but ive hit a snag. ive managed to embed a flash banner in the header of it but it wont move from the left hand side of the screen and i want it to be in the middle of the screen in line with the rest of the page (hope that makes sense)

right ill post all my code, i think its a problem in my css but ill post it all to see if that makes sense

HTML Code:

<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/menubar.css" />
<script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            swfobject.registerObject("myFlashContent", "9.0.0");
        </script>

<div id="header">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" align="middle" width="780" height="120" id="myFlashContent">
                <param name="movie" value="title.swf" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="title.swf" width="780" height="120">
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>

</head>

<body>


   <!-- Begin Wrapper -->
   <div id="wrapper">
   
       
         
         <!-- Begin Naviagtion -->
  <div id="menubar"> <a name="top"></a>
  <div id="menu1" class="menu"><a href="index.html">Home</a>
        
  
  </div>
  
  <div id="menu2" class="menu">About Glen Moss
        <ul>
        <li><a href="about.html">About the area </a></li>
        <li><a href="gettinghere.html">Getting there</a></li>
        <li><a href="peatbog.html">What is a peatbog?</a></li>
        
        </ul>
  </div>
  <div id="menu3" class="menu">Seasons
  
        <ul>
        <li><a href="spring.html" target="_blank">Spring</a></li>
        <li><a href="summer.html" target="_blank">Summer</a></li>
        <li><a href="autumn.html" target="_blank">Autunm </a></li>
        <li><a href="winter.html" target="_blank">Winter</a></li>
                
        </ul>
  </div>
  
  
  <div id="menu4" class="menu"><a href="links.html">Useful Links</a>
        
  
  </div>
  
  
  <div id="menu5"class="menu"><a href="gallery.html">Gallery</a>
        
  
  </div>
  

  <div id="menu6" class="menu"><a href="contact.html">Contact Us </a>
        
  
  </div>
  
</div>


         <!-- End Naviagtion -->

and my main css

Code:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#header {
 width: 780px;
 color: black;
 padding: 10px;
 height: 120px;
 margin: 5px 0px 5px 0px;
 background: #C0D9D9;

}


 

#content { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
}
#footer { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #C0D9D9;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

my menu bar css

Code:

  body {
      font-family: "Trebuchet MS", Verdana, sans-serif;
      font-size: small;
    }
    
    #menubar {
    width:917px;
      border-top: 2px solid #e6e6e6;
      border-right: 2px solid #b1b1b1;
      border-bottom: 2px solid #b1b1b1;
      border-left: 2px solid #e6e6e6;
      background-color: #ccc;
      color: #000;
      height: 1.4em;
      line-height: 1.2em;
    }
    
    .menu {
      width: auto;
      float: left;
      padding: 0.1em 3em 0.1em 0.5em;
      cursor: default;
    }
    
    .menu ul {
      display: none;
      position: absolute;
      background-color: #e6e6e6;
      color: black;
      list-style: none;
      margin: 0.1em 0 0 0;
      padding: 0;
    }
    
    .menu ul li {
      display: block;
      padding: 0.2em;
    }
    
    div.menu:hover ul {
      display: block;
      margin: 0;
      padding: 0;
    }

    div.menu ul li:hover {
      background-color: #ccf;
    }


hope this all makes sense. thanks in advance if anyone can help me :):)

longam · 11-02-09, 08:24 AM

Since your not using tables you'll need to position using CSS.

position: absolute;

http://www.dynamicdrive.com/style/layouts/

eastybeasty · 11-02-09, 08:28 AM

hiya

thanks for getting back to me! ill give that a shot when i get home

11-02-09, 08:24 AM	#2
longam Admiral Join Date: Jun 2005 Posts: 2,014 Downloads: 26 Uploads: 0	Since your not using tables you'll need to position using CSS. position: absolute; http://www.dynamicdrive.com/style/layouts/

11-02-09, 08:28 AM	#3
eastybeasty Watch Join Date: Nov 2007 Posts: 17 Downloads: 0 Uploads: 0	hiya thanks for getting back to me! ill give that a shot when i get home