0

Tried making a inline set of boxes but using divs. I tried many possibilities but none came out the way I wanted it to be. Anyone have any ideas what I am doing wrong and a good book to get to further my knowledge,lol.

#banner                     { background-color:black;clear:both;  }

#services                   { width:250px;
                              float:none;margin:0px;
                              padding:50px;
                              display:inline;
                              border:1px solid white;}

#folio                      { width:250px;
                              padding:50px;
                              float:none;margin:0px;
                              border:1px solid white;}

#contact                    { width:250px;
                              padding:50px;
                              float:none;margin:0px;
                              border:1px solid white;}

#about                      { width:250px;
                              padding:50px;
                              display:inline;
                              float:right;margin:0px;
                              border:1px solid white;}

#events                     { width:250px;
                              padding:50px;
                              float:right;margin:0px;
                              border:1px solid white;}

#home                       { width:250px;
                              padding:50px;
                              float:right;margin:0px;
                              border:1px solid white;}

Edited by Dani: Code formatting

4
Contributors
9
Replies
10
Views
6 Years
Discussion Span
Last Post by s0urce
0
 <div id="banner">

                <div id="services">
                    <ul>
                        <li> <a href="services.html">SERVICES</a></li>
                    </ul>
                </div>


                <div id="folio">
                    <ul>
                        <li> <a href="folio.html">FOLIO</a></li>
                    </ul>

                </div>

                <div id="contact">
                <ul>
                        <li> <a href="contact.html">CONTACT</a></li>
                    </ul>

                </div>

                <div id="about">
                <ul>
                        <li> <a href="about.html">ABOUT</a></li>
                    </ul>

                </div>

                <div id="events">
                <ul>
                        <li> <a href="events.html">EVENTS</a></li>
                    </ul>

                </div>

                <div id="home">
                <ul>
                        <li> <a href="home.html">HOME</a></li>
                    </ul>

                </div>

                <div id="logo">
                    <img src="images/AluLogoOpt.gif" />
                </div>

            </div>
0

If you are trying to create a "menu bar" which is what I assume, I altered your code a bit to create the bar. copy and paste the code below into a new page and tinker with it.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Page Title</title>
   <style type="text/css">

     #banner {
     background-color: black;
     clear:both;
     margin: 0px auto;
     padding: 0px;
     height: 118px;
     width: 100%;}    

     ol.nav li {
     float: left;}

     ol.nav a {
     color: #FFFFFF;
     text-decoration: none;
     display: block;
     float: left;}

     ol.nav span {
     display: block; 
     border-left:1px solid #FFFFFF;
     padding: 50px;
     width:100px;
     text-align:center;}

     ol.nav span#last {
     display: block; 
     border-right:1px solid #FFFFFF; 
     padding: 50px;
     width:100px;
     text-align:center;}

   </style>
</head>
<body>
   <div id="banner">
      <ol class="nav">
         <li><a href="#"><span>HOME</span></a></li>
         <li><a href="#"><span>EVENTS</span></a></li>
         <li><a href="#"><span>ABOUT</span></a></li>
         <li><a href="#"><span>CONTACT</span></a></li>
         <li><a href="#"><span>FOLIO</span></a></li>
         <li><a href="#"><span id="last">SERVICES</span></a></li>
       </ol>
    </div>
</body>
</html>
0

I didn't think there was a difference if te idea is to convert a list into a menu bar.

Can you elaborate on why an unordered list is preferred?

0

Semantics.
Using <ol> implies that the order in which the items appear is important, using <ul> says the order doesn't matter.
You'd use an <ol> for something like the installation instructions for a bit of software (the order the steps are done in matters), while a <ul> suits a shopping list.

As everyone else uses <ul>, correctly, for a menu, why do something that clearly is not being used correctly?
Do you use a large font, bold and <p> for your headers, or do you use <h1> , <h2>, etc??? It's the same idea of using tags correctly..

0

I see your point and agree that elements should be used correctly. However, if you are going to insist that element are used correctly, list items should be used for lists, not building menus. Because of this reason it didn't seem to me that one over the other was "correct".

I have no objections with regard to using the unordered list item for menus.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.