• 0

UL LI Problems

Asked by Dan~,

 Share

Question

Grand Master

Dan~

Posted
Posted

Thought I'd design my own wordpress theme again from scratch.

 

the problem is, I haven't touched HTML/CSS in about 3-4 years and my mind has gone completely blank.  I use to code without major problems with my eyes closed, but gone completely now.

 

What I have and want is a nav menu, and I want each of the LI's to be 100px by 100px square, so I'd have one for home, contact, gallery etc etc

 

this is my html

<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li id="menu-item-648" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a href="">welcome</a>
</li>
</ul>
</div>
</nav>

And what I want is for each LI to be in a box which is 100px by 100px and different colours(I know how to do that bit,just making the boxes 100px by 100px, and I just can't remember

 

CSS - messy, but just trying to get the sizes right

#menu-menu li{
 display: inline;
 list-style-type: none;
 padding-right: 20px;}

#menu-item-648{display:block;height:100px; width:100px; list-style-type:none; background-color:#7FFF00;}
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Grand Master

game_over

Posted
Posted 
menu-item menu-item-type-post_type menu-item-object-page menu-item-648

wtf? 

 

Here is a more modern way to do things, it should be easier to adjust to your needs. 

<!doctype html>
...
  <nav>
    <ul>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
    </ul>
  </nav>


nav ul {
  list-style: none;
}
nav ul li {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  margin: 0; padding: 0;
}

nav ul li > a {
  display: block;
  color: white;
}

Depending on how many boxes with different colours you can do the following.. or just give each li tag a class name and then apply a colour to that class with css

nav ul li:first-child { color: red; }
nav ul li { color: blue; }
nav ul li:last-child { color: green; }
Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.