How can I center this graphic and keep it from moving

HTML & CSS
1

when the screen is resized?

http://bit.ly/siE9zj

thank you…

<style media="screen">

    div.centered{
    display:block;
    position:absolute;
    top:144px;
    left:304px%;
    height:100%;
}

#homies {
    margin-left:300px;
    margin-top:50px;
    font-family:"Courier New", Courier, monospace;
    font-size:26px;
    text-transform:uppercase;
    
    }

#tableIMG {
    background-image:url(lacomerciahomies.jpg);
    background-repeat:no-repeat;    
    
}
a:link { color: black; text-decoration: none }
a:active { color: black; text-decoration: none }
a:visited { color: black; text-decoration: none }
a:hover {
    color: black;
    text-decoration: underline;
    display: block;
}

#link1 {
    
margin-left:110px;    
}
#link2 {
    
margin-left:10px;    
}
#link3 {
    
margin-left:65px;    
}
#link4 {
    
margin-left:30px;    
}
#link5 {
    
margin-left:40px;    
}
#link6 {
    
margin-left:110px;    
}
#link7 {
    
margin-left:35px;    
}
#link8 {
    
margin-left:80px;    
}
#link9 {
    
margin-left:55px;    
}
#link10 {
    
margin-left:35px;    
}
#link11 {
    
margin-left:80px;    
}
#link12 {
    
margin-left:48px;    
}
#link13 {
    
margin-left:48px;    
}
#link14 {
    
margin-left:83px;    
}
#link15 {
    
margin-left:55px;    
}
#link16 {
    
margin-left:15px;    
}
#link17 {
    
margin-left:-48px;    
}
#link18 {
    
margin-left:40px;    
}

#apDiv1 {
    position:absolute;
    width:586px;
    height:146px;
    z-index:1;
    left: 337px;
    top: 99px;
    font-family: "Courier New", Courier, monospace;
}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!--TABLE BEGINS -->
<table id="tableIMG" align="center" width="951" height="1024" cellpadding="5" cellspacing="0" border="0"> 

     <td valign="middle">
    
    <!--TABLE TWO BEGINS  -->

    
    <br /><br />
    <div class="centered" id="apDiv1"><a href="http://www.lacomercia.com"><img src="homiespagetopbar.jpg" width="586" height="145" /></a></div>
    <br /><br />
    <div id="homies">
      <div id="link1"><a href="http://www.rudetoonrecs.com" target="_new">BEATEAZ</a></div>
      <div id="link2"><a href="http://www.cliffdwellermedia.com">CLIFF DWELLER MEDIA</a></div>
      <div id="link3"><a href="http://www.twitter.com/#!/tracygloverjr">GLOVER JUNIOR</a></div>

      <div id="link4"><a href="http://www.gottadancedirty.com">GOTTA DANCE DIRTY</a></div>
      <div id="link5"><a href="http://www.kfishdesign.com">* K-FISH DESIGN *</a></div>
      <div id="link6"><a href="http://www.mindtai.com">MINDTAI</a></div>
      <div id="link7"><a href="http://www.noneedforalarm.wordpress.com/">NO NEED FOR ALARM</a></div>
      <div id="link8"><a href="http://www.sammuller.com">SAM MULLER</a></div>
      <div id="link9"><a href="http://www.shiftyrhythms.com">SHIFTY RHYTHMS</a></div>

      <div id="link10"><a href="http://www.skateperception.com">SKATE PERCEPTION</a></div>
      <div id="link11"><a href="http://www.theberrics.com">THE BERRICS</a></div>
      <div id="link12"><a href="http://www.thestachelife.com">THE STACHE LIFE</a></div>
      <div id="link13"><a href="http://www.tribeofzebras.com">TRIBE OF ZEBRAS</a></div>
      <div id="link14"><a href="http://www.urbanfist.com/.com">URBAN FIST</a></div>
      <div id="link15"><a href="http://www.veritasempire.com">VERITAS EMPIRE</a></div>

      <div id="link16"><a href="http://www.vtskateboards.com">VERMONT SKATEBOARDS</a></div>
      <div id="link17"><a href="http://www.soundclick.com/bands/default.cfm?bandID=1077642">WORLD PREMIER ENTERTAINMENT</a></div>
      <div id="link18"><a href="http://www.youngandreckless.com">YOUNG & RECKLESS</a></div>
    </div>
    <br />
     </body>

</html>
2

First of all you should stop using tables for layout … It is outdated and not efficient at all … i can prove it to you … this is the code i used to come to the same result and maybe better :
HTML CODE IN BODY TAG(replace everything with this)


  <a href="http://www.lacomercia.com"><img src="homiespagetopbar.jpg" height="145" width="586" alt="Home page" title="Home"></a>
  <!-- always provide an alt attribute to img tags for many reasons-->
    <ul>
        <li><a href="http://www.rudetoonrecs.com" target="_new">BEATEAZ</a></li>
        <li><a href="http://www.cliffdwellermedia.com">CLIFF DWELLER MEDIA</a></li>
        <li><a href="http://www.twitter.com/#%21/tracygloverjr">GLOVER JUNIOR</a></li>
        <li><a href="http://www.gottadancedirty.com">GOTTA DANCE DIRTY</a></li>
        <li><a href="http://www.mindtai.com">MINDTAI</a></li>
    </ul>

CSS CODE


*{
    margin:0;
    padding:0;
    text-decoration:none;
    list-style-type:none;
}
body{
    text-align:center;
    background:transparent url("lacomerciahomies.jpg") no-repeat 50% 0;
    height:1023px;
}
img{
    margin:0 auto;
    display:inline;
    margin-top:100px;
}
ul{
    line-height:1.8em;
    margin-top:60px;
}
a{ } /* decorate the links in the specific order */
a:link{}
a:visited{}
a:hover{}

Just add the rest li tags and take care of colors ,:hover and etc. as you previously did and remove the la comercia from the lacomerciahomies.jpg
Also your problem is solved .
Have fun :wink: :slight_smile:

3

OMG! You are amazing! Thank you. Thank you. Thank you.

I know, I know about the tables. I feel they sometimes get a bad rap, so I still use them. I knew I shouldn’t have used them in this manner. :blush:

quick question so I can learn… what does this line mean?

 background:transparent url("lacomerciahomies.jpg") no-repeat 50% 0;

what does 50% and the 0; mean?

Thanks again.

4

Glad to help …

About the line … In css one can “squeeze” many rules into one if the their properties have a similarity .
This means that the following :


background-color:#555; /*#redredgreengreenblueblue or #redgreenblue or rgb(0,145,255) */
background-image:url("image.jpg"); 
background-repeat:repeat-x; /* repeat-y no-repeat */
background-position:<from left> <from top>; /*ems percents points pixels cm in etc. or a combination of top bottom center right left  */
background-attachment:scroll; /* or fixed */

can turn into this


background:#555 url("image.jpg") repeat-x 100px 0;

so specifically the position of background image was defined 0 pixels from top and 50% well … from left meaning that it will position it in the center … although im sure that it can be more well explained but this far my knowledge lies.In that way when you resize the window the image will still be in the center as well as the rest of the content (because of text-align center and margin :0 auto) .

Hope i helped… but you can still find on all information on css and html at the w3c .

Web design is fun … so … Have fun . :slight_smile: (: