* How do I move words individually? *

B

bigbonthabeat

New Member
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:

Screenshot2011-02-08at80205PM.png






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:
PixelPusher

PixelPusher

Super Moderator
Staff member
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.
 
You must log in or register to reply here.
Top