SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot naynay99's Avatar
    Join Date
    Jan 2010
    Location
    Los Angeles
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can I center this graphic and keep it from moving

    when the screen is resized?

    http://bit.ly/siE9zj

    thank you...

    Code:
    <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. #2
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)
    Code:
      <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
    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

  3. #3
    SitePoint Zealot naynay99's Avatar
    Join Date
    Jan 2010
    Location
    Los Angeles
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    quick question so I can learn... what does this line mean?
    Code:
     background:transparent url("lacomerciahomies.jpg") no-repeat 50% 0;
    what does 50% and the 0; mean?


    Thanks again.

  4. #4
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :
    Code:
    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

    Code:
    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 .


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •