4 replies [Last post]
twckfa16
twckfa16's picture
Offline
newbie
Last seen: 6 years 22 weeks ago
Timezone: GMT-4
Joined: 2015-07-01
Posts: 2
Points: 3

Hello -

Seem to be having trouble with giving rounded corners to a menu box. I used the border-radius property on
a header and text box and tried to do the same but hasn't worked.

Also - how can you make the menu box bigger so there is some blank space at the bottom of it?

Here is the CSS I am using:

.menu_simple ul {
    float: left;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -border-radius: 50px;
    border-radius: 50px;
    position: absolute;
    top: 130px;
    left: 5px;
    margin: 0;
    width: 275px;
    list-style-type: none;
}

.menu_simple ul li a {
    font-family: "Arial", Sans-Serif;
    font-weight: bold;
    text-decoration: none;
    color: #0B4C5F;
    padding: 10.5px 11px;
    background-color: #F5ECCE;
    display: block;
}

Thank you - any help would be appreciated!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 40 weeks 14 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Show us

the html. CSS without the markup doesn't tell us much without a lot of guessing.

FYI, float and absolute positioning are mutually exclusive. Use one or the other.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

twckfa16
twckfa16's picture
Offline
newbie
Last seen: 6 years 22 weeks ago
Timezone: GMT-4
Joined: 2015-07-01
Posts: 2
Points: 3

Thak you Gary - here is the

Thak you Gary - here is the html:



  


  <div id="header">
      <p>My First HTML<p>
  </div>
  <div class="menu_simple">
  <ul>
  <li><a href="Link_1">Link 1</a></li>
  <li><a href="Link_2">Link 2</a></li>
  <li><a href="Link_3">Link 3</a></li>
  <li><a href="Link_4">Link 4</a></li>
  <li><a href="Link_5">Link 5</a></li>
  </ul>
  </div>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 40 weeks 14 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Let's correct a thing or two

Since you're new at this, I want to set you on on the path of righteousness, also known as best practice.

    <h1>
      My First HTML
    </h1>
 
    <ul class="menu_simple">
      <li>
        <a href="Link_1">Link 1</a>
      </li>
 
      <li>
        <a href="Link_2">Link 2</a>
      </li>
 
      <li>
        <a href="Link_3">Link 3</a>
      </li>
 
      <li>
        <a href="Link_4">Link 4</a>
      </li>
 
      <li>
        <a href="Link_5">Link 5</a>
      </li>
    </ul>
  </body>
</html>
Notice that I removed the two <div>s. The first should simply be a heading, in this case the top level heading, <h1>.

The second is redundant to <ul>. The ul is a perfectly good container for unordered list items.

The div is a non-semantic aggregating container. Its job is simple; group block level elements and provide a context hook for css and javascript. If it is wrapping a single element, it's a screwup.

By comparison, the <span> tag segregates its inline content from its context for separate handling by css or javascript.

Code bloat is not a best practice.

Now the css:

    .menu_simple {
      background-color: #F5ECCE;
      border: 1px solid;
      border-radius: 50px;
      margin: 0;
      width: 275px;
      list-style-type: none;
    }
 
    .menu_simple li a {
      font-family: "Arial", Sans-Serif;
      font-weight: bold;
      text-decoration: none;
      color: #0B4C5F;
      padding: 10.5px 11px;
      display: block;
    }

Notice the stuff I removed. At this point, there is no good reason to add complexity by worrying about support for obsolete browsers. I removed the bg color from <a> and put it on ul because it would have overlain the border if you had one. But you didn't. You declared a border radius on ul, but you didn't give ul a border.

I also removed the float, position, top and left properties as unnecessary. Let things flow in their natural positions on the page unless there is compelling reasons to do otherwise; then do as little as possible to get the job done.

I almost forgot. There is no such thing as a fraction of a pixel. You can split the atom, but not the pixel. (See the padding on a.)

As you're just starting, I recommend the tutorials at http://htmldog.com/ as being the most error free and as promoting best practice throughout.

Don't hesitate to ask if something is unclear or if I forgot to cover something.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 40 weeks 14 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

A word about formatting

Assume the guy that follows you and has to debug or maintain your code is a violent psychopath who knows where you live. Code for ease of reading and clarity of purpose for humans.

Notice my code above. Nested block elements are indented by a sane value, two spaces and three is ok. Use a text editor that allows you to configure this property. Do not save as tabs; save as spaces, else someone opens the source and tabs are gone wild.

Sibling block elements are separated by blank lines.

It didn't occur on this snippet, but if there are element attributes, put them each on their own line. This applies to css properties as well. The eye scans down much better than across.

I spent many years putting beans on the table by fixing other people's code. Believe me when I say I would have walked across the country barefoot to put a clue-bat upside the head of moronic coders if I had only known their address. Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.