עיצוב טקסט בתוך <li>

עיצוב טקסט בתוך <li>

על ידי Productive » ה' אוקטובר 25, 2012 5:12 pm

היי,

אני מנסה לבנות תפריט עם כפתור pulldown שכשעוברים מעליו מופיע DIV מתחת לתפריט.
הבעיה שהטקסט בכפתורים שיש ב-DIV שמופיע מעוצבים לפי הטקסט שיש ב-DIV של ה-MENU.

זה הקוד HTML:

קוד: בחר הכל

<div id="menu">
   <ul>
      <li><a href="index.html" id="menu-a">בית</a></li>
      <li>
      <div onmouseover="showHideTable('catalog')" onmouseout="showHideTable('catalog')"><a href="#" id="menu-a">קטלוג מוצרים</a>
         <div class="pulldown" id="catalog">
            <div class="pulldownbox">
               <a href="#">כפתור</a>
               <a href="#">כפתור</a>
               <a href="#">כפתור</a>
            </div>
            <div class="pulldownbox">
               <a href="#">כפתור</a>
               <a href="#">כפתור</a>
               <a href="#">כפתור</a>
            </div>
            <div class="pulldownbox">
               <a href="#">כפתור</a>
               <a href="#">כפתור</a>
               <a href="#">כפתור</a>
            </div>
            <div class="pulldownbox">
               <a href="#">עמינח</a>
               <a href="#">כפתור</a>
               <a href="#">כפתור</a>
               <a href="#">כפתור</a>
            </div>
            <div class="pulldownbox">
               <a href="#">רהיטים מעץ מלא</a>
               <a href="#">כפתור</a>
               <a href="#">כפתור</a>
               <a href="#">כפתור</a>
            </div>
         </div>
      </div>
      </li>
      <li><a href="about.html" id="menu-a">אודותינו</a></li>
      <li><a href="contact.html" id="menu-a">צור קשר</a></li>
      <li><p id="menu-p">1-800-325-326</p></li>
   </ul>       
</div>


וזה ה-CSS:

קוד: בחר הכל


.pulldown {
   z-index: 1;
   position: absolute;
   visibility: hidden;
   width: 720px;
   height: 170px;
   margin: 15px 53px 0 0;
   background: url(../images/catalog.png) no-repeat;
}

.pulldownbox {
   z-index: 2;
   float: left;
   margin: 40px 0 0 1px;
   width: 134px;
   height: 110px;
}

#menu {
   width: 850px;
   height: 40px;
   margin: 0px;
   background: url(../images/menu.png) no-repeat;
}

#menu ul {
   margin: 0px;
   padding: 7px 0 0 0;
   list-style: none;
}

#menu ul li {
   padding: 0px;
   margin: 0px;
   display: inline;
}

#menu ul li a {
   float: right;
   display: block;
   text-align: center;
   padding: 2px 30px;
   text-decoration: none;
   color: #666666;   
   font-weight: bold;
   font-size: 14px;
   outline: none;
   background: url(../images/menu_divider.png) repeat-y right;
}

#menu ul li p {
   float: left;
   display: block;
   text-align: center;
   padding: 3px 10px;
   text-decoration: none;
   color: #0099CC;   
   font-size: 20px;
   outline: none;
   background: url(../images/menu_divider.png) repeat-y right;
}


Re: עיצוב טקסט בתוך <li>

על ידי XainPro » ש' נובמבר 03, 2012 4:53 pm

אתה עושה את זה אח הלא נכון שאני חושב שאתה צריך לעקוב אחרי מדריך זה
http://line25.com/tutorials/how-to-crea ... pdown-menu