Text-Align/Position

I’m trying to move the text you see in the image below as indicated in the picture. But due to my basic knowledge of CSS I’m having a tough time. Does anyone know how I can move the text? I have included the CSS below if anyone wouldn’t mind taking a stab at it.

The CSS code



#homepageBoxCont {
   height: 117px;
   clear: both;
   padding: 10px 10px 10px 10px;
   width:617px;
   }

#homepageBoxCont ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

#homepageBoxCont ul li {
    float: left;
    width: 138px;
    height: 117px;
    position: relative;
    margin-right: 8px;
    margin-left: 8px;
      }

#box1{ background: url(file:///C|/Users/Runner/Desktop/Dev%20Files/images/play1.png) no-repeat 0 0; }
#box1{ background: url(file:///C|/Users/Runner/Desktop/Dev%20Files/images/play2.png) no-repeat 0 0; }
#box3{ background: url(file:///C|/Users/Runner/Desktop/Dev%20Files/images/play3.png) no-repeat 0 0; }
#box4{ background: url(file:///C|/Users/Runner/Desktop/Dev%20Files/images/play4.png) no-repeat 0 0; }

a.readMore { background: url(file:///C|/Users/Runner/Desktop/Dev%20Files/images/187.gif) no-repeat scroll 100% 50% transparent;
	font-size: 11px;
	font-style:bold;
	font-weight: bold;
	color:#12fb00;
	padding-right:35px;
	width:100%;	
	text-align: inherit;
        vertical-align: bottom !important;
}


The HTML portion



        <div id="homepageBoxCont">
          <ul>
            <li id="box1"><a class="readMore">Random Video</a></li>
            <li id="box2"><a class="readMore">Some CEO</a></li>
            <li id="box3"><a class="readMore">Window</a></li>
            <li id="box4"><a class="readMore">Fancy Cases</a></li>
          </ul>
        </div>


If you want those images to remain as background images, you could place a large top padding on the LIs and remove the height setting:

#homepageBoxCont ul li {
    float: left;
    width: 138px;
    [COLOR="Blue"]height: 117px;[/COLOR]  /* remove */
    position: relative;
    margin-right: 8px;
    margin-left: 8px;
    [COLOR="Red"]padding-top: 122px;[/COLOR]  /* add - adjust to suit */
}

Thanks ralph that solve the position issue. I had to change the image coordinates from 100% 50% to 50% 100%. But now I’m stuck with the text sitting over the image. Is it possible to push the text a little to the right and have the image sit on the left?


a.readMore {
	background: url(http://www.playbookboards.com/187.gif) no-repeat scroll 0 50% transparent;
	font-size: 10px;
	font-weight: bold;
	color:#cacaca;
        width:138px;
	padding-right:100px;
        padding:10px 0;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	text-transform:uppercase !important;
    vertical-align: bottom !important;
}

You could center that text with text-align: center on the parent li’s.

Or add some left padding to the anchors. Anchors, who are inlines by default, can have side padding. They can also have text-align if you turn them into blocks, which is why I’m thinking setting it on the li’s, who are block parents.

You can also use text-indent on the anchors themselves I think, but be aware that when you indent text, you only indent the first line. Anything wrapping to a new line will not be indented. But anyway, that’s an option.


<ul [b]id="homepageBoxCont"[/b]>
  <li id="box1"><a [b]href="somewhere"[/b]>Random Video</a></li>
  <li id="box2"><a [b]href="somewhere"[/b]>Some CEO</a></li>
  <li id="box3"><a [b]href="somewhere"[/b]>Window</a></li>
  <li id="box4"><a [b]href="somewhere"[/b]>Fancy Cases</a></li>
</ul>

That’s all you need. The ul holds the main bg image. Anchors don’t need classes.


#homepageBoxCont {
   min-height: 117px; (with the 10px padding this means 137px tall)
   clear: both;
   padding: 10px;
   width: 617px; (with the 10px padding this means 637px wide)
   list-style: none;
   margin: 0;
}
* html #homepageBoxCont {height: 117px;} /*if you're catering to IE6*/

#homepageBoxCont li {
    float: left;
    width: 138px;
    margin: 0 8px;
    padding-top: 112px;
    background: url(images/play1.png) no-repeat 0 0;
}

/* override */
#homepageBoxCont #box2{ background-image: url(images/play2.png); }
#homepageBoxCont #box3{ background-image: url(images/play3.png); }
#homepageBoxCont #box4{ background-image: url(images/play4.png); }

(not sure if #box2-4 by itself is enough to override, try it)

#homepageBoxCont a { 
  background: url(images/187.gif) no-repeat 0 50%;
  [b]font: bold 11px Arial, Helvetica, sans-serif;[/b]
  (I would add a line-height as big as bg image:
font: bold 11px/heightofbgimage arial, helvetica, sans-serif;)
  color:#cacaca; /*ew!*/
  [b]padding-left: enough to push text to the side;[/b]
  text-decoration:none;
  text-transform:uppercase;
}

If you really do want 10px top-bottom padding as well as left then
padding: 10px 0 10px what’s-needed-for-image;

You have multiple padding settings and only the last one should matter.

10px is absurdly small font size. Please don’t punish the people who came to read the text on your site. I don’t let text get smaller than 12px and that’s really really pushing it. Might look fine on a 600x800 resolution but most people don’t have that anymore, and most people don’t have perfect eyes.

Anyway you can see that as you get more familiar with CSS, you can really reduce your code. Especially you can see how you can use the main ul’s token to hit the li’s and the anchors, so the anchors don’t need classes for anything. If the id’s on the li’s are enough to override the bg image then use that rather than the ul’s id as well, since more tokens (id’s and classes), the more work a browser does reading.

Possibly “background-image” is able to override the shorthand “background”, which means you aren’t repeating all the other stuff (background-position, background-repeat, etc)

Is there any chance we could see a live link to this page? It looks like it’s online already.

Yeah, the site is live. I will PM you the link. AT the mean time I’m trying to make this CSS work on all browsers. Currently on Chrome, IE only the border shows. The gradient doesn’t appear, is there a hack that can make it show in all browsers?


#homepageButtonsCont {
   [B] background: -moz-linear-gradient(center bottom , #030202 8%, #4c4a4b 70%) repeat-x scroll left top transparent;[/B]
    border: 1px solid #555555;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    height: 117px;
    clear: both;
    padding: 6px 6px 6px 6px;
    width:572px
}

CSS gradients aren’t really ready for prime time. They’re still part of a draft specification, and in fact this is why the webkit version has many differences in syntax from the mozilla version (so you can get Safari and Chrome to show gradients using the -webkit version, but Opera and IE don’t have implementations yet).

When draft stuff like this needs to be cross-browser, we devs usually resort to old-fashioned background images. It’s an extra call to the server, but you can make gradients pretty small if they are crushed PNGs.

I had a gradient image but wanted to try the gradient codes instead for speed, etc. Someone suggested this site: http://www.colorzilla.com/gradient-editor which I tried. But everytime I try to save the file the CSS disappears.

In terms of the positioning, try these changes.

Increase the height in red:

#homepageButtonsCont ul li {
  float: left;
  margin-left: 8px;
  margin-right: 4px;
  [COLOR="Red"]padding-top: 105px;[/COLOR]
  position: relative;
  width: 130px;
}

Remove this altogether:

#wblock a {
  margin-top: -14px;
}

Add or change the bits in red here:

a.readMore {
  background: url("http://www.playbookboards.com/187.gif") no-repeat scroll 0 50% transparent;
  color: #CACACA;
  [COLOR="Red"]display: block;[/COLOR]
  font-family: Arial,Helvetica,sans-serif;
  font-size: 10px;
  font-weight: bold;
  [COLOR="Red"]padding: 0 0 0 10px;[/COLOR]
  text-decoration: none;
  text-transform: uppercase !important;
  vertical-align: bottom !important;
  width: 130px;
}