* How do I move words individually? *

Discussion in 'Web Design' started by bigbonthabeat, Feb 9, 2011.

to remove all ads.
  1. bigbonthabeat

    bigbonthabeat New Member

    Messages:
    47
    I solved the problems I was having with the background just by simply tiling the image. I also found that it optimizes the speed for which the page loads up if I do it this way. Here is my site so far:

    [​IMG]





    Now, I have another problem...I don't know how to work with the individual slices. How do I move them in the places I want? For the most part, I just want it centered down the screen. Also, if I choose to insert other images, how do I move the images where ever I would like to move them?

    thanks
     
    Last edited: Feb 9, 2011
  2. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
  3. bigbonthabeat

    bigbonthabeat New Member

    Messages:
    47
  4. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    You need to partition you page. Meaning, create a header, content, and footer div and center them. Then insert the content for each accordingly. In the case of your large black text listed in the image, they going to be links correct?

    You dont need a wrapper either.

    HTML:
    <body>
      <div class="header">...header content...</div>
      <div class="canvas">
          <ul>
              <li><a href=""><span></span>First Link</a></li>
              <li><a href=""><span></span>Second Link</a></li>
              <li><a href=""><span></span>Third Link</a></li>
              <li><a href=""><span></span>Fourth Link</a></li>
          </ul>
      <div class="footer">...footer content...</div>
    </body>
    
    Code:
    div.header, div.canvas, div.footer {
       width:960px;
       margin:0 auto;
    }
    div.canvas ul {
       list-style:none;
    }
    div.canvas ul li {
      text-align:center;
      margin:10px 0;
    }
    div.canvas a {
    }
    div.canvas a span {
    }
    div.canvas a:hover {
    }
    div.canvas a:hover span {
    }
    
    Look up "Gilder/Levin Method" on Google. Its a great way to use image in links while still retaining the link text. You will be using relative position on the links and absolute on the span inside the links.
     

Share This Page