a small css problem.

codefreek · 01-02-2008, 04:48 PM

Hello, all..

i got a problem with my css.
it's like this
i got a banner ----------- <banner
here menu ---------- <menu..
but some how i cant get it to center with the banner
i tryed evrything.. so i hope you can help me thank you..
i am sure i missed something so i am sorry but
anyways you learn by your mistakes.

ty..

HERE IS THE CSS:

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<style>

body {

background:#000000;

padding:0px;

margin:0px;

top:20px;



}











#tabsH {



      float:left;

      width:100%;

      background:#000;

      font-size:93%;

      line-height:normal;

      

      }

    #tabsH ul {

    margin:0;

    padding:10px 10px 0 50px;

    list-style:none;

    

      }

    #tabsH li {

      display:inline;

      margin:0;

      padding:0;

      

      }

    #tabsH a {

      float:left;

      background:url("tableftH.gif") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

     

      }

    #tabsH a span {

      float:left;

      display:block;

      background:url("tabrightH.gif") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#FFF;

      

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabsH a span {float:none;}

    /* End IE5-Mac hack */

    #tabsH a:hover span {

      color:#FFF;

      }

    #tabsH a:hover {

      background-position:0% -42px;

      }

    #tabsH a:hover span {

      background-position:100% -42px;

      }

</style>

PHP Code:


			
<body>

<center>

  <p><img src="./banner.png" /></p>

</center>



<div id="tabsH">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>



</body>

</html>

codefreek · 01-02-2008, 08:05 PM

No one that even has a clue :S?

obolus · 01-02-2008, 10:33 PM

The parent tabsH class has a float:left setting. Not sure if that should be there.

If all else fails, you could always wrap the menu and banner in <div align="center"> and </div> tags.

codefreek · 01-02-2008, 10:53 PM

ty for the comment but i tryed all that allready :)
and yes the float should be there
it keeps the picutre to the menu in place :)

Aaron · 01-03-2008, 12:22 PM

Give me the link to the page you are working on and I might be able to help then. I need visuals to do this stuff.

codefreek · 01-03-2008, 05:57 PM

Problem solved.