SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css dropdown box and div

    i found this nice little tutorial on the web on how to create dropboxes using mostly css... it works fine on it's own but i'm having problems positioning it on my page... as you see here



    it seems to want to go on a line of its own... and here's the relevant code
    HTML Code:
    </div>
    <div id="menuleft">
    <img src="images/menuleft.jpg"  alt=""></div>
    <div id="menu"><ul id="nav">	
    <li><a href="#">Home</a></li>
    <li><a href="#">Information</a>
    	<ul>
    		<li><a href="#">Location and Times</a></li>
    		<li><a href="#">Contact Us</a></li>
    
    	</ul>
    </li>
    <li><a href="#">Tournaments</a>
    	<ul>
    		<li><a href="#">Upcoming</a></li>
    		<li><a href="#">Tournament History</a></li>
    	</ul>
    </li>
    <li><a href="#">Executives</a></li>
    <li><a href="#">Pictures</a></li>
    <li><a href="#">Links</a></li>
    </ul><div id="menuright"><img src="images/menuright.jpg" alt=""></div>
    
    and here's the relevant code in my css file for the dropdown
    div ul {
    margin: 0;
    padding: 0;
    list-style: none;

    border-left:1px solid #ccc;
    border-top: 0px solid #ccc;

    }


    div li {
    position: relative;
    float: left;
    width: 10px;
    }
    div li ul {
    position: absolute;
    left: -1px;
    top: 23px;
    display: none;
    border: 1px solid #ccc
    border-left: 0px;
    }

    div ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #E8E8C8;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 1px;
    border-left: 0px;
    border-top: 0px;
    width: 196
    text-align: center;
    }
    /* Fix IE. Hide from IE Mac \*/
    *div ul li { float: left; }
    *div l ul li a { height: 1%; }
    /* End */
    li:hover ul, li.over ul { display: block; }








    and the code for the basic layout of the site


    #frame {
    width:800px;
    margin-right:auto;
    margin-left:auto;
    margin-top:0px;
    padding:0px;
    text-align:left;
    border:1px solid black;
    }

    #header {
    width:800px;
    height:216px;
    padding:0px;
    background:url('images/header.jpg');
    }

    #menuleft {
    display:inline;
    width:80px;
    height:38px;
    padding:0px;
    }
    #menu {
    display:inline;
    width:639px;
    height:38px;
    padding:0px;

    #menuright {
    display:inline;
    width:81px;
    height:38px;
    padding:0px;
    }

    #content {
    width:800px;
    height:493px;
    padding:0px;

    }
    #footer {
    width:800px;
    height:21px;
    padding-top: 15px;
    background:url('images/footer.jpg');
    }


    as you see, #menuleft, #menu, and #menuright are supposed to fit on the same line... and given the width of the drop down boxes, i don't see why it's not doing so... so can anyone help?

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to the page?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •