Member Avatar for s0urce

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 because: Code formatting
  • 4 Contributors
  • 9 Replies
  • 129 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by s0urce
Member Avatar for JorgeM

provide the HTML as well.

Member Avatar for s0urce 
 <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>
Member Avatar for memomk

hmmm well you can use <table> or try

li {display:inline;}
Member Avatar for JorgeM

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>
Member Avatar for drjohn

that's not an ordered list! use <ul> instead.

Member Avatar for JorgeM

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?

Member Avatar for drjohn

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..

Member Avatar for JorgeM

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.

Member Avatar for s0urce

Thank you for the information, It helped alot.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.