ansaurus

Question

Answer 1

+3 A:

a is an inline element out of the box, which typically cannot have width and height applied to it.

If you forcibly set display: block in its style declaration, it'll behave like a block level element, and you can set its width and height.

David Hedlund 2010-05-24 09:56:09

ahh thanks for the quick reply. I have done your suggestion but it has to be displayed inline... any other way I can make it display inline? I'm really stuck...

Reigel 2010-05-24 10:00:41

`display: inline-block;` - but take care, it works in this case because a is naturally inline, but for elements that are naturally block elements inline-block doesn't work for IE7: http://www.quirksmode.org/css/display.html#t03

ANeves 2010-05-24 11:15:48

Answer 2

+3 A:

This will make your li's 20x20 and align them to center:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <style type="text/css">
    .someClass ul {line-height:20px;text-align:center;width:105px;margin:0 auto;overflow:hidden;}
    .someClass ul li {display:block;width:20px;height:20px;float:left;background:blue;margin-right:1px;}
    .someClass ul li a {color:#fff;}
    </style>
</head>
<body>
    <div class="someClass">
       <ul>
          <li><a href="index.html">1</a></li>
          <li><a href="index.html">2</a></li>
          <li><a href="index.html">3</a></li>
          <li><a href="index.html">4</a></li>
          <li><a href="index.html">5</a></li>
       </ul>
    </div>
</body>
</html>

This is another approach - it sets everything inline with a 20px line height and can have any number of items:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <style type="text/css">
    .someClass ul {line-height:20px;text-align:center;}
    .someClass ul li {display:inline;}
    .someClass ul li a {display:inline}
    </style>
</head>
<body>
    <div class="someClass">
       <ul>
          <li><a href="index.html">1</a></li>
          <li><a href="index.html">2</a></li>
          <li><a href="index.html">3</a></li>
          <li><a href="index.html">4</a></li>
          <li><a href="index.html">5</a></li>
       </ul>
    </div>
</body>
</html>

easwee 2010-05-24 10:16:58

+1, seems to work as intended.

ANeves 2010-05-24 11:13:12

Answer 3

+3 A:

Use display:inline-block :

.someClass ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

.someClass ul li { display: inline; }

.someClass ul li a
{
  display: inline-block;
  text-decoration: none;
  width: 20px;
  height: 20px;
}

Voyta 2010-05-24 10:19:34

+1: perfect! But, repeating the comment on that other answer: pay attention that inline-block doesn't work on IE7 for elements that are naturally block elements: http://www.quirksmode.org/css/display.html#t03

ANeves 2010-05-24 11:18:01

Answer 4

+1 A:

Ok, done here is your answer

this is your markup

<div class="someClass">
   <ul>
      <li><a href="index.html">1</a></li>
      <li><a href="index.html">2</a></li>
      <li><a href="index.html">3</a></li>
      <li><a href="index.html">4</a></li>
      <li><a href="index.html">5</a></li>
   </ul>
</div>

Your CSS must be something like this

.someclass { 
    width:100%;
    overflow:hidden;
}
.someclass ul {
    position:relative;
    float:left;
    left:50%;
    list-style:none;
}

.someclass ul li {
    position:relative;
    float:left;
    right:50%;
}

.someclass ul li a {
     display:block;
     height:100px;
     width:100px;
     border: 1px #f00 solid;
}

This trick is completely flexible does not depend on how big your <UL> is

Starx 2010-05-24 10:33:38

-1, this doesn't even answer the first line of the question: `I want to make the <a>s to shape like a square, with height = 20px and width = 20px.`

ANeves 2010-05-24 11:10:18

ok updated my answer

Starx 2010-05-24 11:52:20

+0: Could be improved, but seems to work as intended - removed -1.

ANeves 2010-05-24 12:58:29

wow! this is really great! thanks for the help.

Reigel 2010-05-25 01:12:50

ansaurus

tags:

views:

answers:

css height and width problem.

related questions